@linzjs/step-ag-grid 29.12.0 → 29.14.0

package/src/components/index.ts

@@ -15,3 +15,4 @@ export * from './GridPopoverHook';
 export * from './gridRender';
 export * from './GridWrapper';
 export * from './PostSortRowsHook';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,34 @@
+import { ColDef, EditableCallback, ICellRendererParams, ValueFormatterFunc, ValueGetterFunc } from 'ag-grid-community';
+import { ReactElement } from 'react';
+
+export const agGridSelectRowColId = 'ag-Grid-SelectionColumn';
+
+export interface GridBaseRow {
+  id: string | number;
+}
+
+export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+  movedRow: TData;
+  targetRow: TData;
+  direction: -1 | 1;
+}
+
+// This is so that typescript retains the row type to pass to the GridCells
+export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
+  editable?: boolean | EditableCallback<TData, ValueType>;
+  valueGetter?: string | ValueGetterFunc<TData, ValueType>;
+  valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
+  cellRenderer?:
+    | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
+    | string;
+  cellRendererParams?: {
+    rightHoverElement?: ReactElement;
+    originalCellRenderer?: any;
+    editAction?: (selectedRows: TData[]) => void;
+    shortcutKeys?: Record<string, () => void>;
+    error?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    warning?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    info?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+  };
+  editor?: (editorProps: any) => ReactElement;
+}

package/src/contexts/GridContext.tsx

@@ -2,7 +2,7 @@ import { ColDef, GridApi, IRowNode, ISizeColumnsToFitParams } from 'ag-grid-comm
 import { CsvExportParams } from 'ag-grid-community';
 import { createContext, useContext } from 'react';
 
-import { ColDefT, GridBaseRow } from '../components';
+import { ColDefT, GridBaseRow } from '../components/types';
 
 export type GridFilterExternal<TData extends GridBaseRow> = (data: TData, rowNode: IRowNode) => boolean;
 
@@ -14,8 +14,8 @@ export interface AutoSizeColumnsProps {
 
 export type AutoSizeColumnsResult = { width: number } | null;
 
-export interface StartCellEditingProps {
-  rowId: number;
+export interface StartCellEditingProps<TData extends GridBaseRow> {
+  rowId: TData['id'];
   colId: string;
 }
 
@@ -33,21 +33,21 @@ export interface GridContextType<TData extends GridBaseRow> {
   editingCells: () => boolean;
   getSelectedRows: <T extends GridBaseRow>() => T[];
   getFilteredSelectedRows: <T extends GridBaseRow>() => T[];
-  getSelectedRowIds: () => number[];
-  getFilteredSelectedRowIds: () => number[];
+  getSelectedRowIds: () => TData['id'][];
+  getFilteredSelectedRowIds: () => TData['id'][];
   selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  selectRowsById: (rowIds?: number[]) => void;
-  selectRowsByIdWithFlash: (rowIds?: number[]) => void;
-  flashRows: (rowIds?: number[]) => void;
+  selectRowsById: (rowIds?: TData['id'][]) => void;
+  selectRowsByIdWithFlash: (rowIds?: TData['id'][]) => void;
+  flashRows: (rowIds?: TData['id'][]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  focusByRowById: (rowId: number, ifNoCellFocused?: boolean) => void;
-  ensureRowVisible: (id: number | string) => boolean;
+  focusByRowById: (rowId: TData['id'], ifNoCellFocused?: boolean) => void;
+  ensureRowVisible: (id: TData['id'] | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
-  getFirstRowId: () => number;
+  getFirstRowId: () => TData['id'];
   autoSizeColumns: (props?: AutoSizeColumnsProps) => Promise<AutoSizeColumnsResult>;
   sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
-  startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
+  startCellEditing: ({ rowId, colId }: StartCellEditingProps<TData>) => Promise<void>;
   // Restores the previous focus after cell editing
   resetFocusedCellAfterCellEditing: () => void;
   updatingCells: (
@@ -70,149 +70,58 @@ export interface GridContextType<TData extends GridBaseRow> {
   onBulkEditingComplete: () => Promise<void> | void;
   setOnBulkEditingComplete: (callback: (() => Promise<void> | void) | undefined) => void;
   showNoRowsOverlay: () => void;
+  getCellValue: GridApi['getCellValue'];
 }
 
+const NoContext = <T,>(): T => {
+  console.error('Missing GridContextProvider');
+  return null as T;
+};
+
 export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
   gridRenderState: () => null,
-  getColDef: () => {
-    console.error('no context provider for getColDef');
-    return undefined;
-  },
-  getColumns: () => {
-    console.error('no context provider for getColumns');
-    return [];
-  },
-  getColumnIds: () => {
-    console.error('no context provider for getColumnIds');
-    return [];
-  },
+  getCellValue: NoContext,
+  getColDef: NoContext,
+  getColumns: NoContext,
+  getColumnIds: NoContext,
   invisibleColumnIds: undefined,
-  setInvisibleColumnIds: () => {
-    console.error('no context provider for setInvisibleColumnIds');
-  },
-  prePopupOps: () => {
-    console.error('no context provider for prePopupOps');
-  },
+  setInvisibleColumnIds: NoContext,
+  prePopupOps: NoContext,
   externallySelectedItemsAreInSync: false,
-  setApis: () => {
-    console.error('no context provider for setApis');
-  },
-  setQuickFilter: () => {
-    console.error('no context provider for setQuickFilter');
-  },
-  selectRowsById: () => {
-    console.error('no context provider for selectRows');
-  },
-  getSelectedRows: <T,>(): T[] => {
-    console.error('no context provider for getSelectedRows');
-    return [];
-  },
-  getFilteredSelectedRows: <T,>(): 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 [];
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  selectRowsDiff: async () => {
-    console.error('no context provider for selectRowsDiff');
-  },
-  selectRowsByIdWithFlash: () => {
-    console.error('no context provider for selectRowsWithFlash');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  selectRowsWithFlashDiff: async () => {
-    console.error('no context provider for selectRowsWithFlashDiff');
-  },
-  flashRows: () => {
-    console.error('no context provider for flashRows');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  flashRowsDiff: async () => {
-    console.error('no context provider for flashRows');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-misused-promises
-  focusByRowById: async () => {
-    console.error('no context provider for focusByRowById');
-  },
-  ensureRowVisible: () => {
-    console.error('no context provider for ensureRowVisible');
-    return true;
-  },
-  ensureSelectedRowIsVisible: () => {
-    console.error('no context provider for ensureSelectedRowIsVisible');
-  },
-  getFirstRowId: () => {
-    console.error('no context provider for getFirstRowId');
-    return -1;
-  },
-  autoSizeColumns: async () => {
-    console.error('no context provider for autoSizeColumns');
-    return Promise.resolve(null);
-  },
-  sizeColumnsToFit: () => {
-    console.error('no context provider for autoSizeAllColumns');
-    return null;
-  },
-  editingCells: () => {
-    console.error('no context provider for editingCells');
-    return false;
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  startCellEditing: async () => {
-    console.error('no context provider for startCellEditing');
-  },
-  resetFocusedCellAfterCellEditing: () => {
-    console.error('no context provider for resetFocusedCellAfterCellEditing');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  updatingCells: async () => {
-    console.error('no context provider for modifyUpdating');
-    return false;
-  },
-  redrawRows: () => {
-    console.error('no context provider for redrawRows');
-  },
-  setExternallySelectedItemsAreInSync: () => {
-    console.error('no context provider for setExternallySelectedItemsAreInSync');
-  },
-  // eslint-disable-next-line @typescript-eslint/require-await
-  waitForExternallySelectedItemsToBeInSync: async () => {
-    console.error('no context provider for waitForExternallySelectedItemsToBeInSync');
-  },
-  addExternalFilter: () => {
-    console.error('no context provider for addExternalFilter');
-  },
-  removeExternalFilter: () => {
-    console.error('no context provider for removeExternalFilter');
-  },
-  isExternalFilterPresent: () => {
-    console.error('no context provider for isExternalFilterPresent');
-    return false;
-  },
-  doesExternalFilterPass: () => {
-    console.error('no context provider for doesExternalFilterPass');
-    return true;
-  },
-  downloadCsv: () => {
-    console.error('no context provider for downloadCsv');
-  },
-  onBulkEditingComplete: () => {
-    console.error('no context provider for onBulkEditingComplete');
-  },
-  setOnBulkEditingComplete: () => {
-    console.error('no context provider for setOnBulkEditingComplete');
-  },
-  showNoRowsOverlay: () => {
-    console.error('no context provider for showLoadingOverlay');
-  },
+  setApis: NoContext,
+  setQuickFilter: NoContext,
+  selectRowsById: NoContext,
+  getSelectedRows: NoContext,
+  getFilteredSelectedRows: NoContext,
+  getSelectedRowIds: NoContext,
+  getFilteredSelectedRowIds: NoContext,
+  selectRowsDiff: NoContext,
+  selectRowsByIdWithFlash: NoContext,
+  selectRowsWithFlashDiff: NoContext,
+  flashRows: NoContext,
+  flashRowsDiff: NoContext,
+  focusByRowById: NoContext,
+  ensureRowVisible: NoContext,
+  ensureSelectedRowIsVisible: NoContext,
+  getFirstRowId: NoContext,
+  autoSizeColumns: NoContext,
+  sizeColumnsToFit: NoContext,
+  editingCells: NoContext,
+  startCellEditing: NoContext,
+  resetFocusedCellAfterCellEditing: NoContext,
+  updatingCells: NoContext,
+  redrawRows: NoContext,
+  setExternallySelectedItemsAreInSync: NoContext,
+  waitForExternallySelectedItemsToBeInSync: NoContext,
+  addExternalFilter: NoContext,
+  removeExternalFilter: NoContext,
+  isExternalFilterPresent: NoContext,
+  doesExternalFilterPass: NoContext,
+  downloadCsv: NoContext,
+  onBulkEditingComplete: NoContext,
+  setOnBulkEditingComplete: NoContext,
+  showNoRowsOverlay: NoContext,
 });
 
 export const useGridContext = <TData extends GridBaseRow>() => useContext<GridContextType<TData>>(GridContext);

package/src/contexts/GridContextProvider.tsx

@@ -13,7 +13,7 @@ import debounce from 'debounce-promise';
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
-import { ColDefT, GridBaseRow } from '../components';
+import { agGridSelectRowColId, ColDefT, GridBaseRow } from '../components';
 import { GridCellFillerColId, isGridCellFiller } from '../components/GridCellFiller';
 import { getColId, isFlexColumn } from '../components/gridUtil';
 import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from '../utils/util';
@@ -38,7 +38,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const hasExternallySelectedItemsRef = useRef(false);
-  const idsBeforeUpdate = useRef<number[]>([]);
+  const idsBeforeUpdate = useRef<TData['id'][]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
@@ -83,6 +83,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [gridApi],
   );
 
+  const getCellValue = useCallback<GridApi['getCellValue']>((...props) => gridApi?.getCellValue(...props), [gridApi]);
+
   /**
    * Scroll row into view by Id.
    *
@@ -169,7 +171,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Get all row id's in grid.
    */
   const _getAllRowIds = useCallback(() => {
-    const result: number[] = [];
+    const result: TData['id'][] = [];
     return gridApiOp(
       (gridApi) => {
         gridApi.forEachNode((node) => result.push(node.data.id));
@@ -205,7 +207,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * @param rowIds Row ids to get from grid.
    */
   const _rowIdsToNodes = useCallback(
-    (rowIds: number[]): IRowNode[] => {
+    (rowIds: TData['id'][]): IRowNode[] => {
       return gridApiOp(
         (gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode('' + rowId))),
         () => [] as RowNode[],
@@ -248,7 +250,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         ifNoCellFocused = false,
         retryCount = 15,
       }: {
-        rowIds: number[] | undefined;
+        rowIds: TData['id'][] | undefined;
         select: boolean;
         flash: boolean;
         ifNoCellFocused?: boolean;
@@ -302,7 +304,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
                     // It may be that the first cell is the selection cell, this doesn't exist as a colDef
                     // so instead, I just try and select it.  If it doesn't exist selection will stay on the
                     // previously focused cell
-                    gridApi.setFocusedCell(rowIndex, 'ag-Grid-SelectionColumn');
+                    gridApi.setFocusedCell(rowIndex, agGridSelectRowColId);
                   }
                 }, 100);
             }
@@ -333,17 +335,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   );
 
   const selectRowsById = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
     [_selectRowsWithOptionalFlash],
   );
 
   const selectRowsByIdWithFlash = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
   const flashRows = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
+    (rowIds?: TData['id'][]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
@@ -375,7 +377,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   );
 
   const focusByRowById = useCallback(
-    (rowId: number, ifNoCellFocused?: boolean) =>
+    (rowId: TData['id'], ifNoCellFocused?: boolean) =>
       _selectRowsWithOptionalFlash({ rowIds: [rowId], select: false, flash: false, ifNoCellFocused }),
     [_selectRowsWithOptionalFlash],
   );
@@ -398,12 +400,12 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   }, [gridApiOp]);
 
   const getSelectedRowIds = useCallback(
-    (): number[] => getSelectedRows().map((row) => (row as any).id as number),
+    (): TData['id'][] => getSelectedRows().map((row) => (row as any).id as number),
     [getSelectedRows],
   );
 
   const getFilteredSelectedRowIds = useCallback(
-    (): number[] => getFilteredSelectedRows().map((row) => (row as any).id as number),
+    (): TData['id'][] => getFilteredSelectedRows().map((row) => (row as any).id as number),
     [getFilteredSelectedRows],
   );
 
@@ -548,7 +550,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
   const startCellEditingInProgressRef = useRef(false);
   const startCellEditing = useCallback(
-    async ({ rowId, colId }: { rowId: number; colId: string }) => {
+    async ({ rowId, colId }: { rowId: TData['id']; colId: string }) => {
       if (!gridApi || startCellEditingInProgressRef.current) {
         return;
       }
@@ -902,6 +904,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         getSelectedRowIds,
         getFilteredSelectedRowIds,
         getFirstRowId,
+        getCellValue,
         editingCells,
         ensureRowVisible,
         ensureSelectedRowIsVisible,

package/src/contexts/GridPopoverContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, RefObject, useContext } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 
 export interface GridPopoverContextType<TData extends GridBaseRow> {
   anchorRef: RefObject<Element>;

package/src/contexts/GridPopoverContextProvider.tsx

@@ -2,7 +2,7 @@ import { ICellEditorParams } from 'ag-grid-community';
 import { sortBy } from 'lodash-es';
 import { PropsWithChildren, RefObject, useCallback, useContext, useMemo, useRef, useState } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { GridContext } from './GridContext';
 import { GridPopoverContext } from './GridPopoverContext';
 

package/src/lui/timeoutHook.tsx

@@ -38,22 +38,3 @@ export const useTimeoutHook = () => {
 
   return invoke;
 };
-
-interface IntervalHookProps {
-  timeoutMs: number;
-  callback: () => void;
-}
-
-export const useIntervalHook = ({ callback, timeoutMs }: IntervalHookProps) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      callbackRef.current && callbackRef.current();
-    }, timeoutMs);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeoutMs]);
-};

package/src/lui/tsUtils.ts

@@ -0,0 +1,8 @@
+export type KeysOfType<TObject, TValue> = {
+  [K in keyof TObject]: TObject[K] extends TValue ? K : never;
+}[keyof TObject];
+
+export const typedKeys = <T extends object>(obj: T): (keyof T)[] => Object.keys(obj) as (keyof T)[];
+
+export const typedEntries = <T extends object>(obj: T): { [K in keyof T]-?: [K, T[K]] }[keyof T][] =>
+  Object.entries(obj) as { [K in keyof T]-?: [K, T[K]] }[keyof T][];

package/src/react-menu3/components/MenuButton.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, LegacyRef, ReactNode, useMemo } from 'react';
 
-import { useBEM } from '../hooks';
+import { useBEM } from '../hooks/useBEM';
 import { BaseProps, MenuButtonModifiers } from '../types';
-import { menuButtonClass } from '../utils';
+import { menuButtonClass } from '../utils/constants';
 
 export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
   disabled?: boolean;

package/src/react-menu3/hooks/useItemState.ts

@@ -2,7 +2,7 @@ import { FocusEvent, MutableRefObject, useContext, useEffect, useRef } from 'rea
 
 import { ItemSettingsContext } from '../contexts/ItemSettingsContext';
 import { MenuListItemContext } from '../contexts/MenuListItemContext';
-import { HoverActionTypes } from '../utils';
+import { HoverActionTypes } from '../utils/constants';
 import { useItemEffect } from './useItemEffect';
 
 // This hook includes some common stateful logic in MenuItem and FocusableItem

package/src/stories/grid/GridCopy.stories.tsx

@@ -0,0 +1,175 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { LuiMessagingContextProvider } from '@linzjs/lui';
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridCellBearingValueFormatter,
+  GridContextProvider,
+  GridFilterQuick,
+  GridFilters,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../..';
+import { GridFilterColumnsToggle, GridFilterDownloadCsvButton } from '../../components';
+import { GridCellFiller } from '../../components/GridCellFiller';
+import { SeededRandomForTests } from '../../utils/__tests__/random';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
+    selectable: false,
+    rowSelection: 'multiple',
+  }, // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <LuiMessagingContextProvider version="v2">
+        <div style={{ maxWidth: 1024, height: '80vh', display: 'flex', flexDirection: 'column' }}>
+          <GridUpdatingContextProvider>
+            <GridContextProvider>
+              <Story />
+            </GridContextProvider>
+          </GridUpdatingContextProvider>
+        </div>
+      </LuiMessagingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position?: string;
+  age: number;
+  height: string;
+  bearing: string | number | null;
+}
+
+const GridCopyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+        cellRendererParams: {
+          error: ({ value }) => value === 'Manager' && 'Managers need management',
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
+        },
+      }),
+      {
+        headerName: 'Metrics',
+        marryChildren: true,
+        children: [
+          GridCell<ITestRow, ITestRow['age']>({
+            field: 'age',
+            headerName: 'Age',
+          }),
+          GridCell<ITestRow, ITestRow['height']>({
+            field: 'height',
+            headerName: 'Height',
+          }),
+        ],
+      },
+      GridCell({
+        field: 'bearing',
+        headerName: 'Bearing',
+        valueFormatter: GridCellBearingValueFormatter,
+      }),
+      GridCellFiller(),
+      GridPopoverMenu(
+        {},
+        {
+          editorParams: {
+            options: () => [
+              {
+                label: 'Test menu',
+                action: () => {},
+              },
+            ],
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>(() => {
+    const random = new SeededRandomForTests(1000);
+    let id = 1000;
+    const positions = [
+      undefined,
+      'Tester',
+      'Developer',
+      'Lawyer',
+      'Barrista """',
+      'Manager',
+      'CEO',
+      'CTO',
+      'Architect',
+    ];
+    const result: ITestRow[] = [];
+    for (let i = 0; i < 1000; i++) {
+      result.push({
+        id: id++,
+        position: random.fromArray(positions),
+        age: 30,
+        height: `${random.next(3) + 3}'${random.next(12)}"`,
+        bearing: Math.random() * 360,
+      });
+    }
+    return result;
+  });
+
+  return (
+    <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick />
+        <GridFilterColumnsToggle />
+        <GridFilterDownloadCsvButton fileName={'readOnlyGrid'} />
+      </GridFilters>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        enableRangeSelection={true}
+        selectable={true}
+        enableClickSelection={true}
+        enableSelectionWithoutKeys={true}
+        autoSelectFirstRow={true}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
+        columnDefs={columnDefs}
+        rowData={rowData}
+      />
+    </GridWrapper>
+  );
+};
+
+export const GridCopy = GridCopyTemplate.bind({});
+GridCopy.play = waitForGridReady;