DataTable

The DataTable is a component for building tables which organize information into rows and columns.

OverviewPropertiesUsage

DataTableProps

Signature:

export declare type DataTableProps = & & & & & & & ;

DataTableBaseProps

extends, ,

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 `disableSortBy` prop on the column entry.
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 `true` content of the cell is wrapped, when set to `false` content is truncated.
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

extends, ,

Name	Type	Default	Description
id?		-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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 = ;