Compared to the
DataTable this package is low-level, affording you the
control necessary to impact the performance of very large tables.
The main parts:
VBodyis a very thin wrapper around react-window's
VTablemust wrap the other table elements; it's used to prepare internal context. Among some other things, this implements a resize observer to support fluid width tables.
V* primitives are simple DOM elements with some accessibility attributes
and minor styles to support users with assistive technologies and help maintain
the Balance aesthetic.
The primary purpose of this package is to virtually render table rows using
TBody. Required props are:
height: numberHeight of the list.
itemCount: numberTotal number of items in the list.
itemSize: numberHeight of each row in the table.
Ensure you pass
style to the outer-most element of the item renderer (this is
used for positioning).
We recommend using
memoize the component that will
render each row. This package exposes a helper utility
propsAreEqual to pass
as the second argument for prop comparison.
When creating the item renderer outside of the component it will be rendered in,
you need a way to access the table data. Passing
itemData to the
data available as a property to the item renderer.
Examples of using the various table primitives available.
Header / Footer
To aid consumers with styling the rows of the
VirtualDataTable there are 2 optional props available for the table row:
stripedis used to get the "zebra pattern" muted background colour on the row.
toneis used to highlight a row that contains issues. It takes two property values;
tone="cautious", use for a row that need attention.
tone="critical", use for a row that contain errors.
To aid consumers with sorting data we expose a few helpers:
sortDataA utility for sorting against object keys
SortButtonA styled button to include in head cells
SortIndicatorA component that surfaces the arrow SVGs