playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -46,7 +46,7 @@ const AdvancedTableColumnVisibility = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          columnVisibilityControl={{default: true}}
+          columnVisibilityControl={{default: true, showSelectAll: true}}
           tableData={MOCK_DATA}
           {...props}
       />

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

@@ -1,4 +1,7 @@
 The `columnVisibilityControl` prop allows users to toggle the visibility of table columns dynamically.
 
-The default can be enabled simply by passing `{ default:true }` to the prop as shown. This will render the header with the icon enabled dropdown. The dropdown contains all columns present in the Table and any can be toggled on or off via the checkboxes. 
-**NOTE**: The first column will not be shown in the dropdown as an option since all the expansion logic/functionality lives there and it should always be visible. 
+The default can be enabled simply by passing `{ default:true }` to the prop as shown. This will render the header with the icon enabled dropdown. The dropdown contains all columns present in the Table and any can be toggled on or off via the checkboxes.
+
+Set `showSelectAll: true` to add a checkbox at the top of the popover. It selects every listed column that can be hidden, or deselects them when they are already all visible. The label reads **Deselect All** when every available column is visible and **Select All** otherwise. When only some of those columns are visible, the checkbox is indeterminate. The checkbox appears when `showSelectAll` is `true` and at least one listed column can be hidden.
+
+**NOTE**: The first column will not be shown in the dropdown as an option since all the expansion logic/functionality lives there and it should always be visible. Select All does not change that column, or any column left out of the popover.

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

@@ -1 +1,3 @@
-By using the `includeIds` key/value pair as shown within the `columnVisibilityControl` prop, you can control which columns show up as options in the columnVisibility dropdown.
+By using the `includeIds` key/value pair as shown within the `columnVisibilityControl` prop, you can control which columns show up as options in the columnVisibility dropdown.
+
+`showSelectAll` follows that same list. Select All and Deselect All change only the included columns that can be hidden.

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

@@ -0,0 +1,82 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibilityMultiSelectAll = (props) => {
+    const columnDefinitions = [
+        {
+          accessor: "year",
+          label: "Year",
+          id: "year",
+          cellAccessors: ["quarter", "month", "day"],
+        },
+        {
+          label: "Enrollment Data",
+          id: "enrollmentData",
+          columns: [
+            {
+              label: "Enrollment Stats",
+              id: "enrollmentStats",
+              columns: [
+                {
+                  accessor: "newEnrollments",
+                  label: "New Enrollments",
+                  id: "newEnrollments",
+                },
+                {
+                  accessor: "scheduledMeetings",
+                  label: "Scheduled Meetings",
+                  id: "scheduledMeetings",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "Performance Data",
+          id: "performanceData",
+          columns: [
+            {
+              label: "Completion Metrics",
+              id: "completionMetrics",
+              columns: [
+                {
+                  accessor: "completedClasses",
+                  label: "Completed Classes",
+                  id: "completedClasses",
+                },
+                {
+                  accessor: "classCompletionRate",
+                  label: "Class Completion Rate",
+                  id: "classCompletionRate",
+                },
+              ],
+            },
+            {
+              label: "Attendance",
+              id: "attendance",
+              columns: [
+                {
+                  accessor: "attendanceRate",
+                  label: "Attendance Rate",
+                  id: "attendanceRate",
+                },
+              ],
+            },
+          ],
+        },
+      ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={{default: true, showSelectAll: true}}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibilityMultiSelectAll

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

@@ -0,0 +1,3 @@
+The `columnVisibilityControl` prop with `showSelectAll: true` can be used with multi-header columns as shown.
+
+`showSelectAll` updates every leaf column in the popover that can be hidden. Group checkboxes stay in sync with that selection. Hiding every column in a group keeps the subheader rows, so the table header does not collapse. With controlled state, persist `value` from the `onChange` updater so each leaf id stays stored.

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

@@ -1,3 +1,5 @@
 The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
 
-The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed. 
+The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed.
+
+`showSelectAll` uses the same controlled state. A bulk change calls `onChange` and `onColumnVisibilityChange`. Persist `value` from `onChange`. That callback receives the same updater as a single column toggle, and applying it stores each leaf column id. `onColumnVisibilityChange` reports a summary of root column ids: a group id stands in for its leaves, and the group is visible when any leaf is visible.

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA_GROUP_SEPARATORS from "./advanced_table_mock_data_group_separators.json"
+
+const AdvancedTableGroupSeparators = (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",
+    },
+  ]
+
+  // Match design screenshot: 2022 → Q1 → January open; May/Q2 collapsed; 2023 open to quarters
+  const [expanded, setExpanded] = useState({
+    "1": true,
+    "1.0": true,
+    "1.0.0": true,
+    "2": true,
+  })
+
+  const expandedControl = {
+    onChange: setExpanded,
+    value: expanded,
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          expandedControl={expandedControl}
+          groupSeparators
+          onRowToggleClick={(row) => {
+            setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
+          }}
+          tableData={MOCK_DATA_GROUP_SEPARATORS}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableGroupSeparators

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

@@ -0,0 +1,7 @@
+`groupSeparators` (default `false`) draws a higher-contrast `2px` stroke (`$input_border_default`) on the last visible row of each nested child group, replacing the default row border.
+
+- When one row closes several groups at once, a single stroke insets to the outermost group it closes (its collapsible-trail); closing a year is full-bleed left
+- Expanded parents defer the separator to their last visible descendant
+- Root rows never get a separator; the break before the next root is the previous tree’s last child
+
+This example defaults to **2022 → Q1 → January** open (May/Q2 collapsed) and **2023** open to its quarters, so you can see nested insets and a year-level full-bleed separator together.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_group_separators_rails.html.erb

@@ -0,0 +1,78 @@
+<% column_definitions = [
+    {
+      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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "group_separators", table_data: @table_data_group_separators, column_definitions: column_definitions, group_separators: true }) %>
+
+<%# Mirror React default expand: 2022 → Q1 → January; 2023 year open (quarters collapsed) %>
+<script>
+  (function () {
+    // Expand a path like ["2022", "Q1", "January"], searching each label only
+    // within the previous row's subtree so e.g. 2021's Q1 is never matched.
+    function expandPath(root, labels) {
+      var rows = root.querySelectorAll("tr[data-row-depth]");
+      var start = 0;
+
+      for (var depth = 0; depth < labels.length; depth++) {
+        var row = null;
+        for (var i = start; i < rows.length; i++) {
+          var rowDepth = Number(rows[i].getAttribute("data-row-depth"));
+          if (rowDepth < depth) break;
+          var cell = rows[i].querySelector("td");
+          if (rowDepth === depth && cell && cell.textContent.indexOf(labels[depth]) !== -1) {
+            row = rows[i];
+            start = i + 1;
+            break;
+          }
+        }
+        if (!row) return;
+
+        var toggle = row.querySelector("[data-advanced-table]");
+        if (toggle && !row.classList.contains("group-separator-expanded")) toggle.click();
+      }
+    }
+
+    function expandGroupSeparatorsExample() {
+      var root = document.getElementById("group_separators");
+      if (!root) return;
+
+      expandPath(root, ["2022", "Q1", "January"]);
+      expandPath(root, ["2023"]);
+    }
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", expandGroupSeparatorsExample);
+    } else {
+      expandGroupSeparatorsExample();
+    }
+    setTimeout(expandGroupSeparatorsExample, 0);
+  })();
+</script>

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

@@ -0,0 +1,3 @@
+`group_separators` (default `false`) mirrors React `groupSeparators`: a `2px` `$input_border_default` stroke on the last sibling of each nested child group (replacing the default border; inset to the outermost group it closes, full-bleed when that is a year).
+
+This example defaults to **2022 → Q1 → January** open (May/Q2 collapsed) and **2023** open to its quarters, matching the React example. Expanded last-sibling parents defer to the last visible descendant.

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

@@ -1,60 +1,179 @@
+/* eslint-disable no-console */
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTableSelectableRows = (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",
-    },
-  ]
-
-  //Render the subRow header rows
-  const subRowHeaders = ["Quarter", "Month", "Day"]
-
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
-          selectableRows
-          tableData={MOCK_DATA}
-          
-          {...props}
-      >
-        <AdvancedTable.Header />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableSelectableRows
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          { accessor: "newEnrollments", label: "New Enrollments" },
+          { accessor: "scheduledMeetings", label: "Scheduled Meetings" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          { accessor: "completedClasses", label: "Completed Classes" },
+          { accessor: "classCompletionRate", label: "Class Completion Rate" },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          { accessor: "attendanceRate", label: "Attendance Rate" },
+          { accessor: "graduatedStudents", label: "Graduated Students" },
+        ],
+      },
+    ],
+  },
+]
+
+const subRowHeaders = ["Quarter", "Month", "Day"]
+const months = ["January", "April", "July", "October", "December"]
+
+const buildTableData = (tableId) => (
+  Array.from({ length: 5 }, (_, index) => {
+    const year = 2020 + index
+
+    return {
+      id: `${tableId}-${year}`,
+      year: String(year),
+      quarter: `Q${(index % 4) + 1}`,
+      month: months[index],
+      day: String(index + 1),
+      newEnrollments: String(20 + index),
+      scheduledMeetings: String(10 + index),
+      attendanceRate: `${50 + index}%`,
+      completedClasses: String(3 + index),
+      classCompletionRate: `${30 + index}%`,
+      graduatedStudents: String(19 + index),
+    }
+  })
+)
+
+const buildTableDataSubrows = (tableId) => (
+  Array.from({ length: 5 }, (_, index) => {
+    const year = 2020 + index
+    const quarter = `Q${(index % 4) + 1}`
+
+    return {
+      id: `${tableId}-${year}`,
+      year: String(year),
+      quarter,
+      month: months[index],
+      day: String(index + 1),
+      newEnrollments: String(20 + index),
+      scheduledMeetings: String(10 + index),
+      attendanceRate: `${50 + index}%`,
+      completedClasses: String(3 + index),
+      classCompletionRate: `${30 + index}%`,
+      graduatedStudents: String(19 + index),
+      children: [
+        {
+          id: `${tableId}-${year}-q${(index % 4) + 1}`,
+          quarter,
+          month: months[index],
+          day: String(index + 1),
+        },
+      ],
+    }
+  })
+)
+
+const standardAllData = buildTableDataSubrows("standard_multi_column_all")
+const standardNoneData = buildTableData("standard_multi_column_none")
+const segmentedAllData = buildTableDataSubrows("segmented_multi_column_all")
+const segmentedNoneData = buildTableData("segmented_multi_column_none")
+
+const AdvancedTableSelectableRows = (props) => (
+  <div>
+    <Title
+        marginBottom="sm"
+        size={4}
+        tag="h4"
+        text="Standard AdvancedTable"
+    />
+
+    <Caption
+        text="Multi-column headers with selectable rows and expandable subrows — Standard / Enable Toggle Expansion All"
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        enableToggleExpansion="all"
+        marginBottom="md"
+        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+        selectableRows
+        subRowHeaders={subRowHeaders}
+        tableData={standardAllData}
+        {...props}
+    />
+
+    <Caption
+        text="Multi-column headers with selectable rows — Standard / Enable Toggle Expansion None"
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        enableToggleExpansion="none"
+        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+        selectableRows
+        tableData={standardNoneData}
+        {...props}
+    />
+
+    <Title
+        marginBottom="sm"
+        marginTop="xl"
+        size={4}
+        tag="h4"
+        text="Segmented AdvancedTable"
+    />
+
+    <Caption
+        text="Multi-column headers with selectable rows and expandable subrows — Subcomponent / Enable Toggle Expansion All"
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        enableToggleExpansion="all"
+        marginBottom="md"
+        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+        selectableRows
+        tableData={segmentedAllData}
+        {...props}
+    >
+      <AdvancedTable.Header />
+      <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+    </AdvancedTable>
+
+    <Caption
+        text="Multi-column headers with selectable rows — Subcomponent / Enable Toggle Expansion None"
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        enableToggleExpansion="none"
+        onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+        selectableRows
+        tableData={segmentedNoneData}
+        {...props}
+    >
+      <AdvancedTable.Header />
+      <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+    </AdvancedTable>
+  </div>
+)
+
+export default AdvancedTableSelectableRows

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -7,17 +7,24 @@
     "subRowHeaders": "AdvancedTable.Body.props"
   },
   "defaults": {
-    "columnGroupBorderColor": "none",
+    "cascadeCollapse": false,
     "enableToggleExpansion": "header",
+    "enableSortingRemoval": false,
     "fullWidthCell": false,
+    "groupSeparators": false,
+    "initialLoadingRowsCount": 10,
     "inlineRowLoading": false,
     "loading": false,
     "maxHeight": "auto",
+    "pagination": false,
     "responsive": "scroll",
     "scrollBarNone": false,
     "selectableRows": false,
     "showActionsBar": true,
     "persistToggleExpansionButton": false,
+    "sortParentOnly": false,
+    "toggleExpansionIcon": "arrows-from-line",
+    "virtualizedRows": false,
     "collapsibleTrail": true,
     "columnVisibilityControl": {
       "default": true
@@ -117,7 +124,8 @@
     {
       "name": "Styling",
       "props": [
-        "rowStyling"
+        "rowStyling",
+        "groupSeparators"
       ]
     },
     {
@@ -315,6 +323,13 @@
       "message": "When cascadeCollapse is true, collapsing any parent row itself or by using the toggle expansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.",
       "type": "info"
     },
+    "group_separators_info": {
+      "when": {
+        "groupSeparators": true
+      },
+      "message": "groupSeparators adds a 2px higher-contrast bottom border on the last visible row of each nested child group. Expand multi-level rows to see separators between sibling groups.",
+      "type": "info"
+    },
     "column_styling_info": {
       "presetName": "Column Styling",
       "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -180,7 +180,7 @@
     },
     {
       "name": "Styling",
-      "props": ["rowStyling"]
+      "props": ["rowStyling", "groupSeparators"]
     },
     {
       "name": "Selection & Actions",
@@ -370,6 +370,13 @@
       "message": "When cascadeCollapse is true, collapsing any parent row itself or by using the toggle expansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.",
       "type": "info"
     },
+    "group_separators_info": {
+      "when": {
+        "groupSeparators": true
+      },
+      "message": "groupSeparators adds a 2px higher-contrast bottom border on the last visible row of each nested child group. Expand multi-level rows to see separators between sibling groups.",
+      "type": "info"
+    },
     "column_styling_info": {
       "presetName": "Column Styling",
       "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",