DataTable

A table with client-side sorting, filtering, and row selection.

#Import

import { DataTable } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<DataTable
  columns={[
    { id: 'name', header: 'Name', accessor: row => row.name, sortable: true },
    { id: 'role', header: 'Role', accessor: row => row.role },
  ]}
  data={[
    { id: 'jane', name: 'Jane Doe', role: 'Designer' },
    { id: 'sam', name: 'Sam Lee', role: 'Engineer' },
  ]}
  getRowId={row => row.id}
  filterable
/>

#Preview

<DataTable
  columns={[
    { id: 'name', header: 'Name', accessor: row => row.name, sortable: true },
    { id: 'role', header: 'Role', accessor: row => row.role },
  ]}
  data={[
    { id: 'jane', name: 'Jane Doe', role: 'Designer' },
    { id: 'sam', name: 'Sam Lee', role: 'Engineer' },
  ]}
  getRowId={row => row.id}
  filterable
/>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Filtering

<DataTable filterable {...props} />

#Row selection

<DataTable selectable {...props} />

#Empty state

<DataTable data={[]} emptyMessage="No instruments." {...props} />

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.