Balance Logo
Balance
Reckon Design System
Open playroom

Data Table

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

The DataTable component has been deprecated and will be removed in a future version. Use Table instead.

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

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

Overflow

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

Custom rendering

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

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

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.

Cell attributes

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

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo