diff --git a/README.md b/README.md index 80ae553bb..8e5f825df 100644 --- a/README.md +++ b/README.md @@ -23,13 +23,6 @@ React table component. [![rc-table](https://nodei.co/npm/rc-table.png)](https://npmjs.org/package/rc-table) -## Development - -``` -npm install -npm start -``` - ## Example http://react-component.github.io/table/examples/ @@ -230,6 +223,22 @@ React.render(, mountNode); + + + + + + + + + + + + @@ -310,6 +319,13 @@ React.render(
`No Data` Display text when data is empty
headerAlignString'left' + how table head text align +
bodyAlignString'left' + how table body text align +
columns Object[]
, mountNode);
+## Development + +``` +npm install +npm start +``` + ## License rc-table is released under the MIT license. diff --git a/examples/textAlign.html b/examples/textAlign.html new file mode 100644 index 000000000..e69de29bb diff --git a/examples/textAlign.js b/examples/textAlign.js new file mode 100644 index 000000000..7666767a5 --- /dev/null +++ b/examples/textAlign.js @@ -0,0 +1,26 @@ +/* eslint-disable no-console,func-names,react/no-multi-comp */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Table from '../src/index'; +import 'rc-table/assets/index.less'; + +const columns = [ + { title: 'Project', dataIndex: 'project', key: 'project', width: 150 }, + { title: 'User', dataIndex: 'user', key: 'user', width: 150 }, + { title: 'Role', dataIndex: 'role', key: 'role', width: 150 }, + { title: 'Remark', dataIndex: 'remark', key: 'remark' }, +]; + +const data = [ + { key: '1', project: 'ant-design', user: 'yiminghe', role: 'maintainer', remark: '' }, + { key: '2', project: 'ant-design', user: 'afc163', role: 'maintainer', remark: '' }, + { key: '3', project: 'ant-design', user: 'marswong', role: 'contributor', remark: '' }, +]; + +ReactDOM.render( +
+

table with custom textAlign

+ + , + document.getElementById('__react-content') +); diff --git a/src/ColumnManager.js b/src/ColumnManager.js index 9d2751f89..6d2534bc4 100644 --- a/src/ColumnManager.js +++ b/src/ColumnManager.js @@ -1,7 +1,7 @@ import React from 'react'; export default class ColumnManager { - _cached = {} + _cached = {}; constructor(columns, elements) { this.columns = columns || this.normalize(elements); @@ -73,10 +73,11 @@ export default class ColumnManager { const setRowSpan = column => { const rowSpan = rows.length - currentRow; if (column && - !column.children && // parent columns are supposed to be one row + !column.children && rowSpan > 1 && (!column.rowSpan || column.rowSpan < rowSpan) ) { + // parent columns are supposed to be one row column.rowSpan = rowSpan; } }; diff --git a/src/Table.jsx b/src/Table.jsx index e0e4e9349..f483fdcd5 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -39,6 +39,8 @@ export default class Table extends React.Component { rowRef: PropTypes.func, getBodyWrapper: PropTypes.func, children: PropTypes.node, + headerAlign: PropTypes.string, + bodyAlign: PropTypes.string, } static defaultProps = { @@ -67,6 +69,8 @@ export default class Table extends React.Component { rowRef: () => null, getBodyWrapper: body => body, emptyText: () => 'No Data', + headerAlign: 'left', + bodyAlign: 'left', } constructor(props) { @@ -194,7 +198,7 @@ export default class Table extends React.Component { } getHeader(columns, fixed) { - const { showHeader, expandIconAsCell, prefixCls } = this.props; + const { showHeader, headerAlign, expandIconAsCell, prefixCls } = this.props; const rows = this.getHeaderRows(columns); if (expandIconAsCell && fixed !== 'right') { @@ -213,6 +217,7 @@ export default class Table extends React.Component { prefixCls={prefixCls} rows={rows} rowStyle={trStyle} + headerAlign={headerAlign} /> ) : null; } @@ -432,7 +437,7 @@ export default class Table extends React.Component { getTable(options = {}) { const { columns, fixed } = options; - const { prefixCls, scroll = {}, getBodyWrapper, showHeader } = this.props; + const { prefixCls, scroll = {}, getBodyWrapper, showHeader, bodyAlign } = this.props; let { useFixedHeader } = this.props; const bodyStyle = { ...this.props.bodyStyle }; const headStyle = {}; @@ -475,7 +480,7 @@ export default class Table extends React.Component { } } const tableBody = hasBody ? getBodyWrapper( - + {this.getRows(columns, fixed)} ) : null; diff --git a/src/TableHeader.jsx b/src/TableHeader.jsx index 35a544c75..2377a6f8d 100644 --- a/src/TableHeader.jsx +++ b/src/TableHeader.jsx @@ -7,6 +7,7 @@ export default class TableHeader extends React.Component { prefixCls: PropTypes.string, rowStyle: PropTypes.object, rows: PropTypes.array, + headerAlign: PropTypes.string, } shouldComponentUpdate(nextProps) { @@ -14,9 +15,9 @@ export default class TableHeader extends React.Component { } render() { - const { prefixCls, rowStyle, rows } = this.props; + const { prefixCls, rowStyle, rows, headerAlign } = this.props; return ( - + { rows.map((row, index) => ( diff --git a/tests/Table.spec.js b/tests/Table.spec.js index b844e279c..fa8ee0236 100644 --- a/tests/Table.spec.js +++ b/tests/Table.spec.js @@ -418,4 +418,9 @@ describe('Table', () => { wrapper.find('.rc-table-row').first().simulate('mouseLeave'); expect(handleRowMouseLeave).toBeCalledWith(data[0], 0, expect.anything()); }); + + it('renders headerAlign and bodyAlign correctly', () => { + const wrapper = render(createTable({ headerAlign: 'center', bodyAlign: 'right' })); + expect(renderToJson(wrapper)).toMatchSnapshot(); + }); }); diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap index 85944cfce..35d4073cf 100644 --- a/tests/__snapshots__/Table.expandRow.spec.js.snap +++ b/tests/__snapshots__/Table.expandRow.spec.js.snap @@ -1,5 +1,6 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
+ className="rc-table-thead" + style={ + Object { + "textAlign": "left", + } + }> + className="rc-table-tbody" + style={ + Object { + "textAlign": "left", + } + }> + className="rc-table-thead" + style={ + Object { + "textAlign": "left", + } + }> + className="rc-table-tbody" + style={ + Object { + "textAlign": "left", + } + }> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + className="rc-table-thead" + style={ + Object { + "textAlign": "left", + } + }> + className="rc-table-tbody" + style={ + Object { + "textAlign": "left", + } + }> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="test-prefix-thead" + style="text-align:left;"> + class="test-prefix-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;" />
@@ -1069,7 +1096,8 @@ exports[`Table.expand expand all rows by default 1`] = `
@@ -1679,7 +1721,8 @@ exports[`Table.expand expand rows by defaultExpandedRowKeys 1`] = `
@@ -1832,7 +1878,8 @@ exports[`Table.expand renders expand icon to the specify column 1`] = `
@@ -1899,7 +1947,8 @@ exports[`Table.expand renders expand row correctly 1`] = `
@@ -1966,7 +2016,8 @@ exports[`Table.expand renders expend row class correctly 1`] = `
@@ -2046,7 +2098,8 @@ exports[`Table.expand renders nested data correctly 1`] = `
@@ -2130,7 +2184,8 @@ exports[`Table.expand renders tree row correctly 1`] = `
@@ -82,7 +83,8 @@ exports[`Table.fixedColumns renders correctly 1`] = `
@@ -457,7 +460,8 @@ exports[`Table.fixedColumns renders correctly 1`] = `
@@ -597,7 +602,8 @@ exports[`Table.fixedColumns renders correctly 1`] = `
@@ -25,7 +26,8 @@ exports[`Table dataIndex render text by path 1`] = `
@@ -141,7 +146,8 @@ exports[`Table renders column correctly 1`] = `
@@ -191,7 +198,8 @@ exports[`Table renders correctly 1`] = `
@@ -241,7 +250,8 @@ exports[`Table renders custom cell correctly 1`] = `
@@ -295,7 +306,8 @@ exports[`Table renders empty text correctly 1`] = `
+ class="rc-table-thead" + style="text-align:left;"> @@ -328,7 +341,8 @@ exports[`Table renders empty text correctly 2`] = ` + class="rc-table-tbody" + style="text-align:left;" />
+ class="rc-table-thead" + style="text-align:left;"> @@ -370,7 +385,8 @@ exports[`Table renders fixed header correctly 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> @@ -420,7 +437,8 @@ exports[`Table renders footer correctly 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> `; +exports[`Table renders headerAlign and bodyAlign correctly 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + +
+ Name +
+ + Lucy +
+ + Jack +
+
+
+
+`; + exports[`Table renders rowSpan correctly 1`] = `
@@ -468,7 +538,8 @@ exports[`Table renders rowSpan correctly 1`] = ` + class="rc-table-thead" + style="text-align:left;"> @@ -481,7 +552,8 @@ exports[`Table renders rowSpan correctly 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> @@ -583,7 +656,8 @@ exports[`Table renders title correctly 1`] = ` + class="rc-table-thead" + style="text-align:left;"> @@ -592,7 +666,8 @@ exports[`Table renders title correctly 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> @@ -687,7 +764,8 @@ exports[`Table scroll renders scroll.x is a number 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> @@ -742,7 +821,8 @@ exports[`Table scroll renders scroll.x is true 1`] = ` + class="rc-table-tbody" + style="text-align:left;"> + class="rc-table-thead" + style="text-align:left;"> @@ -805,7 +886,8 @@ exports[`Table scroll renders scroll.y is a number 1`] = ` + class="rc-table-tbody" + style="text-align:left;">