Migration guide

The SimpleTableV2 component is a simplified version of the DataTableV2. It is designed to handle small sets of data and markdown representation. It does not feature sorting, resizing, filtering, or virtualization and behaves like a native HTML table.

OverviewPropertiesUsageMigration guide

The SimpleTableV2 comes mostly with an API compatible with the SimpleTable component. There have been made some changes to the API where we can provide more type safety.

Import changes

You can now import the SimpleTableV2 and the SimpleTableV2ColumnDef from the @dynatrace/strato-components-preview/tables package. All types and components associated with the SimpleTableV2 are also prefixed with SimpleTableV2 in order to avoid confusion.

import {
  SimpleTableV2,
  type SimpleTableV2ColumnDef,
} from '@dynatrace/strato-components-preview/tables';

Column definition changes

Display columns and group columns

We have improved on the column definition types for the SimpleTableV2. There is now a differentiation between the column groups and display columns. Group columns can hold another set of columns as their children, but might not allow some other members to be set.

Custom header and cell renderer

Custom header and cell renderer are still available in the same manner as you were using them in DataTable. However, the signature of the custom renderer functions have changed in order to maintain clear API consistency and no longer rely on third party typing.

header: () => <>Your custom header</>,
cell: ({
  // The value of the cell.
  value,
  // The index of the current row.
  rowIndex,
  // The values that are within the row.
  rowData,
  // The id of the row.
  rowId,
}) => <>{value}</>;

Type safety in column definitions

The SimpleTableV2ColumnDef interface now allows a generic to be set, which defines your row type. You can either define your own type that will mirror your row data, or use type inference if you have uniform data.

// Will result in an inferred type Array<{ name: string }>;
const data = useMemo(() => [{ name: 'John' }, { name: 'Andrea' }], []);

const columns = useMemo<SimpleTableV2ColumnDef<(typeof data)[number]>[]>(
  () => [
    {
      header: 'Name',
      accessor: 'name',
    },
  ],
  [],
);

Accessor changes

The accessor mostly functions the same way as in the SimpleTable. However the accessor and the id are now required properties on the SimpleTableV2ColumnDef.

The accessor can still also be defined as a function, and will be passed the entire row data.