Balance Logo
Reckon Design System
Open playroom

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.
pnpm add @balance-web/virtualized-data-table
Import usage
import {
} from '@balance-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.


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.


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

Edit in Playroom


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.


Examples of using the various table primitives available.


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.


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
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo