Closed techniq closed 6 years ago
Released to npm
@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.
Decided with version
2.0.0
to drop thereact-virtualized
requirement and use standard table elements (display: table
) by default. This provides the additional benefits:Benefits
colSpan
)display: grid
,display: flex
)display: grid
, as hoping to solve some issues withdisplay: table
(position: sticky
with border, max height tables based on viewport, etc) and it still supports column spanning, etcposition: 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.componentWillReceiveProps
and need to callrecomputeGridSize()
:hover
(although we still supportisCellHovered
for more complex use casesBreaking 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
.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:now becomes
when you only need to use
rowData
. This is even cleaner forisCellHovered
when using forrow hovering
.now becomes
width
,height
, 'maxHeight, and
columnWidthprops on
Table. These can mostly be accomplished with style prop (ex.
style={{ width: 123 }}) or
cellProps={{ style: { width: 123 } }}`width
andminWidth
on column definitions. These can be accomplished withcellProps
andstyle
(ex.cellProps: { style: { width: 123 }}
fitHeightToRows
prop removed sincedisplay: table
fits by default. AddedaddPlaceholderRows
for support the inverse with pagination (useful to keep controls in consistent location).rowHeight
replaced withrowProps
prop andstyle
. Ex. ({{ style: { height: 24 } }}
)fixedRowCount
andfixedColumnCount
. UseheaderCellProp
andposition: sticky
withtop: 0
orleft: 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
maxHeight
due to limitations ofdisplay: table
. Hoping with support fordisplay: grid
this can return.position: sticky
so there will be some trade-offs). "Fixed" row headers could probably be accomplished with justposition: absolute
andposition: relative
with a margin offset for the body.Notes
display: table
usestableLayout: auto
. In some sizing cases you will want to usetableLayout: fixed
when applying explicit column widths.