playbook_ui_docs 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 → 14.11.1.pre.alpha.PBNTR769sticky5359

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b29ced69883c08efeeb38c8cae1c7a9dca8bdb13222e9bf8b5d45a7058f20433
-  data.tar.gz: 30714ea1e97be8ddd8766dca5ff9a7707b9cdce82bf96f1f4538070b8215e4a7
+  metadata.gz: f3bdb49fc5fa2ae41cef519b8fc54c5a9fa804baecf7583ef6b16d0dbd1167d4
+  data.tar.gz: c61ffaa7be0fb6b1421dd77dcaa4c7653006377abfc564278064e3fea0a9cf94
 SHA512:
-  metadata.gz: 6a616895c39c34e9d17e09c7abd702f569762af4bb1aecb35632d514795ab6457077b5bf19dc3f59b800742ebf1bea9c4622c04cbdb7a4bc2e7dd75b2c257463
-  data.tar.gz: 5ea0bfef4c19c5bbbc318cca0937330c95654dd70b36ad2dbc85008c901e2a4e980eedf6a385aa2e80edf6825c020d129659fbebb6b91fac19732856147e35e7
+  metadata.gz: fae106e1a12690322c17c135dd21c65cf7af1fc23ddbab77855f4d958e7afce6ee4194b9bcd1a52a2e2395d947365f5a793d1de56de09ecc2ef4f499d4059282
+  data.tar.gz: '078f33440cc6284dc9d29952c1d500727d7957b76a147b50af05c62d4005fc16625828295c72e361d64e1dd7cffde0f3ecd884851ca807d392595e4a4f2fef20'

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyHeaderResponsive = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      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}
+          htmlOptions={{style: { maxHeight: "100vh" }}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky:true}}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyHeaderResponsive

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

@@ -22,6 +22,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_sticky_header_responsive: Sticky Header and Responsive
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props

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

@@ -13,4 +13,5 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -1,12 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", custom_event_listener: "datePickerLoader" }) %>
-<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
-
-<script>
-    document.getElementById("date-picker-loader").addEventListener("click", () => {
-        window.document.dispatchEvent(
-            new CustomEvent("datePickerLoader", {
-                bubbles: true,
-            })
-        );
-    });
-</script>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>