DataTable

Use DataTable to display and manage datasets with rich interactions such as sorting, filtering, pagination, and row selection.

OverviewPropertiesUsage

Import

import { DataTable } from '@dynatrace/strato-components/tables';

Demo

This example shows the features that a dense, data-heavy table typically needs: sortable and resizable columns, column ordering, a toolbar, per-column actions, per-cell actions, interactive rows, row actions, and selectable rows with bulk actions. For less data-heavy tables, see Structured list.

Structured list

Not every table needs the full data-heavy feature set. For a leaner list of structured items, use search/filter, sortable and resizable columns, and interactive rows for an in-context detail view, and skip the toolbar, column ordering, and cell-level copy.

Controlled and uncontrolled state

Many DataTable features hold state that a user can change through the UI: column order, column visibility, column pinning, line wrap, row selection, sub-rows, pagination, and more. You pick the mode independently for each feature. All features expose the same three props: a controlled prop, a default-value prop, and a change callback.

Use uncontrolled mode unless you have a specific reason not to. It is the recommended default. The toolbar and built-in controls work on their own; you don't manage the state. Set the initial value with the feature's default-prefixed prop (for example defaultColumnOrder, defaultLineWrap, defaultSelectedRows), and the table tracks changes from there.

Use controlled mode only when you need to read or drive the state from outside the table, such as to persist it or sync it with other UI. Pass the current value with the feature's plain prop (columnOrder, lineWrap, selectedRows), hold it in your own React state, and update it from the change callback (onColumnOrderChange, onRowSelectionChange).

Caution

The two modes are mutually exclusive within a single feature: for any one feature you cannot pass both its controlled prop and its default-value prop (for example both columnOrder and defaultColumnOrder, or both lineWrap and defaultLineWrap). Different features on the same table can independently use different modes.

The following features use this pattern:

Feature	Controlled prop	Default-value prop	Change callback
Column order	columnOrder	defaultColumnOrder	onColumnOrderChange
Column visibility	columnVisibility	defaultColumnVisibility	onColumnVisibilityChange
Column pinning	pinnedColumns	defaultPinnedColumns	onPinnedColumnsChange
Column sizing	columnSizing	defaultColumnSizing	onColumnSizingChange
Line wrap	lineWrap	defaultLineWrap	onLineWrapChange
Column font style	fontStyle	defaultFontStyle	onFontStyleChange
Row selection	selectedRows	defaultSelectedRows	onRowSelectionChange
Row order	rowOrder	defaultRowOrder	onRowOrderChange
Sub-rows	openSubRows	defaultOpenSubRows	onOpenSubRowsChange
Expandable rows (row details)	expandedRows	defaultExpandedRows	onExpandedRowsChange
Active row (interactive rows)	activeRow	defaultActiveRow	onActiveRowChange
Sorting	sortBy	defaultSortBy	onSortByChange
Pagination (page index)	pageIndex	defaultPageIndex	onPageIndexChange
Pagination (page size)	pageSize	defaultPageSize	onPageSizeChange

Columns

Table size limit

The DataTable supports a maximum of 10,000 columns (including built-in columns) due to CSS Grid layout constraints. This aligns with W3C CSS Grid Layout Module recommendations. Exceeding this limit may cause rendering issues in browsers such as Firefox.

Data and column memoization

Make sure to memoize the data and columns props passed to the DataTable and use the useMemo hook so the props don't change on each render cycle.

Column definition anatomy

You define columns as an array of objects passed to the columns prop. A column is one of two kinds:

• Display columns render cell data and require an accessor that maps the column to your data.
• Group columns do not render data themselves. They group child display columns under a shared header.

Both kinds share a common base. The tables below list every public field with its type and default. The "Required by API" column marks fields the component's type requires, meaning a type error if you omit them; all other fields are optional.

Base fields (both display and group columns)

Field	Type	Required by API	Default	Notes
id	string	Yes	—	Uniquely identifies the column. The API always requires it, and it is never inferred from accessor.
header	string or () => ReactElement	No	—	A string renders a text header and is also used as the column's label. A function renders a custom header.
label	string	No	—	User-friendly name for column settings and aria-label. Only valid with a function header; not allowed when header is a string (the string is the label).
cell	string or custom cell renderer	No	—	Custom cell renderer for the column. See Customize cell rendering.
alignment	'left' | 'center' | 'right'	No	—	Text alignment inside the column's cells.
disableSorting	boolean	No	false	Disables sorting for this column even when sorting is enabled globally. See Enable sorting.
sortType	'text' | 'number' | 'textCaseSensitive' | 'datetime' or a custom function	No	'text'	How two rows are compared when sorting.
sortDescFirst	boolean	No	false	Makes the first sort direction descending.
sortInverted	boolean	No	false	Inverts the underlying sort direction without changing the UI.
sortAccessor	string or (row) => value	No	—	Value used for sorting when it differs from the accessor value. See Define sortAccessor.

Display column fields (in addition to the base)

Field	Type	Required by API	Default	Notes
accessor	string, keyof TData, or (row) => value	Yes	—	Maps the column to an entry in your data.
columnType	one of the predefined types	No	—	Renders and sorts the value by type. Pair with config or formatter depending on the type. See Define column types.
config	per-type config object	No	—	Configuration for the chosen columnType.
formatter	per-type formatter options	No	—	Formatting options for the chosen columnType.
thresholds	DataTableColumnThreshold[]	No	—	Thresholds used for cell highlighting. See Highlight cells.
disableColumnHiding	boolean	No	false	Prevents the column from being hidden via column actions or the toolbar. See Add column visibility UI.
width	number, `${number}fr`, 'auto', 'content', or { type: 'auto' | 'content'; maxWidth?: number }	No	—	Preferred column width. See Column sizing.
minWidth	number	No	—	Absolute minimum width.
maxWidth	number	No	—	Absolute maximum width.

Group column fields (in addition to the base)

Field	Type	Required by API	Default	Notes
width	number or `${number}fr`	No	—	Preferred or initial width of the group column.
columns	array of display columns	No	—	The child display columns contained in this group.

Group columns inherit all base fields, including header/label, cell, alignment, and the sorting fields.

Define column types

Prefer a columnType over a custom cell renderer. Assigning a columnType gives you correct rendering, formatting, sorting, and alignment for common data without writing any custom code. Reach for a custom cell only when no built-in type fits your data. See Customize cell rendering.

You can assign a predefined type to every column. Column values render and sort according to their type. Depending on the type, you refine the output through either a config object or a formatter option, never both for the same type (the exception is text, which accepts both). The table below lists each type, the value it expects in the cell, and how to configure it.

columnType	Expected cell value	Configure with	Notes
text	string	config ({ detectLinks }) and formatter (number/unit format options)	Default rendering. URLs are detected and rendered as links unless detectLinks is false. Set detectLinks: false when cell values come from untrusted or user-controlled data.
datetime	ISO 8601 string, epoch milliseconds (number or numeric string), or Date	formatter (FormatDateOptions or a display mode)	See Format datetime values for coercion rules.
number	number or numeric string	formatter (number/unit format options)	Locale-aware numeric formatting.
long	number, bigint, or numeric string	formatter (subset: locale, fraction and significant digits, grouping)	For large integer values.
bit	number or numeric string	formatter (number/unit format options)	Formats the value as an information size (bits and bytes).
currency	number or numeric string	formatter (FormatterCurrencyOptions)	Renders without a currency symbol unless one is provided in the formatter.
markdown	markdown string	config ({ customComponentMappings })	Override tag rendering with customComponentMappings.
log-content	string	config ({ truncationLimit })	Highlights and truncates at 1,000 characters by default. This limit can be changed with the truncationLimit property in the column config. Any trailing whitespaces are removed after truncation.
sparkline	Timeseries[]	config (DataTableSparklineColumnConfig)	See Sparkline chart.
meterbar	number, or multi-segment meter data	config (DataTableMeterbarColumnConfig)	See MeterBarChart.
gantt	Gantt row data	config (DataTableGanttColumnConfig)	See Gantt chart.

Any config or formatter option you omit falls back to its documented default, so you only set the options you want to change.

Format datetime values

A datetime column coerces the cell value with new Date(...), so you do not need to convert it yourself. It accepts:

• An ISO 8601 string, for example '2024-01-15T09:30:00Z'.
• Epoch milliseconds as a number, for example 1705311000000.
• Epoch milliseconds as a numeric string, for example '1705311000000'.
• A Date instance.

Caution

A numeric string is always interpreted as epoch milliseconds, not as a calendar year. For example, '2024' renders as 2 seconds after the Unix epoch (1 January 1970), not the year 2024. Pass a full ISO 8601 string when you mean a calendar date.

To control how the value is displayed, pass a formatter (either FormatDateOptions or a display mode). The datetime type does not take a config object.

Note

Nanosecond precision is only supported when the input includes sub-second time information, such as hh:mm:ss.sssssssss. This typically includes the ISO 8601 strings with fractional seconds. In all other cases, the precision is limited to milliseconds due to the constraints of the JavaScript Date type.

Caution

The date column type is deprecated. Use datetime with formatter: 'date' instead.

Column sizing

To set default column widths, use defaultColumnSizing as a DataTable prop. This property requires an object that maps column IDs to their respective widths in pixels.

Control column sizing

To enable column resizing, set the resizable prop on the table.

Use onColumnSizingChange and columnSizing to track column widths. The callback receives the current widths of all columns. The example below resets the email column to 300px on resize.

Note

As soon as a resizing event starts, all columns with a fraction width or no defined width will be locked to their current width.

Control column width behavior

The DataTable lets you control column width behavior in different ways:

• Fixed width in pixels: You can set a fixed width for the column by specifying the exact number of pixels. For example, width: 100 would set the column to 100 pixels wide.

• Minimum and maximum width constraints: You can specify minWidth and maxWidth in the exact number of pixels to set width boundaries for a column. maxWidth will not work on fraction widths, to avoid circular width calculations.

• Flexible width in fractions: You can set a flexible width for the column using a fractional unit. This is done by specifying the width as a fraction, like width: '1fr'. This approach allows the column to take up a proportion of the available space, adjusting dynamically based on the total space available and the fractional values assigned to other columns. For instance, if you have two columns and set their widths to width: '1fr' and width: '2fr', the second column will be twice as wide as the first one.

• Fit to content: To make a column's width automatically adjust to fit the content of its cells, set the column's width property to content.

• Shared leftover space: If you want certain columns to share the leftover space among themselves set the option to a fraction value for those columns. See the example in allow certain columns to occupy the remaining space.

• auto will hand over control about the column size to the browsers grid layout and follows the layout engine and specification of the browser. Reference MDN grid documentation for details.

• You can also set a maximum width for the column when using either of the previous two options by configuring it like this: {type: 'auto' | 'content', maxWidth: 100}. Here, maxWidth specifies the maximum width in pixels.

Allow specific columns to occupy remaining space

Your DataTable may have columns that are more important than others. Between these columns, you can spread the remaining space within the table by providing a fraction width like 1fr for the columns. In the example below the columns Memory Total and Timestamp occupy each one fraction of the remaining space, and the Price column takes up two fractions.

Accessors

Accessors specify how to retrieve column data from your data structure. Accessor strings that contain dots allow you to retrieve nested data. If the actual property key contains a dot, you can escape an accessor by enclosing the string in square brackets. It is also possible to specify an accessor function that returns the value you want to extract. See the code below for examples of each.

Define header groups

It is possible to define header groups by providing a nested array of columns via the columns property in the column definition. Currently, a header group can only contain columns and not another nested header group.

Customize column header

To customize the column header, simply use the header property within the column definition. Assign a function to this property that returns a customized JSX element.

You can also use the optional label property for accessibility and for elements such as column settings. If the label isn't defined, the column's id will be used as a fallback.

As with cells, to maintain the default header styling, you must wrap each return statement with the DataTable.DefaultHeader element. The DataTable.DefaultHeader also supports className and style props, allowing further customization of the header appearance.

Caution

Avoid placing interactive elements within a custom-rendered header if column actions are already configured for the same column. Since a column header with column actions already includes a button element, adding additional interactive elements inside may result in unexpected behavior.

Add column visibility UI

The column visibility feature allows you to specify which columns should be visible and which should be hidden. By default, all columns are visible. To allow the user to show and hide columns, configure the corresponding UI elements in the table. Column visibility can be controlled through either the DataTable.Toolbar or the DataTable.ColumnActions.

Use the DataTable.VisibilitySettings component inside the toolbar, to render a trigger for the column settings and enable the visibility settings. To let users hide a column via the column actions, include the TableActionsMenu.HideColumn as a menu item.

To prevent a specific column from being hidden, set the disableColumnHiding prop to true in the column definition. For header groups, the group itself cannot be hidden if at least one of its child columns has disableColumnHiding prop set to true.

Use uncontrolled column visibility

This is the recommended default. Use defaultColumnVisibility to hide specific columns by default without giving users runtime control. Provide an object with column IDs as keys and boolean values indicating visibility (true = visible, false = hidden).

Use controlled column visibility

To control column visibility, use the columnVisibility prop to provide the visibility state, along with the onColumnVisibilityChange callback.

Reset column visibility

Column visibility can be reset using the column settings overlay trigger in the toolbar. Use resetColumnVisibility on DataTable.VisibilitySettings to define a custom reset state. In uncontrolled mode, visibility resets to defaultColumnVisibility if present, or the original state. The reset button is disabled when the current state matches the default.

Limit number of visible columns

Use the visibleColumnLimits prop on DataTable.VisibilitySettings to warn or block users when too many columns are visible at once. Both thresholds are exclusive — a value of 2 means more than two visible columns triggers the message.

• Warning threshold — a non-blocking message appears in the column settings footer.
• Error threshold — a blocking error message appears and the "Apply" button is disabled until the user hides enough columns.

A minimum of one visible column is always enforced. Clicking "Apply" with zero columns selected shows an error and keeps the modal open.

Note

Values less than 1 for either threshold are ignored. When both thresholds are configured, maxWarning must be strictly less than maxError; otherwise the warning threshold has no effect.

Open column settings programmatically

You can open the column settings programmatically using the openColumnSettings() function. By default, the settings modal is opened with the same options (column visibility, column order and/or column pinning settings) as specified in the DataTable.Toolbar. However, you can override these options via the function's parameters. This is particularly useful if the DataTable is used without its built-in toolbar. To define a custom reset state, pass an object instead of true for the corresponding feature parameter.

Enable column ordering

To enable column ordering, set the columnOrdering prop to true. When column ordering is enabled, column headers are draggable — hold down the mouse on a column header and release it at the destination to move it. This is also possible using touch (press, hold, scroll the table, and release).

In addition to drag and drop, the column order can be adjusted using corresponding UI elements in the table. Use the DataTable.ColumnOrderSettings component within the toolbar to render a trigger for the column settings and enable the column order settings. To allow users to move a column via the column actions, include the TableActionsMenu.ColumnOrder as a menu item.

Use uncontrolled column order

This is the recommended default. Use defaultColumnOrder to define the initial column order as an array of all column IDs in the desired order. If you don't specify any order, the initial order is inferred from the column definition.

The defined column order should include all columns and ensure that child columns with the same parent are not separated. To avoid invalid configurations, the passed column order is validated and corrected if necessary. The following issues will be resolved:

• duplicate column IDs
• column IDs that don't exist in the column definition
• missing column IDs
• column IDs within the same group that are not adjacent

Use controlled column order

To control column order, use the columnOrder prop to provide the desired order, along with the onColumnOrderChange callback.

Reset column order

Column order can be reset using the column settings overlay trigger in the toolbar. Use resetColumnOrder on DataTable.ColumnOrderSettings to define a custom reset state. In uncontrolled mode, order resets to defaultColumnOrder if present, or the original order. The reset button is disabled when the current state matches the default.

Enable column pinning

Column pinning enables individual columns to remain pinned to the left or right edge of the table, improving visibility for important data. To enable column pinning, set the columnPinning prop to true.

Default pinned columns

The built-in columns for drag and drop row ordering, row selection, expandable rows, and row actions are always pinned by default and cannot be unpinned, regardless of whether column pinning is enabled.

Limitations

While ordering is supported for unpinned columns, pinned columns cannot be re-ordered.

To let users pin and unpin columns via the column actions menu, use DataTable.ColumnActions and include TableActionsMenu.ColumnPinning as a menu item. To render a trigger for the column settings and enable column pinning settings, use DataTable.ColumnPinningSettings inside DataTable.Toolbar.

Use uncontrolled column pinning

This is the recommended default. Use defaultPinnedColumns to define the initial pinned state. The object has two optional properties:

• left: An array of child column IDs to pin to the left side.
• right: An array of child column IDs to pin to the right side.

Use controlled column pinning

To control column pinning, use the pinnedColumns prop to specify which columns should be pinned to the left or right. Provide an onPinnedColumnsChange callback to handle updates.

Customize the label of the column settings trigger

Adding the DataTable.ColumnSettingsTrigger component inside DataTable.Toolbar in combination with DataTable.VisibilitySettings, DataTable.ColumnOrderSettings, or DataTable.ColumnPinningSettings allows you to configure a custom text that will be displayed as the trigger label for the column settings.

Rows

Enable interactive rows

To activate interactive rows in DataTable, you must configure the interactiveRows prop on the table. This will make the entire row highlightable and selectable by the user. A row can be activated either by clicking on it or focusing it.

To activate a row initially without controlling activation yourself, use the defaultActiveRow prop instead. It takes the rowId of the row to activate, and the table manages activation from there. As with every feature, defaultActiveRow is mutually exclusive with the controlled activeRow prop. See Controlled and uncontrolled state.

Disable auto-activation for interactive rows

By default, interactive rows are automatically activated when they are focused using the keyboard. However, if you want to disable automatic activation, you can do so by setting interactiveRows={{ autoActivate: false }}. This allows you to activate a specific row by pressing the Enter key.

Control interactive rows

When you want to control which row is currently activated, you use the activeRow prop. This prop allows you to specify which row should be marked as active at any given time. To make this dynamic, you can also provide a handler function for the onActiveRowChange callback. The rows themselves are identified by the rowId, which can be customized as well. For details on how to do this, reference the control row IDs section.

Note

In addition to the interactiveRows prop, it is advised to debounce the row activation when auto-activation is enabled. This allows you to specify by how many milliseconds the activation of a row should be delayed for better performance. By default, the row is immediately activated.

Provide sub-rows

The DataTable component offers the capability to include sub-rows.

1. Enable sub-rows - To activate this functionality, the subRows prop must be defined. This prop accepts either a boolean value, which activates the default sub-row view, or an object configuration.

2. Provide sub-rows data - Simply define the respective sub-row data by adding the subRows property to the parent row's data definition. The specified sub-rows must have the same data structure as the parent rows and can be nested over multiple levels.

Use the defaultOpenSubRows prop to specify sub-rows that are already open upon initial rendering. The onOpenSubRowsChange handler allows you to react to changes in the currently open sub-rows.

The defaultOpenSubRows/openSubRows expects the id of the row (unless otherwise specified, this is the array index of the data) along with a boolean whether or not it's opened. Nested sub-rows are separated with a dot by default, so '0.0' would be the first row's first sub-row. For details on how to customize row IDs, reference the control row IDs section.

Note

The column containing the sub-row indicator should always be left aligned.

Configure sub-rows

To further configure sub-rows, you can pass a configuration object to the subRows prop, using the following options:

1. accessor—Provides a custom accessor that retrieves the corresponding sub-rows for each row from the data.

2. subRowColumnId—Specifies the ID of the column in which to inject the sub-row indicator. By default, this is the first visible column.

3. disableSubRow—Accepts a function that evaluates whether or not to disable the sub-row trigger for a given row.

Control sub-rows

To control the state of the open sub-rows, provide the desired rows using the openSubRows prop along with a handler for the onOpenSubRowsChange callback.

Enable expandable rows

Expandable rows allow you to add additional data to a row. This information is only visible when the row is expanded.

Wrap the expandable row content with DataTable.ExpandableRowWrapper. It automatically syncs padding with the table's row density setting and provides the required role="cell" for correct ARIA grid semantics.

The default state of each row can be controlled using the defaultExpandedRows prop on the DataTable.ExpandableRow slot child. To control each row over the lifetime of the table use the expandedRows property and the onExpandedRowsChange callback.

In this example, every second row is disabled for demo purposes.

Enable row selection

To activate row selection in DataTable, you must configure the selectableRows prop on the table. Assigning a boolean value to this prop will add a checkbox in the first column across all rows, enabling selection functionality. Alternatively, selectableRows can be defined as an object, allowing for further customization through the following options:

1. disableRowSelection - Accepts a function that takes the row's data as input and returns a boolean value. If it returns true, the row will be non-selectable; if false, the row will be selectable.

2. selectAllBehavior - A string value that specifies whether the Select all action applies to only the currently visible rows on the page or to all rows within the table.

3. limit - A positive integer that sets the maximum number of selectable rows.

Note

If a limit is specified, rows will still be de-selectable even when disableRowSelection is enabled. This prevents inconsistent states where the selection limit is reached but all selected rows are disabled, making it impossible to adjust the selection.

To set up rows that should be selected as soon as your table loads, you need to use a prop defaultSelectedRows. This option should be assigned an object that specifies which rows are selected. Each row is identified by its id, and the selection state is indicated by a boolean value (true for selected, false for not selected). To ensure correct selection behavior when updating table data dynamically (e.g., adding or removing rows), make sure to provide unique row IDs.

It is possible to select or deselect multiple rows at once by first clicking on a start row, then holding the Shift key while clicking on an end row.

Control row selection

To control row selection, pass a selectedRows object (row IDs as keys, booleans as values) and an onRowSelectionChange callback.

Control row IDs

Provide a stable, unique, non-PII rowId for any table that keeps per-row state: row selection, sub-rows, row expansion, row ordering, scroll-to-row, or interactive rows. The rowId function receives a row's data and returns its identifier, for example rowId={(row) => row.id}.

By default, rows are identified by their index in the data array. Because the index tracks a row's position rather than its identity, the default breaks row-keyed state whenever the data is reordered or filtered: selection, expansion, and open sub-rows attach to the wrong rows or are lost, since the row at a given index changes. Provide an explicit rowId to keep that state attached to the correct row.

Caution

Derive rowId from a stable, non-PII key such as a database ID. Do not key on personal data (for example email) or on any value that can change while the table is mounted. A mutable key resets the row's state when the value changes, and a PII key leaks personal data into row identifiers. The rowId values are rendered as data-rowid attributes in the DOM and are therefore visible to any page-level script, browser devtools, and analytics or session-recording tooling.

When providing a custom row id function, for sub-row identification, the row IDs will be separated by ↳ character.

Configure row order

To enable row ordering, set the rowOrdering prop to true. Note that if you are providing your own row IDs you need to specify the rowId prop.

For uncontrolled, you can optionally use defaultRowOrder to define the initial row order, by providing an array of all row IDs in the desired order. If you don't specify any order, the initial order is inferred from the order in data.

To enable drag and drop row ordering, you can pass a configuration object to the rowOrdering prop with the option enableDragAndDrop set to true. Additionally, the option disableRowDragAndDrop accepts a function that takes the row's data as input and returns a boolean value. If true is returned, drag and drop will be disabled for the row, otherwise it is enabled.

Additionally, the lockDisabledRows option ensures that rows with disabled drag and drop remain fixed in place when sorted to the start or end of the table. Consequently, other rows cannot be dropped above or below these locked rows. If set to true, the rows are locked when sorted to the start or end of the table. Optionally, lockDisabledRows can be set to 'start' or 'end' if rows should be locked solely at the start or at the end.

To explain why a drag handle is disabled, provide the disabledRowDragAndDropTooltip option. Pass a string to show the same tooltip on every handle disabled via disableRowDragAndDrop, or a function that receives the row data and returns a per-row message (return undefined to show no tooltip for that row). When the table is sorted, drag and drop is disabled for all rows and a built-in default tooltip is shown instead, taking precedence over this value.

When drag and drop is enabled, a drag handle for every row will be rendered in the first column. To move a row to another position hold down the mouse on the drag handle and then release it when you have moved it to its destination. This is also possible using touch (press, hold and release).

Alternatively, using the keyboard use Tab to focus the drag handle and then press Space once. Use ArrowUp and ArrowDown to move the row to its destination and then press Space again to release it. To cancel, press Escape.

If you are using row ordering with pagination and modifying the data, you should set autoResetPageIndex to false to prevent the pagination jumping back to the first page. If you are only modifying the rowOrder then there is no need.

Control row ordering

For controlled, the rowOrder prop holds the order of the rows. This is an ordered set of string IDs of the rows. It's up to you to use the onRowOrderChange event to update row order and optionally update the original data as you see fit.

Order rows with disabled drag and drop

To facilitate disabling of drag and drop functionality for certain rows, we provide the useLockedRowOrder hook. This hook disables drag and drop functionality for the specified rows and locks them at the start or the end of the table. It takes an object with the following options:

• initialRowOrder - An ordered set of row IDs representing the initial row order.
• lockedRows - A set of row IDs for which drag and drop is disabled and should be sorted.
• position - The position where the rows with disabled drag and drop should be grouped. Use 'start' to position the rows at the start of the table and 'end' to group them at the end. By default, the rows are positioned at the start.
• disabledRowDragAndDropTooltip - An optional tooltip shown on the disabled drag handles of the locked rows. Pass a string to reuse the same tooltip for every locked row, or a function that receives the row data and returns a per-row message.

Highlight rows

You have the option to highlight an entire row. The thresholds for row highlighting can be configured at the table level using the rowThresholds prop. This prop accepts the same options as the cell threshold with the addition of a type. However, it also allows you to specify which cell value should be used for the row threshold by defining an accessor or id.

You can add either a single rule or multiple rules to the threshold definition. If you choose to use multiple rules, you can define different thresholds for different cell values within a row. However, regardless of which threshold is met, the same color will be applied to the entire row.

The type determines how the highlighted row will be visually marked. The pill type accepts a color and shows a marker on the start of the row. The highlight type accepts color and backgroundColor and changes the textcolor and background color of all cells in a row.

Define custom comparator

You can define a custom comparator function to evaluate the threshold using your own logic. This function should return a boolean. If it returns true, the threshold is applied; if false, it's not. The function receives the row data as input. Please note that this custom comparator function will not be serialized for sharing via intents.

Cells

Keep default styling in custom renderers

Prefer a columnType when one fits your data, so you rarely need custom rendering. When you do write a custom cell or custom header renderer, wrap the returned element in DataTable.DefaultCell (for cells) or DataTable.DefaultHeader (for headers) to preserve the default styling and layout. Both also accept className and style for further customization. See Customize cell rendering and Customize column header.

Format cell data

You can format the cell data via the column definition, by specifying the column property formatter. For configuration, use the corresponding options from '@dynatrace-sdk/units', i.e. FormatOptions for numbers, FormatDateOptions for dates, and DataTableCellFormatterCurrencyOptions for currencies.

Datetime columns also accept the shorthands date, time, or datetime as a formatter value to conveniently show only the date portion, only the time portion, or both.

Customize cell rendering

To customize the cell rendering, pass the corresponding function to the cell prop in the column definition. If you want to maintain default cell styling, you need to wrap each return statement with DataTable.DefaultCell element. Also, DataTable.DefaultCell supports className and style props, allowing further customization of the cell appearance.

Within the function passed to the cell property, you can access the cell's value, rowIndex, rowData and rowId. Additionally, the isLineWrapped prop provides the current line wrap state of the column in which the cell is rendered.

Moreover, a format, a formatLogContent and a detectLinks function are available:

• format - Allows you to apply the formatter options that have been configured for that cell (either via the column definition or via the columnType).
• formatLogContent - Formats the given text as a log output.
• detectLinks - Automatically detects links in the given text and renders them as such using the ExternalLink component.

Highlight cells

Cells can be highlighted in different colors depending on the specified threshold. In the column definition, you can configure the threshold for every column. You can specify value, comparator, color, backgroundColor, and accessor. The color will be applied to the cell text and backgroundColor to the cell background. The accessor prop can also be used for providing custom accessor for the cell value that can be used for threshold calculations.

If the column cell value passed is a string (text), the threshold comparator can be set with either an equal-to or not-equal-to operator. On the other hand, if your value is a number, you can use one of the following operators:

• greater-than
• less-than
• greater-than-or-equal-to
• less-than-or-equal-to
• equal-to
• not-equal-to

If the value of the cell is an object, the threshold accessor could return a specific attribute within the object, such as a number or string. This allows for more complex threshold calculations based on specific attributes of object values.

Note

When multiple thresholds are applicable (evaluate to true) the final valid threshold has priority. Also, if both row and column thresholds apply to a cell, the column threshold takes precedence over the row threshold.

Layout and format

Customize visual representation

The variant prop allows you to customize the appearance of the DataTable by setting the configuration options available in DataTableProps['variant'].

Row density

The rowDensity option adds spacing around the content within a row. By default, rowDensity is set to default, which represents a medium spacing. If the option is set to condensed, the spacing becomes minimal while comfortable represents the maximum spacing.

Row separation

The rowSeparation option determines how rows should be separated visually. By default, rowSeparation is set to horizontalDividers which adds lines between the rows. zebraStripes additionally provides alternate row coloring. By setting rowSeparation to none, the rows are not separated visually.

Vertical dividers

The verticalDividers option determines whether columns should be separated visually. By default, false is set which does not separate the columns within a DataTable. If verticalDividers is set to true, lines are added between the columns.

Borders

The contained option provides a border for the DataTable. By default, contained is set to true to display the border. If false is set, no border is added.

Hide header

You can customize the DataTable's appearance to hide the entire header, by setting headers: 'hidden'.

If you choose to hide the header, please note that the ability to sort columns by header, as well as any actions that could be triggered with column headers, won't be available.

Vertical alignment

Use the verticalAlignment option to configure the vertical alignment of the cell content. The alignment options are top, center, and bottom. It is also possible to configure the vertical alignment for header and body cells separately. By default, all cell content is top-aligned.

Enable full width

By default, DataTable expands to its parent's full width, but this breaks inside a flex container. Add the fullWidth prop to restore full-width behavior.

When this value is not set, it will grow as needed based on the number of columns and their width.

Enable full height

By default, the DataTable grows as needed based on the number of rows. When placed inside a container, the table's height can be the same as its parent or smaller depending on how many rows would be visible inside the parent container. If you wish to ensure that the table always occupies the full height of its parent element, you can include the fullHeight prop when using the DataTable component.

Note

Keep in mind that the fullHeight prop should be applied carefully. Setting fullHeight on the table that is placed inside a container that takes up the height of the page can lead to serious performance issues. It is therefore advisable to use the prop in combination with a well-defined container height.

Fonts

The DataTable allows for the customization of font styles across the entire table or within individual columns. This can be achieved by configuring it in the table variant options or the column definition.

Text alignment

If no column type is set, text within the cell is left-aligned by default. To explicitly change the default alignment, use the alignment property in the column definition.

Enable line wrap

The DataTable component offers flexible options for managing the line wrapping of cell content within your table. Here’s how you can control it:

• Global line wrapping configuration - To activate line wrapping across all columns, set the defaultLineWrap or lineWrap property to true.

• Column-specific line wrapping - If you prefer to enable or disable line wrapping for certain columns, pass an object to the defaultLineWrap property. Use column IDs as keys and set their values to true (to enable) or false (to disable).

• User-Controlled Line Wrapping - Toggle via column actions: Incorporate TableActionsMenu.LineWrap into your table to allow users to switch line wrapping on or off for specific columns through the column actions menu.

• User-Controlled Line Wrapping (entire table) - Toggle via a DataTable.Toolbar action: Incorporate DataTable.LineWrap into you tables DataTable.Toolbar component to allow users to switch line wrapping on or off for all columns.

Props for line wrap control

The DataTable also provides properties to manage line wrapping state:

• defaultLineWrap- Defines the initial state of line wrapping when the table loads.
• lineWrap - Sets the line wrapping state.
• onLineWrapChange - A callback function that triggers when the line wrapping state changes.

Note

The DataTable uses column virtualization to optimize performance. With line wrap enabled, row heights might change while scrolling horizontally as wrapped content becomes visible.

Export configuration

The DataTable's configuration can be exported at any time for various purposes, such as sharing the configuration with other applications through an intent. The current configuration can be retrieved by creating and assigning a ref to the corresponding ref property of the DataTable, and then calling ref.getConfig() function.

Note

When the getConfig function is invoked, a snapshot of the serialized configuration is returned. As such, it will not change if the DataTable's configuration is subsequently modified. It is recommended to ensure that you apply all your required configurations to the DataTable before calling this function.

Import configuration

The configuration provider for the DataTable accepts a JSON object and also accepts a string as input for importing a serialized configuration. When a string is provided, it is internally parsed and applied as the DataTable configuration.

Note

If the configuration provided does not match the properties of the DataTable configuration, any unknown properties will be ignored. Additionally, if required properties are not provided, or the given config is invalid, default values will be applied.

Note

We do not support dynamically changing default values, as doing so goes against their intended purpose. Therefore, changing the values of defaultPageSize or defaultPageIndex in the configuration for pagination will not update the corresponding props in the DataTable. If you need to set default values, it is recommended to ensure that you always do that before importing the configuration.

Note

Due to potential version mismatches in DataTable packages used in different applications, importing a configuration from another application may produce an unintended outcome and not result in a perfect match.

Navigation

Enable pagination

To enable pagination add the DataTable.Pagination component to your table.

Change page size

The default page size options are 10, 20, 50, 100, 250, 500 and 1000. To customize these options, use the pageSizeOptions prop, which allows you to pass the desired page sizes as an array. Please ensure that the passed (default) page size aligns with the defined options. The table will not sanitize page sizes that do not exist in the options.

Set the initial page

To choose the starting page size or page index without controlling pagination yourself, use the defaultPageSize and defaultPageIndex props. The table manages pagination state from those initial values. As with every feature, these uncontrolled props are mutually exclusive with their controlled counterparts pageSize and pageIndex. See Controlled and uncontrolled state.

Control pagination

It is also possible to control the page size and the page index using the pageSize and the pageIndex props together with the onPageSizeChange and the onPageIndexChange callbacks.

Use server-side pagination

In addition to the regular client-side pagination, it is also possible to use server-side pagination. For server-side pagination, pass the data for the respective page to the table and update the enablePrevPage and enableNextPage flags accordingly. Upon navigating to another page or changing the page size the corresponding callbacks as well as the onPageChange callbacks provide the updated values, allowing you to retrieve the corresponding data.

By default, the server-side pagination does not display the indicator for which page out of the total number of pages is currently shown, i.e. "Page 1 of 30", in the bottom right corner. This is because the total number of rows is unknown since only the data for the respective page is passed. However, adding the totalRowsCount prop enables this information to be displayed as well.

Scroll to a given row

The DataTableRef provides the scrollToRow method, which enables programmatic scrolling to a specific row in the table, identified by its rowId. If pagination is enabled, the table first navigates to that page if necesssary.

You can configure the scrollToRow method to align the target row to the start, center, or end of the table's visible area by passing the desired alignment as a second argument. If no alignment is specified, the default alignment is start.

If the target row is a sub-row, the parent row must be expanded beforehand. Otherwise, the sub-row will not be accessible for scrolling.

States

Loading state

Use the loading prop to display a loading indicator. This can be used for the initial load where columns and data are not yet available, when waiting for data to be fetched or when performing actions such as moving to the next page. The loading indicator will adjust accordingly depending on whether columns and data are already loaded.

Initial table load

Load data

Customize empty state

The DataTable.EmptyState component allows you to configure a custom empty state that will be displayed if no data or no columns are available.

Actions and intents

Configure column actions

The column actions are represented by a button in a column header that opens a drop-down menu. Within the menu, you can include various functionalities allowing end users to perform actions related to the columns.

The drop-down menu also appears on right-click, providing additional access to defined cell or column actions. This feature adds a layer of functionality, allowing users to access more options directly from the table.

To configure column actions you need to define the DataTable.ColumnActions slot component.

The DataTable.ColumnActions slot accepts its content in two forms. You can pass a TableActionsMenu directly as children when the actions are the same regardless of the column. Alternatively, you can pass a function that receives the current column's details and returns a TableActionsMenu; use the function form when the actions depend on the column, for example to derive column-specific labels or handlers. In either case, the TableActionsMenu defines the user actions for the column and should include the TableActionsMenu.Item slot component to represent a single action item.

This is similar to the TableActionsMenu.Link component, which renders a defined link element as a menu action item. You can assign an onSelect event as a property of this component. This will execute the specified action upon user interaction.

Additionally, you can use the TableActionsMenu.Prefix slot to place an icon on the left side of the action item, while the TableActionsMenu.Suffix slot lets you place an icon on the right.

For cross-app navigation, the TableActionsMenu.Intent slot component can be used to define an intent item. See the section Configure intents to learn more.

Use the predefined TableActionsMenu.CopyItem slot component to let users copy column values to the clipboard. To group items semantically within the menu, use TableActionsMenu.Group and TableActionsMenu.Label. See the documentation for more information about grouping items in menus.

The user action menu supports multi-level menus, allowing you to configure sub-menus using the slots TableActionsMenu.SubMenu, TableActionsMenu.SubContent, and TableActionsMenu.SubTrigger.

To configure actions for a particular column, its ID must be provided to the column property. Omit the DataTable.ColumnActions column ID to make default actions apply to any columns without explicitly configured column actions.

Configure row actions

Configuring row actions in a DataTable involves adding an action column to the far right of the table. This column should contain buttons, menus, or links that allow users to perform actions specific to each row.

To set up row actions in the table you need to locate DataTable.RowActions slot component as a DataTable child. This component takes a function that receives the current row’s data as well as some meta information about the tables layout as its parameters. This allows you to access and manipulate the data for that specific row. The function needs to return a ReactNode that defines the user actions for the row. Most likely you want to add some primary actions as buttons and secondary actions into a menu.

Configure selected row actions

The DataTable.SelectedRowsActions component provides an additional slot where you can perform actions simultaneously on one or more selected rows. Actions passed to this slot are placed right above the table header and are shown only when at least one row is selected. If table actions exist, they are hidden when the selected rows actions menu is active.

Configure cell actions

The cell actions are represented by a button in a table cell that opens a drop-down menu. Within the menu, you can include various functionalities allowing end users to perform actions related to the cells.

The cells within the DataTable allow custom interactive elements, allowing you to include links or other actionable elements within cells with cell actions defined.

To configure cell actions you must define the DataTable.CellActions slot component. There's a function within the DataTable.CellActions tag that returns a TableActionsMenu object that defines the user actions for the cell. It should also include the TableActionsMenu.Item slot component to represent a single action item, similar to the TableActionsMenu.Link component, which renders a defined link element as a menu action item.

You can assign an onSelect event as a property of this component to execute the specified action upon user interaction. Additionally, the TableActionsMenu.Prefix and TableActionsMenu.Suffix properties can be applied to the item to add an icon on the left or right side of the action trigger element.

For cross-app navigation, the TableActionsMenu.Intent slot component can be used to define an intent item. See the section Configure intents to learn more.

To enable users to copy cell values to the clipboard, use the predefined TableActionsMenu.CopyItem slot component.

To group items semantically within the menu, use TableActionsMenu.Group and TableActionsMenu.Label. For more information about menu groups and labels, refer to the documentation. The user action menu supports multi-level menus, allowing you to configure sub-menus using the slots TableActionsMenu.SubMenu, TableActionsMenu.SubContent, and TableActionsMenu.SubTrigger.

To assign actions to cells in a specific column, you must specify the unique identifier (ID) of the column. This ID is used as the value for the column property within the DataTable.CellActions configuration. It tells the DataTable which column to associate the actions with. Omit the column ID to have default actions apply to any columns without explicitly configured actions.

Configure table actions

The DataTable.TableActions component provides an additional slot where you can place custom actions that affect the entire table. Actions passed to this slot are placed right above the table header.

Download data

The DataTable.Toolbar has an item DownloadData which enables the downloading of the table data. Depending on your table configuration, you can choose between downloading all data, downloading the current page and only downloading the selected rows. Only visible columns are included when downloading data. To exclude specific columns, provide an array of column IDs to the excludeColumns prop in the DownloadData slot of the toolbar.

Note

Columns with sparkline column type are always excluded from the downloaded data, as sparkline visualizations cannot be meaningfully represented in CSV format.

Note

CSV data is generated in the browser. For very large tables (with many rows or large cell content), exporting all rows may slow down the browser or even cause it to crash. In such cases, prefer exporting only individual pages or selected rows.

If the table has sub-rows, an additional column index is added to the downloaded table data, indicating the row's indentation level. For example, the first row has index 1, its first sub-row has index 1.1 and so on. Sub-rows are included in the downloaded table data regardless of whether they are currently open or closed. When downloading the current page, all sub-rows of the rows on that page are included, even if some sub-rows are actually rendered on following pages.

When downloading, double quotes are escaped and if the text has commas, new lines, double quotes, tabs or carriage returns, the entire line is enclosed in double quotes. In addition, values starting with =, +, -, @, \t and \r are escaped with a single quote to mitigate CSV injection. Also note that if you have custom cells you can provide a toString function on the data object for customized download output.

The DataTable.DownloadData slot also provides the onDownloadData callback that fires once data has been downloaded. The callback's subset parameter indicates whether all data, the current page, or the selected rows were downloaded. The excludedColumns parameter indicates which specified columns were excluded from the download.

Use the fileName prop on DataTable.DownloadData to control the name of the downloaded file. Pass a static string for a fixed name, or a callback that receives the downloaded subset ('all', 'page', or 'selected') and returns the name which is useful for embedding the subset or a live timestamp in the file name. If fileName is omitted, the file falls back to table-data.csv. A missing .csv extension is appended automatically, and invalid characters (anything other than letters, digits, -, and _) are stripped.

Note

Firefox may ignore the file name and fall back to table-data.csv. The download still succeeds in all cases.

The preferred way is to use the toolbar item as above, but if you have some good reason not to use the toolbar you can create your own download trigger which programmatically calls DataTableRef.downloadData() with one of the parameters 'all', 'page', or 'selected'. You can exclude specific columns by providing an array of column IDs to the excludeColumns parameter, and set the file name via the fourth argument which is always a plain string, resolved independently of any fileName set on the DataTable.DownloadData slot.

Override CSV header names

Use the formatDownloadHeader prop on DataTable.DownloadData, or pass it as the third argument to DataTableRef.downloadData(), to rename column headers in the downloaded CSV. The callback fires once per visible leaf column and receives a context object with three fields:

• columnId — the stable column identifier from the column definition.
• leafHeader — the leaf column's resolved header string (falls back to the column's id when the header is a function or undefined).
• groupHeader — the parent group column's resolved header string, or undefined for top-level columns (falls back to the group column's id when the group header is a function or undefined).

Return a string to use as the CSV header, or return undefined to keep the default header for that column. The default header for a top-level column is its header string (or id if undefined); for a nested column it is the dot-joined path, e.g. Group.Column.

Enable sorting

By using the sortable flag, you can enable sorting for the entire table. Additionally, you have the option to disable sorting on a per-column basis by configuring the disableSorting property in the column definition. For meterbar columns, sorting is disabled by default and can be enabled explicitly by setting disableSorting to false. Please note that sorting is not supported for MultiMeterBarChart.

By default, the first sorting direction is ascending. If you want to change that, you can configure the sortDescFirst flag for the individual column. There is also a possibility to invert the sorting logic. Setting sortInverted to true means the underlying sorting direction will be inverted, but the UI will not change. This could be useful, for example, when a lower score is better. Values like null and undefined will be sorted with lower priority and will always appear at the end of the list.

Columns can be sorted by clicking directly on the header, even on header cells with column actions defined. Sorting indicators and column action indicators are shown on hover or on sorted columns, which allow for header cells to be less cluttered, allowing to focus on the header's content.

Multiple columns can be sorted at the same time. To enable this, hold the Shift key while clicking on the headers of the columns you want to sort by. The sorting indicators will show the sorting priority, with the primary sorting column showing a 1, the secondary sorting column showing a 2, and so on.

Sorting controls are also available in the column actions menu for any column with sorting enabled.

To set an initial sort order without controlling sorting yourself, use the defaultSortBy prop instead. It takes the same array of column IDs and sorting directions as sortBy, and the table manages sorting from there. As with every feature, defaultSortBy is mutually exclusive with the controlled sortBy prop. See Controlled and uncontrolled state.

Sort programmatically

Control sorting programmatically by setting the sortBy prop, passing an array with column IDs and sorting directions. Use the onSortByChange callback to monitor and manipulate sorting changes within the DataTable. If you want to sort your data before it is passed to the table, you need to disable built-in sorting by setting sortable={{ manualSort: true }} for server-side sorting.

Define sortAccessor

Define a custom sortAccessor in the column definition to sort by a different value than the one returned by the accessor. For example, if the accessor returns an object, you can set the sortAccessor to return a number or string field within the object.

Define custom sortType

You can specify a sortType in the column definition to control sorting behavior more precisely. The built-in options are 'text' | 'textCaseSensitive' | 'number' | 'datetime'. However, for more advanced scenarios, you can pass a function as well. This is particularly useful for compound data, where a column displays multiple or combined data entries. When using a custom sortType function, you may also need to define a custom sortAccessor in your column definition. For details, see: Define a sortAccessor.

In the example below, a column displays both CPU usage (as a percentage) and memory usage (in GB). The custom sorting function prioritizes higher CPU usage and resolves ties by considering higher memory usage.

Configure intents

An intent is a message object that enables users to pass the user flow from one app to another. It is possible to perform actions such as viewing data in another application. You can read more about intents in the Intents docs.

The DataTable supports intents within the following slot components:

• DataTable.CellActions and DataTable.ColumnActions: Use the TableActionsMenu.Intent slot within the TableActionsMenu. For custom icons, use the TableActionsMenu.Prefix slot within TableActionsMenu.Intent.

• DataTable.RowActions: Provide a Menu component containing the Menu.Intent slot. For custom icons, place the Menu.Prefix slot within Menu.Intent.

• DataTable.Toolbar: Use the DataTable.Intent slot to configure intents. Optionally, set a custom icon by passing the desired icon to the icon prop.

Intents can be configured using the following options:

• payload: An object containing the data to be passed to the target app. The structure depends on the target application's requirements.
• options: Configuration options for the intent.
  • keyProperties: Array of properties that should be included as keys in the intent.
  • recommendedAppId: ID of the application that will be launched to handle the intent.
  • recommendedIntentId: ID of the action that is passed to the application.
  • responseProperties: Array of properties to be included in the response.
• onResponse: Optional callback function that is called when a response is received from the target app.

Configure intents in toolbar

The DataTable.Toolbar accepts DataTable.Intent slot components, offering a menu with the specified intents for cross-app navigation. See the Configure intents section to learn more about the configuration of intents in the DataTable.

Charts in tables

Gantt chart

To visualize column data with a Gantt chart, set the columnType to gantt. The Gantt column definition also accepts a config prop in the format DataTableGanttColumnConfig, which allows configuration of the following options:

• min: Axis configuration for the minimum value (MinScaleBoundary).
• max: Axis configuration for the maximum value (MaxScaleBoundary).
• xAxisType: Whether the axis type is numerical or time.
• nameAccessor: String accessor for the segment's name, which is displayed in the tooltip.
• colorAccessor: String accessor for the segment's color.
• colorPalette: The palette that contains the segment color mapping.
• showBackground: Whether gaps between segments should receive a background.
• tooltipActions: Actions that should be displayed with the default tooltip. The function provides the segment, row and parent data as parameters.
• tooltip: Custom tooltip implementation. The function provides the segment, row and parent data as parameters.
• formatter: Formatter options from the @dynatrace-sdk/units package.
• annotationsHeader: Configuration for displaying annotations in the header above the x-axis. See the GanttAnnotationsHeaderConfig type for details.

The data for the Gantt chart must contain the Gantt segment data in this format: { start: number; end?: number; }. Each row can display one or more Gantt segments. If multiple segments should be displayed, you can pass an array of segment data. The segment data can also contain further properties to configure color or name, for example, if the corresponding accessor is specified in the config.

Annotations

Unlike other annotation-supporting charts where annotations are composed via slot components, Gantt annotations are configured entirely via the annotationsHeader prop (type GanttAnnotationsHeaderConfig) on the column config. They render in the Gantt header above the x-axis.

Note that the annotation data must be of the same type as the Gantt data (numerical or time). If min is set to data-min, or max is set to data-max, the values from the annotation data are also considered when determining the axis boundaries.

GanttAnnotationsHeaderConfig accepts the following options:

• tracks (GanttAnnotationsTrackConfig[]): The annotation tracks. See below.
• tooltip: Custom tooltip shown when hovering over a marker.
• tooltipActions: Actions menu handler for the default tooltip.
• height: Fixed height for the annotations header area. If not set, the height is determined by the content.
• textOverflow / truncateMode: Control text overflow and truncation of marker labels.
• loading: Displays a loading state in the annotations header.
• emptyState / errorState: Custom templates for empty and error states.

Tracks are configured as an array of GanttAnnotationsTrackConfig objects. Each track groups related markers and extends AnnotationsTrackProps with two Gantt-specific additions:

• markers (GanttAnnotationsMarkerProps[]): The markers for the track. Each marker extends AnnotationsMarkerProps with an optional indicatorsDisplay prop.
• indicatorsDisplay (auto / always / never): Controls the visibility of annotation indicators. Setting this on a track applies to all its markers, but a marker-level indicatorsDisplay takes precedence when specified.

Annotation indicators are small visual markers rendered inside each Gantt cell that correspond to the annotation positions in the header. They help users correlate cell data with annotations. indicatorsDisplay controls their visibility:

• auto: Indicators appear when hovering over the corresponding annotation in the header. Default behavior.
• always: Indicators are always shown, regardless of hover state.
• never: Indicators are never shown.

MeterBarChart

You can visualize numerical data within the DataTable by using the MeterBarChart. Follow these steps to render a MeterBarChart in the table:

1. Set columnType to meterbar in the column definition.
2. Use the accessor property to specify the value data to process.

The MeterBarChart in the DataTable column can be further customized through the column definition. You can configure its appearance by using the config prop, which includes the following options:

• color (string): Specifies the color of the meter bar segment.
• min (number): Sets the minimum value for the scale. Defaults to 0.
• max (number | 'data-max'): Sets the maximum value for the scale. Defaults to 100.
• showTooltip (boolean): Controls whether a tooltip is shown on hover. Defaults to false.
• showValue ('left' | 'right' | false): Displays the formatted value inline beside the bar, controlling whether it appears to the left or right. Defaults to false.
• formatter (formatter function or format option): Formats the value displayed in the tooltip and inline when showValue is set.
• thresholds (array of objects {value: number, color: string}): Defines threshold values and associated colors. Each threshold is rendered as a colored interval bar below the meter bar, spanning from its value up to the next threshold's value (the last threshold extends to the scale maximum).
• showThresholdIndicators (boolean): Shows or hides all threshold interval bars at once. Defaults to true; set it to false to hide every threshold interval bar while keeping the threshold data intact. Does not affect the threshold legend.

The per-threshold showIndicator flag is deprecated in favor of the column-level showThresholdIndicators config. Use showThresholdIndicators to toggle all threshold interval bars at once. As a temporary fallback, when showThresholdIndicators is not set, the per-threshold showIndicator flags are collapsed into the column-level behavior: if all thresholds set showIndicator to true the indicators are shown, if all set it to false they are hidden, and mixed values log a warning and fall back to the default. This property will be removed in a future release.

MultiMeterBarChart

To add a MultiMeterBarChart to the DataTable, follow the steps described in the section on displaying a MeterBarChart in a table.

Set the columnType to meterbar in the column definition and use the accessor property to specify the value data to process. Instead of providing a single numerical value, as for MeterBarChart, with MultiMeterBarChart you can provide an array of value objects. Each value object should have the following structure: {name: string, value: number, color: string} as data.

As with the MeterBarChart, you can fine-tune the appearance of the MultiMeterBarChart by using the colorPalette property (ColorPalette or CustomColorPalette) to set the color palette for multi-segment meter bars.

When data is provided as value array objects, the color and thresholds props in config are ignored.

Sparkline chart

To pass timeseries data to the DataTable and visualize it with a Sparkline chart, set the column's columnType to sparkline and use the column's accessor to point to the timeseries data that you want to process.

The Sparkline chart in the DataTable can be further configured via the column definition through the config prop, which includes the following options:

• color (string): Color of the series. Defaults to the first categorical chart color.
• variant ('line' | 'area' | 'bar'): Chart variant. Defaults to 'line'.
• gapPolicy ('connect' | 'gap'): How gaps in the data are visualized. Defaults to 'connect'.
• curve ('linear' | 'smooth'): Curve shape of the series. Defaults to 'linear'.
• showContextValues (boolean): Whether min and max labels are shown. Defaults to false.

Additionally, x‑axis boundaries can be configured by setting config: { xAxis: { min: 'auto' | 'data-min' | number | Date, max: 'auto' | 'data-max' | number | Date } }. Similarly, y‑axis boundaries and scale can be configured by setting config: { yAxis: { min: number | 'data-min', max: number | 'data-max', scale: 'linear' | 'log' } }. More details on the configuration options can be found here in the Sparkline documentation.