Codemods

DataTableV2 Transform

Converts a v6 DataTableV2 component to a v7 DataTable component.

Automatic Changes

• Renames the import and usages of DataTableV2 to DataTable.
• Renames the sortable prop to isSortable.
• Renames the checkable prop to isCheckable.
• Renames the expandable prop to isExpandable.
• Renames the sortBy prop to sortById.
• Renames the onRowCheckChange prop to onIsCheckedChange. See manual changes below.
• Renames the onHeaderRowCheckChange prop to onSelectAllCheckChange. See manual changes below.
• Renames the getSortByLabel prop to labelOverrides.getSortLabelScreenreaderText.
• Renames the striped prop to zebraStripes and attempts to update its value. See manual changes below.
• Renames the bordered prop to borders and attempts to update its value. See manual changes below.
• Renames the small prop to density and attempts to update its value. See manual changes below.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { DataTableV2 } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <DataTableV2
6      id="data-table-id"
7      sortable={sortable}
8      checkable={checkable}
9      expandable={expandable}
10      sortBy={sortBy}
11      onRowCheckChange={() => {}}
12      onHeaderRowCheckChange={() => {}}
13      onExpandRowClick={() => {}}
14      getSortByLabel={() => {}}
15      striped={striped}
16      bordered={bordered}
17      small={small}
18      theme={{ color: 'red' }}
19      {...otherProps}
20    >
21      {/** Children */}
22    </DataTableV2>
23  );
24}

Transforms into:

1import { DataTable } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <DataTable
6      id="data-table-id"
7      isSortable={sortable}
8      isCheckable={checkable}
9      isExpandable={expandable}
10      sortById={sortBy}
11      onIsCheckedChange={() => {}}
12      onSelectAllCheckChange={() => {}}
13      onExpandRowClick={() => {}}
14      zebraStripes={striped}
15      borders={bordered}
16      density={small}
17      labelOverrides={{
18        getSortLabelScreenreaderText: () => {},
19      }}
20      {...otherProps}
21    >
22      {/** Children */}
23    </DataTable>
24  );
25}

Manual Changes

Function signature changes

The onRowCheckChange prop has been renamed to onIsCheckedChange and the function signature has been updated. Remove the first parameter event from the function signature.

The onHeaderRowCheckChange prop has been renamed to onSelectAllCheckChange and the function signature has been updated. Remove the first parameter event from the function signature.

The onExpandRowClick prop function signature has been updated. Remove the first parameter event from the function signature.

Prop value changes

The striped prop has been renamed to zebraStripes. Its valid values are 'rows' | 'columns' | 'none'.

The bordered prop has been renamed to borders. Its valid values are 'all' | 'columns' | 'rows' | 'none'.

The small prop has been renamed to density. Its valid values are 'default' | 'compact'.