From ec3dd5c2555b4abcbcbb0253e095d7c7e652017c Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 23 Sep 2025 13:37:31 -0400
Subject: [PATCH] feat(CC-table): init table

---
 .../components/Table/BasicRow.figma.tsx       | 20 +++++++++
 .../components/Table/ClickableRow.figma.tsx   | 26 +++++++++++
 ...ableDoesNotSupportExpandableRows.figma.tsx | 22 ++++++++++
 .../Table/ColumnHeaderHeaderCell.figma.tsx    | 22 ++++++++++
 .../Table/ColumnHeaderLeftControls.figma.tsx  | 43 +++++++++++++++++++
 ...lumnHeaderRightActionPlaceholder.figma.tsx | 11 +++++
 .../Table/CompoundExpandableRows.figma.tsx    | 12 ++++++
 .../Table/CompoundExpandableTable.figma.tsx   | 19 ++++++++
 .../components/Table/DraggableRow.figma.tsx   | 15 +++++++
 .../Table/LeftActionsColumn.figma.tsx         | 18 ++++++++
 .../Table/RightActionColumn.figma.tsx         | 22 ++++++++++
 .../components/Table/RowBackgrounds.figma.tsx | 11 +++++
 .../Table/RowBasedTableRecommended.figma.tsx  | 25 +++++++++++
 ...ellCompoundExpandableContentCell.figma.tsx | 11 +++++
 .../TableCellDefaultContentCell.figma.tsx     | 11 +++++
 .../Table/TableCellLeftControls.figma.tsx     | 43 +++++++++++++++++++
 .../Table/TableCellRightAction.figma.tsx      | 11 +++++
 .../components/Table/TableHeaderRow.figma.tsx | 15 +++++++
 .../components/Table/_ContentColumn.figma.tsx | 15 +++++++
 packages/code-connect/figma.config.json       | 13 +++---
 20 files changed, 377 insertions(+), 8 deletions(-)
 create mode 100644 packages/code-connect/components/Table/BasicRow.figma.tsx
 create mode 100644 packages/code-connect/components/Table/ClickableRow.figma.tsx
 create mode 100644 packages/code-connect/components/Table/ColumnBasedTableDoesNotSupportExpandableRows.figma.tsx
 create mode 100644 packages/code-connect/components/Table/ColumnHeaderHeaderCell.figma.tsx
 create mode 100644 packages/code-connect/components/Table/ColumnHeaderLeftControls.figma.tsx
 create mode 100644 packages/code-connect/components/Table/ColumnHeaderRightActionPlaceholder.figma.tsx
 create mode 100644 packages/code-connect/components/Table/CompoundExpandableRows.figma.tsx
 create mode 100644 packages/code-connect/components/Table/CompoundExpandableTable.figma.tsx
 create mode 100644 packages/code-connect/components/Table/DraggableRow.figma.tsx
 create mode 100644 packages/code-connect/components/Table/LeftActionsColumn.figma.tsx
 create mode 100644 packages/code-connect/components/Table/RightActionColumn.figma.tsx
 create mode 100644 packages/code-connect/components/Table/RowBackgrounds.figma.tsx
 create mode 100644 packages/code-connect/components/Table/RowBasedTableRecommended.figma.tsx
 create mode 100644 packages/code-connect/components/Table/TableCellCompoundExpandableContentCell.figma.tsx
 create mode 100644 packages/code-connect/components/Table/TableCellDefaultContentCell.figma.tsx
 create mode 100644 packages/code-connect/components/Table/TableCellLeftControls.figma.tsx
 create mode 100644 packages/code-connect/components/Table/TableCellRightAction.figma.tsx
 create mode 100644 packages/code-connect/components/Table/TableHeaderRow.figma.tsx
 create mode 100644 packages/code-connect/components/Table/_ContentColumn.figma.tsx

diff --git a/packages/code-connect/components/Table/BasicRow.figma.tsx b/packages/code-connect/components/Table/BasicRow.figma.tsx
new file mode 100644
index 00000000000..0ea21bd08d1
--- /dev/null
+++ b/packages/code-connect/components/Table/BasicRow.figma.tsx
@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Tr } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2930-36939', {
+  props: {
+    // boolean
+    isExpanded: figma.boolean('Expanded'),
+    isRowSelected: figma.boolean('Selected'),
+
+    // enum
+    children: figma.children('*')
+  },
+  example: (props) => (
+    <Tr isExpanded={props.isExpanded} isRowSelected={props.isRowSelected}>
+      {props.children}
+    </Tr>
+  )
+});
diff --git a/packages/code-connect/components/Table/ClickableRow.figma.tsx b/packages/code-connect/components/Table/ClickableRow.figma.tsx
new file mode 100644
index 00000000000..7da09fcaa42
--- /dev/null
+++ b/packages/code-connect/components/Table/ClickableRow.figma.tsx
@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { Tr } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2930-40632', {
+  props: {
+    isExpanded: figma.boolean('Expanded'),
+    isRowSelected: figma.enum('State', {
+      Clicked: true
+    }),
+
+    children: figma.children('*')
+  },
+  example: (props) => (
+    <Tr
+      onRowClick={() => {}}
+      isSelectable
+      isExpanded={props.isExpanded}
+      isClickable
+      isRowSelected={props.isRowSelected}
+    >
+      {props.children}
+    </Tr>
+  )
+});
diff --git a/packages/code-connect/components/Table/ColumnBasedTableDoesNotSupportExpandableRows.figma.tsx b/packages/code-connect/components/Table/ColumnBasedTableDoesNotSupportExpandableRows.figma.tsx
new file mode 100644
index 00000000000..e10c61cc2b5
--- /dev/null
+++ b/packages/code-connect/components/Table/ColumnBasedTableDoesNotSupportExpandableRows.figma.tsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { Table } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(
+  Table,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6482-49461',
+  {
+    props: {
+      // enum
+      variant: figma.enum('Size', { Compact: 'compact' }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Table variant={props.variant} aria-label="Column based table">
+        {props.children}test
+      </Table>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Table/ColumnHeaderHeaderCell.figma.tsx b/packages/code-connect/components/Table/ColumnHeaderHeaderCell.figma.tsx
new file mode 100644
index 00000000000..35cd452e608
--- /dev/null
+++ b/packages/code-connect/components/Table/ColumnHeaderHeaderCell.figma.tsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { Th } from '@patternfly/react-table';
+
+// Documentation for header cell can be found at https://www.patternfly.org/components/table
+
+figma.connect(Th, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14-623', {
+  props: {
+    info: figma.boolean('Show help icon', {
+      true: { tooltip: 'More information ' },
+      false: undefined
+    }),
+    sort: figma.boolean('Sortable', {
+      true: `getSortParams(<row-index>)`,
+      false: undefined
+    })
+  },
+  example: (props) => (
+    <Th sort={props.sort} info={props.info}>
+      Header
+    </Th>
+  )
+});
diff --git a/packages/code-connect/components/Table/ColumnHeaderLeftControls.figma.tsx b/packages/code-connect/components/Table/ColumnHeaderLeftControls.figma.tsx
new file mode 100644
index 00000000000..c84a8b42f26
--- /dev/null
+++ b/packages/code-connect/components/Table/ColumnHeaderLeftControls.figma.tsx
@@ -0,0 +1,43 @@
+import figma from '@figma/code-connect';
+import { Th } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(Th, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6241-29618', {
+  props: {
+    selectAll: figma.boolean('Select all', {
+      true: (
+        <Th
+          select={{
+            onSelect: () => {},
+            isSelected: false
+          }}
+          aria-label="Row select"
+        />
+      ),
+      false: undefined
+    }),
+    expandableAll: figma.boolean('Expandable all', {
+      true: (
+        <Th
+          expand={{
+            onToggle: () => {}
+          }}
+          aria-label="Row expand"
+        />
+      ),
+      false: undefined
+    }),
+    isDraggable: figma.boolean('Is draggable', {
+      true: <Th draggableRow={{ id: `draggable-row-id` }} />,
+      false: undefined
+    })
+  },
+  example: (props) => (
+    <>
+      {props.selectAll}
+      {props.expandableAll}
+      {props.isDraggable}
+    </>
+  )
+});
diff --git a/packages/code-connect/components/Table/ColumnHeaderRightActionPlaceholder.figma.tsx b/packages/code-connect/components/Table/ColumnHeaderRightActionPlaceholder.figma.tsx
new file mode 100644
index 00000000000..7ca5eb586af
--- /dev/null
+++ b/packages/code-connect/components/Table/ColumnHeaderRightActionPlaceholder.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Th } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(Th, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6241-29627', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <Th>{props.children}</Th>
+});
diff --git a/packages/code-connect/components/Table/CompoundExpandableRows.figma.tsx b/packages/code-connect/components/Table/CompoundExpandableRows.figma.tsx
new file mode 100644
index 00000000000..2b2a41ecce2
--- /dev/null
+++ b/packages/code-connect/components/Table/CompoundExpandableRows.figma.tsx
@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Tr } from '@patternfly/react-table';
+
+// Documentation for BasicRow can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2945-48504', {
+  props: {
+    showActions: figma.boolean('Show actions'),
+    children: figma.children('*')
+  },
+  example: (props) => <Tr>{props.children}</Tr>
+});
diff --git a/packages/code-connect/components/Table/CompoundExpandableTable.figma.tsx b/packages/code-connect/components/Table/CompoundExpandableTable.figma.tsx
new file mode 100644
index 00000000000..fca2ffaca70
--- /dev/null
+++ b/packages/code-connect/components/Table/CompoundExpandableTable.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { Table } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(
+  Table,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6482-55919',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Table isExpandable aria-label="Compound expandable table">
+        {props.children}
+      </Table>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Table/DraggableRow.figma.tsx b/packages/code-connect/components/Table/DraggableRow.figma.tsx
new file mode 100644
index 00000000000..4006e8050c6
--- /dev/null
+++ b/packages/code-connect/components/Table/DraggableRow.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { Tr } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=21288-130668', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => (
+    <Tr id="draggable-row-id" draggable onDrop={() => {}} onDragEnd={() => {}} onDragStart={() => {}}>
+      {props.children}
+    </Tr>
+  )
+});
diff --git a/packages/code-connect/components/Table/LeftActionsColumn.figma.tsx b/packages/code-connect/components/Table/LeftActionsColumn.figma.tsx
new file mode 100644
index 00000000000..1de5af5bb19
--- /dev/null
+++ b/packages/code-connect/components/Table/LeftActionsColumn.figma.tsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { ActionsColumn, Td, Th } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Td, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6441-38440', {
+  props: {
+    tableCell: figma.boolean('Column header', {
+      true: <Th screenReaderText="Action cell" />,
+      false: (
+        <Td isActionCell>
+          <ActionsColumn items={[]} />
+        </Td>
+      )
+    })
+  },
+  example: (props) => <>{props.tableCell}</>
+});
diff --git a/packages/code-connect/components/Table/RightActionColumn.figma.tsx b/packages/code-connect/components/Table/RightActionColumn.figma.tsx
new file mode 100644
index 00000000000..de226f2a949
--- /dev/null
+++ b/packages/code-connect/components/Table/RightActionColumn.figma.tsx
@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import { ActionsColumn, Td, Th } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(
+  Td,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6441-38900&m=dev',
+  {
+    props: {
+      tableCell: figma.boolean('Column header', {
+        true: <Th screenReaderText="Action cell" />,
+        false: (
+          <Td isActionCell>
+            <ActionsColumn items={[]} />
+          </Td>
+        )
+      })
+    },
+    example: (props) => <>{props.tableCell}</>
+  }
+);
diff --git a/packages/code-connect/components/Table/RowBackgrounds.figma.tsx b/packages/code-connect/components/Table/RowBackgrounds.figma.tsx
new file mode 100644
index 00000000000..ccc50daf1e4
--- /dev/null
+++ b/packages/code-connect/components/Table/RowBackgrounds.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Tr } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6441-39265', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <Tr>{props.children}</Tr>
+});
diff --git a/packages/code-connect/components/Table/RowBasedTableRecommended.figma.tsx b/packages/code-connect/components/Table/RowBasedTableRecommended.figma.tsx
new file mode 100644
index 00000000000..80d7f5e0ee8
--- /dev/null
+++ b/packages/code-connect/components/Table/RowBasedTableRecommended.figma.tsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { Table } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(
+  Table,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3331-12049',
+  {
+    props: {
+      // boolean
+      isBordered: figma.boolean('Bordered'),
+      isExpandable: figma.boolean('Expandable'),
+
+      // enum
+      variant: figma.enum('Size', { Compact: 'compact' }),
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Table variant={props.variant} borders={props.isBordered} isExpandable={props.isExpandable}>
+        {props.children}
+      </Table>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Table/TableCellCompoundExpandableContentCell.figma.tsx b/packages/code-connect/components/Table/TableCellCompoundExpandableContentCell.figma.tsx
new file mode 100644
index 00000000000..400824acced
--- /dev/null
+++ b/packages/code-connect/components/Table/TableCellCompoundExpandableContentCell.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Td } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Td, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2912-36168', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <Td>{props.children}</Td>
+});
diff --git a/packages/code-connect/components/Table/TableCellDefaultContentCell.figma.tsx b/packages/code-connect/components/Table/TableCellDefaultContentCell.figma.tsx
new file mode 100644
index 00000000000..027211ca72f
--- /dev/null
+++ b/packages/code-connect/components/Table/TableCellDefaultContentCell.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Td } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Td, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14-389', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <Td>{props.children}</Td>
+});
diff --git a/packages/code-connect/components/Table/TableCellLeftControls.figma.tsx b/packages/code-connect/components/Table/TableCellLeftControls.figma.tsx
new file mode 100644
index 00000000000..64fd254ffd5
--- /dev/null
+++ b/packages/code-connect/components/Table/TableCellLeftControls.figma.tsx
@@ -0,0 +1,43 @@
+import figma from '@figma/code-connect';
+import { Td } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Td, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2930-36766', {
+  props: {
+    selectAll: figma.boolean('Row select', {
+      true: (
+        <Td
+          select={{
+            onSelect: () => {},
+            isSelected: false
+          }}
+          aria-label="Row select"
+        />
+      ),
+      false: undefined
+    }),
+    expandableAll: figma.boolean('Row expansion', {
+      true: (
+        <Td
+          expand={{
+            onToggle: () => {}
+          }}
+          aria-label="Row expand"
+        />
+      ),
+      false: undefined
+    }),
+    isDraggable: figma.boolean('Is draggable', {
+      true: <Td draggableRow={{ id: `draggable-row-id` }} />,
+      false: undefined
+    })
+  },
+  example: (props) => (
+    <>
+      {props.selectAll}
+      {props.expandableAll}
+      {props.isDraggable}
+    </>
+  )
+});
diff --git a/packages/code-connect/components/Table/TableCellRightAction.figma.tsx b/packages/code-connect/components/Table/TableCellRightAction.figma.tsx
new file mode 100644
index 00000000000..6337c178370
--- /dev/null
+++ b/packages/code-connect/components/Table/TableCellRightAction.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Td } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Td, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2912-36519', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <Td>{props.children}</Td>
+});
diff --git a/packages/code-connect/components/Table/TableHeaderRow.figma.tsx b/packages/code-connect/components/Table/TableHeaderRow.figma.tsx
new file mode 100644
index 00000000000..4d301c094b0
--- /dev/null
+++ b/packages/code-connect/components/Table/TableHeaderRow.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { Thead, Tr } from '@patternfly/react-table';
+
+// Documentation for Table can be found at https://www.patternfly.org/components/table
+
+figma.connect(Tr, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2912-35117', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => (
+    <Thead>
+      <Tr>{props.children}</Tr>
+    </Thead>
+  )
+});
diff --git a/packages/code-connect/components/Table/_ContentColumn.figma.tsx b/packages/code-connect/components/Table/_ContentColumn.figma.tsx
new file mode 100644
index 00000000000..7360fdf1d8f
--- /dev/null
+++ b/packages/code-connect/components/Table/_ContentColumn.figma.tsx
@@ -0,0 +1,15 @@
+// import figma from '@figma/code-connect';
+// import { ContentColumn } from '@patternfly/react-table';
+
+// // Documentation for Table can be found at https://www.patternfly.org/components/table
+
+// figma.connect(
+//   ContentColumn,
+//   'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6441-38677',
+//   {
+//     props: {
+//       columnHeader: figma.boolean('Column header')
+//     },
+//     example: (props) => <ContentColumn />
+//   }
+// );
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..cea5e7d2710 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,13 +1,10 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
+    "include": ["components/Table/*.figma.tsx"],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
+    },
     "paths": {
       "src/components": "src/components"
     },
@@ -30,4 +27,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}