playbook_ui_docs 13.16.0.pre.alpha.PBNTR178AdvancedTableDocs2072 → 13.16.0.pre.alpha.PBNTR181stripedtable2103

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed4a12fd883bbb6280c52cc853c9ccfd8950bb16da52eae59e5d1cf1a9cd1006
-  data.tar.gz: 685191f88948723d27f68adb72dcc979164f35e90c9ef818a480afd193ffee0d
+  metadata.gz: 3b44929cb212a17baed8ba206c58b21fa14061d4c5831cac0073f8dc5ce48432
+  data.tar.gz: 7acf2cecc8f72ab82093552c9d416d2bbad8aecacd0058143e642e8cababf062
 SHA512:
-  metadata.gz: d676c3998ccae8d9fa4ad43eadc1f49a7c64408a8cb86c6f5190036a4e3007b2032757e8892517e95cbbc1f3ec7f3c75f0ba638458b9984d8cd19ade696982e5
-  data.tar.gz: f897ed4ef733df9948bfde46060fea3ac91a887bb35ba43b7e2fdc740da4e5c18e4c409ffe1b6f40325a0f944a926dad6ea2f2496802d7c5fc144b120b88d153
+  metadata.gz: 92e1e989e425df588cc9bb12af04fa9b395e35aeb64cac3433341e9809ca50f59b2a0c5d5fc71352d9a93b4c07b75059764b3d084e36118887f8c977530190ab
+  data.tar.gz: 97a14ceb8577e664a71cbfa246f4fa87e75ded70407a1694e3cf30e66a79b44e9126e547ba93e3064473128a22a5c1a6c571e60e354f4e489ee79e6eca835148

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

@@ -1,10 +1,7 @@
-The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, __the kit has two required props__: 
-
-### tableData
+The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props: 
 
 `tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/PBNTR-177-New-Advanced-Table-Kit/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
 
-### columnDefinitions
 
 `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
 

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

@@ -35,15 +35,20 @@ const AdvancedTableSort = (props) => {
     },
   ];
 
+    //Render the subRow header rows
+    const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
           tableData={MOCK_DATA}
           {...props}
       >
         <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
       </AdvancedTable>
     </div>
   );

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

@@ -1,12 +1,6 @@
 examples:
   react:
-  - advanced_table_default: Default (Required Props)
-  - advanced_table_loading: Loading State
-  - advanced_table_sort: enable Sorting
-  - advanced_table_sort_control: Sort Control
-  - advanced_table_expanded_control: Expanded Control
-  - advanced_table_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail: Collapsible Trail
-  - advanced_table_table_options: Table Options
-  - advanced_table_table_props: Table Props
-
+  - advanced_table_default: Default
+  # - advanced_table_sort: enableSorting
+  
+  

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

@@ -1,9 +1,2 @@
 export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
 export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
-export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
-export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
-export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
-export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
-export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
-export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
-export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'

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

@@ -0,0 +1,48 @@
+<%= pb_rails("table", props: { striped: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,58 @@
+import React from "react"
+import Table from "../_table"
+
+const TableStriped = (props) => (
+  <Table
+      striped
+      {...props}
+  >
+    <thead>
+      <tr>
+        <th>{'Column 1'}</th>
+        <th>{'Column 2'}</th>
+        <th>{'Column 3'}</th>
+        <th>{'Column 4'}</th>
+        <th>{'Column 5'}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export default TableStriped

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

@@ -0,0 +1 @@
+Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.

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

@@ -23,6 +23,7 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table
 
   react:
     - table_sm: Small
@@ -47,3 +48,4 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table

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

@@ -20,3 +20,4 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
 export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
+export { default as TableStriped } from './_table_striped.jsx'