playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978

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

@@ -0,0 +1,66 @@
+import React, { useState } from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibilityWithState = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      id: "year"
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments"
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings"
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate"
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses"
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate"
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents"
+    },
+  ]
+
+  const [columnVisibility, setColumnVisibility] = useState({
+    newEnrollments: false 
+  })
+
+  const columnVisibilityControl = {
+    value: columnVisibility,
+    onChange: setColumnVisibility,
+    onColumnVisibilityChange: (currentState) => console.log(currentState),
+  }
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={columnVisibilityControl}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibilityWithState

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

@@ -0,0 +1,3 @@
+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. 

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

@@ -3,7 +3,7 @@
 <br />
 <br />
 
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
 
 ### tableData
 

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/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -0,0 +1,137 @@
+<% 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",
+  }
+]
+
+actions = [
+  pb_rails("circle_icon_button", props: {
+    icon: "file-csv",
+    variant: "link",
+    id: "export-selected-rows-btn",
+    data: {
+      action_type: "export"
+    }
+  }),
+  pb_rails("circle_icon_button", props: {
+    icon: "trash-alt",
+    variant: "link",
+    id: "delete-selected-rows-btn",
+    data: {
+      action_type: "delete"
+    }
+  })
+]
+%>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  actions: actions
+}) %>
+
+<script>
+  // Handle action clicks using the data-selected-rows attribute
+  window.handleActionClick = function(actionType) {
+    const tableContainer = document.getElementById('selectable_rows_with_actions');
+    if (!tableContainer) return;
+
+    // Get selected rows from the data attribute
+    const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
+    let selectedRowIds = [];
+
+    try {
+      // Parse the JSON string from the data attribute
+      if (selectedRowsJSON) {
+        selectedRowIds = JSON.parse(selectedRowsJSON);
+      }
+    } catch (e) {
+      // Fallback if JSON parsing fails
+      const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
+      const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
+        checkbox.id !== 'select-all-rows' &&
+        !checkbox.closest('#select-all-rows')
+      );
+      selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
+    }
+
+    // Show appropriate message
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+      alert('No Selection Made');
+    } else {
+      if (actionType === 'export') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+      } else if (actionType === 'delete') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+      }
+    }
+  };
+
+  // Add event listeners when the DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the buttons
+    const exportBtn = document.getElementById('export-selected-rows-btn');
+    const deleteBtn = document.getElementById('delete-selected-rows-btn');
+
+    // Add click event listeners
+    if (exportBtn) {
+      exportBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('export');
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('delete');
+      });
+    }
+
+    // Optional: Event delegation through the action bar
+    const actionBar = document.querySelector('.row-selection-actions-card');
+    if (actionBar) {
+      actionBar.addEventListener('click', function(e) {
+        const exportButton = e.target.closest('#export-selected-rows-btn');
+        const deleteButton = e.target.closest('#delete-selected-rows-btn');
+
+        if (exportButton) {
+          e.preventDefault();
+          window.handleActionClick('export');
+        } else if (deleteButton) {
+          e.preventDefault();
+          window.handleActionClick('delete');
+        }
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1,3 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
+
+You can utilize script tags with your actions to provide your buttons with any clickable events needed.

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

@@ -0,0 +1,40 @@
+<% 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: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  show_actions_bar: false
+}) %>

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

@@ -0,0 +1 @@
+`show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

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

@@ -1 +1,5 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
+
+The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
+
+__NOTE__: Each object within the `table_data` 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/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrows = (props) => {
+const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrows
+export default AdvancedTableSelectableRowsNoSubrowsReact

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

@@ -2,5 +2,6 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
-The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __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. 
+The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
+
+__NOTE__: Each object within the `table_data` 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

@@ -13,8 +13,10 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_border_color_rails: Column Group Border Color
-  # - advanced_table_selectable_rows: Selectable Rows
-  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_rails: Selectable Rows
+  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -42,8 +44,13 @@ examples:
   - advanced_table_column_border_color: Column Group Border Color
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
+  - 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_pinned_rows: Pinned Rows

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

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
@@ -27,4 +27,9 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+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 AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'

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

@@ -0,0 +1,106 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
+
+export default class PbFlatAdvancedTable extends PbEnhancedElement {
+  static get selector() {
+    return FLAT_ADVANCED_TABLE_SELECTOR;
+  }
+
+  get target() {
+    const table = this.element.closest("table");
+    return table.querySelectorAll(
+      `"label[data-flat-advanced-table-select='true']"`
+    );
+  }
+
+  static selectedRows = new Set();
+
+  connect() {
+    const table = this.element.closest("table");
+    if (!table) return;
+    const mainTable = this.element.closest(".pb_advanced_table");
+    // Prevent double-init
+    if (table.dataset.flatAdvancedTableInitialized) return;
+    table.dataset.flatAdvancedTableInitialized = "true";
+
+    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;
+        }
+      
+        mainTable.dataset.selectedRows = JSON.stringify(
+          Array.from(PbFlatAdvancedTable.selectedRows)
+        );
+      });
+      
+    });
+
+    // 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;
+
+        checkboxLabels.forEach((label) => {
+          const cb = label.querySelector("input[type='checkbox']");
+          cb.checked = checkAll;
+          const rowId = cb.id;
+          const rowEl = cb.closest("tr");
+
+          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");
+          }
+        });
+
+        mainTable.dataset.selectedRows = JSON.stringify(
+          Array.from(PbFlatAdvancedTable.selectedRows)
+        );
+      });
+    }
+  }
+}