@linzjs/step-ag-grid 20.0.0 → 21.0.1

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,49 +1,19 @@
 import { ICellRendererParams } from "ag-grid-community";
-import {
-  EditableCallbackParams,
-  SuppressKeyboardEventParams,
-  ValueFormatterParams,
-  ValueGetterParams,
-} from "ag-grid-community/dist/lib/entities/colDef";
+import { SuppressKeyboardEventParams } from "ag-grid-community";
 import { ReactElement } from "react";
 
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
 
-export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
-  data: RowType;
-}
-
-export interface RowEditableCallbackParams<RowType extends GridBaseRow> extends EditableCallbackParams {
-  data: RowType;
-}
-
-export interface RowValueFormatterParams<RowType extends GridBaseRow> extends ValueFormatterParams {
-  data: RowType;
-}
-export interface RowValueGetterParams<RowType extends GridBaseRow> extends ValueGetterParams {
-  data: RowType;
-}
-
-export interface RowValueGetterParams<RowType extends GridBaseRow> extends ValueGetterParams {
-  data: RowType;
-}
-
-export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<RowType> {
-  cellRenderer?: (params: RowICellRendererParams<RowType>) => any;
-  cellRendererParams?: GenericCellRendererParams<RowType>;
-  valueGetter?: string | ((params: RowValueGetterParams<RowType>) => any);
-  valueFormatter?: string | ((params: RowValueFormatterParams<RowType>) => string);
-  filterValueGetter?: string | ((params: RowValueGetterParams<RowType>) => string);
-  editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
+export interface GenericCellColDef<TData extends GridBaseRow, TValue = any> extends ColDefT<TData, TValue> {
   exportable?: boolean;
 }
 
-export interface GenericCellRendererParams<RowType extends GridBaseRow> {
+export interface GenericCellRendererParams<TData extends GridBaseRow> {
   singleClickEdit?: boolean;
   rightHoverElement?: ReactElement | undefined;
-  editAction?: (selectedRows: RowType[]) => void;
+  editAction?: (selectedRows: TData[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
-  warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
-  info?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
+  warning?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
+  info?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
 }

package/src/contexts/GridContext.tsx

@@ -1,10 +1,10 @@
-import { ColDef, ColumnApi, GridApi, IRowNode } from "ag-grid-community";
-import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+import { ColDef, GridApi, IRowNode } from "ag-grid-community";
+import { CsvExportParams } from "ag-grid-community";
 import { createContext, useContext } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
 
-export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: IRowNode) => boolean;
+export type GridFilterExternal<TData extends GridBaseRow> = (data: TData, rowNode: IRowNode) => boolean;
 
 export interface AutoSizeColumnsProps {
   skipHeader?: boolean;
@@ -15,15 +15,15 @@ export interface AutoSizeColumnsProps {
 
 export type AutoSizeColumnsResult = { width: number } | null;
 
-export interface GridContextType<RowType extends GridBaseRow> {
+export interface GridContextType<TData extends GridBaseRow> {
   gridReady: boolean;
   gridRenderState: () => null | "empty" | "rows-visible";
   getColDef: (colId?: string) => ColDef | undefined;
   getColumns: (
     filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
-  ) => ColDefT<RowType>[];
+  ) => ColDefT<TData, any>[];
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-  setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
+  setApis: (gridApi: GridApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   postPopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
@@ -57,8 +57,8 @@ export interface GridContextType<RowType extends GridBaseRow> {
   externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
-  addExternalFilter: (filter: GridFilterExternal<RowType>) => void;
-  removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
+  addExternalFilter: (filter: GridFilterExternal<TData>) => void;
+  removeExternalFilter: (filter: GridFilterExternal<TData>) => void;
   isExternalFilterPresent: () => boolean;
   doesExternalFilterPass: (node: IRowNode) => boolean;
   invisibleColumnIds: string[] | undefined;
@@ -207,4 +207,4 @@ export const GridContext = createContext<GridContextType<any>>({
   },
 });
 
-export const useGridContext = <RowType extends GridBaseRow>() => useContext<GridContextType<RowType>>(GridContext);
+export const useGridContext = <TData extends GridBaseRow>() => useContext<GridContextType<TData>>(GridContext);

package/src/contexts/GridContextProvider.test.tsx

@@ -1,4 +1,4 @@
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { ValueFormatterParams } from "ag-grid-community";
 
 import { downloadCsvUseValueFormattersProcessCellCallback as Dpcc } from "./GridContextProvider";
 

package/src/contexts/GridContextProvider.tsx

@@ -1,6 +1,5 @@
-import { CellPosition, ColDef, ColumnApi, GridApi, IRowNode, RowNode } from "ag-grid-community";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+import { CellPosition, ColDef, GridApi, IRowNode, RowNode } from "ag-grid-community";
+import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community";
 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";
@@ -8,7 +7,7 @@ import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, us
 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 { fnOrVar, isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 
@@ -17,10 +16,9 @@ import { GridUpdatingContext } from "./GridUpdatingContext";
  * Make sure you wrap AgGrid in this.
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
-export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
+export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithChildren): ReactElement => {
   const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
-  const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, setQuickFilter] = useState("");
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
@@ -28,7 +26,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
-  const externalFilters = useRef<GridFilterExternal<RowType>[]>([]);
+  const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
   /**
    * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
@@ -40,7 +38,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    * Set quick filter directly on grid, based on previously save quickFilter state.
    */
   useEffect(() => {
-    gridApi?.setQuickFilter(quickFilter);
+    gridApi?.setGridOption("quickFilterText", quickFilter);
   }, [gridApi, quickFilter]);
 
   /**
@@ -94,11 +92,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    * Set the grid api when the grid is ready.
    */
   const setApis = useCallback(
-    (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => {
+    (gridApi: GridApi | undefined, dataTestId?: string) => {
       testId.current = dataTestId;
       setGridApi(gridApi);
-      setColumnApi(columnApi);
-      gridApi?.setQuickFilter(quickFilter);
+      gridApi?.setGridOption("quickFilterText", quickFilter);
       setGridReady(!!gridApi);
     },
     [quickFilter],
@@ -108,9 +105,8 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    * Used to check if it's OK to autosize.
    */
   const gridRenderState = useCallback((): null | "empty" | "rows-visible" => {
-    // Even though getModel can't be null, sometimes it is
-    if (!gridApi || !gridApi.getModel()) return null;
-    if (!gridApi.getModel().isRowsToRender()) return "empty";
+    if (!gridApi) return null;
+    if (!gridApi.getDisplayedRowCount()) return "empty";
     if (!isEmpty(gridApi.getRenderedNodes())) return "rows-visible";
     // If there are rows to render, but there are no rendered nodes then we should wait
     return null;
@@ -204,9 +200,9 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
   const getColumns = useCallback(
     (
       filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
-    ): ColDefT<RowType>[] =>
-      filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
-    [columnApi],
+    ): ColDefT<TData>[] =>
+      filter(gridApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<TData>[],
+    [gridApi],
   );
 
   const getColumnIds = useCallback(
@@ -407,9 +403,9 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    */
   const autoSizeColumns = useCallback(
     ({ skipHeader, colIds, userSizedColIds, includeFlex }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
-      if (!columnApi) return null;
+      if (!gridApi) return null;
       const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-      const colsToResize = columnApi.getColumnState().filter((colState) => {
+      const colsToResize = gridApi.getColumnState().filter((colState) => {
         const colId = colState.colId;
         return (
           (isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
@@ -418,19 +414,19 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
         );
       });
       if (!isEmpty(colsToResize)) {
-        columnApi.autoSizeColumns(
+        gridApi.autoSizeColumns(
           colsToResize.map((colState) => colState.colId),
           skipHeader,
         );
       }
       return {
         width: sumBy(
-          columnApi.getColumnState().filter((col) => !col.hide),
+          gridApi.getColumnState().filter((col) => !col.hide),
           "width",
         ),
       };
     },
-    [columnApi],
+    [gridApi],
   );
 
   /**
@@ -489,7 +485,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    */
   const cancelEdit = useCallback((): void => {
     stopEditing();
-    cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+    cellEditingCompleteCallbackRef.current?.();
   }, [stopEditing]);
 
   const cellEditingCompleteCallbackRef = useRef<() => void>();
@@ -583,7 +579,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
           gridApi.refreshClientSideRowModel();
         } else {
           // Don't set saving if ok as the form has already closed
-          setSaving && setSaving(false);
+          setSaving?.(false);
         }
 
         // Only focus next cell if user hasn't already manually changed focus
@@ -639,12 +635,12 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     [gridApi],
   );
 
-  const addExternalFilter = (filter: GridFilterExternal<RowType>) => {
+  const addExternalFilter = (filter: GridFilterExternal<TData>) => {
     externalFilters.current.push(filter);
     onFilterChanged().then();
   };
 
-  const removeExternalFilter = (filter: GridFilterExternal<RowType>) => {
+  const removeExternalFilter = (filter: GridFilterExternal<TData>) => {
     remove(externalFilters.current, (v) => v === filter);
     onFilterChanged().then();
   };
@@ -667,7 +663,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
    * Apply column visibility
    */
   useEffect(() => {
-    if (!columnApi || !invisibleColumnIds) return;
+    if (!gridApi || !invisibleColumnIds) return;
 
     // show all columns that aren't invisible
     const newVisibleColumns = getColumns(
@@ -679,26 +675,26 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
       const fillerColumn = getColumns(isGridCellFiller)[0];
       fillerColumn && newVisibleColumns.push(fillerColumn);
     }
-    columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+    gridApi.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]);
+    gridApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
+  }, [invisibleColumnIds, getColumns, gridApi]);
 
   /**
    * Download visible columns as a CSV
    */
   const downloadCsv = useCallback(
     (csvExportParams?: CsvExportParams) => {
-      if (!gridApi || !columnApi) return;
+      if (!gridApi) return;
 
-      const fileName = csvExportParams?.fileName && sanitiseFileName(csvExportParams.fileName);
+      const fileName = csvExportParams?.fileName && sanitiseFileName(fnOrVar(csvExportParams.fileName));
 
-      const columnKeys = columnApi
-        ?.getColumnState()
+      const columnKeys = gridApi
+        .getColumnState()
         .filter((cs) => {
           const colDef = gridApi.getColumnDef(cs.colId);
           return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
@@ -711,7 +707,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
         fileName,
       });
     },
-    [columnApi, gridApi],
+    [gridApi],
   );
 
   return (
@@ -807,7 +803,7 @@ export const downloadCsvUseValueFormattersProcessCellCallback = (params: Process
     return encodeToString(params.value);
   }
 
-  const result = valueFormatter({ ...params, data: params.node?.data, colDef } as ValueFormatterParams);
+  const result = valueFormatter({ ...params, data: params.node?.data, colDef, node: null });
   // type may not be string due to casting, leave the type check in
   if (params.value != null && typeof result !== "string") {
     console.error(`downloadCsv: valueFormatter is returning non string values, colDef:", colId: ${colDef.colId}`);

package/src/contexts/GridPopoverContext.tsx

@@ -2,14 +2,14 @@ import { RefObject, createContext, useContext } from "react";
 
 import { GridBaseRow } from "../components/Grid";
 
-export interface GridPopoverContextType<RowType extends GridBaseRow> {
+export interface GridPopoverContextType<TData extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
-  field: keyof RowType;
+  field: keyof TData;
   value: any;
-  data: RowType;
-  selectedRows: RowType[];
+  data: TData;
+  selectedRows: TData[];
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
   formatValue: (value: any) => any;
 }
@@ -26,5 +26,5 @@ export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   formatValue: () => "! No gridPopoverContextProvider !",
 });
 
-export const useGridPopoverContext = <RowType extends GridBaseRow>() =>
-  useContext<GridPopoverContextType<RowType>>(GridPopoverContext);
+export const useGridPopoverContext = <TData extends GridBaseRow>() =>
+  useContext<GridPopoverContextType<TData>>(GridPopoverContext);

package/src/stories/grid/GridDragRow.stories.tsx

@@ -66,12 +66,12 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         headerName: "Id",
         lockVisible: true,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({
@@ -91,7 +91,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     [],
   );
 
-  const [rowData] = useState([
+  const [rowData, setRowData] = useState([
     { 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" },
@@ -109,10 +109,16 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={async (row, _, targetIndex) => {
-          alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
+        onRowDragEnd={async (movedRow, targetRow, _targetIndex) => {
+          setRowData(
+            rowData.map((r) => {
+              if (r.id === movedRow.id) return targetRow;
+              if (r.id === targetRow.id) return movedRow;
+              return r;
+            }),
+          );
         }}
-        rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}
+        rowDragText={({ rowNode }) => `${rowNode?.data.id} - ${rowNode?.data.position}`}
       />
     </GridWrapper>
   );

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -3,7 +3,6 @@ import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
 import { Meta, StoryFn } from "@storybook/react";
-import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
 import { useMemo, useState } from "react";
@@ -155,9 +154,9 @@ const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
   ]);
 
-  const defaultColDef: ColDef = useMemo(
+  const defaultColDef: ColDefT<ITestRow> = useMemo(
     () => ({
-      editable: (params) => (params.data as ITestRow).position !== "Manager",
+      editable: ({ data }) => data?.position !== "Manager",
     }),
     [],
   );

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -85,8 +85,8 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
       GridCell({
         field: "distance",
         headerName: "Number input",
-        valueFormatter: (params) => {
-          const v = params.data.distance;
+        valueFormatter: ({ data }) => {
+          const v = data?.distance;
           return v != null ? `${v}m` : "–";
         },
       }),

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -91,7 +91,7 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
           field: "distance",
           headerName: "Number input",
           valueFormatter: (params) => {
-            const v = params.data.distance;
+            const v = params.data?.distance;
             return v != null ? `${v}${params.colDef.cellEditorParams.units}` : "–";
           },
         },

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -65,8 +65,8 @@ const GridPopoverEditBearingTemplate: StoryFn<typeof Grid> = (props: GridProps)
           field: "bearingCorrection",
           headerName: "Bearing correction",
           cellRendererParams: {
-            warning: ({ data }) => data.id == 1002 && "Testers are testing",
-            info: ({ data }) => data.id == 1001 && "Developers are developing",
+            warning: ({ data }) => data?.id == 1002 && "Testers are testing",
+            info: ({ data }) => data?.id == 1001 && "Developers are developing",
           },
         },
         {

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -99,7 +99,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         field: "id",
         headerName: "Id",
       }),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow["position2"]>(
         {
           field: "position2",
           headerName: "Multi-edit",
@@ -173,7 +173,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: "position4",
           headerName: "Filtered (object)",
-          valueGetter: (params) => params.data.position4?.desc,
+          valueGetter: ({ data }) => data?.position4?.desc,
         },
         {
           multiEdit: true,
@@ -217,7 +217,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: "sub",
           headerName: "Subcomponent",
-          valueGetter: (params) => params.data.sub,
+          valueGetter: ({ data }) => data?.sub,
         },
         {
           multiEdit: true,
@@ -290,6 +290,15 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
       code: "O2",
       sub: "one",
     },
+    {
+      id: 1002,
+      position: "Scrum Master",
+      position2: "2",
+      position3: "Architect",
+      position4: { code: "O2", desc: "Object Two" },
+      code: "O2",
+      sub: "one",
+    },
   ] as ITestRow[]);
 
   return (

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -68,7 +68,7 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
         field: "id",
         headerName: "Id",
       }),
-      GridPopoutEditMultiSelect(
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Position",
@@ -112,7 +112,7 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
           },
         },
       ),
-      GridPopoutEditMultiSelect(
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Parcel picker",

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -49,7 +49,7 @@ const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid> = (props: GridProps)
         field: "id",
         headerName: "Id",
       }),
-      GridPopoutEditMultiSelectGrid(
+      GridPopoutEditMultiSelectGrid<ITestRow, ITestRow["position"]>(
         {
           field: "position",
           headerName: "Position",
@@ -62,7 +62,7 @@ const GridEditMultiSelectGridTemplate: StoryFn<typeof Grid> = (props: GridProps)
           multiEdit: true,
           editorParams: {
             className: "GridMultiSelect-containerUnlimited",
-            options: (selectedRows) => {
+            options: (selectedRows: ITestRow[]) => {
               const counts: Record<number, number> = mergeWith(
                 {},
                 ...selectedRows.map((row) => countBy(row.position)),

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

@@ -80,23 +80,23 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         headerName: "Id",
         lockVisible: true,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       {
         headerName: "Metrics",
         marryChildren: true,
         children: [
-          GridCell({
+          GridCell<ITestRow, ITestRow["age"]>({
             field: "age",
             headerName: "Age",
           }),
-          GridCell({
+          GridCell<ITestRow, ITestRow["height"]>({
             field: "height",
             headerName: "Height",
           }),
@@ -134,7 +134,7 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           rightHoverElement: (
             <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
           ),
-          editAction: (selectedRows) => {
+          editAction: (selectedRows: ITestRow[]) => {
             alert(`Custom edit ${selectedRows.map((r) => r.id)} rowId(s) selected`);
           },
           shortcutKeys: {

package/src/stories/grid/GridViewList.stories.tsx

@@ -54,24 +54,22 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
-      GridCell({
+      GridCell<ITestRow, ITestRow["id"]>({
         field: "id",
         headerName: "Id",
         lockVisible: true,
         resizable: false,
         lockPosition: "left",
-        cellRenderer: (props) => {
-          return <a href={"#"}>{props.value}</a>;
-        },
+        cellRenderer: ({ value }) => <a href={"#"}>{value}</a>,
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         resizable: false,
         lockPosition: "left",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -82,12 +82,12 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         field: "id",
         headerName: "Id",
       }),
-      GridCell({
+      GridCell<ITestRow, ITestRow["position"]>({
         field: "position",
         headerName: "Position",
         cellRendererParams: {
-          warning: (props) => props.value === "Tester" && "Testers are testing",
-          info: (props) => props.value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === "Tester" && "Testers are testing",
+          info: ({ value }) => value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({

package/src/styles/Grid.scss

@@ -15,13 +15,10 @@
   flex: 1;
 }
 
-
 .Grid-sortIsStale {
-  span.ag-icon.ag-icon-desc::after {
-    content: "*";
-  }
-
-  span.ag-icon.ag-icon-asc::after {
+  span.ag-sort-indicator-icon::before {
+    margin-left: -6px;
+    position: absolute;
     content: "*";
   }
 }