DataTable

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

DataTableProps

Signature:

export declare type DataTableProps< extends  = > = <> &  &  &  &  &  &  &  &  & <> & <> & <> & <> &  & <> & <> &  &  &  &  & ;

DataTableBaseProps

extends

Name	Type	Default	Description
`data`	[]		Data given to the DataTable. Needs to be memoized in order to ensure performant update cycles.
`columns`	<>[]		Column definition given to the DataTable. Needs to be memoized in order to ensure performant update cycles.
`fullWidth?`		`false`	Enables DataTable to use the full width of its container.
`fullHeight?`		`false`	Enables DataTable to use the full height of its container.

DataTableLineWrapBaseProps

Name	Type	Default	Description
`onLineWrapChange?`	(lineWrap: ) =>		Callback that is called when the lineWrap state of the table or any column is changed.

DataTableLineWrapUncontrolledProps

extends

Name	Type	Default	Description
`defaultLineWrap?`			Lets you set lineWrap state initially of the entire table or individual columns. `boolean` values will affect the whole table, whereas `Record` values will let you assign lineWraps to individual columns.

DataTableLineWrapControlledProps

extends

Name	Type	Default	Description
`lineWrap?`			Lets you control the lineWrap state of the entire table or individual columns. `boolean` values will affect the whole table, whereas `Record` values will let you assign lineWraps to individual columns.

DataTableColumnFontStyleProps

Signature:

export declare type DataTableColumnFontStyleProps = | ;

DataTableVisualVariantProps

Name	Type	Default	Description
`variant?`	{ /** * rowSeparation can be set to which will provide lines between rows or * can be set to which will provide alternate row coloring. * @defaultValue / rowSeparation?: \| \| ; /* * If true provides vertical lines between the columns. * @defaultValue false / verticalDividers?: ; /* * If true provides a border for the table. * @defaultValue true / contained?: ; /* * rowDensity adds spacing around the content inside the row * with minimal space for , maximum spacing for and * being medium spacing. * @defaultValue / rowDensity?: \| \| ; /* * fontStyle, sets the font style for the entire data table. * This does not overwrite fontStyle set at the lower level, like columns etc. * @defaultValue / fontStyle?: \| ; /* * headers defines if the header rows of the table should be rendered or not. * @defaultValue / headers?: \| ; /* * Determines the vertical alignment for all table cells. * If header and body cells should have a different vertical alignment, they can be configured separately. * @defaultValue */ verticalAlignment?: \| \| \| { header: \| \| ; body: \| \| ; }; }

DataTableLoadingStateProps

Name	Type	Default	Description
`loading?`		`false`	Displays a loading indicator while the table's columns and/or data are being loaded.

DataTableColumnSizingBaseProps

Name	Type	Default	Description
`resizable?`		`false`	Enables resizable columns for the table.
`onColumnSizingChange?`	(newSizes: ) =>		Callback that triggers when a user finishes resizing a column.

DataTableColumnSizingControlledProps

extends

Name	Type	Default	Description
`columnSizing?`			ColumnSizing state that lets you set the individual column sizes in a controlled scenario.

DataTableColumnSizingUncontrolledProps

extends

Name	Type	Default	Description
`defaultColumnSizing?`			ColumnSizing state that lets you set the individual column sizes in a uncontrolled scenario.

DataTableSortingBaseProps

Name	Type	Default	Description
`sortable?`	\| { /** * When set to true, the table will assume that the data provided by the consumer is already sorted, * and will not apply sorting to it. */ manualSort?: ; }	`false`	Enables sorting for all columns which do not have it explicitly disabled with the `disableSorting` prop on the column entry.
`onSortByChange?`	(columnSorting: []) =>		Callback triggered when sorting of the column is changed.

DataTableSortingControlledProps

extends

Name	Type	Default	Description
`sortBy?`	[]		Controlled property to define the columns the DataTable is sorted by.

DataTableSortingUncontrolledProps

extends

Name	Type	Default	Description
`defaultSortBy?`	[]		Uncontrolled property to define the columns the DataTable is sorted by.

DataTableColumnVisibilityBaseProps

Name	Type	Default	Description
`onColumnVisibilityChange?`	(columnVisibility: ) =>		Callback that is called when the ColumnVisibility state of any column is changed.

DataTableColumnVisibilityControlledProps

extends

Name	Type	Default	Description
`columnVisibility?`			Lets you control the ColumnVisibility state of the individual columns.

DataTableColumnVisibilityUncontrolledProps

extends

Name	Type	Default	Description
`defaultColumnVisibility?`			Lets you set the initial ColumnVisibility state of the individual columns.

DataTableColumnOrderBaseProps

Name	Type	Default	Description
`columnOrdering?`			Enables column ordering functionality in the table.
`onColumnOrderChange?`	(columnOrder: [], trigger: \| ) =>		Callback that is called when the column order of any column is changed. It provides the changed column order along with the underlying trigger that indicates if the change was triggered by a user interaction or internally.

DataTableColumnOrderControlledProps

extends

Name	Type	Default	Description
`columnOrder?`	[]		Lets you control the column order of the individual columns.

DataTableColumnOrderUncontrolledProps

extends

Name	Type	Default	Description
`defaultColumnOrder?`	[]		Lets you set the initial column order of the individual columns.

DataTableRowOrderBaseProps

Name	Type	Default	Description
`rowOrdering?`	\| { /** * When enabled, a drag handle is be rendered in the first column for every row. / enableDragAndDrop?: ; /* * Allows to disable the dragging of certain rows. / disableRowDragAndDrop?: (row: ) => ; /* * Locks rows with disabled drag and drop in place if they are sorted to the start or end of the table. */ lockDisabledRows?: \| \| ; }	`false`	Enables row ordering.
`onRowOrderChange?`	(rowOrder: []) =>		Callback triggered when row order is changed.

DataTableRowOrderControlledProps

extends<>

Name	Type	Default	Description
`rowOrder?`	[]		Ordered set of row ids.

DataTableRowOrderUncontrolledProps

extends<>

Name	Type	Default	Description
`defaultRowOrder?`	[]		Ordered set of row ids.

DataTableRowSelectionBaseProps

Name Type Default Description

Name	Type	Default	Description
`selectableRows?`	\| { /** * Allows to disable the selection of certain rows. / disableRowSelection?: (row: ) => ; /* * Allows to configure if the select all will only select * the current page or the entire. * @defaultValue / selectAllBehavior?: \| ; /* * Allows to set a limit on how m items are allowed * to be selected. Limit needs to be a positive integer. */ limit?: ; }	`false`	Enables row selection. Either accepts a boolean to enable the row selection on the entire table or a config object. The config object accepts a function that will get the row data as the parameter and should return true or false if the row should be selectable or not. In the config object, the 'select all' behavior can also be configured and a selection 'limit' can also be set. Note: For the case where this prop is a config object, it needs to be memoized, to avoid updates if it is identical. Same as for all for other props with type object.
`onRowSelectionChange?`	(selectedRows: <, >) =>		Callback triggered when selection is changed.

selectableRows?

| { /** * Allows to disable the selection of certain rows. */ disableRowSelection?: (row: ) => ; /** * Allows to configure if the select all will only select * the current page or the entire. * @defaultValue */ selectAllBehavior?: | ; /** * Allows to set a limit on how m items are allowed * to be selected. Limit needs to be a positive integer. */ limit?: ; }

false

Enables row selection. Either accepts a boolean to enable the row selection on the entire table or a config object. The config object accepts a function that will get the row data as the parameter and should return true or false if the row should be selectable or not. In the config object, the 'select all' behavior can also be configured and a selection 'limit' can also be set.

Note: For the case where this prop is a config object, it needs to be memoized, to avoid updates if it is identical. Same as for all for other props with type object.

onRowSelectionChange?

(selectedRows: <, >) =>

Callback triggered when selection is changed.

DataTableRowSelectionControlledProps

extends<>

Name	Type	Default	Description
`selectedRows?`	<, >		Controlled property to define the selected rows.

DataTableRowSelectionUncontrolledProps

extends<>

Name	Type	Default	Description
`defaultSelectedRows?`	<, >		Controlled property to define the selected rows.

DataTableThresholdProps

Name	Type	Default	Description
`rowThresholds?`	<>[]		Configures the thresholds used for the rows highlighting.

DataTableSubRowsBaseProps

Name	Type	Default	Description
`subRows?`	\| { accessor?: // With a keyof we would have type safety for the objects first level and would be able to suggest and ensure that the key given actually exists in the given row data. To support pathed accessors like 'some.nested' we need to fall back to a . \| ((row: ) => [] \| ); /** * Allows to specify a columnId that the subRow indicator will be injected to. * By default, this will be the first visible column provided by the columns prop. / subRowColumnId?: ; /* * Allows to specify a function that will evalute if a specific subRows trigger in a row * should be disabled. */ disableSubRow?: (row: ) => ; }	`false`
`onOpenSubRowsChange?`	(openSubRows: <, >) =>		Callback triggered when open subrows change.

DataTableSubRowsControlledProps

extends<>

Name	Type	Default	Description
`openSubRows?`	true \| <, >		Currently open sub rows in a controlled scenario.

DataTableSubRowsUncontrolledProps

extends<>

Name	Type	Default	Description
`defaultOpenSubRows?`	true \| <, >		Initially open sub rows in an uncontrolled scenario.

DataTableRowInteractivityBaseProps

Name	Type	Default	Description
`interactiveRows?`	\| { /** * The `autoActivate` setting controls whether a focused row immediately activates it, * making stepping through interactive rows with a keyboard more accessible. * @defaultValue true / autoActivate?: ; /* * Defines a link for an interactive row, enabling navigation to another view or page. * @deprecated Please use onActiveRowChange instead. */ link?: (row: ) => ; }	`false`	Enables row interactivity.
`onActiveRowChange?`	(activeRow: \| , event?: ) =>		Callback triggered when active row is changed.

DataTableRowInteractivityControlledProps

extends<>

Name	Type	Default	Description
`activeRow?`	\|		Lets you control the active row.

DataTableRowInteractivityUncontrolledProps

extends<>

Name	Type	Default	Description
`defaultActiveRow?`	\|		Lets you set the initially active row.

DataTableDownloadSlotProps

Name	Type	Default	Description
`excludeColumns?`	[]		Array of column IDs that can optionally be excluded from the download.
`onDownloadData?`	(subset: \| \| , excludedColumns?: []) =>		Called when table data was downloaded via the toolbar, or programmatically when the slot is configured.

DataTableRowIdentification

Name	Type	Default	Description
`rowId?`	(row: ) =>		Enables identification of rows independent of their index in the array.

DataTable.Pagination

Use DataTable.Pagination to enable pagination.

DataTablePaginationBaseProps

extends,

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.
`autoResetPageIndex?`		`true`	Allows opting out of automatic page index reset when new data is being set. Be aware that if you turn off `autoResetPageIndex`, you may need to add logic to handle resetting the pageIndex yourself.
`onPageIndexChange?`	(pageIndex: , trigger: \| ) =>		Called when the page index changes. Provides the changed page index along with the underlying trigger.
`onPageSizeChange?`	(pageSize: ) =>		Handler that is called when the page size changes.

DataTablePaginationPageIndexUncontrolledProps

extends

Name	Type	Default	Description
`defaultPageIndex?`		`0`	Initial page index in an uncontrolled scenario.

DataTablePaginationPageIndexControlledProps

extends

Name	Type	Default	Description
`pageIndex`			Current page index in a controlled scenario.

DataTablePaginationPageSizeUncontrolledProps

extends

Name	Type	Default	Description
`defaultPageSize?`		`100`	Default number of rows per page (uncontrolled).

DataTablePaginationPageSizeControlledProps

extends

Name	Type	Default	Description
`pageSize`			Number of rows per page (controlled)

DataTablePaginationClientSideProps

extends

DataTablePaginationServerSideProps

extends

Name	Type	Default	Description
`enablePreviousPage`			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).
`totalRowsCount?`			The total number of rows. Will be used to determine the total number of pages to display the indicator "Page X of Y" for server-side pagination.

DataTable.ColumnActions

Use DataTable.ColumnActions to specify user actions for the table columns.

DataTableColumnActionsProps

Name	Type	Default	Description
`children`	<>		Content for the column actions. Should be a `TableActionsMenu` directly or a function returning one.
`column?`			Column id that the given column actions apply to. If left empty, the given column actions apply to all columns that allow column actions.

DataTable.CellActions

Use DataTable.CellActions to specify user actions for the table cells.

DataTableCellActionsProps

Name	Type	Default	Description
`children`	<>		Content for the cell actions. Should be a `TableActionsMenu` directly or a function returning one.
`column?`	\| ((columnId: ) => )		Column ID that the given cell actions apply to. When a function is provided, it receives a column ID and must return a boolean whether the action should be applied to that column. If left empty, the actions apply to all cells in columns that allow cell actions.

TableActionsMenu

Use the TableActionsMenu component for configuring column or cell actions. This component must be returned by the DataTable.ColumnActions or DataTable.CellActions function.

TableActionsMenu.ColumnOrder

Use TableActionsMenu.ColumnOrder inside the TableActionsMenu to add a menu item for changing the order of the columns.

TableActionsMenu.LineWrap

Use TableActionsMenu.LineWrap inside the TableActionsMenu to add a menu item for toggling the line wrap of a table column.

TableActionsMenu.ColumnFontStyle

Use TableActionsMenu.ColumnFontStyle inside the TableActionsMenu to add a menu item for toggling the font style of a table column.

TableActionsMenu.HideColumn

Use TableActionsMenu.HideColumn inside the TableActionsMenu to add a menu item for hiding the respective table column.

TableActionsMenu.CopyItem

Use TableActionsMenu.CopyItem inside the TableActionsMenu to add a menu item for copying the cell content to clipboard.

TableActionsMenu.Item

In addition to the predefined actions, you can provide a custom user action using the TableActionsMenu.Item subcomponent.

For detailed information about the props check out the Menu.Item props.

TableActionsMenu.Intent

Use TableActionsMenu.Intent to render a table action menu item that sends an intent.

MenuIntentProps

Signature:

export declare type MenuIntentProps = | ;

TableActionsMenu.Prefix

Use the TableActionsMenu.Prefix to add an icon to the left side of a TableActionsMenu.Item.

For detailed information about the props check out the Menu.Prefix props.

TableActionsMenu.Suffix

Use the TableActionsMenu.Suffix to add an icon to the right side a TableActionsMenu.Item.

For detailed information about the props check out the Menu.Suffix props.

TableActionsMenu.Group

Use the TableActionsMenu.Group to group multiple items in the table actions menu.

For detailed information about the props check out the Menu.Group props.

TableActionsMenu.Label

Use the TableActionsMenu.Label to add a descriptive label to a table actions menu group.

For detailed information about the props check out the Menu.Label props.

DataTable.RowActions

Use DataTable.RowActions to specify user actions for the table rows.

DataTableRowActionsProps

Name	Type	Default	Description
`children`	(row: , { , , , }: { : \| \| ; : ; : ; }) => <>

DataTable.SelectedRowsActions

Use DataTable.SelectedRowsActions 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

extends, ,

Name	Type	Default	Description
`children`	(rows: { rowId: ; originalRow: ; }[]) =>

DataTable.DefaultCell

Custom cell renderer wrapper which automatically deals with applying the correct cell styles.

DataTable.EmptyState

Use DataTable.EmptyState to configure a custom empty state that will be displayed if no data is available.

DataTable.TableActions

Use DataTable.TableActions to define general table actions that are positioned at the top of the DataTable.

DataTable.Toolbar

DataTable.Toolbar provides a slot where toolbar components can be added.

DataTable.VisibilitySettings

Use DataTable.VisibilitySettings inside the DataTable.Toolbar to render the trigger for the visibility settings overlay in the toolbar. The overlay allows the user to control the column visibility for all columns.

Prop Table did not receive data

DataTable.ColumnOrderSettings

Use DataTable.ColumnOrderSettings inside the DataTable.Toolbar to render the trigger for the column order settings overlay in the toolbar. The overlay allows the user to control the column order for all columns.

DataTableColumnOrderSettingsProps

Name	Type	Default	Description
`resetColumnOrder?`	[]		The default column order to reset to when 'Reset to default' is triggered in the column settings modal.

DataTable.ColumnSettingsTrigger

Use DataTable.ColumnSettingsTrigger inside the DataTable.Toolbar to customize the label of the trigger for the column settings overlay in the toolbar.

DataTableColumnSettingsTriggerProps

extends,

Name	Type	Default	Description
`children?`	(params: { hiddenColumnCount: ; totalColumnCount: ; defaultLabel: ; }) =>		Custom label to be displayed in the column settings trigger.

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.Intent

Use DataTable.Intent inside the DataTable.Toolbar to add intents to the toolbar.

IntentProps

Signature:

export declare type IntentProps = | ;

DataTable.LineWrap

Use DataTable.LineWrap inside the DataTable.Toolbar to add a button for toggling the line wrap in the table cells.

DataTable.SelectionChip

The DataTable.SelectionChip indicates how many rows are currently selected.

DataTable.ExpandableRow

Use DataTable.ExpandableRow to define an expandable row template which provides additional information for each table row.

DataTableExpandableRowBaseProps

Name	Type	Description
`children`	(params: { row: ; }) =>	Define a render function as the child of this slot selection to control what is rendered in the expanded row section.
`onExpandedRowsChange?`	(expandedRows: <, >) =>	Callback triggered when the state of the expanded row is changed.
`disableExpand?`	(row: ) =>	Allows you to disable individual rows from expanding by returning true from the passed function.

DataTableExpandableRowControlledProps

extends<>

Name	Type	Default	Description
`expandedRows?`	true \| <, >		Controlled state for the expanded rows of the DataTable.

DataTableExpandableRowUncontrolledProps

extends<>

Name	Type	Default	Description
`defaultExpandedRows?`	true \| <, >		Uncontrolled state for the expanded rows of the DataTable.

DataTable.ExpandableRowWrapper

Wrapper helper for DataTable.ExpandableRow that will automatically sync specific style properties like row padding for rowDensity variant settings.

DataTableExpandableRowWrapperProps

extends, , , <>

DataTableRef

Name	Type	Description
`element`	\|	Root element ref of the component.
`getConfig`	() =>	Returns the current config of the DataTable.
`downloadData`	(subset: \| \| , excludeColumns?: []) =>	Downloads all data, the data on the current page or the selected data. Optionally, columns can be excluded by their IDs.
`scrollToRow`	(rowId: , align?: \| \| ) =>	Scrolls the table to the row with the given `rowId`, aligning the row at the given scroll position.
`openColumnSettings`	(columnSettings?: ) =>	Opens the column settings modal.
`getDisplayedRowIds`	() => []	Returns the row IDs in their current display order, reflecting active sorting and the current page when pagination is enabled.

DataTableConfig

Current configuration option that can be shared via intents.

DataTableConfig

Name	Type	Default	Description
`pagination?`	{ defaultPageIndex?: ; defaultPageSize?: ; }		Pagination props to initialize pagination.
`columnVisibility?`	[]		For specifying which columns should be visible or hidden.
`fullWidth?`	<>[]	`false`	For controlling whether to take up the full parent container width.
`fullHeight?`	<>[]	`false`	For controlling whether to take up the full parent container height.
`lineWrap?`	[]	`false`	For controlling whether the content of a cell should be line wrapped.
`fontStyle?`	[]	`'text'`	For customizing the font style across the table or within individual columns.
`resizable?`	[]	`false`	For controlling whether the columns are resizable.
`selectableRows?`	<>[]	`undefined`	For controlling whether individual rows can be selected.
`rowThresholds?`	<>[]	`[]`	For configuring the highlighting of individual rows.
`sortable?`	[]	`false`	For controlling whether the columns are sortable.
`variant?`	[]		For customizing the appearance of the table.

DataTableColumnDef

Mapping type for the columns prop that can contain either display columns or group columns.

DataTableColumnDef

Signature:

export declare type DataTableColumnDef< extends , = > = <, > | <, >;

DataTableRowData

Signature:

export declare type DataTableRowData = <, > | <> | ;

DataTableAlignmentColumnDef

Extension interface to extend the types of the columnDefinition from the TanStack table.

DataTableAlignmentColumnDef

Name	Type	Default	Description
`alignment?`	\| \|		Defines the text alignment inside the column cell.

DataTableSortingColumnDef

Extension interface to extend the types of the columnDefinition from the TanStack table.

DataTableSortingColumnDef

Name	Type	Default	Description
`disableSorting?`			Setting to true disables sorting for this column even if sorting is enabled globally.
`sortType?`	\| \| \| \| <>	`'text'`	Used to compare two rows of data and order them correctly. If a function is passed, it must be memoized.
`sortDescFirst?`			Setting to true means the first sorting direction for this column will be descending instead of ascending.
`sortInverted?`			Setting this to true means the underlying sorting direction will be inverted but the UI will not. This could be useful for example where a lower score is better.
`sortAccessor?`	\| ((row: ) => )		Optional - to be used for providing the value used for sorting. This enables the value used for sorting to be different from the value returned by the accessor. For example, if the accessor returns an object, the sortAccessor may return a number or string field within the object.

DataTableColumnSort

Rule for sorting a column.

DataTableColumnSort

Name	Type	Default	Description
`id`			Column ID.
`desc`		`false`	Descending sorting direction.

DataTableThresholdColumnDef

Extension interface to extend the types of the columnDefinition from the TanStack table to support column level thresholds.

DataTableThresholdColumnDef

Name	Type	Default	Description
`thresholds?`	<>[]		Configures the thresholds used for the cell highlighting.

DataTableColumnTypesColumnDef

Combined ruleset of column types and their matching configurations.

DataTableColumnTypesColumnDef

Signature:

export declare type sColumnDef = {
    columnType: <, >;
    config?: ;
} | {
    columnType: <, >;
    config?: ;
} | {
    columnType: <, >;
    formatter?:  | ;
    config?: ;
} | {
    columnType: <, >;
    formatter?: ;
    config?: ;
} | {
    columnType: <, >;
    formatter?: ;
    config?: ;
} | {
    columnType?: <,  | >;
    formatter?: <, >;
    config?: ;
} | {
    columnType: <, >;
    formatter?: <<, >,  |  |  |  |  | >;
    config?: ;
} | {
    columnType: <, >;
    config?: ;
} | {
    columnType?: <, >;
    formatter?: ;
    config?: ;
} | {
    columnType: <, >;
    formatter?: ;
    config?: ;
} | {
    columnType: <, >;
    formatter?: <, >;
    config?: ;
};

DataTableColumnType

Available column types for the DataTable.

DataTableColumnType

Signature:

export declare type DataTableColumnType = | | | | | | | | | | | ;

DataTableCellFormatter

DataTable column definition formatter options.

DataTableCellFormatter

Signature:

export declare type DataTableCellFormatter = <, > | | | ;

DataTableLineWrapState

Defines the shape of the LineWrap state within the TanStack tables state.

DataTableLineWrapState

Signature:

export declare type DataTableLineWrapState = <, > | ;

DataTableGlobalLineWrapAction

Global line wrap action for the DataTable to be used in the DataTable.Toolbar.

DataTableColumnFontStyleState

Defines the shape of the FontStyle state within the TanStack tables state.

DataTableColumnFontStyleState

Signature:

export declare type DataTableColumnFontStyleState = <, | >;

DataTableColumnSizingState

DataTable columnSizing state represented with a columnId key and a pixel size value.