Balance Logo
Balance
Reckon Design System

Data Table

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights.
Install
pnpm add @reckon-web/data-table
Import usage
import {
DataTable,
sortTableData
} from '@reckon-web/data-table';
  • Code
  • API

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights.

Usage

Ensure that Text uses the xsmall size for consistency. Empty table cells should display an em dash (—).

Employee name
Email address
Phone number
Luca Pacioli
0487654321
Edwin Waterhouse
edwin@reckon.com
John Rockerfeller
john@reckon.com
0412345678
Open in Playroom

Sortable

Passing the sort prop and onSortChange callback will allow the user to change the sort order of the data.

We export a handy sortTableData function for this purpose. You should only use sortTableData if your data set is small and exists entirely in-memory, otherwise sorting should be implemented by sorting in the actual database.

Edwin Waterhouse
$62.79
John Rockerfeller
$417.02
Luca Pacioli
$719.21
$653.34

Overflow

When there isn't enough horizontal space to fit all the columns comfortably, you may introduce scrolling behaviour by setting the allowOverflow property.

Employee
Email address
Phone number
Luca Pacioli
luca@reckon.com
0487654321
Edwin Waterhouse
edwin@reckon.com
0401234567
John Rockerfeller
john@reckon.com
0412345678
Scroll

Custom rendering

Use the render prop to customise how cells in a row will be rendered.

Employee
Earnings
Deductions
Net pay
Super
L
Luca Pacioli
$100.00
$100.00
$100.00
$100.00
E
Edwin Waterhouse
$100.00
$100.00
$100.00
$100.00
J
John Rockerfeller
$200.00
$200.00
$200.00
$200.00

You may optionally render a table footer using the renderFooter function.

Employee
Earnings
Deductions
Super
Luca Pacioli
$719.21
$285.79
$653.34
Edwin Waterhouse
$508.36
$372.75
$627.90
John Rockerfeller
$417.02
$906.04
$704.78

Empty state

Use the emptyState property to show the user something when there's no data to show. This is typically useful when the table is showing filterable data. The emptyState element is only shown when the rowCount is 0.

Employee name
Email address
Phone number

You have no STP submissions yet

STP submissions will show up here as they have been filed

Cell attributes

Use the cellAttributes function to apply styles, custom data-attributes, or anything else you need on a given table cell.

Employee
Email address
Phone number
Luca Pacioli
0487654321
Edwin Waterhouse
edwin@reckon.com
John Rockerfeller
john@reckon.com
0412345678
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo