Add onRow onHeaderRow column[onCell] and column[onHeaderCell]

react-component · Oct 25, 2017 · ac3c4de · ac3c4de
1 parent 505b44b
commit ac3c4de
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 44 deletions.
diff --git a/src/ExpandableTable.js b/src/ExpandableTable.js
@@ -111,12 +111,14 @@ class ExpandableTable extends React.Component {
       return;
     }
 
-    rows[0].unshift({
-      key: 'rc-table-expandIconAsCell',
+    const iconColumn = {
+      key: 'rc-table-expand-icon-cell',
       className: `${prefixCls}-expand-icon-th`,
       title: '',
       rowSpan: rows.length,
-    });
+    };
+
+    rows[0].unshift({ ...iconColumn, column: iconColumn });
   }
 
   renderExpandedRow(content, className, ancestorKeys, fixed) {

diff --git a/src/Table.js b/src/Table.js
@@ -22,6 +22,7 @@ export default class Table extends React.Component {
     rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     onRow: PropTypes.func,
+    onHeaderRow: PropTypes.func,
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
     onRowContextMenu: PropTypes.func,
@@ -62,6 +63,7 @@ export default class Table extends React.Component {
     rowKey: 'key',
     rowClassName: () => '',
     onRow() {},
+    onHeaderRow() {},
     onRowClick() {},
     onRowDoubleClick() {},
     onRowContextMenu() {},

diff --git a/src/TableCell.js b/src/TableCell.js
@@ -63,6 +63,10 @@ export default class TableCell extends React.Component {
       }
     }
 
+    if (column.onCell) {
+      tdProps = { ...tdProps, ...column.onCell(record) };
+    }
+
     // Fix https://github.com/ant-design/ant-design/issues/1202
     if (this.isInvalidRenderCellText(text)) {
       text = null;
@@ -81,8 +85,8 @@ export default class TableCell extends React.Component {
     return (
       <BodyCell
         className={className}
-        {...tdProps}
         onClick={this.handleClick}
+        {...tdProps}
       >
         {indentText}
         {expandIcon}

diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -16,6 +16,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
       key: column.key,
       className: column.className || '',
       children: column.title,
+      column,
     };
     if (column.children) {
       getHeaderRows(column.children, currentRow + 1, rows);
@@ -35,7 +36,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
 
 export default function TableHeader(props, { table }) {
   const { components } = table;
-  const { prefixCls, showHeader } = table.props;
+  const { prefixCls, showHeader, onHeaderRow } = table.props;
   const { expander, columns, fixed } = props;
 
   if (!showHeader) {
@@ -54,11 +55,13 @@ export default function TableHeader(props, { table }) {
         rows.map((row, index) => (
           <TableHeaderRow
             key={index}
+            index={index}
             fixed={fixed}
             columns={columns}
             rows={rows}
             row={row}
             components={components}
+            onHeaderRow={onHeaderRow}
           />
         ))
       }
@@ -70,6 +73,7 @@ TableHeader.propTypes = {
   fixed: PropTypes.string,
   columns: PropTypes.array.isRequired,
   expander: PropTypes.object.isRequired,
+  onHeaderRow: PropTypes.func,
 };
 
 TableHeader.contextTypes = {

diff --git a/src/TableHeaderRow.js b/src/TableHeaderRow.js
@@ -1,14 +1,19 @@
 import React from 'react';
 import { connect } from 'mini-store';
 
-function TableHeaderRow({ row, height, components }) {
+function TableHeaderRow({ row, index, height, components, onHeaderRow }) {
   const style = { height };
   const HeaderRow = components.header.row;
   const HeaderCell = components.header.cell;
+  const rowProps = onHeaderRow(row.map(cell => cell.column), index);
 
   return (
-    <HeaderRow style={style}>
-      {row.map((cell, i) => <HeaderCell {...cell} key={i} />)}
+    <HeaderRow style={style} {...rowProps}>
+      {row.map((cell, i) => {
+        const { column, ...cellProps } = cell;
+        const customProps = column.onHeaderCell ? column.onHeaderCell(column) : {};
+        return <HeaderCell {...cellProps} {...customProps} key={i} />;
+      })}
     </HeaderRow>
   );
 }

diff --git a/tests/Table.spec.js b/tests/Table.spec.js
@@ -441,7 +441,7 @@ describe('Table', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('onRow', () => {
+  it('renders onRow correctly', () => {
     const onRow = (record, index) => ({
       id: `row-${record.key}`,
       index,
@@ -451,6 +451,43 @@ describe('Table', () => {
     expect(wrapper.find('tbody tr')).toMatchSnapshot();
   });
 
+  it('renders column.onCell correctly', () => {
+    const onCell = (record) => ({
+      id: `cell-${record.name}`,
+    });
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name', onCell },
+    ];
+    const wrapper = render(createTable({ columns }));
+
+    expect(wrapper.find('tbody td')).toMatchSnapshot();
+  });
+
+  it('renders onHeaderRow correctly', () => {
+    const onHeaderRow = jest.fn((columns, index) => ({
+      id: `header-row-${index}`,
+    }));
+    const wrapper = render(createTable({ onHeaderRow }));
+
+    expect(wrapper.find('thead tr')).toMatchSnapshot();
+    expect(onHeaderRow).toBeCalledWith(
+      [{ title: 'Name', dataIndex: 'name', key: 'name' }],
+      0,
+    );
+  });
+
+  it('renders column.onHeaderCell', () => {
+    const onHeaderCell = (column) => ({
+      id: `header-cell-${column.key}`,
+    });
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name', onHeaderCell },
+    ];
+    const wrapper = render(createTable({ columns }));
+
+    expect(wrapper.find('thead th')).toMatchSnapshot();
+  });
+
   describe('custom components', () => {
     const MyTable = (props) => <table name="my-table" {...props} />;
     const HeaderWrapper = (props) => <thead name="my-header-wrapper" {...props} />;

diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
@@ -386,41 +386,6 @@ exports[`Table dataIndex render text by path 1`] = `
 </div>
 `;
 
-exports[`Table onRow 1`] = `
-Array [
-  <tr
-    class="rc-table-row  rc-table-row-level-0"
-    id="row-key0"
-    index="0"
-  >
-    <td
-      class=""
-    >
-      <span
-        class="rc-table-row-indent indent-level-0"
-        style="padding-left:0px"
-      />
-      Lucy
-    </td>
-  </tr>,
-  <tr
-    class="rc-table-row  rc-table-row-level-0"
-    id="row-key1"
-    index="1"
-  >
-    <td
-      class=""
-    >
-      <span
-        class="rc-table-row-indent indent-level-0"
-        style="padding-left:0px"
-      />
-      Jack
-    </td>
-  </tr>,
-]
-`;
-
 exports[`Table renders colSpan correctly 1`] = `
 <div
   class="rc-table rc-table-scroll-position-left"
@@ -557,6 +522,40 @@ exports[`Table renders column correctly 1`] = `
 </div>
 `;
 
+exports[`Table renders column.onCell correctly 1`] = `
+Array [
+  <td
+    class=""
+    id="cell-Lucy"
+  >
+    <span
+      class="rc-table-row-indent indent-level-0"
+      style="padding-left:0px"
+    />
+    Lucy
+  </td>,
+  <td
+    class=""
+    id="cell-Jack"
+  >
+    <span
+      class="rc-table-row-indent indent-level-0"
+      style="padding-left:0px"
+    />
+    Jack
+  </td>,
+]
+`;
+
+exports[`Table renders column.onHeaderCell 1`] = `
+<th
+  class=""
+  id="header-cell-name"
+>
+  Name
+</th>
+`;
+
 exports[`Table renders correctly 1`] = `
 <div
   class="test-prefix test-class-name test-prefix-scroll-position-left"
@@ -1039,6 +1038,53 @@ exports[`Table renders footer correctly 1`] = `
 </div>
 `;
 
+exports[`Table renders onHeaderRow correctly 1`] = `
+<tr
+  id="header-row-0"
+>
+  <th
+    class=""
+  >
+    Name
+  </th>
+</tr>
+`;
+
+exports[`Table renders onRow correctly 1`] = `
+Array [
+  <tr
+    class="rc-table-row  rc-table-row-level-0"
+    id="row-key0"
+    index="0"
+  >
+    <td
+      class=""
+    >
+      <span
+        class="rc-table-row-indent indent-level-0"
+        style="padding-left:0px"
+      />
+      Lucy
+    </td>
+  </tr>,
+  <tr
+    class="rc-table-row  rc-table-row-level-0"
+    id="row-key1"
+    index="1"
+  >
+    <td
+      class=""
+    >
+      <span
+        class="rc-table-row-indent indent-level-0"
+        style="padding-left:0px"
+      />
+      Jack
+    </td>
+  </tr>,
+]
+`;
+
 exports[`Table renders rowSpan correctly 1`] = `
 <div
   class="rc-table rc-table-scroll-position-left"