playbook_ui 14.9.0.pre.rc.8 → 14.9.0.pre.rc.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: daad0486ff053f26285e120fb9a4f2c2c2105f40b908dd0adca750f4237d16c2
-  data.tar.gz: f09eb3159e105fd8f3d133ffbe51af17ff1a22cfbd37f43980550b3aec3ac349
+  metadata.gz: e75cb19f382af8d53b3c588b3ef84978512fab3c3369fcc7d0a971a64a962298
+  data.tar.gz: 8d8df7a92ad1ec2b01d4c67e898ce471cc67d5c865a426fc08aecec431451687
 SHA512:
-  metadata.gz: 2e426b41a52ccc346753cac86c3ad3356eb04bfbc3cc43c874b36a530e5e16543c71077e34ca53140ae6f0762b2be4ccfa6ecc802d9681b89e50be0e95dd1b4c
-  data.tar.gz: 958f860d66aa3a04315202806879e3ddc753e90f33c1742d100701df6c5ce143dd7d2fd11e4aebe36f2624af7653fbec4e0f714363d20641d831193aa2c4b470
+  metadata.gz: bf02d8ed242ee067842ef2b20bf606a4891978203e73a4e411f175b9154e7f6c833d513aee0b84ce04a39003482690f73b7952bdeecbf9da4e7311828ac0c270
+  data.tar.gz: 51cc4cee3b67a283dd4476b5412a3520660b1fd5fdf54d633c7a6e7cca9b52f94fd82802c193fb3e2ceca1c1788bf35c23c9ae28f07a7c0e85778f2382550d0f

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -55,5 +55,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -0,0 +1,53 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      custom_renderer: ->(row, value) {
+        capture do
+          pb_rails("flex") do
+            pb_rails("title", props: { text: value, size: 4 }) +
+            pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" })
+          end
+        end
+      }
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      custom_renderer: ->(row, value) { pb_rails("pill", props: { text: value, variant: "success" }) }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      custom_renderer: ->(row, value) { content_tag(:a, value, href: "#") }
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      custom_renderer: ->(row, value) {
+        capture do
+          pb_rails("flex", props: { align_items: "end", orientation: "column" }) do
+            pb_rails("detail", props: { bold: true, color: "default", text: value }) +
+            pb_rails("caption", props: { size: "xs", text: row[:graduatedStudents] })
+          end
+        end
+      }
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "custom_cell", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `custom_renderer` item within each column_definitions. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row.
+
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/rails#column_definitions) for more indepth information on column_definitions are how to use them.
+
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the table_data used.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_custom_cell_rails: Custom Components for Cells
 
   react:
   - advanced_table_default: Default (Required Props)

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -11,7 +11,9 @@
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if index.zero? %>
+                                <% if column[:custom_renderer].present? %>
+                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                                <% elsif index.zero? %>
                                     <% if object.depth.zero? %>
                                         <%= object.row[column[:accessor].to_sym] %>
                                     <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -26,6 +26,21 @@ module Playbook
 
     private
 
+      def custom_renderer_value(column, index)
+        if index.zero?
+          if depth.zero?
+            row[column[:accessor].to_sym]
+          else
+            depth_accessors.each_with_index do |item, accessor_index|
+              key = item.to_sym
+              return row[key] if depth - 1 == accessor_index
+            end
+          end
+        else
+          row[column[:accessor].to_sym]
+        end
+      end
+
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-  TableHead,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableCell,
+    TableHead,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,6 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -76,6 +78,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -85,6 +88,56 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
+    useEffect(() => {
+        const handleStickyColumns = () => {
+            let accumulatedWidth = 0;
+    
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+    
+                if (header) {
+                    header.classList.add('sticky');
+                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+    
+                    if (!isLastColumn) {
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
+                    } else {
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
+                    }
+    
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+    
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
+                    } else {
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
+                    }
+                });
+            });
+        };
+
+        setTimeout(() => {
+            handleStickyColumns();
+        }, 10);
+
+        window.addEventListener('resize', handleStickyColumns);
+
+        return () => {
+            window.removeEventListener('resize', handleStickyColumns);
+        };
+    }, [stickyLeftcolumn]);
+
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -92,26 +145,52 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
+            {responsive === 'scroll' ? (
+                <div className='table-responsive-scroll'>
+                    {isTableTag ? (
+                        <table
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                        >
+                            {children}
+                        </table>
+                    ) : (
+                        <div
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                        >
+                            {children}
+                        </div>
+                    )}
                 </div>
+            ) : (
+                isTableTag ? (
+                    <table
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                    >
+                        {children}
+                    </table>
+                ) : (
+                    <div
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                    >
+                        {children}
+                    </div>
+                )
             )}
         </>
     )

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyLeftColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftcolumn={["1", "2", "3"]}
+        >
+            <thead>
+                <tr>
+                    <th id="1">{'Column 1'}</th>
+                    <th id="2">{'Column 2'}</th>
+                    <th id="3">{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th>{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyLeftColumns

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

@@ -0,0 +1,2 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
+export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

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

@@ -20,3 +20,5 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
+@import "sticky_columns";
+@import "scroll";

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

@@ -0,0 +1,4 @@
+    .table-responsive-scroll {
+        display: block;
+        overflow-x: auto;
+    }

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

@@ -0,0 +1,18 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+    .sticky {
+        position: sticky !important;
+        left: 0;
+        z-index: 1;
+        background-color: white;
+    }
+
+    .with-border {
+        border-right: 1px solid $border_light !important;
+    }
+
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+    }
+}