diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx index 0b6363bae7..7181c244dd 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx @@ -49,10 +49,15 @@ export const TableHeaderCell = ({ } } + const isLeafColumn = + header.column.getLeafColumns().length === 1 && + header.column.getLeafColumns()[0].id === header.column.id + const cellClassName = classnames("table-header-cells", `${isChrome() ? "chrome-styles" : ""}`, `${enableSorting ? "table-header-cells-active" : ""}`, { 'pinned-left': responsive === "scroll" && isPinnedLeft }, + isLeafColumn ? "leaf-column" : "", ) const cellId = `${loading ? @@ -72,10 +77,13 @@ const isToggleExpansionEnabled = (enableToggleExpansion === "all" || "header") && enableToggleExpansion !== "none" +const justifyHeader = isLeafColumn ? "end" : "center" + return ( @@ -89,7 +97,7 @@ const isToggleExpansionEnabled = ) : ( {isToggleExpansionEnabled && ( diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss index 5f564b08a0..2874729f1b 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss @@ -31,6 +31,21 @@ min-width: 180px; } + .pb_advanced_table_header { + > tr:not(:first-child) { + th { + border-radius: 0px !important; + border-width: 0 1px 1px 0 !important; + } + th:first-child { + border-left-width: 1px !important; + @media only screen and (max-width: $screen-xl-min) { + border-left-width: 0 !important; + } + } + } + } + .table-header-cells-active:first-child { color: $primary !important; } 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 51a8184a9a..2ea7776327 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 @@ -142,27 +142,41 @@ const AdvancedTable = (props: AdvancedTableProps) => { } return columnCells } -//Create column array in format needed by Tanstack - const columns = - columnDefinitions && + + const buildColumns = (columnDefinitions) => { + return ( + columnDefinitions && columnDefinitions.map((column, index) => { - // Define the base column structure - const columnStructure = { - ...columnHelper.accessor(column.accessor, { - header: column.label, - }), - } + //Checking to see if grouped column or not + if (column.columns && column.columns.length > 0) { + return { + header: column.label || "", + columns: buildColumns(column.columns), + }; + } else { + // Define the base column structure + const columnStructure = { + ...columnHelper.accessor(column.accessor, { + header: column.label || "", + }), + }; - if (column.cellAccessors || column.customRenderer) { - columnStructure.cell = createCellFunction( - column.cellAccessors, - column.customRenderer, - index - ) - } + if (column.cellAccessors || column.customRenderer) { + columnStructure.cell = createCellFunction( + column.cellAccessors, + column.customRenderer, + index + ); + } + + return columnStructure; + } + }) + ); + }; - return columnStructure -}) + //Create column array in format needed by Tanstack + const columns = buildColumns(columnDefinitions); //Syntax for sorting Array if we want to manage state ourselves const sorting = [ diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx new file mode 100644 index 0000000000..24ef753da5 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx @@ -0,0 +1,61 @@ +import React from "react" +import { AdvancedTable } from "playbook-ui" +import MOCK_DATA from "./advanced_table_mock_data.json" + +const AdvancedTableColumnHeaders = (props) => { + const columnDefinitions = [ + { + accessor: "year", + label: "Year", + cellAccessors: ["quarter", "month", "day"], + }, + { + label: "Enrollment Data", + columns: [ + { + accessor: "newEnrollments", + label: "New Enrollments", + }, + { + accessor: "scheduledMeetings", + label: "Scheduled Meetings", + }, + ], + }, + { + label: "Performance Data", + columns: [ + { + accessor: "attendanceRate", + label: "Attendance Rate", + }, + { + accessor: "completedClasses", + label: "Completed Classes", + }, + { + accessor: "classCompletionRate", + label: "Class Completion Rate", + }, + { + accessor: "graduatedStudents", + label: "Graduated Students", + }, + ], + }, + ]; + + + return ( +
+ +
+ ) +} + +export default AdvancedTableColumnHeaders 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 c47594bde4..d93721af40 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 @@ -7,16 +7,17 @@ examples: react: - advanced_table_default: Default (Required Props) - - advanced_table_loading: Loading State - - advanced_table_sort: Enable Sorting - - advanced_table_sort_control: Sort Control - - advanced_table_expanded_control: Expanded Control - - advanced_table_subrow_headers: SubRow Headers - - advanced_table_collapsible_trail: Collapsible Trail - - advanced_table_table_options: Table Options - - advanced_table_table_props: Table Props - - advanced_table_inline_row_loading: Inline Row Loading - - advanced_table_responsive: Responsive Tables - - advanced_table_custom_cell: Custom Components for Cells - - advanced_table_pagination: Pagination - - advanced_table_pagination_with_props: Pagination Props + # - advanced_table_loading: Loading State + # - advanced_table_sort: Enable Sorting + # - advanced_table_sort_control: Sort Control + # - advanced_table_expanded_control: Expanded Control + # - advanced_table_subrow_headers: SubRow Headers + # - advanced_table_collapsible_trail: Collapsible Trail + # - advanced_table_table_options: Table Options + # - advanced_table_table_props: Table Props + # - advanced_table_inline_row_loading: Inline Row Loading + # - advanced_table_responsive: Responsive Tables + # - advanced_table_custom_cell: Custom Components for Cells + # - advanced_table_pagination: Pagination + # - advanced_table_pagination_with_props: Pagination Props + - advanced_table_column_headers: Column Headers diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js index 1f3131a070..6c0b2ce02f 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js @@ -12,3 +12,4 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx' export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx' export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx' +export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx' \ No newline at end of file