Virtualized Data Table

import { VTable, VBody, VHead, VFoot, VRowGroup, VRow, VCell, SortButton, SortIndicator, sortData, propsAreEqual } from '@balance-web/virtualized-data-table';

Compared to the DataTable this package is low-level, affording you the control necessary to impact the performance of very large tables.

Usage

The main parts:

• VBody is a very thin wrapper around react-window's FixedSizeList.
• VTable must 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.

The other 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.

Basic

The primary purpose of this package is to virtually render table rows using TBody. Required props are:

• height: number Height of the list.
• itemCount: number Total number of items in the list.
• itemSize: number Height of each row in the table.

Ensure you pass style to the outer-most element of the item renderer (this is used for positioning).

Memoization

We recommend using React.memo() to memoize the component that will render each row. This package exposes a helper utility propsAreEqual to pass as the second argument for prop comparison.

Accessing data

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 VBody will make data available as a property to the item renderer.

Primitives

Examples of using the various table primitives available.

Header / Footer

Row

To aid consumers with styling the rows of the VirtualDataTable there are 2 optional props available for the table row:

• striped is used to get the "zebra pattern" muted background colour on the row.
• tone is 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.

Sorting

To aid consumers with sorting data we expose a few helpers:

• sortData A utility for sorting against object keys
• SortButton A styled button to include in head cells
• SortIndicator A component that surfaces the arrow SVGs