DataTable
The DataTable
is a component for building tables which organize information
into rows and columns.
DataTableProps
Signature:
export declare type DataTableProps = & & & & & & & ;
DataTableBaseProps
, ,
Name | Type | Default | Description |
---|---|---|---|
data | [] | - | Memoized version of the table data (use React.useMemo). If you don't use this, no functionality is guaranteed. Note: Data should not contain any JSX. See custom cell renderers and formatters for the purpose of customizing and formatting output (SingleColumn.cell and SingleColumn.formatter). |
columns | [] | - | Memoized version of the column definitions (use React.useMemo). If you don't use this, no functionality is guaranteed. |
height? | - | Height of the table, overflowing row content is virtualized. | |
sortable? | false | Enables sorting for all columns which do not have it explicitly
disabled with the | |
loading? | false | Displays a loading indicator while the table's data and columns are being loaded. | |
selectableRows? | false | Enables row selection. Adds an extra column with appropriate checkboxes. Note: When row selection is used with in combination with pagination, every page change or page size change will reset the selected rows. This is an intentional design decision and the reasoning behind it is that you may not know (or may forget) what you have selected on a different page (especially with very large data sets or if you selected something on a completely different page). For critical actions like deleting rows this would lead to undesired behavior and issues, so it avoids this problem. | |
sortBy? | - | Sorts the table initially by this column and changes it on demand. | |
resizable? | false | Enables resizing for all columns within the table. | |
variant? | | | 'default' | Configures the visual look of DataTable. |
rowThresholds? | [] | - | Configures the thresholds used for the rows highlighting. |
fullWidth? | false | Enables DataTable to use the full width of its container. | |
lineWrap? | false | Enables line breaking (breaking long text in multiple lines) for all column cells in the table.
When set to | |
columnVirtualization? | false | Enables column virtualization for the table. Only the visible columns plus an additional five columns on either side will be rendered to improve performance. | |
onColumnResize? | (columnWidths: {
[columnId: ]: ;
}) => | - | Called when the column is resized. |
onDownloadData? | (subset: | | ) => | - | Called when table data was downloaded (programmatically or via the toolbar). |
DataTableColumnVisibilityControlledProps
Name | Type | Default | Description |
---|---|---|---|
columnVisibility? | - | State of column visibility (controlled). | |
onColumnVisibilityChange? | (visibility: ) => | - | Called when the visibility of one or more columns changes. |
DataTableColumnVisibilityUncontrolledProps
Name | Type | Default | Description |
---|---|---|---|
defaultColumnVisibility? | - | Default state column visibility (uncontrolled). |
DataTableExpandedRowsControlledProps
Name | Type | Default | Description |
---|---|---|---|
expandedRows? | <, > | - | State of rows expansion (controlled). |
onExpandedRowsChange? | (expandedRows: <, >) => | - | Called when the expand state of one or more rows changes. |
DataTableExpandedRowsUncontrolledProps
Name | Type | Default | Description |
---|---|---|---|
defaultExpandedRows? | <, > | - | Default state of rows expansion (uncontrolled). |
DataTable.Cell
When using a custom cell renderer, wrap the cell content with DataTable.Cell
to apply the default padding.
DataTable.Pagination
To enable pagination, add the DataTable.Pagination
component to the DataTable.
PaginationProps
Signature:
export declare type PaginationProps = & ( | ) & ( | ) & ( | );
PaginationPropsBase
, ,
Name | Type | Default | Description |
---|---|---|---|
id? | - | The element's unique identifier. See MDN. | |
pageSizeOptions? | [] | [10, 20, 50, 100, 250, 500, 1000] | Page size options to be displayed in the page size select. |
onPageChange? | (pageSize: , pageIndex: ) => | - | Callback for page changes (exposes pageSize and pageIndex). |
PaginationPageSizeUncontrolledProps
Name | Type | Default | Description |
---|---|---|---|
defaultPageSize? | 10 | Default number of rows per page (uncontrolled). | |
onPageSizeChange? | (pageSize: ) => | - | Handler that is called when the page size changes. |
PaginationPageSizeControlledProps
Name | Type | Default | Description |
---|---|---|---|
pageSize | - | Number of rows per page (controlled) | |
onPageSizeChange | (pageSize: ) => | - | Handler that is called when the page size changes. |
PaginationServerSideProps
Name | Type | Default | Description |
---|---|---|---|
enablePrevPage | - | Whether the previous page is available (if not, the go to previous page button should be disabled). | |
enableNextPage | - | Whether the next page is available (if not, the go to next page button should be disabled). |
DataTable.ExpandableRow
Use the DataTable.ExpandableRow
component to define an expandable row template
which provides additional information for each table row.
ExpandableRowTemplateProps
Name | Type | Default | Description |
---|---|---|---|
children | (expandableRowInformation: {
row: <, >;
}) => . | - |
DataTable.EmptyState
The DataTable.EmptyState
allows you to configure a custom empty state that
will be displayed if no data is available.
EmptyStateProps
Signature:
export declare type EmptyStateProps = ;
DataTable.Toolbar
DataTable.Toolbar
provides a slot where toolbar components can be added.
DataTableToolbarProps
Signature:
export declare type DataTableToolbarProps = & & ;
DataTable.VisibilitySettings
Use DataTable.VisibilitySettings
inside the DataTable.Toolbar
to render the
trigger for the visibility settings overlay in the toolbar. The overlay allows
you to control the column visibility for all columns.
DataTable.DownloadData
Use DataTable.DownloadData
inside the DataTable.Toolbar
to enable
downloading of the table data. This component contains a menu with the options
for downloading all data, the current page or the selected row data.
DataTable.LineWrap
Use DataTable.LineWrap
inside the DataTable.Toolbar
to add a button for
toggling the line wrap in the table cells.
DataTable.FontStyle
Use DataTable.FontStyle
inside the DataTable.Toolbar
to add a button for
toggling the font style of the data table.
DataTable.UserActions
DataTable.UserActions
provides a slot for configuring user actions for columns
and cells in the DataTable.
DataTable.ColumnActions
Use DataTable.ColumnActions
inside the DataTable.UserActions
to specify user
actions for the table columns.
TableColumnsActionsProps
Name | Type | Default | Description |
---|---|---|---|
column? | - | The accessor/id of the column the user actions belong to. If this property is not set, the configuration is used as a fallback for all columns where no user actions are defined explicitly. | |
children | (column: ) => . | | - |
DataTable.CellActions
Use DataTable.CellActions
inside the DataTable.UserActions
to specify user
actions for the table cells.
TableCellActionsProps
Name | Type | Default | Description |
---|---|---|---|
column? | - | The accessor/id of the column the user actions belong to. If this property is not set, the configuration is used as a fallback for all columns where no user actions are defined explicitly. | |
children | (props: {
column: ;
row: <{}>;
cell: {
value: ;
};
}) => . | - |
TableUserActions
Use the TableUserActions
component for configuring column or cell actions in
the DataTable. This component must be returned by the DataTable.ColumnActions
and DataTable.CellActions
function.
TableUserActions.ColumnOrder
Use TableUserActions.ColumnOrder
inside the DataTable.ColumnActions
to add a
menu item for changing the order of the columns.
TableUserActions.LineWrap
Use TableUserActions.LineWrap
inside the DataTable.ColumnActions
to add a
menu item for toggling the line wrap of a table column.
TableUserActions.FontStyle
Use TableUserActions.FontStyle
inside the DataTable.ColumnActions
to add a
menu item for toggling the font style of a table column.
TableUserActions.HideColumn
Use TableUserActions.HideColumn
inside the DataTable.ColumnActions
to add a
menu item for hiding the respective table column.
TableUserActions.CopyItem
Use TableUserActions.CopyItem
inside the DataTable.CellActions
to add a menu
item for copying the cell content.
TableUserActions.Item
In addition to the predefined actions, you can provide a custom user action
using the TableUserActions.Item
subcomponent.
For detailed information about the props check out the
Menu.Item
props.
TableUserActions.ItemIcon
Use the TableUserActions.ItemIcon
to add an icon to a TableUserActions.Item
.
For detailed information about the props check out the
Menu.ItemIcon
props.
TableUserActions.Group
Use the TableUserActions.Group
to group multiple items in the user actions
menu.
For detailed information about the props check out the
Menu.Group
props.
TableUserActions.Label
Use the TableUserActions.Label
to add a descriptive label to the user actions
menu.
For detailed information about the props check out the
Menu.Label
props.
DataTable.TableActions
DataTable.TableActions
allows you to define general table actions that are
positioned at the top of the DataTable
.
DataTableActionsProps
Signature:
export declare type DataTableActionsProps = ;
DataTable.SelectedRowsActions
DataTable.SelectedRowsActions
allows you to define actions that will be
applied to the selected rows. These actions will replace the
DataTable.TableActions
when one or multiple rows are selected.
DataTableSelectedRowsActionsProps
Name | Type | Default | Description |
---|---|---|---|
children | (rows: []) => | - |
DataTable.SelectionChip
The DataTable.SelectionChip
indicates how many rows are currently selected.
SelectionChipProps
Signature:
export declare type SelectionChipProps = ;