diff --git a/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx b/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx
index 387a99543bf..378ad3b6c97 100644
--- a/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx
+++ b/packages/braid-design-system/src/lib/components/Table/Table.snippets.tsx
@@ -11,29 +11,32 @@ import {
   Badge,
   ButtonIcon,
   MenuRenderer,
+  MenuItem,
   IconOverflow,
+  Stack,
 } from '../../playroom/components';
 import source from '@braid-design-system/source.macro';
-import { MenuItem } from '../MenuItem/MenuItem';
-import { Stack } from '../Stack/Stack';
-import { stripTypeAnyFromCode } from './stripTypeAnyFromCode';
 
-const state = new Map<string, any>();
-
-function setDefaultState(name: string, data: unknown) {
-  state.set(name, data);
-}
-
-function getState(name: string) {
-  return state.get(name);
-}
 export const snippets: Snippets = [
   {
     name: 'Basic',
-    code: stripTypeAnyFromCode(
-      source(
-        <>
-          {setDefaultState('basicRowData', [
+    code: source(
+      <Table label="Basic table example">
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>
+              <Text>Lorem</Text>
+            </TableHeaderCell>
+            <TableHeaderCell>
+              <Text>Ipsum</Text>
+            </TableHeaderCell>
+            <TableHeaderCell>
+              <Text>Dolor</Text>
+            </TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
             {
               column1: 'Sit',
               column2: 'Amet',
@@ -49,47 +52,48 @@ export const snippets: Snippets = [
               column2: 'Interdum',
               column3: 'Viverra',
             },
-          ])}
-          <Table label="Basic table example">
-            <TableHeader>
-              <TableRow>
-                <TableHeaderCell>
-                  <Text>Lorem</Text>
-                </TableHeaderCell>
-                <TableHeaderCell>
-                  <Text>Ipsum</Text>
-                </TableHeaderCell>
-                <TableHeaderCell>
-                  <Text>Dolor</Text>
-                </TableHeaderCell>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {getState('basicRowData').map((row: any) => (
-                <TableRow key={row.column1}>
-                  <TableCell>
-                    <Text>{row.column1}</Text>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column2}</Text>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column3}</Text>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </>,
-      ),
+          ].map((row) => (
+            <TableRow key={row.column1}>
+              <TableCell>
+                <Text>{row.column1}</Text>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column2}</Text>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column3}</Text>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>,
     ),
   },
   {
     name: 'With status and actions columns',
-    code: stripTypeAnyFromCode(
-      source(
-        <>
-          {setDefaultState('statusAndActionsData', [
+    code: source(
+      <Table label="Status and actions example">
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell width="content">
+              <Text>Status</Text>
+            </TableHeaderCell>
+            <TableHeaderCell width="30%">
+              <Text>Data</Text>
+            </TableHeaderCell>
+            <TableHeaderCell>
+              <Text>Data</Text>
+            </TableHeaderCell>
+            <TableHeaderCell>
+              <Text>Data</Text>
+            </TableHeaderCell>
+            <TableHeaderCell width="content" align="right">
+              <Text>Actions</Text>
+            </TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
             {
               status: 'Lorem',
               column1: 'Sit',
@@ -108,75 +112,64 @@ export const snippets: Snippets = [
               column2: 'Interdum',
               column3: 'Viverra',
             },
-          ])}
-          <Table label="Status and actions example">
-            <TableHeader>
-              <TableRow>
-                <TableHeaderCell width="content">
-                  <Text>Status</Text>
-                </TableHeaderCell>
-                <TableHeaderCell width="30%">
-                  <Text>Data</Text>
-                </TableHeaderCell>
-                <TableHeaderCell>
-                  <Text>Data</Text>
-                </TableHeaderCell>
-                <TableHeaderCell>
-                  <Text>Data</Text>
-                </TableHeaderCell>
-                <TableHeaderCell width="content" align="right">
-                  <Text>Actions</Text>
-                </TableHeaderCell>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {getState('statusAndActionsData').map((row: any) => (
-                <TableRow key={row.column1}>
-                  <TableCell width="content">
-                    <Badge bleedY>{row.status}</Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column1}</Text>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column2}</Text>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column3}</Text>
-                  </TableCell>
-                  <TableCell width="content" align="right">
-                    <MenuRenderer
-                      align="right"
-                      offsetSpace="xsmall"
-                      trigger={(triggerProps) => (
-                        <ButtonIcon
-                          icon={<IconOverflow />}
-                          label="Options"
-                          size="small"
-                          variant="transparent"
-                          id={`options-${row.column1}`}
-                          {...triggerProps}
-                        />
-                      )}
-                    >
-                      <MenuItem onClick={() => {}}>Button</MenuItem>
-                      <MenuItem onClick={() => {}}>Button</MenuItem>
-                    </MenuRenderer>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </>,
-      ),
+          ].map((row) => (
+            <TableRow key={row.column1}>
+              <TableCell width="content">
+                <Badge bleedY>{row.status}</Badge>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column1}</Text>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column2}</Text>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column3}</Text>
+              </TableCell>
+              <TableCell width="content" align="right">
+                <MenuRenderer
+                  align="right"
+                  offsetSpace="xsmall"
+                  trigger={(triggerProps) => (
+                    <ButtonIcon
+                      icon={<IconOverflow />}
+                      label="Options"
+                      size="small"
+                      variant="transparent"
+                      id={`options-${row.column1}`}
+                      {...triggerProps}
+                    />
+                  )}
+                >
+                  <MenuItem onClick={() => {}}>Button</MenuItem>
+                  <MenuItem onClick={() => {}}>Button</MenuItem>
+                </MenuRenderer>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>,
     ),
   },
   {
     name: 'With multi-line cell data and actions',
-    code: stripTypeAnyFromCode(
-      source(
-        <>
-          {setDefaultState('multiLineDataCell', [
+    code: source(
+      <Table label="Multi-line cell data example">
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>
+              <Text>Data</Text>
+            </TableHeaderCell>
+            <TableHeaderCell>
+              <Text>Data</Text>
+            </TableHeaderCell>
+            <TableHeaderCell width="content" align="right">
+              <Text>Actions</Text>
+            </TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
             {
               line1: 'Sit',
               line2: 'Amet',
@@ -192,58 +185,40 @@ export const snippets: Snippets = [
               line2: 'Interdum',
               column2: 'Viverra',
             },
-          ])}
-          <Table label="Multi-line cell data example">
-            <TableHeader>
-              <TableRow>
-                <TableHeaderCell>
-                  <Text>Data</Text>
-                </TableHeaderCell>
-                <TableHeaderCell>
-                  <Text>Data</Text>
-                </TableHeaderCell>
-                <TableHeaderCell width="content" align="right">
-                  <Text>Actions</Text>
-                </TableHeaderCell>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {getState('multiLineDataCell').map((row: any) => (
-                <TableRow key={row.line1}>
-                  <TableCell>
-                    <Stack space="xsmall">
-                      <Text>{row.line1}</Text>
-                      <Text>{row.line2}</Text>
-                    </Stack>
-                  </TableCell>
-                  <TableCell>
-                    <Text>{row.column2}</Text>
-                  </TableCell>
-                  <TableCell width="content" align="right">
-                    <MenuRenderer
-                      align="right"
-                      offsetSpace="xsmall"
-                      trigger={(triggerProps) => (
-                        <ButtonIcon
-                          icon={<IconOverflow />}
-                          label="Options"
-                          size="small"
-                          variant="transparent"
-                          id={`options-${row.line1}`}
-                          {...triggerProps}
-                        />
-                      )}
-                    >
-                      <MenuItem onClick={() => {}}>Button</MenuItem>
-                      <MenuItem onClick={() => {}}>Button</MenuItem>
-                    </MenuRenderer>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </>,
-      ),
+          ].map((row) => (
+            <TableRow key={row.line1}>
+              <TableCell>
+                <Stack space="xsmall">
+                  <Text>{row.line1}</Text>
+                  <Text>{row.line2}</Text>
+                </Stack>
+              </TableCell>
+              <TableCell>
+                <Text>{row.column2}</Text>
+              </TableCell>
+              <TableCell width="content" align="right">
+                <MenuRenderer
+                  align="right"
+                  offsetSpace="xsmall"
+                  trigger={(triggerProps) => (
+                    <ButtonIcon
+                      icon={<IconOverflow />}
+                      label="Options"
+                      size="small"
+                      variant="transparent"
+                      id={`options-${row.line1}`}
+                      {...triggerProps}
+                    />
+                  )}
+                >
+                  <MenuItem onClick={() => {}}>Button</MenuItem>
+                  <MenuItem onClick={() => {}}>Button</MenuItem>
+                </MenuRenderer>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>,
     ),
   },
 ];
diff --git a/packages/braid-design-system/src/lib/playroom/snippets.ts b/packages/braid-design-system/src/lib/playroom/snippets.ts
index c1a4012c071..8e1a1802dad 100644
--- a/packages/braid-design-system/src/lib/playroom/snippets.ts
+++ b/packages/braid-design-system/src/lib/playroom/snippets.ts
@@ -35,6 +35,7 @@ import { snippets as Spread } from './snippets/Spread';
 import { snippets as Stack } from './snippets/Stack';
 import { snippets as Stepper } from './snippets/Stepper';
 import { snippets as Strong } from './snippets/Strong';
+import { snippets as Table } from './snippets/Table';
 import { snippets as Tabs } from './snippets/Tabs';
 import { snippets as Tag } from './snippets/Tag';
 import { snippets as Text } from './snippets/Text';
@@ -84,6 +85,7 @@ export default Object.entries({
   Stack,
   Stepper,
   Strong,
+  Table,
   Tabs,
   Tag,
   Text,