@linzjs/step-ag-grid 18.0.0 → 18.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -105,6 +105,8 @@ export interface GridProps {
 
   loading?: boolean;
   suppressCellFocus?: boolean;
+  pinnedTopRowData?: GridOptions["pinnedTopRowData"];
+  pinnedBottomRowData?: GridOptions["pinnedBottomRowData"];
 }
 
 /**
@@ -738,6 +740,8 @@ export const Grid = ({
           onRowDragEnd={onRowDragEnd}
           onRowDragLeave={onRowDragLeave}
           suppressCellFocus={params.suppressCellFocus}
+          pinnedTopRowData={params.pinnedTopRowData}
+          pinnedBottomRowData={params.pinnedBottomRowData}
         />
       </div>
     </div>

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -0,0 +1,105 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { Meta, StoryFn } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    selectable: false,
+  },
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 260, display: "flex", flexDirection: "column" }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  name: string;
+  position: string;
+  age: number;
+}
+
+interface ITestPinnedRow {
+  name: string;
+  position: string;
+  age: number;
+}
+
+const PinnedRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "name",
+        headerName: "Name",
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1, name: "Opeyemi", position: "Tester", age: 30 },
+    { id: 2, name: "Johnie", position: "Developer", age: 21 },
+    { id: 3, name: "Laxmi", position: "Manager", age: 65 },
+    { id: 4, name: "Salama", position: "Developer", age: 22 },
+    { id: 5, name: "Husni", position: "Developer", age: 24 },
+  ]);
+  const [pinnedBottomRowData] = useState<ITestPinnedRow[]>([{ name: "Total Age", position: "", age: 170 }]);
+  const [pinnedTopRowData] = useState<ITestPinnedRow[]>([{ name: "Min Age", position: "", age: 21 }]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={"readonly"}
+        {...props}
+        selectable={false}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        pinnedTopRowData={pinnedTopRowData}
+        pinnedBottomRowData={pinnedBottomRowData}
+      />
+    </GridWrapper>
+  );
+};
+export const PinnedRow = PinnedRowTemplate.bind({});
+PinnedRow.play = waitForGridReady;

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -220,25 +220,6 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
     { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
   ]);
-  /*
-  Testing
-  const [loading, setLoading] = useState(false);
-
-  useTimeout(() => {
-    setRowData([
-      { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
-      { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
-      { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
-    ]);
-  }, 5000);
-
-  useTimeout(() => {
-    setLoading(true);
-  }, 7000);
-
-  useTimeout(() => {
-    setLoading(false);
-  }, 9000);*/
 
   return (
     <GridWrapper maxHeight={400}>

package/src/styles/Grid.scss

@@ -89,3 +89,12 @@
   max-width: 400px;
 }
 
+.ag-floating-top-container .ag-row {
+  background-color: colors.$hint;
+}
+
+.ag-floating-bottom-container .ag-row {
+  background-color: colors.$hint;
+}
+
+