@linzjs/step-ag-grid 13.0.0 → 13.1.0

package/package.json

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

package/src/components/Grid.tsx

@@ -11,7 +11,7 @@ import { GridContext } from "../contexts/GridContext";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { fnOrVar, isNotEmpty } from "../utils/util";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
+import { GridHeaderSelect } from "./gridHeader";
 
 export interface GridBaseRow {
   id: string | number;
@@ -27,6 +27,7 @@ export interface GridProps {
   defaultColDef?: GridOptions["defaultColDef"];
   columnDefs: ColDef[];
   rowData: GridOptions["rowData"];
+  noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
   animateRows?: boolean;
   rowClassRules?: GridOptions["rowClassRules"];
@@ -42,7 +43,7 @@ export interface GridProps {
 export const Grid = (params: GridProps): JSX.Element => {
   const {
     gridReady,
-    setGridApi,
+    setApis,
     prePopupOps,
     ensureRowVisible,
     selectRowsById,
@@ -207,10 +208,10 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
-      setGridApi(event.api);
+      setApis(event.api, event.columnApi, params["data-testid"]);
       synchroniseExternallySelectedItemsToGrid();
     },
-    [setGridApi, synchroniseExternallySelectedItemsToGrid],
+    [setApis, synchroniseExternallySelectedItemsToGrid],
   );
 
   const noRowsOverlayComponent = useCallback(
@@ -218,10 +219,16 @@ export const Grid = (params: GridProps): JSX.Element => {
       const hasData = (params.rowData?.length ?? 0) > 0;
       const hasFilteredData = event.api.getDisplayedRowCount() > 0;
       return (
-        <span>{!hasData ? "There are currently no rows" : !hasFilteredData ? "All rows have been filtered" : ""}</span>
+        <span>
+          {!hasData
+            ? params.noRowsOverlayText ?? "There are currently no rows"
+            : !hasFilteredData
+            ? "All rows have been filtered"
+            : ""}
+        </span>
       );
     },
-    [params.rowData?.length],
+    [params.noRowsOverlayText, params.rowData?.length],
   );
 
   const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {

package/src/components/GridCell.tsx

@@ -14,7 +14,7 @@ import {
   GenericCellRendererParams,
   RowValueFormatterParams,
   RowValueGetterParams,
-} from "./gridRender/GridRenderGenericCell";
+} from "./gridRender";
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -6,7 +6,7 @@ import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton"
 
 import { GridFilterExternal } from "../../contexts/GridContext";
 import { GridBaseRow } from "../Grid";
-import { useGridFilter } from "../GridFilter";
+import { useGridFilter } from "./useGridFilter";
 
 export interface GridFilterButtonsOption<RowType extends GridBaseRow> {
   defaultSelected?: boolean;
@@ -32,7 +32,7 @@ export const GridFilterButtons = <RowType extends GridBaseRow>({
   useGridFilter(filter);
 
   return (
-    <div className={clsx("lui-margin-top-xxs lui-margin-bottom-xxs", className)}>
+    <div className={clsx(className, "flex-col-center")}>
       <LuiButtonGroup>
         {options.map((option, index) => (
           <LuiButton

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -0,0 +1,141 @@
+import { isEmpty } from "lodash-es";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
+
+import { GridContext } from "../../contexts/GridContext";
+import { Menu, MenuDivider, MenuItem } from "../../react-menu3";
+import { ClickEvent } from "../../react-menu3/types";
+import { GridBaseRow } from "../Grid";
+import { ColDefT } from "../GridCell";
+import { GridFilterHeaderIconButton } from "./GridFilterHeaderIconButton";
+
+export interface GridFilterColumnsToggleProps {
+  saveState?: boolean;
+}
+
+export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): JSX.Element => {
+  const [loaded, setLoaded] = useState(false);
+  const { getColumns, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
+
+  const columnStorageKey = useMemo(
+    () =>
+      isEmpty(getColumns())
+        ? null // Grid hasn't been initialised yet
+        : "stepAgGrid_invisibleColumnIds_" +
+          getColumns()
+            .map((col) => col.colId || "")
+            .join("_"),
+    [getColumns],
+  );
+
+  // Load state on start
+  useEffect(() => {
+    if (!columnStorageKey || loaded) return;
+    if (saveState) {
+      try {
+        const stored = window.localStorage.getItem(columnStorageKey);
+        const invisibleIds = JSON.parse(stored ?? "[]");
+        if (!Array.isArray(invisibleIds)) {
+          console.error(`stored invisible ids not an array: ${stored}`);
+        } else if (!invisibleIds.every((id) => typeof id === "string")) {
+          console.error(`stored invisible ids not strings: ${stored}`);
+        } else {
+          invisibleIds && setInvisibleColumnIds(invisibleIds);
+        }
+      } catch (ex) {
+        console.error(ex);
+      }
+      setLoaded(true);
+    }
+  }, [columnStorageKey, loaded, saveState, setInvisibleColumnIds]);
+
+  // Save state on column visibility change
+  useEffect(() => {
+    loaded &&
+      columnStorageKey &&
+      saveState &&
+      window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));
+  }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);
+
+  const toggleColumn = useCallback(
+    (colId?: string) => {
+      if (!colId) return;
+      setInvisibleColumnIds(
+        invisibleColumnIds.includes(colId)
+          ? invisibleColumnIds.filter((id) => id !== colId)
+          : [...invisibleColumnIds, colId],
+      );
+    },
+    [invisibleColumnIds, setInvisibleColumnIds],
+  );
+
+  const resetColumns = () => {
+    setInvisibleColumnIds([]);
+  };
+
+  const numericRegExp = /^\d+$/;
+  const isNonManageableColumn = (col: ColDefT<GridBaseRow>) => {
+    return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
+  };
+
+  return (
+    <Menu
+      menuButton={<GridFilterHeaderIconButton icon={"ic_columns"} title={"Column visibility"} />}
+      menuClassName={"step-ag-grid-react-menu"}
+      portal={true}
+      unmountOnClose={true}
+    >
+      <div className={"GridFilterColumnsToggle-container"}>
+        {getColumns()
+          .filter((col) => !!col.headerName)
+          .map((col) => (
+            <MenuItem
+              key={col.colId}
+              disabled={col.lockVisible}
+              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.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>
+          ))}
+      </div>
+      <MenuDivider key={`$$divider_reset_columns`} />
+      <MenuItem
+        key={"$$reset_columns"}
+        onClick={(e: ClickEvent) => {
+          // Global react-menu MenuItem handler handles tabs
+          if (e.key !== "Tab") {
+            e.keepOpen = e.key !== "Enter";
+            resetColumns();
+          }
+        }}
+      >
+        <LuiIcon name={"ic_regenerate"} alt={"Reset columns"} size={"md"} className={"MenuItem-icon"} />
+        Reset columns
+      </MenuItem>
+    </Menu>
+  );
+};

package/src/components/gridFilter/GridFilterHeaderIconButton.tsx

@@ -0,0 +1,33 @@
+import { ButtonHTMLAttributes, MouseEvent, forwardRef } from "react";
+
+import { LuiButton, LuiIcon } from "@linzjs/lui";
+import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+
+export interface GridFilterHeaderIconButtonProps {
+  icon: IconName;
+  onClick?: (e: MouseEvent) => void;
+  buttonProps?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>;
+  disabled?: boolean;
+  size?: IconSize;
+  title: string;
+}
+
+export const GridFilterHeaderIconButton = forwardRef<HTMLButtonElement, GridFilterHeaderIconButtonProps>(
+  function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = "md" }, ref) {
+    return (
+      <LuiButton
+        {...buttonProps}
+        type={"button"}
+        level={"tertiary"}
+        className={"GridFilterHeaderIconButton lui-button-icon-only"}
+        ref={ref}
+        aria-label={title}
+        title={title}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <LuiIcon name={icon} alt={"Menu"} size={size} />
+      </LuiButton>
+    );
+  },
+);

package/src/components/gridFilter/GridFilterQuick.tsx

@@ -18,11 +18,11 @@ export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFi
   return (
     <input
       aria-label="Search"
-      className="lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox"
+      className="Grid-quickFilterBox"
       type="text"
       placeholder={quickFilterPlaceholder ?? "Search..."}
       value={quickFilterValue}
-      onChange={(event): void => {
+      onChange={(event) => {
         setQuickFilterValue(event.target.value);
       }}
     />

package/src/components/gridFilter/index.ts

@@ -1,3 +1,6 @@
+export * from "./GridFilterHeaderIconButton";
+export * from "./GridFilterColumnsToggle";
 export * from "./GridFilterButtons";
 export * from "./GridFilterQuick";
 export * from "./GridFilters";
+export * from "./useGridFilter";

package/src/components/{GridFilter.ts → gridFilter/useGridFilter.ts}

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from "react";
 
-import { GridContext, GridFilterExternal } from "../contexts/GridContext";
-import { GridBaseRow } from "./Grid";
+import { GridContext, GridFilterExternal } from "../../contexts/GridContext";
+import { GridBaseRow } from "../Grid";
 
 export const useGridFilter = <RowType extends GridBaseRow>(filter: GridFilterExternal<RowType> | undefined) => {
   const { addExternalFilter, removeExternalFilter } = useContext(GridContext);

package/src/components/index.ts

@@ -4,7 +4,6 @@ export * from "./GridCell";
 export * from "./GridCellMultiEditor";
 export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";
-export * from "./GridFilter";
 export * from "./gridForm";
 export * from "./gridHeader";
 export * from "./GridIcon";

package/src/contexts/GridContext.tsx

@@ -1,18 +1,20 @@
-import { GridApi, RowNode } from "ag-grid-community";
+import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { createContext, useContext } from "react";
 
-import { GridBaseRow } from "../components/Grid";
+import { ColDefT, GridBaseRow } from "../components";
 
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
 
 export interface GridContextType<RowType extends GridBaseRow> {
   gridReady: boolean;
-  setGridApi: (gridApi: GridApi | undefined) => void;
+  setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
   getSelectedRows: <T extends GridBaseRow>() => T[];
+  getFilteredSelectedRows: <T extends GridBaseRow>() => T[];
   getSelectedRowIds: () => number[];
+  getFilteredSelectedRowIds: () => number[];
   selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;
   selectRowsById: (rowIds?: number[]) => void;
@@ -38,16 +40,27 @@ export interface GridContextType<RowType extends GridBaseRow> {
   removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
   isExternalFilterPresent: () => boolean;
   doesExternalFilterPass: (node: RowNode) => boolean;
+  getColumns: () => ColDefT<RowType>[];
+  invisibleColumnIds: string[];
+  setInvisibleColumnIds: (colIds: string[]) => void;
 }
 
 export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
+  getColumns: () => {
+    console.error("no context provider for getColumns");
+    return [];
+  },
+  invisibleColumnIds: [],
+  setInvisibleColumnIds: () => {
+    console.error("no context provider for setInvisibleColumnIds");
+  },
   prePopupOps: () => {
     console.error("no context provider for prePopupOps");
   },
   externallySelectedItemsAreInSync: false,
-  setGridApi: () => {
-    console.error("no context provider for setGridApi");
+  setApis: () => {
+    console.error("no context provider for setApis");
   },
   setQuickFilter: () => {
     console.error("no context provider for setQuickFilter");
@@ -59,10 +72,18 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error("no context provider for getSelectedRows");
     return [];
   },
+  getFilteredSelectedRows: <T extends unknown>(): T[] => {
+    console.error("no context provider for getFilteredSelectedRows");
+    return [];
+  },
   getSelectedRowIds: () => {
     console.error("no context provider for getSelectedRowIds");
     return [];
   },
+  getFilteredSelectedRowIds: () => {
+    console.error("no context provider for getFilteredSelectedRowIds");
+    return [];
+  },
   selectRowsDiff: async () => {
     console.error("no context provider for selectRowsDiff");
   },

package/src/contexts/GridContextProvider.tsx

@@ -1,9 +1,9 @@
-import { ColDef, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
-import { debounce, defer, delay, difference, isEmpty, last, remove, sortBy } from "lodash-es";
+import { compact, debounce, defer, delay, difference, isEmpty, last, remove, sortBy } from "lodash-es";
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
-import { GridBaseRow } from "../components/Grid";
+import { ColDefT, GridBaseRow } from "../components";
 import { isNotEmpty, wait } from "../utils/util";
 import { GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
@@ -19,9 +19,12 @@ interface GridContextProps {
  */
 export const GridContextProvider = <RowType extends GridBaseRow>(props: GridContextProps): ReactElement => {
   const { modifyUpdating } = useContext(GridUpdatingContext);
-  const [gridApi, _setGridApi] = useState<GridApi>();
+  const [gridApi, setGridApi] = useState<GridApi>();
+  const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, setQuickFilter] = useState("");
+  const [invisibleColumnIds, setInvisibleColumnIds] = useState<string[]>([]);
+  const testId = useRef<string | undefined>();
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
@@ -34,18 +37,6 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     gridApi?.setQuickFilter(quickFilter);
   }, [gridApi, quickFilter]);
 
-  /**
-   * Set the grid api when the grid is ready.
-   */
-  const setGridApi = useCallback(
-    (gridApi: GridApi | undefined) => {
-      _setGridApi(gridApi);
-      gridApi?.setQuickFilter(quickFilter);
-      setGridReady(!!gridApi);
-    },
-    [quickFilter],
-  );
-
   /**
    * Wraps things that require gridApi in common handling, for when gridApi not present.
    *
@@ -62,6 +53,54 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     [gridApi],
   );
 
+  /**
+   * Scroll row into view by Id.
+   *
+   * @param id Id to scroll into view
+   * @return true if row is found, else false
+   */
+  const ensureRowVisible = useCallback(
+    (id: number | string): boolean => {
+      return gridApiOp((gridApi) => {
+        const node = gridApi.getRowNode(`${id}`);
+        if (!node) return false;
+        gridApi.ensureNodeVisible(node);
+        return true;
+      });
+    },
+    [gridApiOp],
+  );
+
+  /**
+   * Set the grid api when the grid is ready.
+   */
+  const setApis = useCallback(
+    (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => {
+      testId.current = dataTestId;
+      setGridApi(gridApi);
+      setColumnApi(columnApi);
+      gridApi?.setQuickFilter(quickFilter);
+      setGridReady(!!gridApi);
+    },
+    [quickFilter],
+  );
+
+  /**
+   * Expose scrollRowIntoView for playwright tests.
+   */
+  useEffect(() => {
+    const globalSupport = (window as any).__stepAgGrid || ((window as any).__stepAgGrid = { grids: {} });
+    if (testId.current) {
+      globalSupport.grids[testId.current] = {
+        scrollRowIntoViewById: (rowId: number | string) => {
+          if (!ensureRowVisible(rowId)) {
+            throw `scrollRowIntoView failed on grid '${testId.current}' as row with id: '${rowId}' was not found`;
+          }
+        },
+      };
+    }
+  }, [ensureRowVisible]);
+
   /**
    * Before a popup record the currently focused cell.
    */
@@ -247,11 +286,26 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     );
   }, [gridApiOp]);
 
+  const getFilteredSelectedRows = useCallback(<T extends unknown>(): T[] => {
+    return gridApiOp((gridApi) => {
+      const rowData: T[] = [];
+      gridApi.forEachNodeAfterFilter((node) => {
+        if (node.isSelected()) rowData.push(node.data);
+      });
+      return rowData;
+    });
+  }, [gridApiOp]);
+
   const getSelectedRowIds = useCallback(
     (): number[] => getSelectedRows().map((row) => (row as any).id as number),
     [getSelectedRows],
   );
 
+  const getFilteredSelectedRowIds = useCallback(
+    (): number[] => getFilteredSelectedRows().map((row) => (row as any).id as number),
+    [getFilteredSelectedRows],
+  );
+
   const editingCells = useCallback((): boolean => {
     return gridApiOp(
       (gridApi) => isNotEmpty(gridApi.getEditingCells()),
@@ -259,18 +313,6 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     );
   }, [gridApiOp]);
 
-  const ensureRowVisible = useCallback(
-    (id: number | string): boolean => {
-      return gridApiOp((gridApi) => {
-        const node = gridApi.getRowNode(`${id}`);
-        if (!node) return false;
-        gridApi.ensureNodeVisible(node);
-        return true;
-      });
-    },
-    [gridApiOp],
-  );
-
   /**
    * Scroll last selected row into view on grid sort change
    */
@@ -407,12 +449,33 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     return externalFilters.current.every((filter) => filter(node.data, node));
   };
 
+  const getColumns: () => ColDefT<RowType>[] = useCallback(() => gridApi?.getColumnDefs() ?? [], [gridApi]);
+
+  useEffect(() => {
+    if (columnApi) {
+      // 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);
+    }
+  }, [invisibleColumnIds, columnApi, getColumns]);
+
   return (
     <GridContext.Provider
       value={{
+        getColumns,
+        invisibleColumnIds,
+        setInvisibleColumnIds,
         gridReady,
         prePopupOps,
-        setGridApi,
+        setApis,
         setQuickFilter,
         selectRowsById,
         selectRowsDiff,
@@ -422,7 +485,9 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         flashRowsDiff,
         focusByRowById,
         getSelectedRows,
+        getFilteredSelectedRows,
         getSelectedRowIds,
+        getFilteredSelectedRowIds,
         editingCells,
         ensureRowVisible,
         ensureSelectedRowIsVisible,

package/src/contexts/GridPopoverContextProvider.tsx

@@ -12,7 +12,7 @@ interface GridPopoverContextProps {
 }
 
 export const GridPopoverContextProvider = ({ props, children }: GridPopoverContextProps) => {
-  const { getSelectedRows, updatingCells } = useContext(GridContext);
+  const { getFilteredSelectedRows, updatingCells } = useContext(GridContext);
   const anchorRef = useRef<Element>(props.eGridCell);
 
   const hasSaved = useRef(false);
@@ -23,8 +23,9 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
   const multiEdit = cellEditorParams?.multiEdit ?? false;
   // Then item that is clicked on will always be first in the list
   const selectedRows = useMemo(
-    () => (multiEdit ? sortBy(getSelectedRows(), (row) => row.id !== props.data.id) : [props.data as GridBaseRow]),
-    [getSelectedRows, multiEdit, props.data],
+    () =>
+      multiEdit ? sortBy(getFilteredSelectedRows(), (row) => row.id !== props.data.id) : [props.data as GridBaseRow],
+    [getFilteredSelectedRows, multiEdit, props.data],
   );
   const field = props.colDef?.field ?? "";
 

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

@@ -23,6 +23,7 @@ import {
   useGridFilter,
   wait,
 } from "../..";
+import { GridFilterColumnsToggle } from "../../components";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -66,6 +67,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         headerName: "Id",
         initialWidth: 65,
         maxWidth: 85,
+        lockVisible: true,
       }),
       GridCell({
         field: "position",
@@ -213,10 +215,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     <GridWrapper maxHeight={300}>
       <GridFilters>
         <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
-        <div>
-          Custom filter: Age less than:
-          <GridFilterLessThan field={"age"} />
-        </div>
+        <GridFilterLessThan text="Age <" field={"age"} />
         <GridFilterButtons<ITestRow>
           luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
           options={[
@@ -229,8 +228,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
             },
           ]}
         />
+        <GridFilterColumnsToggle />
       </GridFilters>
       <Grid
+        data-testid={"readonly"}
         {...props}
         selectable={true}
         autoSelectFirstRow={true}
@@ -243,7 +244,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow }): JSX.Element => {
+const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX.Element => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(
@@ -261,7 +262,13 @@ const GridFilterLessThan = (props: { field: keyof ITestRow }): JSX.Element => {
     }
   };
 
-  return <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} />;
+  return (
+    <div className={"flex-row-center"}>
+      <div style={{ whiteSpace: "nowrap" }}>{props.text}</div>
+      &#160;
+      <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} style={{ width: 64 }} />
+    </div>
+  );
 };
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});