diff --git a/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx b/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx
index 691e291de8ad24..9835dacbc04d16 100644
--- a/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx
@@ -90,74 +90,67 @@ const items: Item[] = [
   },
 ];
 
-export const CustomRowId = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const CustomRowId = () => {
   const [selectedRows, setSelectedRows] = React.useState(
     new Set<TableRowId>(['Thursday presentation']),
   );
diff --git a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
index 0d03c64e5b2747..d77f6db7fdb6bc 100644
--- a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const Default = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const Default = () => {
   return (
     <DataGrid
       items={items}
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
index eef93799f815ed..6061f1d886d088 100644
--- a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const MultipleSelect = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const MultipleSelect = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   return (
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
index a323563d30560b..dd174c9063655a 100644
--- a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
@@ -89,74 +89,67 @@ const items: Item[] = [
   },
 ];
 
-export const MultipleSelectControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const MultipleSelectControlled = () => {
   const [selectedRows, setSelectedRows] = React.useState(
     new Set<TableRowId>([1]),
   );
diff --git a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
index 95a61a2564bb69..1022a12a5c75d8 100644
--- a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const RowNavigation = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const RowNavigation = () => {
   return (
     <DataGrid items={items} columns={columns} focusMode="row_unstable">
       <DataGridHeader>
diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
index 660515e6a7ea07..ce8104ef7a50ad 100644
--- a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const SelectionAppearance = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const SelectionAppearance = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   return (
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
index 70ff6b8e33069a..da06c3e3b4a02f 100644
--- a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const SingleSelect = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const SingleSelect = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   return (
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
index fbcf584f692a09..164728d6ebc362 100644
--- a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
@@ -89,74 +89,67 @@ const items: Item[] = [
   },
 ];
 
-export const SingleSelectControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const SingleSelectControlled = () => {
   const [selectedRows, setSelectedRows] = React.useState(
     new Set<TableRowId>([1]),
   );
diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
index b0f76f29139a2b..0cae52892312c7 100644
--- a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
@@ -88,74 +88,67 @@ const items: Item[] = [
   },
 ];
 
-export const Sort = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const Sort = () => {
   const defaultSortState = React.useMemo<SortState>(() => ({ sortColumn: 'file', sortDirection: 'ascending' }), []);
 
   return (
diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
index d9ce53f21b7384..2366de7b8d1ad7 100644
--- a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
@@ -89,74 +89,67 @@ const items: Item[] = [
   },
 ];
 
-export const SortControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const SortControlled = () => {
   const [sortState, setSortState] = React.useState<SortState>({ sortColumn: 'file', sortDirection: 'ascending' });
   const onSortChange: DataGridProps['onSortChange'] = (e, nextSortState) => {
     setSortState(nextSortState);
diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
index bd59445610ba59..3c2209b4525c79 100644
--- a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
@@ -87,74 +87,67 @@ const items: Item[] = [
   },
 ];
 
-export const SubtleSelection = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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>;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-        renderHeaderCell: () => {
-          return 'Author';
-        },
-        renderCell: item => {
-          return (
-            <TableCellLayout
-              media={
-                <Avatar
-                  aria-label={item.author.label}
-                  name={item.author.label}
-                  badge={{ status: item.author.status }}
-                />
-              }
-            >
-              {item.author.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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>;
-        },
-      }),
-    ],
-    [],
-  );
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
 
+export const SubtleSelection = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   return (
diff --git a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
index 428b41b6e5e2f3..8f19b8a2785a21 100644
--- a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
@@ -49,115 +49,109 @@ type Item = {
   lastUpdate: LastUpdateCell;
 };
 
-export const Virtualization = () => {
-  const { targetDocument } = useFluent();
-  const scrollbarWidth = useScrollbarWidth({ targetDocument });
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<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}>
-              <strong>[{item.index}] </strong>
-              {item.file.label}
-            </TableCellLayout>
-          );
-        },
-      }),
-      createTableColumn<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>
-          );
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-        renderHeaderCell: () => {
-          return 'Last updated';
-        },
+const baseItems = [
+  {
+    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 />,
+    },
+  },
+];
 
-        renderCell: item => {
-          return item.lastUpdated.label;
-        },
-      }),
-      createTableColumn<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 items = new Array(1500).fill(0).map((_, i) => ({ ...baseItems[i % baseItems.length], index: i }));
 
-  const items = React.useMemo(() => {
-    const baseItems = [
-      {
-        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 />,
-        },
-      },
-    ];
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<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}>
+          <strong>[{item.index}] </strong>
+          {item.file.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<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>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
 
-    return new Array(1500).fill(0).map((_, i) => ({ ...baseItems[i % baseItems.length], index: i }));
-  }, []);
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<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>;
+    },
+  }),
+];
+
+export const Virtualization = () => {
+  const { targetDocument } = useFluent();
+  const scrollbarWidth = useScrollbarWidth({ targetDocument });
 
   return (
     <DataGrid items={items} columns={columns} focusMode="cell" sortable selectionMode="multiselect">
diff --git a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx
index 8a7cbe70f1b627..1572f37d364038 100644
--- a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx
@@ -90,25 +90,22 @@ const items: Item[] = [
   },
 ];
 
-export const MultipleSelect = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
 
+export const MultipleSelect = () => {
   const {
     getRows,
     selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
diff --git a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx
index aff07df9922209..8363bf6efcafb8 100644
--- a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx
@@ -91,25 +91,22 @@ const items: Item[] = [
   },
 ];
 
-export const MultipleSelectControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
 
+export const MultipleSelectControlled = () => {
   const [selectedRows, setSelectedRows] = React.useState(
     () => new Set<TableRowId>([0, 1]),
   );
diff --git a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx
index e4bfe61cd5dd29..9ac3aea9599fce 100644
--- a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx
@@ -90,25 +90,22 @@ const items: Item[] = [
   },
 ];
 
-export const SingleSelect = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
 
+export const SingleSelect = () => {
   const {
     getRows,
     selection: { toggleRow, isRowSelected },
diff --git a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx
index 4af15247a1b36f..b5995c4debcbfa 100644
--- a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx
@@ -91,25 +91,22 @@ const items: Item[] = [
   },
 ];
 
-export const SingleSelectControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
 
+export const SingleSelectControlled = () => {
   const [selectedRows, setSelectedRows] = React.useState(
     () => new Set<TableRowId>([1]),
   );
diff --git a/packages/react-components/react-table/stories/Table/Sort.stories.tsx b/packages/react-components/react-table/stories/Table/Sort.stories.tsx
index bcb2bacaa55794..a4cf7e1e12ac54 100644
--- a/packages/react-components/react-table/stories/Table/Sort.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/Sort.stories.tsx
@@ -90,37 +90,34 @@ const items: Item[] = [
   },
 ];
 
-export const Sort = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-        compare: (a, b) => {
-          return a.file.label.localeCompare(b.file.label);
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-        compare: (a, b) => {
-          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
-        },
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+    compare: (a, b) => {
+      return a.file.label.localeCompare(b.file.label);
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+    compare: (a, b) => {
+      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+    },
+  }),
+];
 
+export const Sort = () => {
   const {
     getRows,
     sort: { getSortDirection, toggleColumnSort, sort },
diff --git a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx
index c5a364034127dc..e56be5f1169386 100644
--- a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx
@@ -90,37 +90,34 @@ const items: Item[] = [
   },
 ];
 
-export const SortControlled = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-        compare: (a, b) => {
-          return a.file.label.localeCompare(b.file.label);
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-        compare: (a, b) => {
-          return a.author.label.localeCompare(b.author.label);
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-        compare: (a, b) => {
-          return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
-        },
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-        compare: (a, b) => {
-          return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
-        },
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+    compare: (a, b) => {
+      return a.file.label.localeCompare(b.file.label);
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+    compare: (a, b) => {
+      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+    },
+  }),
+];
 
+export const SortControlled = () => {
   const [sortState, setSortState] = React.useState<{
     sortDirection: 'ascending' | 'descending';
     sortColumn: TableColumnId | undefined;
diff --git a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx
index e5c70f31637adf..bfd27d3422ca44 100644
--- a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx
@@ -90,25 +90,22 @@ const items: Item[] = [
   },
 ];
 
-export const SubtleSelection = () => {
-  const columns: TableColumnDefinition<Item>[] = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
 
+export const SubtleSelection = () => {
   const {
     getRows,
     selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
diff --git a/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx b/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx
index 3add133a6c3bef..d1bde9c1c7fa4a 100644
--- a/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx
@@ -55,69 +55,65 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
+const baseItems: 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 />,
+    },
+  },
+];
+
+const items = new Array(1500).fill(0).map((_, i) => baseItems[i % baseItems.length]);
+
+const columns = [
+  createTableColumn<Item>({
+    columnId: 'file',
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+  }),
+];
+
 export const Virtualization = () => {
   const { targetDocument } = useFluent();
   const scrollbarWidth = useScrollbarWidth({ targetDocument });
-  const columns = React.useMemo(
-    () => [
-      createTableColumn<Item>({
-        columnId: 'file',
-      }),
-      createTableColumn<Item>({
-        columnId: 'author',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdated',
-      }),
-      createTableColumn<Item>({
-        columnId: 'lastUpdate',
-      }),
-    ],
-    [],
-  );
-
-  const items = React.useMemo(() => {
-    const baseItems: 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 />,
-        },
-      },
-    ];
-
-    return new Array(1500).fill(0).map((_, i) => baseItems[i % baseItems.length]);
-  }, []);
 
   const {
     getRows,