feat: add headerAlign and bodyAlign(ant-design/ant-design#2465)

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(<Table columns={columns} data={data} />, mountNode);
       <td>`No Data`</td>
       <td>Display text when data is empty</td>
     </tr>
+    <tr>
+      <td>headerAlign</td>
+      <td>String</td>
+      <td>'left'</td>
+      <td>
+        how table head text align
+      </td>
+    </tr>
+    <tr>
+      <td>bodyAlign</td>
+      <td>String</td>
+      <td>'left'</td>
+      <td>
+        how table body text align
+      </td>
+    </tr>
     <tr>
       <td>columns</td>
       <td>Object[]<Object></td>
@@ -310,6 +319,13 @@ React.render(<Table columns={columns} data={data} />, mountNode);
   </tbody>
 </table>
 
+## Development
+
+```
+npm install
+npm start
+```
+
 ## License
 
 rc-table is released under the MIT license.

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(
+  <div>
+    <h2>table with custom textAlign</h2>
+    <Table columns={columns} data={data} headerAlign="center" bodyAlign="right" />
+  </div>,
+  document.getElementById('__react-content')
+);

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;
           }
         };

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(
-        <tbody className={`${prefixCls}-tbody`}>
+        <tbody className={`${prefixCls}-tbody`} style={{ textAlign: bodyAlign }}>
           {this.getRows(columns, fixed)}
         </tbody>
       ) : null;

src/TableHeader.jsx

@@ -7,16 +7,17 @@ export default class TableHeader extends React.Component {
     prefixCls: PropTypes.string,
     rowStyle: PropTypes.object,
     rows: PropTypes.array,
+    headerAlign: PropTypes.string,
   }
 
   shouldComponentUpdate(nextProps) {
     return !shallowequal(nextProps, this.props);
   }
 
   render() {
-    const { prefixCls, rowStyle, rows } = this.props;
+    const { prefixCls, rowStyle, rows, headerAlign } = this.props;
     return (
-      <thead className={`${prefixCls}-thead`}>
+      <thead className={`${prefixCls}-thead`} style={{ textAlign: headerAlign }}>
         {
           rows.map((row, index) => (
             <tr key={index} style={rowStyle}>

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();
+  });
 });