@linzjs/step-ag-grid 22.0.0 → 22.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^32.1.0",
-    "ag-grid-react": "^32.1.0",
+    "ag-grid-community": "^32.2.0",
+    "ag-grid-react": "^32.2.0",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -40,8 +40,7 @@
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
     "react-transition-state": "^2.1.2",
-    "usehooks-ts": "^3.1.0",
-    "uuid": "^10.0.0"
+    "usehooks-ts": "^3.1.0"
   },
   "scripts": {
     "build": "run-s clean stylelint lint css bundle",
@@ -78,51 +77,51 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.8.0",
-    "@linzjs/lui": "^21.44.4",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@linzjs/lui": "^21.46.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.2.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-vite": "^8.3.2",
+    "@storybook/test": "^8.3.2",
     "@storybook/test-runner": "^0.19.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/debounce-promise": "^3.1.9",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.19.39",
-    "@types/react": "^18.3.5",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "ag-grid-community": "^32.1.0",
-    "ag-grid-react": "^32.1.0",
+    "ag-grid-community": "^32.2.0",
+    "ag-grid-react": "^32.2.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.7.1",
+    "chromatic": "^11.10.2",
     "css-loader": "^7.1.2",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.8.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.3.0",
@@ -132,22 +131,22 @@
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.43",
+    "postcss": "^8.4.47",
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.3.3",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.21.2",
+    "rollup": "^4.22.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.77.8",
+    "sass": "^1.79.3",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.2",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
@@ -155,10 +154,10 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
     "vite-plugin-html": "^3.2.2",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "babel": {
     "presets": [

package/src/components/Grid.tsx

@@ -1,24 +1,24 @@
 import {
+  AgGridEvent,
+  CellClassParams,
   CellClickedEvent,
   CellDoubleClickedEvent,
   CellEditingStartedEvent,
+  CellKeyDownEvent,
   ColDef,
   ColGroupDef,
   ColumnResizedEvent,
+  EditableCallback,
+  EditableCallbackParams,
+  GridOptions,
+  GridReadyEvent,
   IClientSideRowModel,
   ModelUpdatedEvent,
+  RowDragEndEvent,
   RowDragLeaveEvent,
+  RowDragMoveEvent,
   RowHighlightPosition,
   RowNode,
-} from "ag-grid-community";
-import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community";
-import { GridOptions } from "ag-grid-community";
-import {
-  AgGridEvent,
-  CellKeyDownEvent,
-  GridReadyEvent,
-  RowDragEndEvent,
-  RowDragMoveEvent,
   SelectionChangedEvent,
 } from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
@@ -34,6 +34,7 @@ import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { GridHeaderSelect } from "./gridHeader";
 import { GridContextMenuComponent, useGridContextMenu } from "./gridHook";
+import { clickInputWhenContainingCellClicked } from "./clickInputWhenContainingCellClicked";
 
 export interface GridBaseRow {
   id: string | number;
@@ -266,16 +267,6 @@ export const Grid = ({
     getFirstRowId,
   ]);
 
-  /**
-   * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
-   * This passes the event to the checkbox when you click anywhere in the cell.
-   */
-  const clickSelectorCheckboxWhenContainingCellClicked = useCallback(({ event }: CellClickedEvent) => {
-    if (!event) return;
-    const input = (event.target as Element).querySelector("input");
-    input?.dispatchEvent(event);
-  }, []);
-
   /**
    * Ensure external selected items list is in sync with panel.
    */
@@ -388,7 +379,7 @@ export const Grid = ({
               }
               return false;
             },
-            onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
+            onCellClicked: clickInputWhenContainingCellClicked,
           },
           ...adjustColDefs,
         ]
@@ -402,7 +393,6 @@ export const Grid = ({
     params.defaultColDef?.editable,
     selectColumnPinned,
     rowSelection,
-    clickSelectorCheckboxWhenContainingCellClicked,
   ]);
 
   /**
@@ -528,11 +518,16 @@ export const Grid = ({
    */
   const onCellKeyPress = useCallback(
     (e: CellKeyDownEvent) => {
-      if ((e.event as KeyboardEvent).key === "Enter") {
+      const kbe = e.event as KeyboardEvent;
+      if (kbe.key === "Enter") {
         if (!invokeEditAction(e)) startCellEditing(e);
       }
+      if (kbe.key === "Tab") {
+        // eslint-disable-next-line
+        prePopupOps();
+      }
     },
-    [startCellEditing],
+    [prePopupOps, startCellEditing],
   );
 
   /**

package/src/components/GridCell.tsx

@@ -98,7 +98,9 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
   editable?: boolean | SAEditableCallback<TData, ValueType>;
   valueGetter?: string | SAValueGetterFunc<TData, ValueType>;
   valueFormatter?: string | SAValueFormatterFunc<TData, ValueType>;
-  cellRenderer?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+  cellRenderer?:
+    | ((props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
+    | string;
   cellRendererParams?: {
     singleClickEdit?: boolean;
     rightHoverElement?: ReactElement;
@@ -200,7 +202,7 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
       else return JSON.stringify(params.value);
     },
     ...props,
-    cellRenderer: GridCellRenderer,
+    cellRenderer: typeof props.cellRenderer === "string" ? props.cellRenderer : GridCellRenderer,
     cellRendererParams: {
       originalCellRenderer: props.cellRenderer,
       ...props.cellRendererParams,

package/src/components/clickInputWhenContainingCellClicked.tsx

@@ -0,0 +1,40 @@
+import { CellClickedEvent } from "ag-grid-community";
+
+/**
+ * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
+ * This passes the event to the checkbox when you click anywhere in the cell.
+ */
+export const clickInputWhenContainingCellClicked = ({ data, event, colDef }: CellClickedEvent) => {
+  if (!data || !event) return;
+
+  const element = event.target as Element;
+  // Already handled
+  if (["BUTTON", "INPUT"].includes(element?.tagName) && element.closest(".ag-cell-inline-editing")) return;
+
+  const row = element.closest("[row-id]");
+  if (!row) return;
+
+  const colId = colDef.colId;
+  if (!colId) return;
+
+  const clickInput = (cnt: number) => {
+    const cell = row.querySelector(`[col-id='${colId}']`);
+    if (!cell) return;
+
+    const input = cell.querySelector("input, button");
+    if (!input) {
+      return;
+    }
+    // When clicking on a cell that is not editing, the cell changes to editing and the input/button ref becomes invalid
+    // So wait until the cell is in edit mode before sending the click
+    if (!input.ownerDocument.contains(input)) {
+      if (cnt !== 0) {
+        setTimeout(() => clickInput(cnt - 1));
+      }
+      return;
+    }
+    input?.dispatchEvent(event);
+  };
+
+  setTimeout(() => clickInput(20), 10);
+};

package/src/components/gridForm/GridFormDropDown.tsx

@@ -45,6 +45,7 @@ export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEd
     | "GridPopoverEditDropDown-containerMedium"
     | "GridPopoverEditDropDown-containerLarge"
     | "GridPopoverEditDropDown-containerUnlimited"
+    | "GridPopoverEditDropDown-containerAutoWidth"
     | string
     | undefined;
   // local means the use the local filter, otherwise it's expected options will be passed a function that takes a filter

package/src/components/gridForm/GridFormMultiSelectGrid.tsx

@@ -140,7 +140,7 @@ export const GridFormMultiSelectGrid = <TData extends GridBaseRow>(
                   }}
                 >
                   <LuiCheckboxInput
-                    isChecked={!!o.checked ?? false}
+                    isChecked={!!o.checked}
                     isIndeterminate={o.checked === "partial"}
                     value={`${o.value}`}
                     label={

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -0,0 +1,79 @@
+import { CellFocusedEvent } from "ag-grid-community";
+import { CellEditorCommon, ColDefT, GridCell } from "../GridCell";
+import { useEffect, useRef } from "react";
+import { fnOrVar } from "../../utils/util";
+import clsx from "clsx";
+import { GenericCellColDef } from "../gridRender";
+import { GridBaseRow } from "../Grid";
+import { CustomCellEditorProps } from "ag-grid-react";
+import { clickInputWhenContainingCellClicked } from "../clickInputWhenContainingCellClicked";
+
+const BooleanCellRenderer = (props: CustomCellEditorProps) => {
+  const { onValueChange, value, api, node, column, colDef, data } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const checkFocus = (event: CellFocusedEvent) => {
+      if (event.rowIndex === node.rowIndex && event.column === column) {
+        inputRef.current?.focus();
+      }
+    };
+    api.addEventListener("cellFocused", checkFocus);
+    return () => {
+      api.removeEventListener("cellFocused", checkFocus);
+    };
+  }, [api, column, node.rowIndex]);
+
+  return (
+    <div className={clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", { "ag-checked": props.value })}>
+      <input
+        type="checkbox"
+        className="ag-input-field-input ag-checkbox-input"
+        disabled={!fnOrVar(colDef?.editable, props)}
+        ref={inputRef}
+        checked={value}
+        onChange={() => {}}
+        onClick={(e) => {
+          e.stopPropagation();
+          // cell has to be in edit mode
+          // if in non-edit mode clickInputWhenContainingCellClicked will click to put it in edit mode
+          if (!onValueChange) return;
+          const params = props?.colDef?.cellEditorParams as GridEditBooleanEditorProps<any> | undefined;
+          if (!params) return;
+          const selectedRows = [data];
+          const checked = !value;
+          onValueChange(checked);
+          params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked }).then();
+        }}
+      />
+    </div>
+  );
+};
+
+export interface GridEditBooleanEditorProps<TData> extends CellEditorCommon {
+  onClick: (props: {
+    selectedRows: TData[];
+    selectedRowIds: (string | number)[];
+    checked: boolean;
+  }) => Promise<boolean>;
+}
+
+export const GridEditBoolean = <TData extends GridBaseRow>(
+  colDef: GenericCellColDef<TData, boolean>,
+  editorProps: GridEditBooleanEditorProps<TData>,
+): ColDefT<TData> => {
+  return GridCell({
+    minWidth: 64,
+    maxWidth: 64,
+    cellRenderer: BooleanCellRenderer as any,
+    cellEditor: BooleanCellRenderer,
+    cellEditorParams: editorProps,
+    onCellClicked: clickInputWhenContainingCellClicked,
+    singleClickEdit: true,
+    resizable: false,
+    editable: true,
+    cellClass: "GridCellAlignCenter",
+    headerClass: "GridHeaderAlignCenter",
+    ...colDef,
+  });
+};

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -13,6 +13,13 @@ export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any>
     ...props,
     editorParams: {
       ...(props.editorParams as GridFormDropDownProps<TData>),
-      className: clsx("GridPopoverEditDropDown-containerLarge", props.editorParams?.className),
+      className: clsx(
+        {
+          "GridPopoverEditDropDown-containerLarge": !props.editorParams?.className?.includes(
+            "GridPopoverEditDropDown-container",
+          ),
+        },
+        props.editorParams?.className,
+      ),
     },
   });

package/src/components/gridPopoverEdit/index.ts

@@ -1,3 +1,4 @@
+export * from "./GridEditBoolean";
 export * from "./GridPopoutEditMultiSelect";
 export * from "./GridPopoutEditMultiSelectGrid";
 export * from "./GridPopoverMenu";

package/src/components/index.ts

@@ -16,3 +16,4 @@ export * from "./GridPopoverHook";
 export * from "./gridRender";
 export * from "./GridWrapper";
 export * from "./PostSortRowsHook";
+export * from "./clickInputWhenContainingCellClicked";

package/src/contexts/GridContextProvider.tsx

@@ -533,6 +533,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           // implying it was start/end of grid
           break;
         }
+
         if (focusedCellIsEditable()) {
           const focusedCell = gridApi?.getFocusedCell();
           if (focusedCell) {

package/src/lui/TextAreaInput.tsx

@@ -1,15 +1,9 @@
 import clsx from "clsx";
 import { omit } from "lodash-es";
-import { InputHTMLAttributes, ReactElement, useState } from "react";
-import { v4 as uuidVersion4 } from "uuid";
+import { InputHTMLAttributes, ReactElement, useId } from "react";
 
 import { FormError } from "./FormError";
 
-export const useGenerateOrDefaultId = (idFromProps?: string) => {
-  const [id] = useState(idFromProps ? idFromProps : uuidVersion4());
-  return id;
-};
-
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
   // overrides value in base class to be string type only
   value: string;
@@ -23,7 +17,8 @@ export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaE
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
-  const id = useGenerateOrDefaultId(props?.id);
+  const reactId = useId();
+  const id = props?.id ?? reactId;
 
   return (
     <div

package/src/stories/grid/FormTest.tsx

@@ -13,6 +13,7 @@ export interface IFormTestRow {
   numba: string;
   plan: string;
   distance: number | null;
+  bold: boolean;
 }
 
 export const FormTest = (props: CellEditorCommon): ReactElement => {

package/src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -0,0 +1,74 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { Meta, StoryFn } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridEditBoolean, GridUpdatingContextProvider } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
+import { IFormTestRow } from "./FormTest";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", bold: true },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", bold: false },
+  ] as IFormTestRow[]);
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+      }),
+      GridEditBoolean(
+        {
+          field: "bold",
+        },
+        {
+          onClick: async ({ selectedRowIds, checked }) => {
+            setRowData((rowData) => {
+              // eslint-disable-next-line no-console
+              console.log("onchange", selectedRowIds, checked);
+              return rowData.map((row) => (selectedRowIds.includes(row.id) ? { ...row, bold: checked } : row));
+            });
+            return true;
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  return (
+    <Grid
+      columnDefs={columnDefs}
+      rowData={rowData}
+      selectable={false}
+      singleClickEdit={true}
+      rowSelection="single"
+      domLayout={"autoHeight"}
+    />
+  );
+};
+
+export const _EditBoolean = GridPopoutEditBooleanTemplate.bind({});
+_EditBoolean.play = waitForGridReady;

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -57,6 +57,7 @@ const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps
             anchorRef,
             updateValue,
             data: { value: "" },
+            colId: "",
             value: "",
             field: "value",
             selectedRows: [],

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -41,6 +41,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         <GridPopoverContext.Provider
           value={{
             anchorRef,
+            colId: "",
             value: null,
             updateValue,
             formatValue: (value) => value,

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -41,6 +41,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         <GridPopoverContext.Provider
           value={{
             anchorRef,
+            colId: "",
             value: null,
             updateValue,
             formatValue: (value) => value,

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -54,6 +54,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
           value={{
             anchorRef: anchorRef,
             updateValue,
+            colId: "",
             value: "",
             selectedRows: [],
             formatValue: (value) => value,

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -68,6 +68,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
             anchorRef,
             updateValue,
             data: { value: "" },
+            colId: "",
             value: "",
             field: "value",
             selectedRows: [],

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -59,6 +59,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             value: null,
             updateValue,
             data: { value: "" },
+            colId: "",
             field: "value",
             selectedRows: [],
             saving: false,

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -39,6 +39,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
             value: null,
             updateValue,
             data: { value: null },
+            colId: "",
             field: "value",
             selectedRows: [],
             saving: false,

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -39,6 +39,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
             value: null,
             updateValue,
             data: { value: null },
+            colId: "",
             field: "value",
             selectedRows: [],
             saving: false,

package/src/styles/Grid.scss

@@ -2,6 +2,18 @@
 @use "./react-menu-customisations";
 @use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
+
+.LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+  display: flex;
+  justify-content: center;
+}
+
+
 .Grid-container {
   flex: 1;
   width: 100%;
@@ -106,4 +118,25 @@
   background-color: colors.$hint;
 }
 
+.GridHeaderAlignCenter .ag-header-cell-text {
+  margin-left: auto;
+  margin-right: auto;
+}
 
+.GridCellAlignCenter .GridCell-container {
+  display: flex;
+}
+
+.GridCellAlignCenter .ag-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.GridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+  display: flex;
+  justify-content: center;
+}
+
+div.ag-ltr div.ag-header-cell-resize {
+  right: -4px;
+}