playbook_ui_docs 14.11.1.pre.alpha.PBNTR798datepickerturbo5537 → 14.11.1.pre.alpha.PBNTR7495495

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c323b5f7631c37e4576b44abd9c22f50dd39665e73973e9cae0cb3bd273e6481
-  data.tar.gz: 0d48e9b4d1fa09c4b1a2878d8118121440cbd706548c68acc896e5ca45cfd46f
+  metadata.gz: a55fc3ad44f9dff0dcbff3a0c0e85c9248f12795642526578c55f288721ed718
+  data.tar.gz: ec32dd69d48003ba67b2ea6afb0f41cd6c80c15b29f80304c7f3e61911d9fb99
 SHA512:
-  metadata.gz: afbb13cc7bafd1c11be35bcbb5592d727ef69ffa993b6b589abee0c8d2a1d5673fad8fe1e6650ee88ca795bff7acbc5a2dddbdc7b9e059afacf20a83215f459f
-  data.tar.gz: cecfa017c1fe79f06337067cfee7163657a938bc23eae418afb8452f230668708be8a75cd66b445df3c6a15b86f1d2e46ae5983d1a0b18d8a079093a6413ceeb
+  metadata.gz: acda96a67cca54c09087226e4a91145afed1fe224b0de165672c591d51ba67203bb53e93ac9b6e829f5a9af549537e31d03b980d7c178391722b92a5df705659
+  data.tar.gz: e643133bf270e6877644c25eef683305ef25921575b23e67895768f0e25d44fe9bcc24163ef6221f502d21f6de273ef6750d8149983d343b76809b93a160b4e7

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

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableNoSubrows = (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}
+          enableToggleExpansion="all"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableNoSubrows

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

@@ -40,6 +40,7 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -47,6 +47,7 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -0,0 +1,60 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableSelectableRows = (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",
+    },
+  ]
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+          selectableRows
+          tableData={MOCK_DATA}
+          
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRows

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

@@ -0,0 +1,5 @@
+`selectableRows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -0,0 +1,78 @@
+import React, {useState} from "react"
+import { AdvancedTable, CircleIconButton, Flex } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableSelectableRowsActions = (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",
+    },
+  ]
+
+const [selectedRows, setSelectedRows] = useState()
+
+const CustomActions = () => {
+  const rowIds = selectedRows ? Object.keys(selectedRows) : [];
+
+  return (
+    <Flex>
+      <CircleIconButton
+          icon="file-csv"
+          onClick={() =>
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
+          }
+          variant="link"
+      />
+      <CircleIconButton
+          icon="trash-alt"
+          onClick={() =>
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
+          }
+          variant="link"
+        />
+    </Flex>
+  );
+};
+
+
+  return (
+    <div>
+      <AdvancedTable
+          actions={<CustomActions/>}
+          columnDefinitions={columnDefinitions}
+          onRowSelectionChange={(selected) => setSelectedRows(selected)}
+          selectableRows
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRowsActions

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

@@ -0,0 +1 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar. The `onRowSelectionChange` can then be used to attach the needed click events to those actions.

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

@@ -0,0 +1,53 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableSelectableRowsHeader = (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}
+          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+          selectableRows
+          showActionsBar={false}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRowsHeader

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

@@ -0,0 +1 @@
+`showActionsBar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableSelectableRowsNoSubrows = (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}
+          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+          selectableRows
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRowsNoSubrows

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

@@ -0,0 +1 @@
+`selectableRows` can also be used with tables without nested row data.

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

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json

@@ -0,0 +1,42 @@
+[
+  {
+    "year": "2021",
+    "id": "1",
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19"
+  },
+  {
+    "year": "2022",
+    "id": "8",
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32"
+  },
+  {
+    "year": "2023",
+    "id": "15",
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29"
+  },
+  {
+    "year": "2024",
+    "id": "14",
+    "newEnrollments": "15",
+    "scheduledMeetings": "34",
+    "attendanceRate": "32%",
+    "completedClasses": "6",
+    "classCompletionRate": "67%",
+    "graduatedStudents": "65"
+  }
+]