playbook_ui 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980 → 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f08c1401569be7ec360234581ac1f8e77974bd468dd40578153aa3b26de92f58
-  data.tar.gz: 317f542180cb2ab211d2a509b2380f549023af74b9d28d854cc2c39fcbed451b
+  metadata.gz: c8e79a2664649f32a2195a4e9199e868f6c1ebac20764479066f12c2dbbd7e9c
+  data.tar.gz: da415e2485131587cc6a32a03c8145152df934616500a008ef06b4e49c6c049a
 SHA512:
-  metadata.gz: 41b11eac6492594abe461ef0ee462353ba7b37b717d0edfe26a0f4356cf4eba17578036933c0ea97021263ac47e55b38435fcebe882b976b54e5a3e6ee28ca8b
-  data.tar.gz: d36b7e00aa603dbe91fb5a068f68937a82bcb3f849a6fe8acf24209174f13bd7ca3d2750b211d88caa74dc92d7816eef36626d768668e576529c7574bec9beef
+  metadata.gz: fd7c9331ca4274f9e6e95d186ada4456ddfa8240d1cc48249dd0b899931bf3db83576abfbfed0ebd4105e2159d57cc9efb75a3a16e2d33cc6a37262dede08746
+  data.tar.gz: 9072a56af0c016514dd3a3f3d5b0e20fbdbaea20ca5b25d258f3c31c859fc0d4edc855c58ed297089453525b67df0789c6ff216b9dd500eaa5115664a4bba396

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

@@ -28,11 +28,14 @@ export const RegularTableView = ({
     handleExpandOrCollapse,
     inlineRowLoading,
     loading,
-    responsive,
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn
+    stickyLeftColumn,
+    pinnedRows,
+    headerHeight,
+    rowHeight,
+    sampleRowRef,
   } = useContext(AdvancedTableContext)
 
 
@@ -50,9 +53,81 @@ export const RegularTableView = ({
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
+  // Row pinning
+  function PinnedRow({ row }: { row: Row<any> }) {
+    return (
+      <tr
+          className={classnames(
+            `pinned-row`,
+          )}
+          style={{
+            backgroundColor: 'white',
+            position: 'sticky',
+            top:   
+              row.getIsPinned() === 'top'
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
+                  : undefined,
+            zIndex: '3'
+          }}
+      >
+        {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+          const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+          const isLastCell = (() => {
+            const parent = cell.column.parent;
+              if (!parent) {
+                const last = row.getVisibleCells().at(-1);
+                return last?.column.id === cell.column.id;
+              }
+
+              const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+              return visibleSiblings.at(-1)?.id === cell.column.id;
+              })();
+
+          const { column } = cell;
+          return (
+            <td
+                align="right"
+                className={classnames(
+                  `${cell.id}-cell position_relative`,
+                  isChrome() ? "chrome-styles" : "",
+                  isPinnedLeft && 'pinned-left',
+                  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
+                  isLastCell && 'last-cell',
+                )}
+                key={`${cell.id}-data`}
+                style={{
+                  left: isPinnedLeft
+                    ? i === 1 //Accounting for set min-width for first column
+                      ? '180px'
+                      : `${column.getStart("left")}px`
+                    : undefined,
+                }}
+            >
+              {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+              <span id={`${cell.id}-span`}>
+                {loading ? (
+                  <LoadingCell />
+                ) : (
+                  flexRender(cell.column.columnDef.cell, cell.getContext())
+                )}
+              </span>
+            </td>
+          );
+        })}
+      </tr>
+    )
+  }
+
+  const totalRows = pinnedRows ? table.getCenterRows() : table.getRowModel().rows
+
   return (
     <>
-      {table.getRowModel().rows.map((row: Row<GenericObject>) => {
+      {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
+        <PinnedRow key={row.id} 
+            row={row} 
+        />
+      ))}
+      {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
         const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
@@ -60,6 +135,7 @@ export const RegularTableView = ({
         const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
         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();
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -77,6 +153,7 @@ export const RegularTableView = ({
             <tr
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
+                ref={isFirstRegularRow ? sampleRowRef : null}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -99,7 +176,7 @@ export const RegularTableView = ({
                       const last = row.getVisibleCells().at(-1);
                       return last?.column.id === cell.column.id;
                     }
-                  
+
                     const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
                     return visibleSiblings.at(-1)?.id === cell.column.id;
                    })();
@@ -154,4 +231,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useMemo, useEffect } from 'react';
+import React, { createContext, useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Row } from "@tanstack/react-table";
@@ -23,6 +23,54 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const table = props.table;
   const isVirtualized = props.virtualizedRows || props.enableVirtualization;
+  
+  // Pinned Row: height calculations for Header and Row
+  const headerRef = useRef(null);
+  const sampleRowRef = useRef(null);
+  
+  const [headerHeight, setHeaderHeight] = useState(44);
+  const [rowHeight, setRowHeight] = useState(38);
+
+  const measureHeights = useCallback(() => {
+    if (headerRef.current) {
+      const headerRect = headerRef.current.getBoundingClientRect();
+      if (headerRect.height > 0) {
+        setHeaderHeight(headerRect.height);
+      }
+    }
+    if (sampleRowRef.current) {
+      const rowRect = sampleRowRef.current.getBoundingClientRect();
+      if (rowRect.height > 0) {
+        setRowHeight(rowRect.height);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      measureHeights();
+    });
+
+    if (headerRef.current) {
+      resizeObserver.observe(headerRef.current);
+    }
+
+    if (sampleRowRef.current) {
+      resizeObserver.observe(sampleRowRef.current);
+    }
+
+    const timeoutId = setTimeout(measureHeights, 100);
+
+    return () => {
+      resizeObserver.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [measureHeights]);
+
+  useEffect(() => {
+    measureHeights();
+  }, [table?.getRowModel().rows.length, measureHeights]);
+
 
   // Create a flattened data array that includes ALL components for virtualization
   const flattenedItems = useMemo(() => {
@@ -132,7 +180,15 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     virtualizer: isVirtualized ? virtualizer : null,
     flattenedItems,
     virtualizedRows: isVirtualized,
-    enableVirtualization: isVirtualized
+    enableVirtualization: isVirtualized,
+    rowPinning: props.rowPinning,
+    setRowPinning: props.setRowPinning,
+    keepPinnedRows: props.keepPinnedRows,
+    headerHeight,
+    rowHeight,
+    headerRef,
+    sampleRowRef,
+    measureHeights,
   };
 
   return (

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Row } from "@tanstack/react-table";
+import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
 

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

@@ -6,7 +6,8 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   RowSelectionState,
-  Row
+  Row,
+  RowPinningState
 } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -23,11 +24,11 @@ interface UseTableStateProps {
   loading?: boolean | string;
   pagination?: boolean;
   paginationProps?: GenericObject;
+  pinnedRows?: any;
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -43,18 +44,24 @@ export function useTableState({
   paginationProps,
   virtualizedRows = false,
   tableOptions,
-  columnVisibilityControl
+  columnVisibilityControl,
+  pinnedRows,
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [localColumnVisibility, setLocalColumnVisibility] = useState({});
+  const [localRowPinning, setLocalRowPinning] = useState<RowPinningState>({
+    top: [],
+  });
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   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;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -115,6 +122,7 @@ export function useTableState({
       ...(sortControl     && { sorting }),
       ...(selectableRows  && { rowSelection }),
       ...(columnVisibility && { columnVisibility }),
+      ...(pinnedRows && { rowPinning }),
     },
   }), [
     expanded,
@@ -123,6 +131,7 @@ export function useTableState({
     selectableRows,
     rowSelection,
     columnVisibility,
+    rowPinning,
   ]);
 
   // Pagination configuration
@@ -153,7 +162,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -39,7 +39,8 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
-    responsive
+    responsive,
+    headerRef
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -62,8 +63,11 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-          <tr key={`${headerGroup.id}-headerGroup`}>
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+          <tr 
+              key={`${headerGroup.id}-headerGroup`}
+              ref={index === 0 ? headerRef : null}
+          >
             {!hasAnySubRows && selectableRows && (
               <th className={customCellClassnames}>
                 <Checkbox

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

@@ -580,6 +580,11 @@
     }
   }
 
+  // Row Pinning - additional inline styles in RegularTableView.tsx
+  .pinned-row {
+    box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

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

@@ -51,7 +51,8 @@ type AdvancedTableProps = {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
-  paginationProps?: GenericObject
+  paginationProps?: GenericObject,
+  pinnedRows?: any,
   responsive?: "scroll" | "none",
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -91,6 +92,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onToggleExpansionClick,
     pagination = false,
     paginationProps,
+    pinnedRows,
     responsive = "scroll",
     showActionsBar = true,
     selectableRows,
@@ -136,6 +138,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableOptions,
     onRowSelectionChange,
     columnVisibilityControl,
+    pinnedRows,
   });
 
   // Initialize table actions
@@ -241,7 +244,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
       'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen
+      'advanced-table-allow-fullscreen': allowFullScreen,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -302,6 +305,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isFullscreen={isFullscreen}
             loading={loading}
             onExpandByDepthClick={onExpandByDepthClick}
+            pinnedRows={pinnedRows}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}

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

@@ -3,6 +3,12 @@ import { render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable, Pill } from "playbook-ui"
 
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 const MOCK_DATA = [
   {
     year: "2021",
@@ -72,6 +78,36 @@ const MOCK_DATA_LOADING = [
   },
 ]
 
+const MOCK_DATA_WITH_ID = [
+  {
+    id: "1",
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+  },
+  {
+    id: "2", 
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "15",
+  },
+  {
+    id: "3",
+    year: "2023", 
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "20",
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -512,3 +548,28 @@ test("allowFullScreen prop adds fullscreen class", () => {
   const tableContainer = screen.getByRole("table").closest("div")
   expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
 })
+
+test("pinnedRows prop renders pinned rows at top", () => {
+  const pinnedRowsControl = {
+    value: { top: ["1", "3"] },
+    onChange: jest.fn()
+  }
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pinnedRows={pinnedRowsControl}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pinnedRows = kit.querySelectorAll(".pinned-row")
+  
+  expect(pinnedRows).toHaveLength(2)
+  
+  const firstPinnedRow = pinnedRows[0]
+  expect(firstPinnedRow).toHaveStyle("position: sticky")
+  expect(firstPinnedRow).toHaveStyle("background-color: white")
+})

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinning = (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 [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinning

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

@@ -0,0 +1,5 @@
+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.
+
+**NOTE:** This prop is in Beta. Current Requirements for V1:
+- 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

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

@@ -52,4 +52,5 @@ examples:
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_pinned_rows: Pinned Rows

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

@@ -31,4 +31,5 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,12 +1,16 @@
-<%= pb_content_tag(:label, data: {
-  pb_checkbox_indeterminate_main: object.indeterminate_main,
-  pb_checkbox_indeterminate_parent: object.indeterminate_parent,
-}) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-  </span>
+  <% if object.indeterminate %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
+    </span>
+  <% else %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+    </span>
+  <% end %>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,8 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_parent
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -20,7 +19,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -40,6 +39,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? " indeterminate" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,11 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate_main: true,
+          indeterminate: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -29,10 +30,55 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
-            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>