playbook_ui 14.22.0.pre.alpha.PLAY22588587 → 14.22.0.pre.alpha.customheaderat8564

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 911865c34980d9a3e4456c6d6261d2c78bcc4be2295b4250f639415c020c6557
-  data.tar.gz: ffbc96ad87820c2ecedb124a431d654e168ce906b0dff718ca65af44017c2bf0
+  metadata.gz: ae6b3ef179ba514261a9c3f24c44b3609980ad8295193eca7bf5ea78599e3f32
+  data.tar.gz: 59f4da05e7dc18142518d658c9dcb6e02938972abce9ca14af52a725839bf150
 SHA512:
-  metadata.gz: 439099c3f2922db547ad9f6b41a9424b07da3cdd25f97c0c881ab41b727858d3e81bac0ace6737a96dfb98b02c70e4014f199f40f5c9941d45fef77aeb01a60d
-  data.tar.gz: 31ce0f8177eb5fe6e5a4752ddd67f59abf21c91255d2d9deee8af886b2fcc23dbab7b7df1a8fc964cab98aadbdaf7abf85b15f344fa566ec35ed64056220d29b
+  metadata.gz: e891d0c03d22b2b4d0ae5faeac636fb884e54619f00b236a6cba2988a4432880f305f1d894f06005c4aa45dfefd83a440bf13395d43303cb875d129a140b6d24
+  data.tar.gz: 72d84a27a4f5ec1c18d7f7b1da0d093336282250ebf56351639b7da26ee64593ae9ac79caa56a8a15df148e7091642afb56f390860a9a97c095c6e964128b178

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -7,7 +7,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
-import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -33,19 +32,17 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
+  const { inlineRowLoading } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
-  const hasSubrowsToSort = row.getParentRow()?.subRows
-
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-            isChrome() ? "chrome-styles" : ""
+          isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -53,39 +50,21 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
-              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            <Flex columnGap="xs">
-              {enableToggleExpansion === "all" && canExpand ? (
-                <ToggleIconButton onClick={onClick} 
-                    row={row} 
-                />
-              ) : null}
-              <Caption
-                  marginLeft={canExpand ? "none" : "xs"}
-                  text={subRowHeaders[row.depth - 1]}
+            {enableToggleExpansion === "all" && canExpand ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
               />
-            </Flex>
-            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
-              <button
-                  aria-label="Sort this group"
-                  className="sort-button-icon gray-icon"
-                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
-              >
-                <Icon 
-                    cursor="pointer" 
-                    fixedWidth 
-                    icon="sort" 
-                />
-              </button>
-            )}
+            ) : null}
+            <Caption
+                marginLeft={canExpand ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  );
+  )
 }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -87,7 +87,7 @@ export function useTableState({
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.label || "",
+          header: column.header || column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.label || "",
+          header: column.header ?? column.label ?? "",
         }),
       };
 

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -189,6 +189,11 @@
         box-sizing: border-box !important;
       }
     }
+    // Fixes for tooltip picking up th styling from Table kit
+    .pb_tooltip_kit {
+      font-weight: unset;
+      text-transform: unset;
+    }
   }
 
   .pb_advanced_table_body {

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -36,7 +36,6 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
-  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -68,7 +67,6 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -83,7 +81,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
-    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -98,7 +95,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
-    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -329,7 +325,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
-            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -341,7 +336,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
-            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_custom_sort.jsx → _advanced_table_with_custom_header.jsx}

@@ -1,65 +1,69 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-const AdvancedTableCustomSort = (props) => {
+const AdvancedTableWithCustomHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      id: "year",
       cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
-      id: "newEnrollments",
       label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
     },
     {
       accessor: "scheduledMeetings",
-      id: "scheduledMeetings",
       label: "Scheduled Meetings",
     },
     {
       accessor: "attendanceRate",
-      id: "attendanceRate",
       label: "Attendance Rate",
     },
     {
       accessor: "completedClasses",
-      id: "completedClasses",
       label: "Completed Classes",
     },
     {
       accessor: "classCompletionRate",
-      id: "classCompletionRate",
       label: "Class Completion Rate",
     },
     {
       accessor: "graduatedStudents",
-      id: "graduatedStudents",
       label: "Graduated Students",
     },
-  ]
-
-//Render the subRow header rows
-const subRowHeaders = ["Quarter", "Month", "Day"]
+  ];
 
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          customSort
-          enableToggleExpansion="all"
-          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
           tableData={MOCK_DATA}
           {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
-      </AdvancedTable>
+      />
     </div>
   )
 }
 
-export default AdvancedTableCustomSort
+export default AdvancedTableWithCustomHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -19,15 +19,14 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   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_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -41,6 +40,7 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -38,4 +38,4 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
-export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'