Skip to main content

DataTable

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

OverviewPropertiesUsageChangelog3.14.0

Changes to DataTable. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0​

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​

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​

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​

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​

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​

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​

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​

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​

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​

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​

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​

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​

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​

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​

Updates​

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

3.1.2​

Updates​

  • No longer spreads configuration props to DataTable DOM element.

3.1.0​

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​

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