Balance Logo
Balance
Reckon Design System

Virtualized Data Table

A virtualized list is a technique where a large list of items in a scrollable view is virtually rendered to only show items that are visible within the the scrollable view window.
Install
pnpm add @reckon-web/virtualized-data-table
Import usage
import {
VTable,
VBody,
VHead,
VFoot,
VRowGroup,
VRow,
VCell,
SortButton,
SortIndicator,
sortData,
propsAreEqual
} from '@reckon-web/virtualized-data-table';
  • Code
  • API

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).

Row
0
Row
1
Row
2
Row
3
Row
4
Row
5
Row
6
Open in Playroom

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.

Row
0
Row
1
Row
2
Row
3
Row
4
Row
5
Row
6

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.

Malena O' Donohue
mo0@fastcompany.com
Annabella Dye
adye1@blogspot.com
Say Torfin
tsay@indiegogo.com
Roddy Ashfull
rashfull3@time.com
Jarid Cardinal
cardinal.j@spiegel.de
Pembroke Knath
pknath5@ed.gov
Tricia Bouldon
tbouldon6@google.com.au

Primitives

Examples of using the various table primitives available.

Title
Index
Row
0
Row
1
Row
2
Row
3
Row
4
Row
5
Row
6
Total
124750

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.
Name
Email
Age
Malena O' Donohue
mo0@fastcompany.com
36
Annabella Dye
adye1@blogspot.com
49
Say Torfin
tsay@indiegogo.com
74
Roddy Ashfull
rashfull3@time.com
31
Jarid Cardinal
cardinal.j@spiegel.de
54
Pembroke Knath
pknath5@ed.gov
80
Tricia Bouldon
tbouldon6@google.com.au
32

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
Annabella Dye
adye1@blogspot.com
49
Jarid Cardinal
cardinal.j@spiegel.de
54
Jsandye Maclaine
maclaine.j@opensource.org
22
Loree Keogh
lkeogh9@jugem.jp
41
Malena O' Donohue
mo0@fastcompany.com
36
Norina Chatteris
nchatteris8@dmoz.org
62
Pembroke Knath
pknath5@ed.gov
80
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.