diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx index 63ee4a095f..c88531837d 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx @@ -152,14 +152,12 @@ const AdvancedTable = (props: AdvancedTableProps) => { return { header: column.label || "", columns: buildColumns(column.columns), - headerClassName: 'grouped-header', }; } else { // Define the base column structure const columnStructure = { ...columnHelper.accessor(column.accessor, { header: column.label || "", - cellClassName: 'leaf-column-cell', }), }; diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md new file mode 100644 index 0000000000..fa1e5714ed --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md @@ -0,0 +1 @@ +Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml index e84b193288..7dd856fc6e 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml @@ -21,4 +21,4 @@ examples: - advanced_table_custom_cell: Custom Components for Cells - advanced_table_pagination: Pagination - advanced_table_pagination_with_props: Pagination Props - - advanced_table_column_headers: Multiple Column Headers + - advanced_table_column_headers: Multi-Header Columns