UI: Use react-table column header types in InteractiveTable with story and tests (#116091)

* feat(InteractiveTable): allow custom header rendering * docs(InteractiveTable): add story for custom header rendering * test(InteractiveTable): add tests for custom header rendering * docs(InteractiveTable): add custom header rendering documentation * fix: test failure from non-a11y code
2026-01-14 17:59:03 +00:00
parent 450eaba447
commit 189d50d815
4 changed files with 183 additions and 3 deletions
@@ -117,6 +117,44 @@ export const MyComponent = () => {
 };
 ```

+### Custom Header Rendering
+
+Column headers can be customized using strings, React elements, or renderer functions. The `header` property accepts any value that matches React Table's `Renderer` type.
+
+**Important:** When using custom header content, prefer inline elements (like `<span>`) over block elements (like `<div>`) to avoid layout issues. Block-level elements can cause extra spacing and alignment problems in table headers because they disrupt the table's inline flow. Use `display: inline-flex` or `display: inline-block` when you need flexbox or block-like behavior.
+
+```tsx
+const columns: Array<Column<TableData>> = [
+  // React element header
+  {
+    id: 'checkbox',
+    header: (
+      <>
+        <label htmlFor="select-all" className="sr-only">
+          Select all rows
+        </label>
+        <Checkbox id="select-all" />
+      </>
+    ),
+    cell: () => <Checkbox aria-label="Select row" />,
+  },
+
+  // Function renderer header
+  {
+    id: 'firstName',
+    header: () => (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+        <Icon name="user" size="sm" />
+        <span>First Name</span>
+      </span>
+    ),
+  },
+
+  // String header
+  { id: 'lastName', header: 'Last name' },
+];
+```
+
 ### Custom Cell Rendering

 Individual cells can be rendered using custom content dy defining a `cell` property on the column definition.