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

Here is a basic implementation of DataTable. Ensure that values use the xsmall font size for consistency.

Employee name
Email address
Phone number
Lando Norris
lando@reckon.com
0400123456
Daniel Ricciardo
dan@reckon.com
0401234567
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.

Buzz Lightyear
$508.36
$627.90
Prospector Pete
$417.02
$704.78
Sheriff Woody
$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
Lando Norris
lando@reckon.com
0400123456
Daniel Ricciardo
dan@reckon.com
0401234567
Scroll

Custom rendering

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

Employee
Earnings
Deductions
Net pay
Super
S
Sheriff Woody
$100.00
$100.00
$100.00
$100.00
B
Buzz Lightyear
$100.00
$100.00
$100.00
$100.00
P
Prospector Pete
$200.00
$200.00
$200.00
$200.00

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

Prospector Pete
$417.02
$906.04
$704.78
Buzz Lightyear
$508.36
$372.75
$627.90
Sheriff Woody
$719.21
$285.79
$653.34
$1644.59
$1564.58
$1986.02

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.

Submitted on
Status
Pay date
No. of employees
Total gross
Total PAYG

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.

Prospector Pete
$417.02
$906.04
$704.78
Buzz Lightyear
$508.36
$372.75
$627.90
Sheriff Woody
$719.21
$285.79
$653.34
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.