playbook_ui_docs 14.23.0.pre.rc.0 → 14.23.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f89b6c8f2101887cca6f0b12be9e3b737174a379d5707beb59a00e01874e1f79
-  data.tar.gz: 3e81909d36612ac18de14db630c96070943bed32b6f365e9314f7adf83978725
+  metadata.gz: 021e5e1df1ae0129b51726039133b99b9da3cd8fca36230538ddb569fc5363d5
+  data.tar.gz: 49f3ab1ab8a8eeb50b9b71505709d2be1ce851d3a49e66efda826f80f61172b8
 SHA512:
-  metadata.gz: 7c0ee81aec42c6e62fb798126374cb65a708546eae28d5856e26ba2bc9b0ef21294f81326f383879386a8d17973f287e6cc60917bff8ec7c71d571d25f63432b
-  data.tar.gz: d021e86956aa6795d95ac7e0a7dc0c1ce9f8017ba8ee9ae437b8c0486fb89ec24ae7e33ac2c71bfb67677eb988f23b0bb179490dd816f9046912c732d82f6cfa
+  metadata.gz: 6949c77ff0d0f386abf6ba458ad48638b59c259f48f168006dbb875a07becec8ffe35055e662f952e533584413844f5805f4d1c1ee72d2449f38e204e4226b40
+  data.tar.gz: 1c9d032a727dcea1706a906f0187aaa4d5496f56af7033924d135cfa98dd7ae644df55e6cb80ad74a022b61b121528a76523f64af20341fd3b48b85ff2502088

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

@@ -0,0 +1,65 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomSort = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      id: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      id: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      id: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      id: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      id: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      id: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+//Render the subRow header rows
+const subRowHeaders = ["Quarter", "Month", "Day"]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          customSort
+          enableToggleExpansion="all"
+          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomSort

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

@@ -0,0 +1,5 @@
+The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
+
+The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
+
+__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

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

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+    },
+    {
+      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",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeader

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

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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

@@ -27,6 +27,7 @@ examples:
   - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
+  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -40,6 +41,7 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -38,3 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
+export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'