DataTable
Consider migrating to the DataTableV2
. Refer to the
migration guide
for details on the upgrade.
The DataTable
is a component for building tables which organize information
into rows and columns.
DataTableProps
Signature:
export declare type DataTableProps = & & & & & & & ;
DataTableBaseProps
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
, ,
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
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
Name | Type | Default | Description |
---|---|---|---|
columnVisibility? | - | State of column visibility (controlled). | |
onColumnVisibilityChange? | (visibility: ) => | - | Called when the visibility of one or more columns changes. |
DataTableColumnVisibilityUncontrolledProps
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
Name | Type | Default | Description |
---|---|---|---|
defaultColumnVisibility? | - | Default state column visibility (uncontrolled). |
DataTableExpandedRowsControlledProps
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
Name | Type | Default | Description |
---|---|---|---|
expandedRows? | <, > | - | State of rows expansion (controlled). |
onExpandedRowsChange? | (expandedRows: <, >) => | - | Called when the expand state of one or more rows changes. |
DataTableExpandedRowsUncontrolledProps
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
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
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
, ,
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
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
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
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
Name | Type | Default | Description |
---|---|---|---|
pageSize | - | Number of rows per page (controlled) | |
onPageSizeChange | (pageSize: ) => | - | Handler that is called when the page size changes. |
PaginationServerSideProps
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
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
Consider migrating to the DataTableV2
. Refer to the migration guide for details on the upgrade.
Name | Type | Default | Description |
---|---|---|---|
children | (expandableRowInformation: {
row: <, >;
}) => . | - |