playbook_ui 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb

@@ -0,0 +1,51 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+        <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card 
           borderNone
           borderRadius="none"
-          color="light" 
+          color="light"
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm" 
+         <Body paddingBottom="sm"
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
           </Flex>
       </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
 
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible 
+        <Table.Row collapsible
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
+          <Table.Cell textAlign="right">{
             <Icon
                 color="primary"
                 fixedWidth

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
+        <%= pb_rails("flex", props: { justify: "between" }) do %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("background", props: { tag: "tr" }) do %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -0,0 +1,3 @@
+The `collapsible_content` can display any content, including nested Table Rows.
+
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb

@@ -0,0 +1,80 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { tag: "tr" }) do %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -0,0 +1 @@
+The `collapsible_content` can also be used to display nested Tables within each Row.

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -0,0 +1,96 @@
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
+    <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
+        <%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+    <%= pb_rails("table/table_head") do %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_header") do %>
+                <%= pb_rails("checkbox", props: {
+                    checked: true,
+                    value: "checkbox-value",
+                    name: "main-checkbox-selectable",
+                    indeterminate: true,
+                    id: "checkbox-selectable"
+                }) %>
+            <% end %>
+            <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+        <% checkboxes.each_with_index do |checkbox, index| %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
+                <% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+                <% end %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
+        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
+        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
+        const deleteButton = document.getElementById('delete-button');
+
+        const updateDeleteButton = () => {
+            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
+            deleteButton.style.display = anyChecked ? 'block' : 'none';
+        };
+    
+        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 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';
+          
+          // 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);
+
+          updateDeleteButton();
+        };
+    
+        mainCheckbox.addEventListener('change', function() {
+          childCheckboxes.forEach(cb => cb.checked = this.checked);
+          updateMainCheckbox();
+        });
+    
+        childCheckboxes.forEach(cb => {
+          cb.addEventListener('change', updateMainCheckbox);
+        });
+    });
+</script>

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
+
+const TableWithSelectableRows = (props) => {
+    const [checkboxes, setCheckboxes] = useState([
+        { name: "Coffee", checked: false },
+        { name: "Ice Cream", checked: false },
+        { name: "Chocolate", checked: true },
+    ]);
+
+    const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
+    const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
+
+    const processCheckboxes = (checked) =>
+        checkboxes.slice(0).map((checkbox) => {
+            checkbox.checked = checked;
+            return checkbox;
+        });
+
+    const onToggleAll = () => {
+        setCheckboxes(
+            isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
+        );
+    };
+
+    const updateCheckboxes = (checkbox, index) => {
+        const newCheckboxes = checkboxes.slice(0);
+        newCheckboxes[index].checked = !checkbox.checked;
+        setCheckboxes(newCheckboxes);
+    };
+
+    return (
+        <>
+            <Flex
+                justify="end"
+                marginBottom="sm"
+            >
+                {!isNoneChecked && (
+                    <Flex
+                        justify="end"
+                        marginBottom="sm"
+                    >
+                        <Button>Delete</Button>
+                    </Flex>
+                )}
+            </Flex>
+            <Table
+                size="sm"
+                {...props}
+            >
+                <Table.Head>
+                    <Table.Row>
+                        <Table.Header>
+                            <Checkbox
+                                checked={isAllChecked}
+                                indeterminate={!isAllChecked && !isNoneChecked}
+                                name="checkbox-name"
+                                onChange={onToggleAll}
+                                value="check-box value"
+                            />
+                        </Table.Header>
+                        <Table.Header>{"Column 1"}</Table.Header>
+                        <Table.Header>{"Column 2"}</Table.Header>
+                        <Table.Header>{"Column 3"}</Table.Header>
+                        <Table.Header>{"Column 4"}</Table.Header>
+                        <Table.Header>{"Column 5"}</Table.Header>
+                    </Table.Row>
+                </Table.Head>
+                <Table.Body>
+                    {checkboxes.map((checkbox, index) => (
+                        <Table.Row key={index}>
+                            <Table.Cell>
+                                <Checkbox
+                                    checked={checkbox.checked}
+                                    name={checkbox.name}
+                                    onChange={() => {
+                                        updateCheckboxes(checkbox, index);
+                                    }}
+                                    value="check-box value"
+                                />
+                            </Table.Cell>
+                            <Table.Cell>
+                                <Image
+                                    alt="picture of a misty forest"
+                                    size="xs"
+                                    url="https://unsplash.it/500/400/?image=634"
+                                />
+                            </Table.Cell>
+                            <Table.Cell>{"Value 2"}</Table.Cell>
+                            <Table.Cell>{"Value 3"}</Table.Cell>
+                            <Table.Cell>{"Value 4"}</Table.Cell>
+                            <Table.Cell>{"Value 5"}</Table.Cell>
+                        </Table.Row>
+                    ))}
+                </Table.Body>
+            </Table>
+        </>
+    )
+}
+
+export default TableWithSelectableRows

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md

@@ -0,0 +1 @@
+Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.

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

@@ -31,6 +31,12 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
+    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
+    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
+    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
+    - table_with_clickable_rows: Table with Clickable Rows
+    - table_with_selectable_rows: Table with Selectable Rows
 
   react:
     - table_sm: Small
@@ -67,3 +73,5 @@ examples:
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
+    - table_with_clickable_rows: Table with Clickable Rows
+    - table_with_selectable_rows: Table with Selectable Rows

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

@@ -32,4 +32,6 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
+export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
+export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
+export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,6 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
+const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -158,18 +159,49 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
+    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-    collapsibleElements.forEach((collapsibleElement) => {
-      collapsibleElement.addEventListener('click', (event) => {
-        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-        toggleElements.forEach(element => {
-          element.classList.toggle('no-border');
-          element.classList.toggle('border-active');
+
+    if (cells.length > 0) {
+      cells.forEach((cell) => {
+        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
+
+        Array.from(cell.children).forEach((child) => {
+          if (child.id === cellId) {
+            Array.from(child.children).forEach((svgChild) => {
+              svgChild.id = cellId; // Assign cellId to SVG child
+              Array.from(svgChild.children).forEach((pathChild) => {
+                pathChild.id = cellId; // Assign cellId to path child
+              });
+            });
+          }
+        });
+        cell.addEventListener('click', (event) => {
+          if ((event.target as HTMLElement).id) {
+            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
+
+            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+            toggleElements.forEach((element) => {
+              element.classList.toggle('no-border');
+              element.classList.toggle('border-active');
+            });
+          }
         });
+      });
+
+    } else {
+      collapsibleElements.forEach((collapsibleElement) => {
+        collapsibleElement.addEventListener('click', (event) => {
+          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+          toggleElements.forEach(element => {
+            element.classList.toggle('no-border');
+            element.classList.toggle('border-active');
+          });
+        })
       })
-    })
+    }
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,6 +37,10 @@
     cursor: pointer;
   }
 
+  .collapsible_cell {
+    cursor: default;
+  }
+
   .no-border {
     border-bottom: none !important;
   }