toolbar

The toolbar contains various user features for interacting with the table, such as column hiding, export and table settings.

Export

You can export the current table data to CSV, Excel (.xlsx) or PDF format by clicking the export button in the toolbar. You can either export all rows, or only the currently visible rows.

The exported process will attempt to convert any complex data types to exportable formats for the chosen file type.

Disabled Export

You can disable the export feature entirely by setting disableExport to true.

<DataTable disableExport />

Settings

The settings dropdown in the toolbar allows users to toggle compact mode and zebra style for the table. These settings are saved in local storage so that the next time the user visits the table, their preferences are preserved.

By default, the table uses normal mode and no zebra style, you can change these defaults by setting compact and zebraStyle.

<DataTable compact zebraStyle />

Reset Table

This resets all user changes in the table to the default state, clearing all filters, sorting, column ordering, column visibility and table settings.

Reset Columns

Within the columns dropdown in the toolbar, there is also a "Reset Columns" button which only resets column specific user changes.

Reset Settings

Within the settings dropdown in the toolbar, there is also a "Reset Settings" button which only resets table settings like compact mode and zebra style.

Custom Toolbar Button

You can add your own custom buttons to the toolbar with the actionButton prop. You can either provide buttonIcon and/or buttonText with an onClick handler and a default Bifrost button will be rendered for you, or you can pass any JSX you want.

<DataTable
  actionButtons={[
    {
      buttonIcon: faCat,
      buttonText: 'Add cat',
      onClick: () => alert('Add cat clicked! 🐱'),
    },
    <Button key={2} state='alert' variant='filled'>
      CLICK
    </Button>,
  ]}
/>

Disable Toolbar

You can disable the toolbar entirely by setting hideToolbar to true, this will obviously disable all user features contained in the toolbar like column hiding, column and global filtering, compact mode, zebra style, export and table resetting.

We generally do not recommend this, but it can be useful for very small simple tables.