playbook_ui 14.21.2.pre.alpha.PLAY21898327 → 14.21.2.pre.alpha.PLAY22558410

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e88a424221940101bf6f8b972a1627543b65d58fba0638a947531a44506f3d6
-  data.tar.gz: 454248993cf3019183f4769daa8fb083c44fb744d531109b5b3f0dfacd0ea414
+  metadata.gz: e74ebcaf8b226f04a617fc63083c59c61951a3f792409c906b7556ef4976f6c0
+  data.tar.gz: 755270c0eee4c986ca9d0534ffd31bec09383994a038ab4a6da7e43740537e10
 SHA512:
-  metadata.gz: 255e3249796246518bf9cc2e4a5724dd35c16e00dd922840ced6bd1c62e97ab45b2063ddb98cc1bcff2f66b274be9a7631f45bc124999d12c9a4eaaa763dc8f0
-  data.tar.gz: 93465c931d64989d3617881a1753b16a69b4f5d68554c53a74622bc32b223f4e582b2839c67438fad9fa0d2a302260c636f9015b37b48d02ef38690ed5d200d6
+  metadata.gz: f7329823f5e763a4aa9712a78d7467fde07db90542cb2d6416ade72983d3984651f03fb3bb847f92582293623569a9c24a8756b051eec84a524b525a2164b9ce
+  data.tar.gz: 5fab13b2c33b5ee332beb81aed83254723ed0808a7d0b85cc68acadde24d79f8cdf773c7b97e73025e1a6ed00e118304533fab5581ce7bcfd46db7c7b98a843d

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

@@ -19,6 +19,7 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
+  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -28,6 +29,7 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
+  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -43,7 +45,7 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
@@ -65,6 +67,7 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
+              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

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

@@ -27,6 +27,7 @@ const TableCellRenderer = ({
   loading = false,
   stickyLeftColumn,
   columnPinning,
+  customRowStyle,
   columnDefinitions,
 }: {
   row: Row<GenericObject>
@@ -34,6 +35,7 @@ const TableCellRenderer = ({
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
+  customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
@@ -74,6 +76,8 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -107,6 +111,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -171,6 +176,7 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
+        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -189,6 +195,7 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
+                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -206,6 +213,7 @@ export const RegularTableView = ({
                   collapsibleTrail={collapsibleTrail}
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
+                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -32,6 +32,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -49,7 +50,9 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
+  rowStyling
 }: UseTableStateProps) {
+
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
@@ -63,8 +66,8 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
-  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
+  const rowPinning = pinnedRows?.value ?? localRowPinning
+  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -102,7 +105,8 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows
+          selectableRows,
+          rowStyling
         );
       }
 
@@ -165,7 +169,8 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    onRowPinningChange,
+    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
@@ -175,6 +180,26 @@ export function useTableState({
     ...tableOptions,
   });
 
+  // Handle row pinning changes
+    useEffect(() => {
+    const topPins = pinnedRows?.value?.top ?? [];
+    if (topPins.length === 0) {
+      onRowPinningChange({ top: [] });
+      return;
+    }
+    const rows = table.getRowModel().rows;
+    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
+      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
+    const allPinned: string[] = [];
+    topPins.forEach(id => {
+      const parent = rows.find(r => r.id === id && r.depth === 0);
+      if (parent) {
+        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
+      }
+    });
+    onRowPinningChange({ top: allPinned });
+  }, [table, pinnedRows?.value?.top?.join(',')]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -17,7 +17,8 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean
+  selectableRows?: boolean,
+  rowStyling?: GenericObject
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -28,6 +29,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
+    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -35,6 +37,7 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

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

@@ -57,6 +57,7 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
+  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -98,6 +99,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     pinnedRows,
     responsive = "scroll",
+    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -144,6 +146,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
+    rowStyling
   });
 
   // Initialize table actions
@@ -336,6 +339,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
+            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable, Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -652,3 +652,27 @@ test("renders virtualized table rows and header", () => {
   const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
   expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
 })
+
+test("rowStyling prop works as expected", () => {
+  const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.white,
+    fontColor: colors.black
+  },
+];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const row1 = tableBody.querySelector('tr:nth-child(1)') 
+  expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+})

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -0,0 +1,36 @@
+function showActionBar(actionBar, selectedCount) {
+  // Show action bar directly
+  actionBar.style.height = "auto";
+  actionBar.style.overflow = "visible";
+  actionBar.style.opacity = "1";
+  actionBar.style.transitionProperty = "all";
+  actionBar.style.transitionTimingFunction = "ease-in-out";
+  actionBar.classList.remove("p_none");
+  actionBar.classList.add("p_xs", "is-visible", "show-action-card");
+
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
+}
+
+function hideActionBar(actionBar) {
+  // Hide action bar directly
+  actionBar.style.height = "0px";
+  actionBar.style.overflow = "hidden";
+  actionBar.style.opacity = "0";
+  actionBar.classList.add("p_none");
+  actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+}
+
+export function updateSelectionActionBar(table, selectedCount) {
+  const actionBar = table.querySelector(".row-selection-actions-card");
+  if (!actionBar) return;
+
+  if (selectedCount > 0) {
+    showActionBar(actionBar, selectedCount);
+  } else {
+    hideActionBar(actionBar);
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
 
   return (
     <div>

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

@@ -1,5 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
 
-**NOTE:** This prop is in Beta. Current Requirements for V1:
+**NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually
+- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
+- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import { colors } from "playbook-ui"
+
+const AdvancedTableRowStyling = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.warning,
+  },
+  {
+    rowId: "8",
+    backgroundColor: colors.category_1,
+    fontColor: colors.white,
+    expandButtonColor: colors.white,
+  },
+];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          rowStyling={rowStyling}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableRowStyling

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

@@ -0,0 +1,7 @@
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
+
+- `backgroundColor` : use this to control the background color of the row
+- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -59,6 +59,7 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -34,6 +34,7 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 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'

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -1,106 +1,82 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
-const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
+const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return FLAT_ADVANCED_TABLE_SELECTOR;
+    return FLAT_SELECTOR;
   }
 
-  get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(
-      `"label[data-flat-advanced-table-select='true']"`
-    );
+  constructor(...args) {
+    super(...args);
+    // keep track of selected IDs per-table-instance
+    this.selectedRows = new Set();
   }
 
-  static selectedRows = new Set();
-
   connect() {
     const table = this.element.closest("table");
-    if (!table) return;
+    if (!table || table.dataset.flatAdvancedInit) return;
+    table.dataset.flatAdvancedInit = "true";
+
+    // Reference to outer container for action bar
     const mainTable = this.element.closest(".pb_advanced_table");
-    // Prevent double-init
-    if (table.dataset.flatAdvancedTableInitialized) return;
-    table.dataset.flatAdvancedTableInitialized = "true";
+    // This so it is hidden on first render
+    if (mainTable) {
+      updateSelectionActionBar(mainTable, 0);
+    }
 
-    const checkboxLabels = table.querySelectorAll(
-      "label[data-flat-advanced-table-select='true']"
-    );
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
-      if (!checkbox) return;
-      checkbox.addEventListener("change", () => {
-        const rowId = checkbox.id;
-        const isChecked = checkbox.checked;
-      
-        if (isChecked) {
-          PbFlatAdvancedTable.selectedRows.add(rowId);
-        } else {
-          PbFlatAdvancedTable.selectedRows.delete(rowId);
-        }
-      
-        // Update row background color based on checkbox state
-        const rowEl = checkbox.closest("tr");
-        if (rowEl) {
-          if (isChecked) {
-            rowEl.classList.add("bg-row-selection");
-            rowEl.classList.remove("bg-white");
-          } else {
-            rowEl.classList.remove("bg-row-selection");
-            rowEl.classList.add("bg-white");
-          }
-        }
-        const allCheckboxes = table.querySelectorAll(
-          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
-        );
-      
-        const selectAllInput = table.querySelector(
-          "#select-all-rows input[type='checkbox']"
-        );
-      
-        if (selectAllInput) {
-          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
-          selectAllInput.checked = allChecked;
-        }
-      
+    const updateCheckboxState = () => {
+      // Sync dataset on main table
+      if (mainTable) {
         mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
+          Array.from(this.selectedRows)
         );
-      });
-      
-    });
+        updateSelectionActionBar(mainTable, this.selectedRows.size);
+      }
+    };
+
+    table.addEventListener("change", (e) => {
+      const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
+      if (!rowCb && !allCb) return;
 
-    // Handle select-all checkbox
-    const selectAllWrapper = table.querySelector("#select-all-rows");
-    if (selectAllWrapper) {
-      const selectAllInput = selectAllWrapper.querySelector(
-        'input[type="checkbox"]'
-      );
-      selectAllInput.addEventListener("change", () => {
-        const checkAll = selectAllInput.checked;
+      if (rowCb) {
+        const id = rowCb.id;
+        if (rowCb.checked) this.selectedRows.add(id);
+        else this.selectedRows.delete(id);
 
-        checkboxLabels.forEach((label) => {
-          const cb = label.querySelector("input[type='checkbox']");
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
+        const tr = rowCb.closest("tr");
+        tr?.classList.toggle("bg-row-selection", rowCb.checked);
+        tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
+      }
 
-          if (checkAll) {
-            PbFlatAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white");
-          } else {
-            PbFlatAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
+      if (allCb) {
+        const checked = allCb.checked;
+        Array.from(
+          table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+        ).forEach((cb) => {
+          cb.checked = checked;
+          const tr = cb.closest("tr");
+          tr?.classList.toggle("bg-row-selection", checked);
+          tr?.classList.toggle("bg-white", !checked);
+          const id = cb.id;
+          if (checked) this.selectedRows.add(id);
+          else this.selectedRows.delete(id);
         });
+      }
 
-        mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
-        );
-      });
-    }
+      updateCheckboxState();
+    });
   }
 }