2020-05-05
A few changes were made in order to support increased customization, with more to come in future releases.
- The
cell
property in the columns array has been changed.cell
now renders the entire cell, as opposed to just the contents inside of the cell. This is now an advanced feature. cell
now expects a component that takes in thestyle
prop as well.style
will contain the correct widths of the cell.
{
key: 'id',
header: 'ID',
cell: ({ row, style }) => (
<div style={style}>
{row.id}
</div>
)
}
- Added the
content
property. This property functions exactly howcell
used to function in previous releases.content
renders a custom component inside of the default cell.
{
key: 'id',
header: 'ID',
content: ({ row }) => row.id
}
- For simplicity, added an
onRowClick
property that takes an event and the index of the row that was clicked.
type onRowClick = (e: Event, { index }: { index: number }) => void;
- Added a
rowRenderer
, which also takes astyle
prop. This is useful if you want to customize the wrapper around the cells in a row.
2020-04-26
- added the props
rowStyle
,tableStyle
, andheaderStyle
to allow for more customization options. Since the Table component does take aclassName
, you can still do things using libraries such asstyled-components
if you prefer.
2020-04-19
- less
setState
calls when updating the default size.
2020-04-19
estimatedRowHeight
is no longer in use. For tables with no specifiedrowHeight
, the median of the rendered row heights is used as a default if the row had not been rendered before.
- Uses memoization in more places.
- reduces row flicker issue when resizing.