Tables

Basic Table#

Hoverable Rows#

Add prop hover to enable a hover state on table rows within<tbody>.

Tables with Icons and Controls#

Small Variants#

All previous table styles are also available in a smaller variant, set prop size to sm

When using small variants of tables with icons and controls, don’t forget to use the smaller variants of those icons and controls too!

Basic Table with Sorting and other features#

This example demonstrates the use of Table component with custom sorting and pagination. It also uses TablePagination component which is basically a wrapper over Pagination and designed to work with Tables.

DataTable is a wrapper around Table component that accepts props data and columns for rendering rows and column headers. The prop columns is an array of column objects and each column object must have Header and accessor for rendering the table. Both data and columns should be memoized via React.useMemo.

Header accepts value of type 'String | Function | React.Component => JSX' and is used for rendering header text. The accessor takes a string value and it should be the same key used in data object. The accessor also supports deeply nested values, eg. 'info.name'. Refer to the examples below for how values for data and columns can be created.

Table with Sorting#

Use the prop sortBy on each column object to enable/disable sorting for individual columns. And by using disableSorting on the DataTable, sorting can be disabled for all the columns.

Table with Custom Sorting#

The columns object provides an option for custom sorting. As shown in the example below, sortType which has a type String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool) takes a function to compare 2 rows of data and order them correctly. The function must be memoized and it should return 1 if rowA is larger, and -1 if rowB is larger.

Table with Scroll#

Setting height and width on DataTable will enable vertical and horizontal scrolling.

Table with and without Client-side Pagination#

Pagination is displayed by default, to disable it use the prop disablePagination .

Table with Columns Resizing#

The prop resizeColumns on DataTable can be used to change column width. When hovering above the dividing line between two columns, there is a visual indicator that shows the column is adjustable. To disable resizing for a specific column use disableResizing inside the columns object as shown in the example.

Table with Single Row Selection#

Row selection is enabled by default, to disable it use the prop disableRowSelection .

Table with Multiple Row Selection#

Single row selection is the default, to enable multi-row selection use the prop multipleRowSelection. Clicking on a row selects it and clicking again undo the selection.

Table with CheckBox Row Selection#

The prop checkBoxRowSelection on the DataTable component add checkbox on each row's first cell to control row selection.

Table with Custom CheckBox Row Selection#

Row Selection Checkbox can be configured by using Header and Cell functions in the column object that is passed to DataTable.

Table with Sticky First Column#

Use the prop stickyFirstColumn on DataTable component to make first column fixed.

Hiding Columns#

Right clicking on a column header gives a context menu option to collapse/show columns. When a column is collapsed, a visual indicator with arrows is displayed and clicking on it will show the column.

Filter Columns#

Use the field Filter on columns object to configure custom filter control on each column and use the prop FilterPanel to render it above the Table.

Global Search#

Using the prop FilterPanel a global search control can be created.

Editable Cell#

Each cell can be customized to render custom control through Cell prop inside columns object as shown below.

Column Reordering by Drag and Drop#

Use the props allowDrag, allowDrop to left click and hold the column header to drag and drop the column in a new order. A visual indicator is shown between the header cells where the column will be dropped. If the drop operation is not allowed the line indicating the drop location will be red.