Skip to main content

DataTable

  • Changelog

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

OverviewPropertiesUsageChangelog

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to DataTable. See Components changelog for all changes to the package.

3.15.0 Released Oct 1, 2026​

Updates​

  • Improved interaction performance for scrolling, hiding a column, opening column settings, and activating a row, with the largest gains in tables that have many hidden columns. (APPDEV-19021)
  • Fixed the initial header height estimate overshooting by 1px under the visual refresh, which added an unnecessary vertical scrollbar on the first render. (APPDEV-19979)
  • Fixed an issue with keyboard navigation where closing a row actions menu moved focus to the page instead of back to the trigger. (APPDEV-20022)
  • Fixed an issue where the arrow key navigation closed an open cell or row actions menu and moved focus to the next row when row interactivity was enabled.
  • Fixed datetime and numeric column types producing incorrect output for invalid inputs across all rendering paths (with formatter, without formatter, and CSV export): whitespace-only strings in datetime columns rendered as epoch zero, empty strings and non-numeric values (booleans, arrays, Infinity) in number, currency, and bit columns were formatted as numbers, and invalid Date instances threw a RangeError during CSV export. (APPDEV-19594)
  • Datetime and numeric cell values now produce consistent output for all input types (ISO-8601 strings, epoch timestamps, numeric strings, and Date instances) regardless of whether a column formatter is configured, including during CSV export. (APPDEV-19594)
  • Fixed keyboard activation and double-click on the column resize handle incorrectly triggering column sort. (APPDEV-20123)
  • Fixed behavior tracking attributes across interactive sub-elements and added tracking for drag-and-drop interactions. (APPDEV-19054)
  • Added the anchorScrollTo prop to control which edge of the list the scroll position is anchored to when data changes. (APPDEV-20147)
How to opt in

Set anchorScrollTo="end" to keep the row the user is reading in place when rows are inserted above it, which is what a live log or event feed needs. Also provide rowId with a stable identifier from your row data — without it rows are identified by their position in the array and cannot be tracked across updates.

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

<DataTable
  data={rows}
  columns={columns}
  rowId={(row) => row.id}
  anchorScrollTo="end"
/>;

The value says which end of the list stays fixed while the data changes:

  • 'start' (default) — the top of the list is the fixed point, so rows inserted above push everything the user is looking at further down. This is the row virtualizer's own default and the behaviour the table has always had.
  • 'end' — the current viewport is the fixed point, so rows inserted above leave the view untouched and the user keeps reading the same row. Rows appended below the viewport do not cause the view to scroll down under either value.

While the user is scrolled to the very top, 'end' is temporarily ignored in favor of 'start', so newly arrived rows appear right away instead of staying hidden above the viewport. The table switches back to 'end' as soon as the user scrolls down again. This is treated as the default, non-configurable behavior of anchorScrollTo="end" — it mirrors how the browser's own overflow-anchor disables anchoring at the top edge, and a user sitting at the top of a live feed is expected to see new rows arrive rather than have them hidden above the scroll position.

The prop exposes anchoring the virtualizer already supports rather than adding a new mechanism of our own.

3.14.0 Released Sep 17, 2026​

Updates​

  • Fixed a rare invalid index console warning when data shrinks to fewer rows with certain other conditions. (APPDEV-19714)
  • Rows no longer keep their previous height when line wrapping is toggled while they are scrolled out of view. (APPDEV-19714)
  • Fixed the page crashing when downloading large datasets with many hidden columns. (APPDEV-13732)

3.13.0 Released Sep 3, 2026​

Updates​

  • datetime columns now correctly format ISO-8601 string cell values in both the built-in cell renderer and the format() callback in custom cell renderers. (APPDEV-19591)
  • Cell action trigger buttons no longer share an identical accessible name. Each button now includes the column and row, so screen readers can distinguish between them. (APPDEV-19656)
  • Fixed the column actions trigger visibility not updating correctly on hover and sort interactions. (APPDEV-19739)
  • Fixed the row not activating when clicking on a cell that contained an element with tabindex="-1", such as <CodeSnippet />. (APPDEV-19744)
  • Fixed the native browser context menu being suppressed on right-click when no cell or column actions are configured. (APPDEV-19561)

3.11.3 Released Aug 20, 2026​

Updates​

  • The column settings toolbar button no longer shows a wrong hidden column count when defaultColumnVisibility contains an invalid column ID. (APPDEV-19392)
  • Interactive row triggers now expose their activated state and role description to assistive technologies via aria-selected and aria-roledescription. Column and cell action menu triggers now correctly report aria-expanded="false" when the menu is closed. (APPDEV-19180)
  • Header column-action triggers are now keyboard-accessible: they display a visible focus ring and can be reached by tabbing. (APPDEV-18611)
  • Improved the clarity and tone of column settings messages and tooltips. (APPDEV-18738)
  • Selected row count is now announced to screen readers after the selection changes. (APPDEV-19167)

3.11.0 Released Aug 10, 2026​

Deprecations​

  • The per-threshold showIndicator option in the meterbar column config has been deprecated. Use showThresholdIndicators instead. Until it is removed, existing per-threshold showIndicator flags are collapsed into the column-level flag as a fallback when showThresholdIndicators isn't set. All true shows all indicators; all false hides them; mixed values log a warning. (APPDEV-17783)

Updates​

  • Added a showThresholdIndicators option to the meterbar column config to toggle all threshold indicators at once (visible by default). (APPDEV-17783)
  • Fixed columns incorrectly showing as "Hidden" in the column settings when opened while columns were still loading. (APPDEV-19382)
  • Column action trigger buttons no longer share an identical accessible name. Each button now includes the column name, so screen readers can distinguish between them. (APPDEV-18617)
  • The outer wrapper no longer causes an aria-prohibited-attr axe accessibility violation. (APPDEV-18944)
  • The "Download CSV" menu options are now programmatically associated with their labels, and the toolbar's download/actions menu trigger now exposes its expanded state to assistive technologies. (APPDEV-19172)
  • The built-in column headers for drag-and-drop row ordering, row selection, expandable rows, and row actions now have accessible names. (APPDEV-18631)
  • Improved rendering performance by ensuring only affected table components re-render after internal state changes. (APPDEV-18255)
  • A table with column ordering enabled no longer causes an aria-required-children accessibility violation when rendered with no data rows. (APPDEV-19287)
  • Screen readers now announce the number of matching columns when searching in the column settings modal. (APPDEV-19199)

3.10.0 Released Jul 28, 2026​

Updates​

  • Redesigned the column visibility controls in the column settings modal. Replaced the "Show/hide all" checkbox with discrete "Show all" and "Hide all" buttons. Added a "List hidden columns" toggle switch with a hidden-column count. Added a visible/total column counter. When all columns are hidden and listing is off, an empty state is shown instead of the column list. (APPDEV-17483)
  • MeterBar columns support opt-in inline value display via the showValue config option. Set it to 'left' or 'right' to show the value beside the bar. MeterBar columns now also enforce a minimum minWidth. An explicitly configured minWidth smaller than the default is ignored; only a larger value is respected. This prevents the bar from collapsing to nothing when the column is resized. (APPDEV-18171)
  • Column settings search now highlights the matching parts of each column name. (APPDEV-17480)
  • Column settings search now shows a "No results found" empty state with a "Clear search" button when the filter matches no columns. (APPDEV-17480)
  • Improved accessibility of expandable rows. (APPDEV-17255)
  • Fixed the keyboard focus ring on interactive rows showing tiny gaps at each corner. (APPDEV-18087)

3.9.0 Released Jul 10, 2026​

Updates​

  • Added formatDownloadHeader callback to DataTable.DownloadData and DataTableRef.downloadData() to override CSV header names per column. The callback receives { columnId, leafHeader, groupHeader } and can return a replacement string or undefined to keep the default header name. (APPDEV-10809)
  • The download "All" option is no longer shown when using server-side pagination. (APPDEV-18494)
  • Row and cell action menus are now closed when the table is scrolled and their anchor row leaves the visible area. (APPDEV-17725)
  • Added disabledRowDragAndDropTooltip to the rowOrdering config and the useLockedRowOrder hook to explain why a row's drag handle is disabled. A default tooltip is shown while the table is sorted. (APPDEV-17473)
  • Fixed the phantom drag mode that left column headers unresponsive to interactions after starting to drag a column and releasing immediately. (APPDEV-18523)
  • Improved the look and feel of the column settings modal, as follows: columns are now grouped under "Pinned to left", "Pinned to right", and "Unpinned" section headers; drag handles moved to the left and the visibility and pinning controls to the right; hidden columns show a "Hidden" chip, and the controls have updated icons. (APPDEV-17477)
  • Fixed the URL detection behavior in text column link rendering. (APPDEV-18658)
  • Fixed the row drag handle tooltip not updating when the multi-sort changed. (APPDEV-17473)
  • You can now customize the CSV download file name by passing a string or callback to the new fileName prop. (APPDEV-10808)

3.8.0 Released Jul 1, 2026​

Deprecations​

  • The name prop on thresholds in DataTableMeterbarColumnConfig is deprecated. Threshold names are not displayed in the table and this prop will be removed. (APPDEV-15841)

Updates​

  • Added aria-label, aria-labelledby, aria-describedby, and aria-details props. A default aria-label of "Data table" is applied automatically when no accessible name is provided. (APPDEV-17681)
  • Fixed the row ordering drag-and-drop live region from being placed inside `[role=grid
  • Fixed the interactive row highlight border becoming misaligned with the pinned column borders at non-100% browser zoom levels. (APPDEV-18333)
  • The column settings modal now requires at least one visible column. Clicking "Apply" with all columns hidden shows a blocking error message and keeps the modal open. (APPDEV-7035)
  • Fixed column settings search from not matching grouped columns by their group header label. (APPDEV-18217)
  • Added visibleColumnLimits to DataTable.VisibilitySettings to cap the number of visible columns in the column settings modal. Exceeding the maxWarning threshold shows a non-blocking message; exceeding the maxError threshold shows a blocking error message and disables the "Apply" button. Limits can also be supplied per invocation via openColumnSettings() on DataTableRef, taking precedence over the slot value. (APPDEV-7035)
  • Fixed the React warning "Cannot update a component while rendering a different component" by scoping store re-renders to affected components. This also fixes the "Maximum update depth exceeded" error that occurred in some apps. (APPDEV-18418)

3.7.1 Released Jun 30, 2026​

Updates​

  • Fixed the React warning "Cannot update a component while rendering a different component" by scoping store re-renders to affected components. This also fixes the "Maximum update depth exceeded" error that occurred in some apps. (APPDEV-18418)

3.7.0 Released Jun 12, 2026​

Updates​

  • Column ordering via drag and drop now scrolls correctly when dragging columns to the edge of the table. (APPDEV-17398)
  • The empty state container is now sticky and stays centered within the visible viewport when the table is horizontally scrollable. (APPDEV-17722)
  • Dragging a column header no longer causes the page to scroll unexpectedly. (APPDEV-17906)
  • Fixed an issue in Firefox where resizing a column where columnOrdering was enabled incorrectly triggered column dragging. (APPDEV-17925)
  • In tables with sub-rows, custom headers in the sub-row column now use the full width. (APPDEV-16976)
  • Fixed the sub-row expander path not showing correctly after moving the last child row to the first position via drag-and-drop row ordering. (APPDEV-18043)
  • Fixed the loading spinner not being vertically centered in the visible data area when the user had scrolled the table before a loading state was triggered. (APPDEV-18091)

3.6.0 Released May 29, 2026​

Updates​

  • openColumnSettings() now accepts resetColumnVisibility, resetColumnOrder, and resetColumnPinning to define a custom reset state when opening the column settings modal programmatically. (APPDEV-17273)
  • Fixed sorting arrow disappearing when initially opening the column actions menu via right-click. (APPDEV-17723)

3.5.0 Released May 13, 2026​

Updates​

  • Fixed vertical alignment of values in sparkline columns. Cells of sparkline columns now correctly stretch to fill the full row height. (APPDEV-17156)
  • CSV download options now display row counts. When no table action intents are configured, the options are shown directly, instead of being nested. (APPDEV-16778)
  • The interactive row associated with an open cell or row actions menu is now highlighted while the user interacts with the menu. (APPDEV-17386)
  • Row ordering drag handles now correctly reflect the disabled state for all rows after sorting and clearing sorting. (APPDEV-17657)
  • Fixed an unexpected focus ring appearing on the drag handle after dropping a row via mouse. (APPDEV-17634)
  • When pagination is enabled, the scrollToRow function now navigates to the correct page and scrolls to the correct row. (APPDEV-12465)
  • Fixed the focus ring not being visible on the drag handle of the dragged row when reordering rows via keyboard. (APPDEV-17634)
  • Added log-content highlighting support for 16-character hex IDs so both letter-leading and digit-leading IDs are highlighted consistently. (APPDEV-11851)

3.4.0 Released May 5, 2026​

Updates​

  • The page now remains interactive when cell or column actions menu is open. (APPDEV-17100)
  • When downloading large tables as CSV, a progress indicator is now shown, and the table stays responsive during the download. (APPDEV-13387)
  • Sorting controls are now also available in the column actions menu for any column with sorting enabled. (APPDEV-16866)
  • The buttons for showing/collapsing row details from expandable rows no longer have a broken aria-controls reference. (APPDEV-17125)
  • Unpinned columns can now be ordered via drag and drop while other columns are pinned. (APPDEV-16859)

3.3.0 Released Apr 21, 2026​

Updates​

  • Column headers now display sort order indicators when multiple columns are sorted simultaneously. (APPDEV-10404)
  • Gantt chart annotations now display indicators that highlight the position of annotation markers in the chart. Indicators can be configured per track and overridden per marker using the indicatorsDisplay prop. (APPDEV-16812)
  • Fixed an issue that occurs in rare cases due to a rendering timing issue. (APPDEV-16787)
  • Built-in TableActionsMenu (CopyItem, LineWrap, HideColumn, ColumnOrder, ColumnPinning, ColumnFontStyle) actions now have onSelect callback available. (APPDEV-4846)
  • MeterBarChart tooltip in meterbar columns is now unpinned on click outside the chart or tooltip. (APPDEV-16627)
  • Sparkline columns allow configuration for min, max and scale of the yAxis. (APPDEV-16840)
  • The column resize handle now meets ARIA requirements and no longer causes an aria-required-children violation.
  • Added data-dt-properties attribute to the toolbar and column line wrap actions, column header sorting, row selection controls, sub-row 'Expand' and 'Collapse' buttons, and column settings modal visibility controls.
  • The imperative handle now exposes getDisplayedRowIds, which returns the IDs of the displayed rows in their display order. (APPDEV-16929)
  • Column reordering via drag and drop now meets ARIA requirements and no longer causes an aria-required-children violation.

3.2.0 Released Apr 7, 2026​

Updates​

  • Selecting text inside the table no longer triggers row activation. (APPDEV-16654)
  • The event passed to onActiveRowChange is now a click event (previously pointerup); middle mouse button clicks pass an auxclick event. (APPDEV-16654)
  • Scrollable tables now keep correct row heights when lineWrap is enabled and previously virtualized rows scroll back into view. (APPDEV-16699)
  • Added data-dt-name attributes to the toolbar line wrap button and the column line wrap action. (APPDEV-16670)
  • Columns no longer resize when hovering a header with column actions in a condensed or comfortable table. (APPDEV-16981)
  • Column widths for already measured columns are persisted when columns reference changes. This fixes an issue with columns not being rendered correctly, after the columns reference changed in a horizontally scrolled table. (APPDEV-16792)

3.1.3 Released Apr 1, 2026​

Updates​

  • Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)

3.1.2 Released Mar 24, 2026​

Updates​

  • No longer spreads configuration props to DataTable DOM element.

3.1.0 Released Mar 19, 2026​

Deprecations​

  • Column type date is now deprecated. Use datetime instead. (APPDEV-4005)

  • The onDownloadData on the DataTable element is now deprecated. Please use it via the DataTable.DownloadData toolbar slot instead. (APPDEV-16234)

Updates​

  • Datetime columns now accept date, time, or datetime as shorthand formatter values, making it easy to show only the date or time portion without providing full FormatDateOptions. (APPDEV-4005)
  • The scrollToRow method now supports an additional align parameter (start, center, end) to control where the target row is positioned within the table’s visible area. Defaults to start. (APPDEV-14431)
  • The onDownloadData callback is now available on the DataTable.DownloadData toolbar slot. (APPDEV-16234)
  • Batch selection now handles changing data and selection across multiple tables correctly. (APPDEV-16683)
  • Sparkline columns allow configuration of the xAxis. (APPDEV-13820)
  • Adds data-dt-name tracking attributes to more interactive elements: sorting/ordering header cells and sorting icons, row selection and subrow expand/collapse buttons, column resize and row drag-and-drop handles, and column settings modal controls. (APPDEV-16589)
  • Pressing Enter on an interactive element within a row (e.g. a button) no longer activates or deactivates the row. This aligns keyboard behavior with mouse behavior. (APPDEV-16586)

3.0.2 Released Apr 1, 2026​

Updates​

  • Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)
Still have questions?
Find answers in the Dynatrace Community