Skip to content

Commit 9a3416d

Browse files
committed
feat: add headerAlign and bodyAlign(ant-design/ant-design#2465)
1 parent 7b5e1a6 commit 9a3416d

10 files changed

+269
-72
lines changed

README.md

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,6 @@ React table component.
2323

2424
[![rc-table](https://nodei.co/npm/rc-table.png)](https://npmjs.org/package/rc-table)
2525

26-
## Development
27-
28-
```
29-
npm install
30-
npm start
31-
```
32-
3326
## Example
3427

3528
http://react-component.github.io/table/examples/
@@ -230,6 +223,22 @@ React.render(<Table columns={columns} data={data} />, mountNode);
230223
<td>`No Data`</td>
231224
<td>Display text when data is empty</td>
232225
</tr>
226+
<tr>
227+
<td>headerAlign</td>
228+
<td>String</td>
229+
<td>'left'</td>
230+
<td>
231+
how table head text align
232+
</td>
233+
</tr>
234+
<tr>
235+
<td>bodyAlign</td>
236+
<td>String</td>
237+
<td>'left'</td>
238+
<td>
239+
how table body text align
240+
</td>
241+
</tr>
233242
<tr>
234243
<td>columns</td>
235244
<td>Object[]<Object></td>
@@ -310,6 +319,13 @@ React.render(<Table columns={columns} data={data} />, mountNode);
310319
</tbody>
311320
</table>
312321

322+
## Development
323+
324+
```
325+
npm install
326+
npm start
327+
```
328+
313329
## License
314330

315331
rc-table is released under the MIT license.

examples/textAlign.html

Whitespace-only changes.

examples/textAlign.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint-disable no-console,func-names,react/no-multi-comp */
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import Table from '../src/index';
5+
import 'rc-table/assets/index.less';
6+
7+
const columns = [
8+
{ title: 'Project', dataIndex: 'project', key: 'project', width: 150 },
9+
{ title: 'User', dataIndex: 'user', key: 'user', width: 150 },
10+
{ title: 'Role', dataIndex: 'role', key: 'role', width: 150 },
11+
{ title: 'Remark', dataIndex: 'remark', key: 'remark' },
12+
];
13+
14+
const data = [
15+
{ key: '1', project: 'ant-design', user: 'yiminghe', role: 'maintainer', remark: '' },
16+
{ key: '2', project: 'ant-design', user: 'afc163', role: 'maintainer', remark: '' },
17+
{ key: '3', project: 'ant-design', user: 'marswong', role: 'contributor', remark: '' },
18+
];
19+
20+
ReactDOM.render(
21+
<div>
22+
<h2>table with custom textAlign</h2>
23+
<Table columns={columns} data={data} headerAlign="center" bodyAlign="right" />
24+
</div>,
25+
document.getElementById('__react-content')
26+
);

src/ColumnManager.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
export default class ColumnManager {
4-
_cached = {}
4+
_cached = {};
55

66
constructor(columns, elements) {
77
this.columns = columns || this.normalize(elements);
@@ -73,10 +73,11 @@ export default class ColumnManager {
7373
const setRowSpan = column => {
7474
const rowSpan = rows.length - currentRow;
7575
if (column &&
76-
!column.children && // parent columns are supposed to be one row
76+
!column.children &&
7777
rowSpan > 1 &&
7878
(!column.rowSpan || column.rowSpan < rowSpan)
7979
) {
80+
// parent columns are supposed to be one row
8081
column.rowSpan = rowSpan;
8182
}
8283
};

src/Table.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ export default class Table extends React.Component {
3939
rowRef: PropTypes.func,
4040
getBodyWrapper: PropTypes.func,
4141
children: PropTypes.node,
42+
headerAlign: PropTypes.string,
43+
bodyAlign: PropTypes.string,
4244
}
4345

4446
static defaultProps = {
@@ -67,6 +69,8 @@ export default class Table extends React.Component {
6769
rowRef: () => null,
6870
getBodyWrapper: body => body,
6971
emptyText: () => 'No Data',
72+
headerAlign: 'left',
73+
bodyAlign: 'left',
7074
}
7175

7276
constructor(props) {
@@ -194,7 +198,7 @@ export default class Table extends React.Component {
194198
}
195199

196200
getHeader(columns, fixed) {
197-
const { showHeader, expandIconAsCell, prefixCls } = this.props;
201+
const { showHeader, headerAlign, expandIconAsCell, prefixCls } = this.props;
198202
const rows = this.getHeaderRows(columns);
199203

200204
if (expandIconAsCell && fixed !== 'right') {
@@ -213,6 +217,7 @@ export default class Table extends React.Component {
213217
prefixCls={prefixCls}
214218
rows={rows}
215219
rowStyle={trStyle}
220+
headerAlign={headerAlign}
216221
/>
217222
) : null;
218223
}
@@ -432,7 +437,7 @@ export default class Table extends React.Component {
432437

433438
getTable(options = {}) {
434439
const { columns, fixed } = options;
435-
const { prefixCls, scroll = {}, getBodyWrapper, showHeader } = this.props;
440+
const { prefixCls, scroll = {}, getBodyWrapper, showHeader, bodyAlign } = this.props;
436441
let { useFixedHeader } = this.props;
437442
const bodyStyle = { ...this.props.bodyStyle };
438443
const headStyle = {};
@@ -475,7 +480,7 @@ export default class Table extends React.Component {
475480
}
476481
}
477482
const tableBody = hasBody ? getBodyWrapper(
478-
<tbody className={`${prefixCls}-tbody`}>
483+
<tbody className={`${prefixCls}-tbody`} style={{ textAlign: bodyAlign }}>
479484
{this.getRows(columns, fixed)}
480485
</tbody>
481486
) : null;

src/TableHeader.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@ export default class TableHeader extends React.Component {
77
prefixCls: PropTypes.string,
88
rowStyle: PropTypes.object,
99
rows: PropTypes.array,
10+
headerAlign: PropTypes.string,
1011
}
1112

1213
shouldComponentUpdate(nextProps) {
1314
return !shallowequal(nextProps, this.props);
1415
}
1516

1617
render() {
17-
const { prefixCls, rowStyle, rows } = this.props;
18+
const { prefixCls, rowStyle, rows, headerAlign } = this.props;
1819
return (
19-
<thead className={`${prefixCls}-thead`}>
20+
<thead className={`${prefixCls}-thead`} style={{ textAlign: headerAlign }}>
2021
{
2122
rows.map((row, index) => (
2223
<tr key={index} style={rowStyle}>

tests/Table.spec.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,4 +418,9 @@ describe('Table', () => {
418418
wrapper.find('.rc-table-row').first().simulate('mouseLeave');
419419
expect(handleRowMouseLeave).toBeCalledWith(data[0], 0, expect.anything());
420420
});
421+
422+
it('renders headerAlign and bodyAlign correctly', () => {
423+
const wrapper = render(createTable({ headerAlign: 'center', bodyAlign: 'right' }));
424+
expect(renderToJson(wrapper)).toMatchSnapshot();
425+
});
421426
});

0 commit comments

Comments
 (0)