@linzjs/step-ag-grid 14.9.4 → 15.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.9.4",
+  "version": "15.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -12,7 +12,7 @@
     "react",
     "react-component"
   ],
-  "main": "dist/step-ag-grid.esm.js",
+  "main": "dist/step-ag-grid.cjs.js",
   "type": "module",
   "typings": "dist/src/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/GridCellFiller.tsx

@@ -0,0 +1,11 @@
+import { ColDef } from "ag-grid-community";
+
+export const GridCellFillerColId = "gridCellFiller";
+
+export const isGridCellFiller = (col: ColDef) => col.colId === GridCellFillerColId;
+
+export const GridCellFiller = (): ColDef => ({
+  colId: GridCellFillerColId,
+  headerName: "",
+  flex: 1,
+});

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -1,4 +1,4 @@
-import { compact, isEmpty } from "lodash-es";
+import { isEmpty } from "lodash-es";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
@@ -16,17 +16,20 @@ export interface GridFilterColumnsToggleProps {
 
 export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): JSX.Element => {
   const [loaded, setLoaded] = useState(false);
-  const { getColumns, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
+  const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
 
   const columnStorageKey = useMemo(
     () =>
-      isEmpty(getColumns())
+      isEmpty(getColumnIds())
         ? null // Grid hasn't been initialised yet
-        : "stepAgGrid_invisibleColumnIds_" +
-          getColumns()
-            .map((col) => col.colId || "")
-            .join("_"),
-    [getColumns],
+        : "stepAgGrid_invisibleColumnIds_" + getColumnIds().join("_"),
+    [getColumnIds],
+  );
+
+  // infer the invisible ids from colDefs
+  const resetColumns = useCallback(
+    () => setInvisibleColumnIds(getColumnIds("initialHide")),
+    [getColumnIds, setInvisibleColumnIds],
   );
 
   // Load state on start
@@ -36,14 +39,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       try {
         const stored = window.localStorage.getItem(columnStorageKey);
         if (!stored) {
-          // infer the invisible ids from colDefs
-          setInvisibleColumnIds(
-            compact(
-              getColumns()
-                .filter((col) => col.initialHide)
-                .map((col) => col.colId),
-            ),
-          );
+          resetColumns();
         } else {
           const invisibleIds = JSON.parse(stored ?? "[]");
           if (!Array.isArray(invisibleIds)) {
@@ -59,7 +55,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       }
       setLoaded(true);
     }
-  }, [columnStorageKey, getColumns, loaded, saveState, setInvisibleColumnIds]);
+  }, [columnStorageKey, getColumns, loaded, resetColumns, saveState, setInvisibleColumnIds]);
 
   // Save state on column visibility change
   useEffect(() => {
@@ -81,10 +77,6 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
     [invisibleColumnIds, setInvisibleColumnIds],
   );
 
-  const resetColumns = () => {
-    setInvisibleColumnIds([]);
-  };
-
   const numericRegExp = /^\d+$/;
   const isNonManageableColumn = (col: ColDefT<GridBaseRow>) => {
     return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
@@ -98,40 +90,38 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       unmountOnClose={true}
     >
       <div className={"GridFilterColumnsToggle-container"}>
-        {getColumns()
-          .filter((col) => !!col.headerName)
-          .map((col) => (
-            <MenuItem
-              key={col.colId}
-              disabled={isNonManageableColumn(col)}
-              onClick={(e: ClickEvent) => {
-                // Global react-menu MenuItem handler handles tabs
-                if (e.key !== "Tab") {
-                  e.keepOpen = true;
-                  if (e.key !== "Enter") {
-                    toggleColumn(col.colId);
-                  }
+        {getColumns("headerName").map((col) => (
+          <MenuItem
+            key={col.colId}
+            disabled={isNonManageableColumn(col)}
+            onClick={(e: ClickEvent) => {
+              // Global react-menu MenuItem handler handles tabs
+              if (e.key !== "Tab") {
+                e.keepOpen = true;
+                if (e.key !== "Enter") {
+                  toggleColumn(col.colId);
                 }
+              }
+            }}
+          >
+            <LuiCheckboxInput
+              isChecked={!!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? "")}
+              value={`${col.colId}`}
+              label={col.headerName ?? ""}
+              isDisabled={isNonManageableColumn(col)}
+              inputProps={{
+                onClick: (e) => {
+                  // Click is handled by MenuItem onClick so keyboard events work
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+              }}
+              onChange={() => {
+                /*Do nothing, change handled by menuItem*/
               }}
-            >
-              <LuiCheckboxInput
-                isChecked={!!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? "")}
-                value={`${col.colId}`}
-                label={col.headerName ?? ""}
-                isDisabled={isNonManageableColumn(col)}
-                inputProps={{
-                  onClick: (e) => {
-                    // Click is handled by MenuItem onClick so keyboard events work
-                    e.preventDefault();
-                    e.stopPropagation();
-                  },
-                }}
-                onChange={() => {
-                  /*Do nothing, change handled by menuItem*/
-                }}
-              />
-            </MenuItem>
-          ))}
+            />
+          </MenuItem>
+        ))}
       </div>
       <MenuDivider key={`$$divider_reset_columns`} />
       <MenuItem

package/src/components/gridUtil.ts

@@ -0,0 +1,6 @@
+import { ColDef } from "ag-grid-community";
+
+import { isGridCellFiller } from "./GridCellFiller";
+
+export const getColId = (colDef: ColDef): string => colDef.colId ?? "";
+export const isFlexColumn = (colDef: ColDef): boolean => !!colDef.flex && !isGridCellFiller(colDef);

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./ComponentLoadingWrapper";
 export * from "./Grid";
 export * from "./GridCell";
+export * from "./GridCellFiller";
 export * from "./GridCellMultiEditor";
 export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";

package/src/contexts/GridContext.tsx

@@ -17,7 +17,10 @@ export type AutoSizeColumnsResult = { width: number } | null;
 export interface GridContextType<RowType extends GridBaseRow> {
   gridReady: boolean;
   getColDef: (colId?: string) => ColDef | undefined;
-  getColumns: () => ColDefT<RowType>[];
+  getColumns: (
+    filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
+  ) => ColDefT<RowType>[];
+  getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
   setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
@@ -71,6 +74,10 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error("no context provider for getColumns");
     return [];
   },
+  getColumnIds: () => {
+    console.error("no context provider for getColumnIds");
+    return [];
+  },
   invisibleColumnIds: undefined,
   setInvisibleColumnIds: () => {
     console.error("no context provider for setInvisibleColumnIds");

package/src/contexts/GridContextProvider.tsx

@@ -3,10 +3,12 @@ import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import debounce from "debounce-promise";
-import { compact, defer, delay, difference, isEmpty, last, remove, sortBy, sumBy } from "lodash-es";
+import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from "lodash-es";
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
+import { GridCellFillerColId, isGridCellFiller } from "../components/GridCellFiller";
+import { getColId, isFlexColumn } from "../components/gridUtil";
 import { isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
@@ -26,13 +28,19 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, setQuickFilter] = useState("");
-  const [invisibleColumnIds, setInvisibleColumnIds] = useState<string[]>();
+  const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<RowType>[]>([]);
 
+  /**
+   * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
+   */
+  const setInvisibleColumnIds = (invisibleColumnIds: string[]) =>
+    _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId));
+
   /**
    * Set quick filter directly on grid, based on previously save quickFilter state.
    */
@@ -152,9 +160,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const _getNewNodes = useCallback((): RowNode[] => {
     return gridApiOp(
       (gridApi) =>
-        difference(_getAllRowIds(), idsBeforeUpdate.current)
-          .map((rowId) => gridApi.getRowNode("" + rowId)) //
-          .filter((r) => r) as RowNode[],
+        compact(difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode("" + rowId))),
       () => [],
     );
   }, [_getAllRowIds, gridApiOp]);
@@ -168,10 +174,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const _rowIdsToNodes = useCallback(
     (rowIds: number[]): RowNode[] => {
       return gridApiOp(
-        (gridApi) =>
-          rowIds
-            .map((rowId) => gridApi.getRowNode("" + rowId)) //
-            .filter((r) => r) as RowNode[],
+        (gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode("" + rowId))),
         () => [] as RowNode[],
       );
     },
@@ -181,11 +184,20 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   /**
    * Get ColDefs, with flattened ColGroupDefs
    */
-  const getColumns: () => ColDefT<RowType>[] = useCallback(
-    () => columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [],
+  const getColumns = useCallback(
+    (
+      filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
+    ): ColDefT<RowType>[] =>
+      filter(columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
     [columnApi],
   );
 
+  const getColumnIds = useCallback(
+    (filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true): string[] =>
+      compact(getColumns(filterDef).map(getColId)),
+    [getColumns],
+  );
+
   /**
    * Internal method for selecting and flashing rows.
    *
@@ -544,9 +556,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
 
   const redrawRows = useCallback(
     (rowNodes?: RowNode[]) => {
-      gridApiOp((gridApi) => {
-        gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
-      });
+      gridApiOp((gridApi) => gridApi.redrawRows(rowNodes ? { rowNodes } : undefined));
     },
     [gridApiOp],
   );
@@ -582,31 +592,39 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     onFilterChanged().then();
   };
 
-  const isExternalFilterPresent = (): boolean => externalFilters.current.length > 0;
+  const isExternalFilterPresent = (): boolean => !isEmpty(externalFilters.current);
 
-  const doesExternalFilterPass = (node: RowNode): boolean => {
-    return externalFilters.current.every((filter) => filter(node.data, node));
-  };
+  const doesExternalFilterPass = (node: RowNode): boolean =>
+    externalFilters.current.every((filter) => filter(node.data, node));
 
   const getColDef = useCallback(
     (colId?: string): ColDef | undefined => (!!colId && gridApi?.getColumnDef(colId)) || undefined,
     [gridApi],
   );
 
+  /**
+   * Apply column visibility
+   */
   useEffect(() => {
-    if (columnApi && invisibleColumnIds) {
-      // show all columns that aren't invisible
-      columnApi.setColumnsVisible(
-        compact(
-          getColumns()
-            .filter((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId))
-            .map((col) => col.colId),
-        ),
-        true,
-      );
-      // hide all invisible columns
-      columnApi.setColumnsVisible(invisibleColumnIds, false);
+    if (!columnApi || !invisibleColumnIds) return;
+
+    // show all columns that aren't invisible
+    const newVisibleColumns = getColumns(
+      (col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId) && !isGridCellFiller(col),
+    );
+    // If there's no flex column showing add the filler column if defined
+    const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
+    if (!visibleColumnsContainsAFlex) {
+      const fillerColumn = getColumns(isGridCellFiller)[0];
+      fillerColumn && newVisibleColumns.push(fillerColumn);
     }
+    columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+
+    // Hide the filler column if there's already a flex column
+    const invisibleColumnIdsWithOptionalFiller = visibleColumnsContainsAFlex
+      ? [...invisibleColumnIds, GridCellFillerColId]
+      : invisibleColumnIds;
+    columnApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
   }, [invisibleColumnIds, columnApi, getColumns]);
 
   /**
@@ -620,7 +638,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
 
       const columnKeys = columnApi
         ?.getColumnState()
-        .filter((cs) => !cs.hide && gridApi.getColumnDef(cs.colId)?.headerComponentParams?.exportable !== false)
+        .filter((cs) => {
+          const colDef = gridApi.getColumnDef(cs.colId);
+          return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
+        })
         .map((cs) => cs.colId);
       gridApi.exportDataAsCsv({
         columnKeys,
@@ -637,6 +658,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
       value={{
         getColDef,
         getColumns,
+        getColumnIds,
         invisibleColumnIds,
         setInvisibleColumnIds,
         gridReady,

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

@@ -25,6 +25,7 @@ import {
 } from "../..";
 import { GridFilterColumnsToggle } from "../../components";
 import { GridFilterDownloadCsvButton } from "../../components";
+import { GridCellFiller } from "../../components/GridCellFiller";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -97,6 +98,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         flex: 1,
         initialHide: true,
       }),
+      GridCellFiller(),
       GridPopoverMessage(
         {
           headerName: "Popout message",