playbook_ui_docs 14.22.0.pre.alpha.PLAY22588587 → 14.22.0.pre.alpha.customheaderat8564

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b29950eaf36cde8e41455fcb9b225c5a8fa790b6d0588652ab34486ef975988
-  data.tar.gz: 42bc8d2dc55415e52c1859cde301dd9ab2c5fcb9d22c75322014bb42cc6bb7f4
+  metadata.gz: 76db03ead6e3e424b1d2b607fef50fee913d58fdbcb6a404fc75f05d5d1e0a9c
+  data.tar.gz: b2839d04fee219e071f0a9935e5bc3daf881eb46a815c499e44edc88a29ae8a6
 SHA512:
-  metadata.gz: ed13b007fa1aa2b04b67cc989f52b9131187badfcaf49606e01a3b36cb276272b3101ffd0c6e90178b6b038c220ac70e8108f86ad9deb16742a6b58856c9b042
-  data.tar.gz: f926d815792e4c619f3c54dce6d170e00556ddd89e1802e78856c271557eb69f418a45e1f80e83e40ce7c3cebf3c7f46382e7d93f7ccb1eeb95f1b26b9b1dad8
+  metadata.gz: 9aa4299336b6e87ce95e1d99a9cad0e8a2a2ec4fae296af27f6b5d832412b3e673103a0324365f31fa1035f4dcbaaa823f8f6c80f2d6b39ffef35bbca427f4f7
+  data.tar.gz: 51460484b334b4980e914e655132d52c964357e7c5b64d1561005755f52e4ee0832fd09cfc0359929358cf5b32e226b46a71f5dde47b139394e801454f2c19a7

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_custom_sort.jsx → _advanced_table_with_custom_header.jsx}

@@ -1,65 +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 AdvancedTableCustomSort = (props) => {
+const AdvancedTableWithCustomHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      id: "year",
       cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
-      id: "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",
-      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
+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

@@ -19,15 +19,14 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling_rails: Column Styling
-  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   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_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -41,6 +40,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,4 +38,4 @@ 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 AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'