Version 2.0.0

[techniq]

Decided with version 2.0.0 to drop the react-virtualized requirement and use standard table elements (display: table) by default. This provides the additional benefits:

Benefits

• Leverage browser sizing of columns (automatically size to fit, wrapping and sizing height automatically)
• Responsive by default (no need for AutoSizer component)
• Support for column spanning (colSpan)
  • Possible with react-virtualized, but difficult
• Potential to support other css layouts (display: grid, display: flex)
  • Definite plans to investigate display: grid, as hoping to solve some issues with display: table (position: sticky with border, max height tables based on viewport, etc) and it still supports column spanning, etc
• Using position: sticky opens up new use cases (inline headers that replace) plus is more performant than ScrollSync in practice, although it has some issues to work through/around.
• Allowed removing componentWillReceiveProps and need to call recomputeGridSize()
• Cleaner distinction between header and body rows/cells
• Actual row concept available now allows to use css :hover (although we still support isCellHovered for more complex use cases
• Smaller bundle size

Breaking changes

While I attempted to keep the same API/props as much as possible, I did make some changes (mostly due to the differences implementations, although I took the opportunity with the change to update some pain points of 1.0.0.

• Object is now passed instead of individual argument to onCellClick, cellProps, isCellSelected, etc. This allows for easier destructing of arguments you need and not be dependent of the order they are passed. For example:

<MuiTable onCellClick=(column, rowData) => {...} />

now becomes

<MuiTable onCellClick=({ rowData }) => {...} />

when you only need to use rowData. This is even cleaner for isCellHovered when using for row hovering.

<MuiTable
  isCellHovered={(column, rowData, hoveredColumn, hoveredRowData) => {
    return rowData.id && rowData.id === hoveredRowData.id
  }}
/>

now becomes

<MuiTable
  isCellHovered={({ rowData, hoveredRowData }) => {
    return rowData.id && rowData.id === hoveredRowData.id
  }}
/>

• Removed width, height, 'maxHeight, andcolumnWidthprops onTable. These can mostly be accomplished with style prop (ex.style={{ width: 123 }}) orcellProps={{ style: { width: 123 } }}`
• Removed width and minWidth on column definitions. These can be accomplished with cellProps and style (ex. cellProps: { style: { width: 123 }}
• fitHeightToRows prop removed since display: table fits by default. Added addPlaceholderRows for support the inverse with pagination (useful to keep controls in consistent location).
• rowHeight replaced with rowProps prop and style. Ex. ({{ style: { height: 24 } }})
• Removed default styling of fixed headers and columns (defaults to Material-UI styling)
• Removed fixedRowCount and fixedColumnCount. Use headerCellProp and position: sticky with top: 0 or left: 0. Not 100% the same (can only have 1 fixed column or row at a time, but they can stack/replace which opens up new use cases).

Regressions / future work

• Currently no support for maxHeight due to limitations of display: table. Hoping with support for display: grid this can return.
• Investigate support for react-window on a row-level virtualization. I think keeping virtualization on a single axis will help with some of the pain points (although this will break position: sticky so there will be some trade-offs). "Fixed" row headers could probably be accomplished with just position: absolute and position: relative with a margin offset for the body.

Notes

• Previous react-virtualized based Table is now available as mui-virtualized-table and is published on npm. There are still use cases it better supports and I will continue to support it as it does.
• By default display: table uses tableLayout: auto. In some sizing cases you will want to use tableLayout: fixed when applying explicit column widths.
  • https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
  • https://css-tricks.com/almanac/properties/t/table-layout/

<Table style={{ tableLayout: 'fixed' }} />

[techniq]

Released to npm

[cvanem]

@techniq Looks good. I didn't realize this does not have support for virtual scrolling yet, so I am going to have to remain using mui-virtualized-table for now. I do like the column resizing, reduced props and performance benefits of this implementation.