import { Meta } from '@storybook/addon-docs';
import Link from '@cloudscape-design/components/link';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

<Meta title="Migration/Table" />

# Migrating from NorthStar legacy - Table

Use <Link href='https://aws.github.io/aws-northstar/?path=/story/components-table--default' target='_blank' external>NorthStar v2 Table component</Link>

## Update Import

```diff
- import Table from 'aws-northstar/components/Table';
+ import Table from '@aws-northstar/ui/components/Table';
```

## Update Table Column Definition

```diff
- const columnDefinition: Column<DataType>[] = [
+ const columnDefinition: ColumnDefinition<DataType>[] = [
    {
        id: 'id',
        width: 200,
-       Header: 'Id',
+       header: 'Id',
-       accessor: 'id',
+       cell: (data) => data.id,
+       sortingField: 'id', // If sorting is required on this column
    },
    ...
]
```

## Update SelectionChangeHandler

```diff
+ import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
+ import { SelectionChangeDetail } from '@aws-northstar/ui/components/Table';

- const handleSelectionChange = useCallback(
+ const handleSelectionChange: NonCancelableEventHandler<SelectionChangeDetail<DataType>> = useCallback(
-     (selectedItems) => {
+     ({ detail }) => {
+        const selectItems = detail.selectedItems; 
      },
      []
  );
```

export const Component = () => {
  return <SyntaxHighlighter/>;
};