RubyGems - playbook_ui - Versions diffs - 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 - Mend

playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx ADDED Viewed

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+const AdvancedTableInlineEditing = (props) => {
+  const [editedValues, setEditedValues] = useState({});
+  const EditableCell = ({ rowId, originalValue, onSave }) => {
+    const [localValue, setLocalValue] = useState(originalValue);
+    const handleChange = (e) => setLocalValue(e.target.value);
+    const handleBlur = () => {
+      originalValue !== localValue && onSave(rowId, localValue);
+    };
+    return (
+      <TextInput inline
+          marginBottom="none"
+          {...props}
+      >
+        <input
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
+            value={localValue}
+        />
+      </TextInput>
+    );
+  };
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      editable: true,
+      customRenderer: (row) => {
+        return (
+          <EditableCell
+              onSave={(id, val) => {
+                setEditedValues((prev) => ({ ...prev, [id]: val }));
+              }}
+              originalValue={
+                editedValues[row.id] ?? row.original.scheduledMeetings
+              }
+              rowId={row.id}
+          />
+        );
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+  return (
+    <div className="App">
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      {
+        editedValues && Object.keys(editedValues).length > 0 && (
+          <>
+            <Body
+                marginTop="md"
+                {...props}
+            >
+              Edited Values by Row Id:
+            </Body>
+            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
+          </>
+        )
+      }
+    </div>
+  );
+};
+export default AdvancedTableInlineEditing;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md ADDED Viewed

@@ -0,0 +1,4 @@
+Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
+Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
+See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb CHANGED Viewed

@@ -30,4 +30,4 @@
     }
 ] %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md CHANGED Viewed

@@ -1 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
+This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md CHANGED Viewed

@@ -1,3 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
 This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      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",
+    }
+] %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.