Data Table
Data tables display information in a way that's easy to scan, so that users can look for patterns and insights.
import { DataTable, sortTableData } from '@balance-web/data-table';The
DataTablecomponent has been deprecated and will be removed in a future version. Use Table instead.
Usage
Ensure that Text uses the xsmall size for consistency. Empty table cells should display an em dash (—).
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.
Footer renderer
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.