DataTableV2

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

OverviewPropertiesUsageMigration guide

Import

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

Use cases

CodeSandbox

Data and column memoization

It is important that the data and columns prop passed to the DataTableV2 are memoized. Use the useMemo hook to make sure the props do not change on each render cycle.

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.

CodeSandbox

Text alignment

By default, if no column type is set, text within a cell is left-aligned and vertically centered. To explicitly control the text alignment for a column, use the alignment property in the column definition.

CodeSandbox

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.

CodeSandbox

Define column types

You can assign a predefined type to every column. Values in those columns will be rendered and sorted according to each type. Available types are text, date, bit, number, long, currency, log-content, sparkline, meterbar, markdown and gantt.

By default, columns of type text will automatically detect links and render them as such. If you want to disable this feature, set the detectLinks prop in the column config to false. In case you are using a custom cell renderer, a detectLinks function is available for you to apply.

ℹ️️ Please note that when setting the column type to log-content that only the first 1000 characters will be highlighted in order to keep performance optimized for datasets of any size. Further, log lines will be truncated after 1000 characters. This limit can be changed via the truncationLimit property in the column config.

CodeSandbox

Customize markdown rendering

Use the customComponentMappings config to override the default markdown rendering behavior.

import { Components } from '@dynatrace/strato-components-preview/core';

const customMappings: Components = {
  h2: ({ children }: PropsWithChildren) => (
    <i>
      <h2>{children}</h2>
    </i>
  ),
};

const columns = [
  // ...
  {
    header: 'Markdown',
    accessor: 'markdown',
    id: 'markdown',
    columnType: 'markdown',
    width: 220,
    config: { customComponentMappings: customMappings },
  },
];

Font style

The DataTableV2 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.

CodeSandbox

Provide sub-rows

The DataTableV2 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.

CodeSandbox

Configure sub-rows

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

1. accessor - Provide a custom accessor for retrieving the corresponding sub-rows for each row from the data.

2. subRowColumnId - Specify the id of the column that the sub-row indicator should be injected to. By default, this is the first visible column.

3. disableSubRow - Accepts a function that will evalute whether or not a specific sub-rows trigger in a row should be disabled.

4. selectionBehavior - The behaviour of sub-row selection. When the selection behavior is set to cascading (default) parent rows can not be selected and are not included in the onRowSelectionChange. A parent row's visual selection state is a reflection of their sub-row's selection state. If some sub-rows are selected, the parent row will be displayed as indeterminate. Only if all its sub-rows are selected, it will be visually shown as selected. When the selection behavior is set to individual, there is no indeterminate state, all rows can be selected independently.

CodeSandbox

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.

CodeSandbox

Use the Sparkline chart

It is possible to pass timeseries data to the DataTableV2 and visualize it with a Sparkline chart. To achieve this, you need to set columnType to sparkline in the column definition and use the column accessor to point to the timeseries data that you want to process.

The Sparkline chart in the DataTableV2 can be further configured via the column definition. You can set its color and variant by adding config: {color: string, variant: 'line' | 'area' | 'bar'}. The default configuration of sparkline is config: {color: 'categorical', variant: 'line', showContextValues: false}.

CodeSandbox

Use the MeterBarChart

You can visualize numerical data within the DataTableV2 by using MeterBarCharts. For more information about the MeterBarChart, refer to the documentation. To render a MeterBarChart in the table, follow these steps:

• Set columnType to meterbar in the column definition
• Use the accessor property to specify which value data you want to process.

The MeterBarChart in the DataTableV2 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 MeterBarChart.
• min (number): Sets the minimum value for the MeterBarChart.
• max (number): Sets the maximum value for the MeterBarChart.
• showTooltip (boolean): Controls whether tooltips are displayed.
• thresholds (array of objects {name: string, value: number, color: string}): Defines threshold values and their associated colors.

CodeSandbox

MultiMeterBarChart in tables

To add a MultiMeterBarChart to the DataTableV2, follow the steps in MeterBarChart in tables and then provide an array of value objects (value: {name: string, value: number, color: string}) as data, this will enable DataTableV2 to visualize a MultiMeterBarChart. For more information about the MultiMeterBarChart, refer to the documentation

Again, similar to the MeterBarChart, you can fine-tune the MultiMeterBarCharts appearance by setting the colorPalette property to define a color pattern specifically tailored for the MultiMeterBarChart.

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

CodeSandbox

Use the 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 DataTableV2GanttColumnConfig, 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.

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, e.g. for configuring its color or name, if the corresponding accessor was specified in the config.

CodeSandbox

Enable full width

By default, the DataTableV2 is set to automatically expand and occupy the full width of its parent element. However, this behavior changes when the table is placed within a flex container. In such cases, if you wish to ensure that the table maintains full width, you can include the fullWidth prop when using the DataTableV2 component.

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

CodeSandbox

Enable full height

By default, the DataTableV2 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 DataTableV2 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.

CodeSandbox

Control column width behavior via column definitions

The DataTableV2 provides multiple ways of controlling the column width behavior.

• 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 be 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.

CodeSandbox

Allow certain columns to occupy the remaining space

You will certainly have some columns in you DataTableV2 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.

CodeSandbox

Column sizing

To establish default column widths for the table, you can utilize the defaultColumnSizing as a DataTableV2 prop. This property requires an object that maps column IDs to their respective widths in pixels.

CodeSandbox

Control column sizing

To activate the column resizing feature in DataTableV2, you need to include the resizable property within the table’s configuration. This property acts as a flag that, allows the columns within the table to be adjusted in width interactively by the user.

You can track the changes in column widths during resizing events by utilizing the onColumnSizingChange and columnSizing properties. The callback triggered upon resizing delivers data regarding the current widths of all columns. This information can be leveraged to record and maintain the dimensions of resized columns. For instance, as demonstrated here, whenever the email column is resized, it will revert to a default width of 300px.

Note: As soon as a resizing event is started, all columns that have a fraction width or no width defined will be locked into their current width.

CodeSandbox

Customize visual representation

The variant prop allows you to customize the appearance of the DataTableV2 by setting the configuration options available in DataTableV2Props['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.

CodeSandbox

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.

CodeSandbox

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 DataTableV2. If verticalDividers is set to true, lines are added between the columns.

CodeSandbox

Contained

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

CodeSandbox

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 DataTableV2.DefaultCell element. Also, DataTableV2.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, and rowData. Additionally, a format and a detectLinks function are available. The format function allows you to apply the formatter options that have been configured for that cell (either via the column definition or via the columnType). The detectLinks function will be automatically detect links in the passed text and render them as such using the ExternalLink component.

CodeSandbox

Customize column header

To customize the column header, simply utilize the header property within the column definition. Assign a function to this property that returns a customized JSX element. Similar to cell, if you want to maintain default header styling, you need to wrap each return statement with DataTableV2.DefaultCell element. Also, DataTableV2.DefaultCell 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.

CodeSandbox

Enable line wrap

The DataTableV2 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 DataTableV2.Toolbar action: Incorporate DataTableV2.LineWrap into you tables DataTableV2.Toolbar component to allow users to switch line wrapping on or off for all columns.

Props for Line Wrapping Control

The DataTableV2 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.

CodeSandbox

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

CodeSandbox

Sorting 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 DataTableV2. If you want to sort your data before it is passed to the table, you need to disable built-in sorting by setting sortable={ manualSorting: true }. This is particularly useful for server-side sorting. To initially sort tables without controlling their state, use defaultSortBy."

CodeSandbox

Define a sortAccessor

In case the value that should be used for sorting differs from the one returned by the accessor, it is possible to define a custom sortAccessor in the column definition. For example, if the accessor returns an object, the sortAccessor may return a number or string field within the object.

CodeSandbox

Define a 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.

CodeSandbox

Enable pagination

To enable pagination add the DataTableV2.Pagination component to your table. This component allows you to configure the default page size and the default page index via the defaultPageSize and defaultPageIndex props.

CodeSandbox

Change page size options

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.

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

Enable row selection

To activate row selection in DataTableV2, you must configure the selectableRows prop on the table. Assigning a boolean value to this prop will generate 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.

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

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.

CodeSandbox

Control row selection

When you want to control which rows are selected, you use the selectedRows prop. This prop allows you to specify which rows should be considered ‘selected’ at any given time. To make this dynamic, so that it can change in response to user actions, you also provide a handler function for the onRowSelectionChange callback.

Here’s how it works:

• selectedRows prop: This is where you pass an object that represents the currently selected rows. Each row is identified by its id, and the selection state is indicated by a boolean value (true for selected, false for not selected).
• onRowSelectionChange callback: This function is called whenever the selection changes, such as when a user clicks on a row checkbox. The callback function receives information about the new set of selected rows. By using these two together, you can maintain the selection state outside of the component, giving you full control over the behavior of the selection.

CodeSandbox

Enable interactive rows

To activate interactive rows in DataTableV2, 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.

CodeSandbox

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.

CodeSandbox

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 their rowId, which can be customized as well. For details on how to do this, reference the control row IDs section.

ℹ️️ 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.

CodeSandbox

Control row IDs

Features like row selection, sub-rows and row interactivity by default use a row id based on the index of the data that is passed. This can be problematic when you want to persist any of the states while the data itself changes. For this usecase you are able to change how rows are identified by providing a rowId function on the DataTableV2. When providing a custom row id function, for sub row identification, the row IDs will be separated by ↳ character.

CodeSandbox

Enable expandable rows

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

The default state of each row can be controlled using the defaultExpandedRows prop on the DataTableV2.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.

CodeSandbox

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

CodeSandbox

Load data

CodeSandbox

Customize empty state

The DataTableV2.EmptyState component allows you to configure a custom empty state that will be displayed if no data is available.

CodeSandbox

Configure selected rows actions

The DataTableV2.SelectedRowsActions component provides an additional slot where you can perform actions on one or more selected rows in the DataTable simultaneously. 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.

CodeSandbox

Configure table actions

The DataTableV2.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.

CodeSandbox

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 column of the table.

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

Within the DataTableV2.ColumnActions tag, a function is placed. This function is designed to receive the current column’s details, enabling the customization of actions for that column. The function should return a TableActionsMenu object, which 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 that renders a defined link element as a menu action item. You can assign an onSelect event as a property of this component, which will execute the specified action upon user interaction. Additionally, the TableActionsMenu.ItemIcon property can be applied to the item to incorporate an icon for the action trigger element.

To enable users to copy column values to the clipboard, you can use the predefined TableActionsMenu.CopyItem slot component. To semantically group items 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 configure actions for a particular column its ID must be provided to the column property. If default actions should be available for all columns that do not explicitly have actions configured, the DataTableV2.ColumnActions column ID is omitted.

CodeSandbox

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 cell of the table.

To configure cell actions you need to define the DataTableV2.CellActions slot component. Within the DataTableV2.CellActions tag, a function is placed. The function should return a TableActionsMenu object, which 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 that renders a defined link element as a menu action item. You can assign an onSelect event as a property of this component, which will execute the specified action upon user interaction. Additionally, the TableActionsMenu.ItemIcon property can be applied to the item to incorporate an icon for the action trigger element.

To enable users to copy cell values to the clipboard, you can use the predefined TableActionsMenu.CopyItem slot component. To semantically group items 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 the cells in a specific column, you need to specify the unique identifier (ID) of the column. This ID is then used as the value for the column property within the DataTableV2.CellActions configuration. This tells the DataTableV2 which column the actions should be associated with. If default actions should be available for all columns that do not explicitly have actions configured, the column ID is omitted.

CodeSandbox

Configure row actions

Configuring row actions in a DataTableV2 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 DataTableV2.RowActions slot component as a DataTableV2 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.

CodeSandbox

Improved interaction pattern

You can opt in to an improved interaction pattern on the DataTableV2. To enable the enhanced interaction features, wrap your DataTableV2 component with the DataTableV2CellInteractionPattern component. This setup will activate the improved interaction capabilities.

1. Cleaner header cells: Header cells are less cluttered, allowing to focus on the headers title content. Sorting indicators and column action indicators are shown on hover or on sorted columns.
2. Clickable cells: The cells within the DataTableV2 now allow custom interactive elements, allowing you to include links or other actionable elements within cells with cell actions defined.
3. Improved sorting interaction: The sorting interaction is improved by allowing click interaction directly on the header to activate sorting, even on header cells with column actions defined.
4. Right-Click Menu A context menu 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 data table.

CodeSandbox

Configure column visibility

The column visibility feature allows you to specify which columns should be visible and which should be hidden. Use the defaultColumnVisibility prop to define the column visibility state. Provide an object with the respective column IDs as keys and boolean values indicating their visibility. A value of true means the column is visible, while false means it is hidden. By default, all columns are visible.

CodeSandbox

Column visibility UI elements

To allow the user to show and hide columns, you need to configure the corresponding UI elements in the table. Column visibility can be controlled through either the DataTableV2.Toolbar or the DataTableV2.ColumnActions.

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

If you want to prevent a certain column from being hidden, set the disableColumnHiding prop to true in the column definition for this column.

CodeSandbox

Control column visibility

To control column visibility, use the columnVisibility prop to provide the visibility state, along with the onColumnVisibilityChange callback which allows you to react to visibility changes.

CodeSandbox

Column visibility reset

Column visibility can be reset to default original value using the column settings overlay trigger in toolbar. A custom reset state can be set using the resetColumnVisibility prop in DataTableV2.VisibilitySettings component, which allows the column visibility state to be set to the provided reset state. In uncontrolled, the column visibility resets to defaultColumnVisibility prop state if present or original visibility state. This ensures that the columns can be easily reverted to their default visibility state whenever needed. Reset button is disabled when the current state is the same as the default state.

CodeSandbox

Customize the label of the column settings trigger

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

CodeSandbox

Configure column order

To enable column ordering, set the columnOrdering prop to true.

For uncontrolled, you can optionally use defaultColumnOrder to define the initial column order, by providing 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

To enable drag and drop column ordering, you can pass a configuration object to the columnOrdering prop with the option enableDragAndDrop set to true.

When drag and drop is enabled, the column headers will be draggable. To move a column to another position hold down the mouse on the column header and then release it when you have moved it to its destination. This is also possible using touch (press, hold and release).

CodeSandbox

Column order UI elements

In addition to drag and drop, the column order can be adjusted using corresponding UI elements in the table. You can control the column order through either the DataTableV2.Toolbar or the DataTableV2.ColumnActions.

Use the DataTableV2.ColumnOrderSettings component within the toolbar to render a trigger for the column settings overlay 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.

CodeSandbox

Control column order

To control column order, use the columnOrder prop to provide the desired order, along with the onColumnOrderChange callback which allows you to react to changes in the column order.

CodeSandbox

Reset column order

Column order can be reset to default original value using column settings overlay trigger inside the toolbar. A custom reset state can be set using the resetColumnOrder prop can be set in DataTableV2.ColumnOrderSettings component, which allows the column order state to be set to the provided reset state. In uncontrolled, the column order resets to defaultColumnOrder prop value if present or original order. This ensures that the columns can be easily reverted to their default order whenever needed. Reset button is disabled when the current state is the same as the default state.

CodeSandbox

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.

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 the tab key to focus the drag handle and then press the spacebar once. Use the up and down arrow keys to move the row to its destination and then press the spacebar again to release it. To cancel press escape.

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

Note

For now, row order cannot be used together with expandable rows or sub-rows.

CodeSandbox

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. For controlled, it's up to you to use the onRowOrderChange event to update row order and optionally update the original data as you see fit.

CodeSandbox

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

CodeSandbox

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 hightlight type accepts color and backgroundColor and changes the textcolor and background color of all cells in a row.

CodeSandbox

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.

CodeSandbox

Download data

The DataTableV2.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 considered.

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

CodeSandbox

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 downloadData() with one of the parameters 'all', 'page', or 'selected'. See the following example.

CodeSandbox

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 DataTableV2CellFormatterCurrencyOptions for currencies.

CodeSandbox

Hiding the table header

You can customize the DataTableV2s appearance to hide the entire header, by setting variant={{ headers: 'hidden' }} on the DataTableV2 component.

If you choose to hide the header, please note that the ability to sort columns or any actions that can be triggered via column headers will not be available.

CodeSandbox

Export Config

The DataTableV2'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() method.

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

CodeSandbox

Import Config

The configuration provider for the DataTableV2 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 DataTableV2 configuration.

ℹ️️ Please note that if the configuration provided does not match the properties of the DataTableV2 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.

ℹ️️ 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 DataTableV2. If you need to set default values, it is recommended to ensure that you always do that before importing the configuration.

ℹ️️ It is important to note that due to potential version mismatches in DataTableV2 packages used in different applications, importing a configuration from another application may produce an unintended outcome and not result in a perfect match.

CodeSandbox