Data table variants available in Storybook
The data table component has the following variants: Basic, Batch actions, Dynamic, Expansion, Batch expansion, Filtering, Selection, With radio selection, With selection and sorting, Sorting, Toolbar, Persistent toolbar, Small persistent toolbar, With overflow menu, AI label with expansion, AI label with radio selection, AI label with selection, AI label with selection and expansion, Column AI label sort, and Column AI label with selection and expansion.
Data table framework implementations available
The data table component has implementations available for React, Web Components, Angular (Community), and Vue (Community).
Data table sample header data structure
Header data for a data table is defined as an array of objects, each with 'header' (display text) and 'key' (data identifier) properties. Example headers include Name, Protocol, Port, Rule, Attached Groups, and Status.
Data table sample row data structure
Row data for a data table is defined as an array of objects containing the data fields keyed to the header keys. Each row must have a unique 'id' field and properties matching the header keys (name, protocol, port, rule, attached_groups, status in the example).
DataTable component structure and props
DataTable accepts rows and headers props. It uses a render function that returns an object containing rows, headers, getHeaderProps, getRowProps, and getTableProps functions. The component wraps Table, TableHead, TableBody, TableRow, TableHeader, TableCell, TableExpandHeader, TableExpandRow, and TableExpandedRow components.
DataTable import from @carbon/react
Import DataTable components: import { DataTable, TableContainer, Table, TableHead, TableRow, TableExpandHeader, TableHeader, TableBody, TableExpandRow, TableCell, TableExpandedRow } from '@carbon/react';
TableContainer for DataTable title and description
Wrap the Table component in TableContainer to add a title and description. Example: <TableContainer title="Carbon Repositories" description="A collection of public Carbon repositories.">
DataTable getTableProps, getHeaderProps, getRowProps functions
The DataTable render function provides getTableProps, getHeaderProps, and getRowProps functions. These return objects containing the necessary props for the Table, TableHeader, and TableRow components respectively. Spread these props into the components using the spread operator.
Using table skeletons for loading states
Use the `<cds-table-skeleton></cds-table-skeleton>` component to display a loading state while data is being fetched. Place it above where the actual table will be rendered. The skeleton component communicates to users that information is still being loaded, following Carbon's loading patterns.
Pagination component requires manual onChange handling
The `cds-pagination` component is not inherently connected to a data table. Event listeners must be added to handle pagination changes. Use 'cds-pagination-changed-current' event to detect page number changes and 'cds-page-sizes-select-changed' event to detect page size changes. The pagination component must have its 'total-items' attribute set to the length of the data.
Pagination configuration with select items
Configure the `cds-pagination` component with child `cds-select-item` elements to set available page size options. Example: `<cds-pagination backward-text="Previous page" forward-text="Next page" itemsPerPageText="Items per page"><cds-select-item value="10">10</cds-select-item><cds-select-item value="20">20</cds-select-item></cds-pagination>`
Filtering table rows for pagination
When rendering paginated table rows, filter the data array before rendering: `data.filter((v, i) => i >= firstRowIndex && i < firstRowIndex + pageSize).forEach((row) => { /* render row */ });` where firstRowIndex is calculated as `(currentPage - 1) * pageSize`.