Elements overriding

[yesmeck]

This PR addresses many long living issues.

Added components to allow overriding default table elements.

const components = {
  table: MyTable,
  header: {
    wrapper: HeaderWrapper,
    row: HeaderRow,
    cell: HeaderCell,
  },
  body: {
    wrapper: BodyWrapper,
    row: BodyRow,
    cell: BodyCell,
  },
};

<Table components={components} columns={columns data={data}}  />

Added onRow, onHeaderRow, column[onCell] and column[onHeaderCell] to allow overriding row and cell props.

Integrate with react-dnd

See https://yesmeck.github.io/table/examples/react-dnd.html

Close ant-design/ant-design#4639, #83

Integrate with styled-components

See https://yesmeck.github.io/table/examples/styled-components.html.

Ability to add any event listener to the table element with onRow and onCell

Don't need add tons of onRowXXX props.

const onRow = (record) => ({
  onClick() { alert(`Clicked ${record.name}`) },
});
<Table columns={columns} data={data} onRow={onRow} />

Close ant-design/ant-design#7096, #127, #141, #117, #149

Ability to optimize table row with sCU

class OptimizedRow extends React.Component {
  shouldComponentUpdate(nextProps) {
    // Perform a custom check
  }

  render() {
    return (
      <tr {...this.props } />
    )
  }
}

<Table components={{ body: { row: OptimizedRow } }} />

Related ant-design/ant-design#2884

Others

Close ant-design/ant-design#5776, #139

[coveralls]

Coverage increased (+0.06%) to 97.861% when pulling 715ff05 on elements-overriding into 3e5ad89 on master.

[coveralls]

Coverage increased (+0.06%) to 97.861% when pulling 4c8d472 on elements-overriding into 3e5ad89 on master.

[afc163]

#137

[yesmeck]

Yeah, aligned cell can be implemented through custom component:

const CenterCell = (props) => <th {...props} style={{ textAlign: 'center' }} />;

<Table components={{ body: { cell: CenterCell } }} />

[afc163]

column.align will be easier to use.

[coveralls]

Coverage increased (+0.1%) to 97.895% when pulling ac3c4de on elements-overriding into 0a9207b on master.

[yesmeck]

After introducing onRow and column[onCell], we can deprecate onRowClick, onRowDoubleClick, onRowMouseEnter, onRowMouseLeave, onRowContextMenu, column[onCellClick].

[yesmeck]

getBodyWrapper can be deprecated as well.

[coveralls]

Coverage decreased (-0.9%) to 96.875% when pulling e7458ae on elements-overriding into 0a9207b on master.

[liuyangc3]

Ability to add any event listener to the table element with onRow and onCell
Don't need add tons of onRowXXX props.

补充一下 onCell 是在 columns 里, 看上面的例子 还以为是写在 Table 上

const columns = { 
  onCell: record => ({
    onClick() { alert(`Clicked ${record.name}`) },
  }),
}
<Table columns={columns} data={data} onRow={onRow} />

[Clee681]

@yesmeck Is there a way to just wrap the body.row element without having to manually re-create it?

[ashirbad29]

do components work in virtual table ? I have been trying to add a custom row component but it seems it is getting ignored when virtual table is enabled.