Data Table

Usage

import { DataTable } from "@govtechmy/myds-react/data-table";

export default () => <DataTable />;

Examples

Data & Columns

DataTable component is primarily defined by 2 important props: data and columns.

• data accepts array of objects, where each object represents a row in the table.
• columns accepts array of ColumnDef, where each object represents a column in the table.

Expanding Columns

You can expand the size of the cells in a column by setting the expandable property to true in the meta object of the column definition.

To demonstrate this, we have set the expandable property to true for the Name and Position columns. You can click on the expand icon to view the full content of the cell.

Tooltip on Column Headers

You can add a tooltip to the column headers by setting the tooltip property in the meta object of the column definition.

To demonstrate this, we have set the tooltip property to Age and Position column. Hover over the column header to view the tooltip.

Sorting

You can sort the data in the table by setting the sortable property to true in the meta object of the column definition.

To demonstrate this, we have set the sortable property to the Position column. Click the sort icon to toggle the sorts available.

Skeleton Loading

You can enable loading prop to trigger skeleton loading state for the table.

Empty Table

Passing an empty array to the data prop will render an empty state for the table.

Row Selection

Enable selection mode by passing a selection prop to the DataTable component. The selection prop accepts an object with the following properties:

• mode: The type of selection. Can be either checkbox or radio.
• onSelectionChange: A callback function that is triggered when the selection changes.
• rowId: The unique identifier for each row in the table.

Grouped Header

You can group columns together by setting the columns property to an array of ColumnGroupDef objects. Each ColumnGroupDef object represents a group of columns in the table.

Here is an example of a table with grouped columns:

Fixed/Sticky Header

By default, the header of the table is sticky, but it never materialised as the tables in previous examples do not have a fixed height.

To demonstrate the sticky header, lets set a fixed height for the table. Simply pass the className prop to the DataTable component with a max-h-[300px] class.

Nested Rows

DataTable is also capable of nesting rows. To enable this feature, the following requirements must be met:

1. data: Contain a nested array object with a key that matches the id_by property in the nest object. (eg. children)
2. columns: Column responsible for expanding & collapsing should pass Cell.Expand in the cell property.
3. nest: An object prop that contains the following properties:
   • id_by: The key that matches the nested array object in the data property.

Pinned Columns

You can pin columns to the left or right of the table by setting the pin property. The pin property accepts an object with the following properties:

• left: An array of column IDs to pin to the left.
• right: An array of column IDs to pin to the right.

Table Footer

You can add footer per column by setting the footer in ColumnDef object of the column definition. Here is an example of a table with footer:

Props

DataTable

DataTable ColumnDef