Allow overriding table elements

yesmeck · yesmeck · commit b66ec99e841c · 2017-10-23T22:01:35.000+08:00
diff --git a/examples/custom-component.html b/examples/custom-component.html
diff --git a/examples/custom-component.js b/examples/custom-component.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Table from 'rc-table';
+import 'rc-table/assets/index.less';
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  {
+    title: 'Operations',
+    dataIndex: '',
+    key: 'd',
+    render() {
+      return <a href="#">Operations</a>;
+    },
+  },
+];
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+];
+
+const MyTable = props => <table name="my-table" {...props} />;
+const HeaderWrapper = props => <thead name="my-header-wrapper" {...props} />;
+const HeaderRow = props => <tr name="my-header-row" {...props} />;
+const HeaderCell = props => <th name="my-header-cell" {...props} />;
+const BodyWrapper = props => <tbody name="my-body-wrapper" {...props} />;
+const BodyRow = props => <tr name="my-body-row" {...props} />;
+const BodyCell = props => <td name="my-body-cell" {...props} />;
+
+const components = {
+  table: MyTable,
+  header: {
+    wrapper: HeaderWrapper,
+    row: HeaderRow,
+    cell: HeaderCell,
+  },
+  body: {
+    wrapper: BodyWrapper,
+    row: BodyRow,
+    cell: BodyCell,
+  },
+};
+
+ReactDOM.render(
+  <div>
+    <h2>Custom Component</h2>
+    <Table columns={columns} data={data} components={components} />
+  </div>,
+  document.getElementById('__react-content')
+);
diff --git a/src/BaseTable.js b/src/BaseTable.js
@@ -44,6 +44,7 @@ class BaseTable extends React.Component {
       onRowContextMenu,
       onRowMouseEnter,
       onRowMouseLeave,
+      components,
     } = table.props;
     const { getRowKey, fixed, expander } = this.props;
 
@@ -103,6 +104,7 @@ class BaseTable extends React.Component {
               rowKey={key}
               ancestorKeys={ancestorKeys}
               ref={rowRef(record, i, indent)}
+              components={components}
               {...expandableRow}
             />
           )}
@@ -129,7 +131,7 @@ class BaseTable extends React.Component {
   }
 
   render() {
-    const { prefixCls, scroll, data, getBodyWrapper } = this.context.table.props;
+    const { prefixCls, scroll, data, getBodyWrapper, components } = this.context.table.props;
     const { expander, tableClassName, hasHead, hasBody, fixed, columns } = this.props;
     const tableStyle = {};
 
@@ -142,16 +144,20 @@ class BaseTable extends React.Component {
       }
     }
 
+    const Table = hasBody ? (components.table || 'table') : 'table';
+    const BodyWrapper = components.body && components.body.wrapper || 'tbody';
+
+
     return (
-      <table className={tableClassName} style={tableStyle} key="table">
+      <Table className={tableClassName} style={tableStyle} key="table">
         <ColGroup columns={columns} fixed={fixed} />
         {hasHead && <TableHeader expander={expander} columns={columns} fixed={fixed} /> }
         {hasBody && getBodyWrapper(
-          <tbody className={`${prefixCls}-tbody`}>
+          <BodyWrapper className={`${prefixCls}-tbody`}>
             {this.renderRows(data, 0)}
-          </tbody>
+          </BodyWrapper>
         )}
-      </table>
+      </Table>
     );
   }
 }
diff --git a/src/Table.js b/src/Table.js
@@ -33,6 +33,19 @@ export default class Table extends React.Component {
     rowRef: PropTypes.func,
     getBodyWrapper: PropTypes.func,
     children: PropTypes.node,
+    components: PropTypes.shape({
+      table: PropTypes.any,
+      header: PropTypes.shape({
+        wrapper: PropTypes.any,
+        row: PropTypes.any,
+        cell: PropTypes.any,
+      }),
+      body: PropTypes.shape({
+        wrapper: PropTypes.any,
+        row: PropTypes.any,
+        cell: PropTypes.any,
+      }),
+    }),
     ...ExpandableTable.PropTypes,
   }
 
@@ -58,6 +71,7 @@ export default class Table extends React.Component {
     rowRef: () => null,
     getBodyWrapper: body => body,
     emptyText: () => 'No Data',
+    components: {},
   }
 
   constructor(props) {
diff --git a/src/TableCell.js b/src/TableCell.js
@@ -11,6 +11,7 @@ export default class TableCell extends React.Component {
     indentSize: PropTypes.number,
     column: PropTypes.object,
     expandIcon: PropTypes.node,
+    component: PropTypes.any,
   }
 
   isInvalidRenderCellText(text) {
@@ -26,8 +27,16 @@ export default class TableCell extends React.Component {
   }
 
   render() {
-    const { record, indentSize, prefixCls, indent,
-            index, expandIcon, column } = this.props;
+    const {
+      record,
+      indentSize,
+      prefixCls,
+      indent,
+      index,
+      expandIcon,
+      column,
+      component: BodyCell,
+    } = this.props;
     const { dataIndex, render, className = '' } = column;
 
     // We should return undefined if no dataIndex is specified, but in order to
@@ -70,15 +79,15 @@ export default class TableCell extends React.Component {
       return null;
     }
     return (
-      <td
+      <BodyCell
         className={className}
         {...tdProps}
         onClick={this.handleClick}
       >
         {indentText}
         {expandIcon}
         {text}
-      </td>
+      </BodyCell>
     );
   }
 }
diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -34,7 +34,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
 }
 
 export default function TableHeader(props, { table }) {
-  const { prefixCls, showHeader } = table.props;
+  const { prefixCls, showHeader, components } = table.props;
   const { expander, columns, fixed } = props;
 
   if (!showHeader) {
@@ -45,8 +45,10 @@ export default function TableHeader(props, { table }) {
 
   expander.renderExpandIndentCell(rows, fixed);
 
+  const HeaderWrapper = components.header && components.header.wrapper || 'thead';
+
   return (
-    <thead className={`${prefixCls}-thead`}>
+    <HeaderWrapper className={`${prefixCls}-thead`}>
       {
         rows.map((row, index) => (
           <TableHeaderRow
@@ -55,10 +57,11 @@ export default function TableHeader(props, { table }) {
             columns={columns}
             rows={rows}
             row={row}
+            components={components}
           />
         ))
       }
-    </thead>
+    </HeaderWrapper>
   );
 }
 
diff --git a/src/TableHeaderRow.js b/src/TableHeaderRow.js
@@ -1,13 +1,21 @@
 import React from 'react';
 import { connect } from 'mini-store';
 
-function TableHeaderRow({ row, height }) {
+function TableHeaderRow({ row, height, components }) {
   const style = { height };
 
+  let HeaderRow = 'tr';
+  let HeaderCell = 'th';
+
+  if (components.header) {
+    HeaderRow = components.header.row || HeaderRow;
+    HeaderCell = components.header.cell || HeaderCell;
+  }
+
   return (
-    <tr style={style}>
-      {row.map((cell, i) => <th {...cell} key={i} />)}
-    </tr>
+    <HeaderRow style={style}>
+      {row.map((cell, i) => <HeaderCell {...cell} key={i} />)}
+    </HeaderRow>
   );
 }
 
diff --git a/src/TableRow.js b/src/TableRow.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'mini-store';
 import TableCell from './TableCell';
@@ -36,6 +37,7 @@ class TableRow extends React.Component {
     ]),
     renderExpandIcon: PropTypes.func,
     renderExpandIconCell: PropTypes.func,
+    components: PropTypes.any,
   }
 
   static defaultProps = {
@@ -58,12 +60,24 @@ class TableRow extends React.Component {
     this.shouldRender = props.visible;
   }
 
+  componentDidMount() {
+    if (this.shouldRender) {
+      this.saveRowRef();
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.visible || (!this.props.visible && nextProps.visible)) {
       this.shouldRender = true;
     }
   }
 
+  componentDidUpdate() {
+    if (this.shouldRender && !this.rowRef) {
+      this.saveRowRef();
+    }
+  }
+
   onRowClick = (event) => {
     const { record, index, onRowClick } = this.props;
     onRowClick(record, index, event);
@@ -99,12 +113,11 @@ class TableRow extends React.Component {
     store.setState({ expandedRowsHeight });
   }
 
-  saveRowRef = (node) => {
-    this.rowRef = node;
-    if (node) {
-      if (!this.props.fixed) {
-        this.setHeight();
-      }
+  saveRowRef() {
+    this.rowRef = ReactDOM.findDOMNode(this);
+
+    if (!this.props.fixed) {
+      this.setHeight();
     }
   }
 
@@ -123,11 +136,20 @@ class TableRow extends React.Component {
       visible,
       height,
       hovered,
+      components,
       hasExpandIcon,
       renderExpandIcon,
       renderExpandIconCell,
     } = this.props;
 
+    let BodyRow = 'tr';
+    let BodyCell = 'td';
+
+    if (components && components.body) {
+      BodyRow = components.body.row || BodyRow;
+      BodyCell = components.body.cell || BodyCell;
+    }
+
     let { className } = this.props;
 
     if (hovered) {
@@ -149,6 +171,7 @@ class TableRow extends React.Component {
           column={columns[i]}
           key={columns[i].key || columns[i].dataIndex}
           expandIcon={hasExpandIcon(i) && renderExpandIcon()}
+          component={BodyCell}
         />
       );
     }
@@ -163,8 +186,7 @@ class TableRow extends React.Component {
       `${prefixCls} ${className} ${prefixCls}-level-${indent}`.trim();
 
     return (
-      <tr
-        ref={this.saveRowRef}
+      <BodyRow
         onClick={this.onRowClick}
         onDoubleClick={this.onRowDoubleClick}
         onMouseEnter={this.onMouseEnter}
@@ -174,7 +196,7 @@ class TableRow extends React.Component {
         style={style}
       >
         {cells}
-      </tr>
+      </BodyRow>
     );
   }
 }
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
@@ -440,4 +440,53 @@ describe('Table', () => {
     }));
     expect(wrapper).toMatchSnapshot();
   });
+
+  describe('custom components', () => {
+    const MyTable = (props) => <table name="my-table" {...props} />;
+    const HeaderWrapper = (props) => <thead name="my-header-wrapper" {...props} />;
+    const HeaderRow = (props) => <tr name="my-header-row" {...props} />;
+    const HeaderCell = (props) => <th name="my-header-cell" {...props} />;
+    const BodyWrapper = (props) => <tbody name="my-body-wrapper" {...props} />;
+    const BodyRow = (props) => <tr name="my-body-row" {...props} />;
+    const BodyCell = (props) => <td name="my-body-cell" {...props} />;
+
+    const components = {
+      table: MyTable,
+      header: {
+        wrapper: HeaderWrapper,
+        row: HeaderRow,
+        cell: HeaderCell,
+      },
+      body: {
+        wrapper: BodyWrapper,
+        row: BodyRow,
+        cell: BodyCell,
+      },
+    };
+
+    it('renders correctly', () => {
+      const wrapper = render(createTable({ components }));
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders fixed column and header correctly', () => {
+      const columns = [
+        { title: 'Name', dataIndex: 'name', key: 'name', fixed: 'left' },
+        { title: 'Age', dataIndex: 'age', key: 'age' },
+        { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' },
+      ];
+      const sampleData = [
+        { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+      ];
+      const wrapper = render(createTable({
+        columns,
+        data: sampleData,
+        components,
+        scroll: { y: 100 },
+      }));
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });
diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
