diff --git a/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx b/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx
index 28e2a8dc54..4d38514c12 100644
--- a/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx
@@ -21,6 +21,46 @@ import {
Tiles,
} from '../';
import source from '@braid-design-system/source.macro';
+import type { StackProps } from '../Stack/Stack';
+import { palette } from '../../color/palette';
+import { ScrollContainer } from '../private/ScrollContainer/ScrollContainer';
+
+const opacityForDepth = {
+ table: 1,
+ section: 0.35,
+ row: 0.5,
+ cell: 0.7,
+} as const;
+
+const TableSection = ({
+ name,
+ type,
+ children,
+}: {
+ name: string;
+ type: keyof typeof opacityForDepth;
+ children?: StackProps['children'];
+}) => (
+
+
+
+
+
+ {name}
+
+ {children}
+
+
+
+);
const docs: ComponentDocs = {
category: 'Layout',
@@ -117,135 +157,44 @@ const docs: ComponentDocs = {
),
+ background: false,
code: false,
playroom: false,
Example: () =>
source(
-
-
-
-
- Table
-
-
-
-
- TableHeader
-
-
-
-
-
- TableRow
-
-
-
-
- TableHeaderCell
-
-
-
-
-
-
-
-
-
-
-
- TableBody (required)
-
-
-
-
-
- TableRow
-
-
-
-
- TableCell
-
-
-
-
-
-
-
-
-
-
- TableFooter
-
-
-
-
-
- TableRow
-
-
-
-
- TableCell
-
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
),
},
{
@@ -1184,6 +1133,81 @@ const docs: ComponentDocs = {
,
);
+ return {
+ code: codeDemo.replaceAll(': any', '').replaceAll(' key={row}', ''),
+ value: visual,
+ };
+ },
+ },
+ {
+ label: 'Column spanning',
+ description: (
+
+ Both TableCell and TableHeadCell can
+ span across multiple columns by providing the number of columns via
+ the colspan prop.
+
+ ),
+ Example: ({ setDefaultState, getState }) => {
+ const { code: codeDemo, value: visual } = source(
+ <>
+ {setDefaultState('rows', [
+ {
+ column1: 'Sit',
+ column2: 'Amet',
+ column3: 'Consectetur',
+ },
+ {
+ column1: 'Adipiscing',
+ column2: 'Elit',
+ column3: 'Praesent',
+ },
+ ])}
+
+
+
+
+
+ Lorem
+
+
+ Ipsum
+
+
+ Dolor
+
+
+
+
+ {getState('rows').map((row: any) => (
+
+
+ {row.column1}
+
+
+ {row.column2}
+
+
+ {row.column3}
+
+
+ ))}
+
+
+
+ Culpa labore minim consectetur ut officia ea ea cupidatat
+ excepteur.
+
+
+
+ Tempor
+
+
+
+
+ ,
+ );
+
return {
code: codeDemo.replaceAll(': any', '').replaceAll(' key={row}', ''),
value: visual,