diff --git a/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx
new file mode 100644
index 00000000000000..71fcead973928e
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx
@@ -0,0 +1,169 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const KeyboardNavigation = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  return (
+    <DataGrid items={items} columns={columns} focusMode="cell">
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
new file mode 100644
index 00000000000000..a266a08035e8dc
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const MultipleSelect = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="multiselect"
+      defaultSelectedItems={defaultSelectedItems}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
new file mode 100644
index 00000000000000..a5160328cc8bcb
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+  RowId,
+  DataGridProps,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const MultipleSelectControlled = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const [selectedRows, setSelectedRows] = React.useState(
+    new Set<RowId>([1]),
+  );
+  const onSelectionChange: DataGridProps['onSelectionChange'] = (e, data) => {
+    setSelectedRows(data.selectedItems);
+  };
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="multiselect"
+      selectedItems={selectedRows}
+      onSelectionChange={onSelectionChange}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
new file mode 100644
index 00000000000000..461413367aeae9
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const SelectionAppearance = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="multiselect"
+      selectionAppearance="neutral"
+      defaultSelectedItems={defaultSelectedItems}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
new file mode 100644
index 00000000000000..2f8c90ed667963
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const SingleSelect = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="single"
+      defaultSelectedItems={defaultSelectedItems}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
new file mode 100644
index 00000000000000..f556b697106f01
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+  RowId,
+  DataGridProps,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const SingleSelectControlled = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const [selectedRows, setSelectedRows] = React.useState(
+    new Set<RowId>([1]),
+  );
+  const onSelectionChange: DataGridProps['onSelectionChange'] = (e, data) => {
+    setSelectedRows(data.selectedItems);
+  };
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="single"
+      selectedItems={selectedRows}
+      onSelectionChange={onSelectionChange}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
new file mode 100644
index 00000000000000..2b3423cda5d7c0
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+import { SortState } from '../../src/hooks/types';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const Sort = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const defaultSortState = React.useMemo<SortState>(() => ({ sortColumn: 'file', sortDirection: 'ascending' }), []);
+
+  return (
+    <DataGrid items={items} columns={columns} focusMode="cell" sortable defaultSortState={defaultSortState}>
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
new file mode 100644
index 00000000000000..d4d53508ef1dd8
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
@@ -0,0 +1,183 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+  DataGridProps,
+} from '@fluentui/react-table';
+import { SortState } from '../../src/hooks/types';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const SortControlled = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const [sortState, setSortState] = React.useState<SortState>({ sortColumn: 'file', sortDirection: 'ascending' });
+  const onSortChange: DataGridProps['onSortChange'] = (e, nextSortState) => {
+    setSortState(nextSortState);
+  };
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      sortable
+      sortState={sortState}
+      onSortChange={onSortChange}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
new file mode 100644
index 00000000000000..045ab6d60cd57d
--- /dev/null
+++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
+import { TableCellLayout } from '@fluentui/react-components/unstable';
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  ColumnDefinition,
+  RowState,
+  createColumn,
+} from '@fluentui/react-table';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 1 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const SubtleSelection = () => {
+  const columns: ColumnDefinition<Item>[] = React.useMemo(
+    () => [
+      createColumn<Item>({
+        columnId: 'file',
+        compare: (a, b) => {
+          return a.file.label.localeCompare(b.file.label);
+        },
+        renderHeaderCell: () => {
+          return 'File';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'author',
+        compare: (a, b) => {
+          return a.author.label.localeCompare(b.author.label);
+        },
+        renderHeaderCell: () => {
+          return 'Author';
+        },
+        renderCell: item => {
+          return (
+            <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+              {item.author.label}
+            </TableCellLayout>
+          );
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdated',
+        compare: (a, b) => {
+          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+        },
+        renderHeaderCell: () => {
+          return 'Last updated';
+        },
+
+        renderCell: item => {
+          return item.lastUpdated.label;
+        },
+      }),
+      createColumn<Item>({
+        columnId: 'lastUpdate',
+        compare: (a, b) => {
+          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+        },
+        renderHeaderCell: () => {
+          return 'Last update';
+        },
+        renderCell: item => {
+          return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      focusMode="cell"
+      selectionMode="multiselect"
+      subtleSelection
+      defaultSelectedItems={defaultSelectedItems}
+    >
+      <DataGridHeader>
+        <DataGridRow>
+          {({ renderHeaderCell }: ColumnDefinition<Item>) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }: RowState<Item>) => (
+          <DataGridRow key={rowId}>
+            {({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
diff --git a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx
index f9a915dec8dfb4..28479914e313ff 100644
--- a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx
@@ -1,6 +1,15 @@
 import { DataGrid } from '../../src/components/DataGrid/DataGrid';
 
 export { Default } from './Default.stories';
+export { KeyboardNavigation } from './KeyboardNavigation.stories';
+export { Sort } from './Sort.stories';
+export { SortControlled } from './SortControlled.stories';
+export { MultipleSelect } from './MultipleSelect.stories';
+export { MultipleSelectControlled } from './MultipleSelectControlled.stories';
+export { SingleSelect } from './SingleSelect.stories';
+export { SingleSelectControlled } from './SingleSelectControlled.stories';
+export { SubtleSelection } from './SubtleSelection.stories';
+export { SelectionAppearance } from './SelectionAppearance.stories';
 export default {
   title: 'Preview Components/DataGrid',
   component: DataGrid,