@linzjs/step-ag-grid 1.1.1

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -0,0 +1,180 @@
+import "@szhsin/react-menu/dist/index.css";
+
+import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GridBaseRow } from "../Grid";
+import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
+import { delay } from "lodash-es";
+import { LuiCheckboxInput } from "@linzjs/lui";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { useGridPopoutHook } from "../GridPopoutHook";
+
+interface FinalSelectOption<ValueType> {
+  value: ValueType;
+  label?: JSX.Element | string;
+  subComponent?: (props: any, ref: any) => any;
+}
+
+export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
+export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
+
+export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+
+export interface MultiSelectResult<RowType> {
+  selectedRows: RowType[];
+  values: Record<string, any>;
+}
+
+export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType>
+  extends GenericCellEditorParams<RowType> {
+  filtered?: boolean;
+  filterPlaceholder?: string;
+  onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
+  options:
+    | SelectOption<ValueType>[]
+    | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+}
+
+export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormMultiSelectProps<RowType, ValueType>;
+
+  const [filter, setFilter] = useState("");
+  const [filteredValues, setFilteredValues] = useState<any[]>([]);
+  const optionsInitialising = useRef(false);
+  const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
+  const subSelectedValues = useRef<Record<string, any>>({});
+  const [selectedValues, setSelectedValues] = useState<any[]>([]);
+
+  const save = useCallback(
+    async (selectedRows: RowType[]): Promise<boolean> => {
+      const values: Record<string, any> = {};
+      selectedValues.forEach((value) => {
+        values[value] = subSelectedValues.current[value] ?? true;
+      });
+      if (formProps.onSave) {
+        return await formProps.onSave({ selectedRows, values: selectedValues });
+      }
+      return true;
+    },
+    [formProps, selectedValues],
+  );
+  const { popoutWrapper } = useGridPopoutHook(props, save);
+
+  // Load up options list if it's async function
+  useEffect(() => {
+    if (options || optionsInitialising.current) return;
+    optionsInitialising.current = true;
+    let optionsConf = formProps.options ?? [];
+
+    (async () => {
+      if (typeof optionsConf == "function") {
+        optionsConf = await optionsConf(props.selectedRows);
+      }
+
+      const optionsList = optionsConf?.map((item) => {
+        if (item == null || typeof item == "string" || typeof item == "number") {
+          item = { value: item as ValueType, label: item } as FinalSelectOption<ValueType>;
+        }
+        return item;
+      }) as any as FinalSelectOption<ValueType>[];
+
+      if (formProps.filtered) {
+        // This is needed otherwise when filter input is rendered and sets autofocus
+        // the mouse up of the double click edit triggers the cell to cancel editing
+        delay(() => setOptions(optionsList), 100);
+      } else {
+        setOptions(optionsList);
+      }
+      optionsInitialising.current = false;
+    })();
+  }, [formProps.filtered, formProps.options, options, props.selectedRows]);
+
+  useEffect(() => {
+    if (!formProps.filtered || options == null) return;
+    setFilteredValues(
+      options
+        .map((option) => {
+          if (option.label != null && typeof option.label !== "string") {
+            console.error("Cannot filter non-string labels", option);
+            return undefined;
+          }
+          const str = (option.label as string) || "";
+          return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+        })
+        .filter((r) => r !== undefined),
+    );
+  }, [formProps.filtered, filter, options]);
+
+  return popoutWrapper(
+    <ComponentLoadingWrapper loading={!options}>
+      <div className={"Grid-popoverContainerList"}>
+        {options && formProps.filtered && (
+          <>
+            <FocusableItem className={"filter-item"}>
+              {({ ref }: any) => (
+                <div style={{ display: "flex", width: "100%" }}>
+                  <input
+                    autoFocus
+                    className={"free-text-input"}
+                    style={{ border: "0px" }}
+                    ref={ref}
+                    type="text"
+                    placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                    data-testid={"filteredMenu-free-text-input"}
+                    defaultValue={""}
+                    onChange={(e) => setFilter(e.target.value.toLowerCase())}
+                  />
+                </div>
+              )}
+            </FocusableItem>
+            <MenuDivider key={`$$divider_filter`} />
+          </>
+        )}
+        {options?.map((item, index) =>
+          item.value === MenuSeparatorString ? (
+            <MenuDivider key={`$$divider_${index}`} />
+          ) : filteredValues.includes(item.value) ? null : (
+            <>
+              <MenuItem
+                key={`${item.value}`}
+                onClick={(e) => {
+                  e.keepOpen = true;
+                  // onSelectMenuOption(itemIndex, e.value);
+                  return false;
+                }}
+              >
+                <LuiCheckboxInput
+                  isChecked={selectedValues.includes(item.value)}
+                  value={`${item.value}`}
+                  label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSelectedValues([...selectedValues, item.value as string]);
+                    } else {
+                      setSelectedValues(selectedValues.filter((value) => value != item.value));
+                    }
+                  }}
+                />
+              </MenuItem>
+              {selectedValues.includes(item.value) && item.subComponent && (
+                <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
+                  {(ref) =>
+                    item.subComponent &&
+                    item.subComponent(
+                      {
+                        setValue: (value: any) => {
+                          subSelectedValues.current[item.value as string] = value;
+                        },
+                      },
+                      ref,
+                    )
+                  }
+                </FocusableItem>
+              )}
+            </>
+          ),
+        )}
+      </div>
+    </ComponentLoadingWrapper>,
+  );
+};

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -0,0 +1,90 @@
+import { GridBaseRow } from "../Grid";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { GridContext } from "../../contexts/GridContext";
+import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
+import { MenuDivider, MenuItem } from "@szhsin/react-menu";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { useGridPopoutHook } from "../GridPopoutHook";
+
+export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+  options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
+}
+
+/** Menu configuration types **/
+export const MenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+
+interface MenuSeparatorType {
+  __isMenuSeparator__: boolean;
+}
+
+export interface MenuOption<RowType> {
+  label: JSX.Element | string | MenuSeparatorType;
+  action: (selectedRows: RowType[]) => Promise<boolean>;
+  multiEdit: boolean;
+}
+
+/**
+ * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
+ * you need a useMemo around your columnDefs
+ */
+export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormPopoutMenuProps<RowType>;
+
+  const { updatingCells } = useContext(GridContext);
+  const optionsInitialising = useRef(false);
+  const [options, setOptions] = useState<MenuOption<RowType>[]>();
+
+  // Load up options list if it's async function
+  useEffect(() => {
+    if (options || optionsInitialising.current) return;
+    optionsInitialising.current = true;
+    const optionsConf = formProps.options ?? [];
+
+    (async () => {
+      if (typeof optionsConf == "function") {
+        setOptions(await optionsConf(props.selectedRows));
+      } else {
+        setOptions(optionsConf);
+      }
+
+      optionsInitialising.current = false;
+    })();
+  }, [options, formProps.options, props.selectedRows]);
+
+  const actionClick = useCallback(
+    async (menuOption: MenuOption<any>) => {
+      return await updatingCells({ selectedRows: props.selectedRows, field: props.field }, async (selectedRows) => {
+        await menuOption.action(selectedRows);
+        return true;
+      });
+    },
+    [props.field, props.selectedRows, updatingCells],
+  );
+
+  const selectedRowCount = props.selectedRows.length;
+
+  const filteredOptions = options?.filter((menuOption) => {
+    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.multiEdit;
+  });
+
+  const { popoutWrapper } = useGridPopoutHook(props);
+  return popoutWrapper(
+    <ComponentLoadingWrapper loading={!filteredOptions}>
+      <div className={"Grid-popoverContainerList"}>
+        {options?.map((item, index) =>
+          item.label === MenuSeparator ? (
+            <MenuDivider key={`$$divider_${index}`} />
+          ) : (
+            <MenuItem
+              key={`${item.label}`}
+              onClick={() => actionClick(item)}
+              disabled={!filteredOptions?.includes(item)}
+            >
+              {item.label as JSX.Element | string}
+            </MenuItem>
+          ),
+        )}
+      </div>
+    </ComponentLoadingWrapper>,
+  );
+};

package/src/components/gridForm/GridFormTextArea.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from "react";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { TextAreaInput } from "../../lui/TextAreaInput";
+import { useGridPopoutHook } from "../GridPopoutHook";
+import { GridBaseRow } from "../Grid";
+
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+  placeholder?: string;
+  required?: boolean;
+  maxlength?: number;
+  width?: string | number;
+  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+}
+
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormTextAreaProps<RowType>;
+  const [value, setValue] = useState(props.value ?? "");
+
+  const invalid = useCallback(() => {
+    if (formProps.required && value.length == 0) {
+      return `Some text is required`;
+    }
+    if (formProps.maxlength && value.length > formProps.maxlength) {
+      return `Text must be no longer than ${formProps.maxlength} characters`;
+    }
+    return null;
+  }, [formProps.maxlength, formProps.required, value.length]);
+
+  const save = useCallback(
+    async (selectedRows: any[]): Promise<boolean> => {
+      if (invalid()) return false;
+
+      if (props.value === (value ?? "")) return true;
+
+      if (formProps.onSave) {
+        return await formProps.onSave(selectedRows, value);
+      }
+
+      const field = props.field;
+      if (field == null) {
+        console.error("ColDef has no field set");
+        return false;
+      }
+      selectedRows.forEach((row) => (row[field] = value));
+      return true;
+    },
+    [formProps, invalid, props.field, props.value, value],
+  );
+  const { popoutWrapper } = useGridPopoutHook(props, save);
+
+  return popoutWrapper(
+    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+      <TextAreaInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        error={invalid()}
+        inputProps={{ placeholder: formProps.placeholder }}
+      />
+    </div>,
+  );
+};

package/src/components/gridForm/GridFormTextInput.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useState } from "react";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { TextInputFormatted } from "../../lui/TextInputFormatted";
+import { useGridPopoutHook } from "../GridPopoutHook";
+import { GridBaseRow } from "../Grid";
+
+export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+  placeholder?: string;
+  required?: boolean;
+  maxlength?: number;
+  width?: string | number;
+  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+}
+
+export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormTextInputProps<RowType>;
+  const [value, setValue] = useState(props.value ?? "");
+
+  const invalid = useCallback(() => {
+    if (formProps.required && value.length == 0) {
+      return `Some text is required`;
+    }
+    if (formProps.maxlength && value.length > formProps.maxlength) {
+      return `Text must be no longer than ${formProps.maxlength} characters`;
+    }
+    return null;
+  }, [formProps.maxlength, formProps.required, value.length]);
+
+  const save = useCallback(
+    async (selectedRows: any[]): Promise<boolean> => {
+      if (invalid()) return false;
+
+      if (props.value === (value ?? "")) return true;
+
+      if (formProps.onSave) {
+        return await formProps.onSave(selectedRows, value);
+      }
+
+      const field = props.field;
+      if (field == null) {
+        console.error("ColDef has no field set");
+        return false;
+      }
+      selectedRows.forEach((row) => (row[field] = value));
+      return true;
+    },
+    [invalid, props.value, props.field, value, formProps],
+  );
+  const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
+
+  return popoutWrapper(
+    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+      <TextInputFormatted
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        error={invalid()}
+        formatted={""}
+        inputProps={{
+          style: { width: "100%" },
+          placeholder: formProps.placeholder,
+          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
+        }}
+      />
+    </div>,
+  );
+};

package/src/components/gridHeader/GridHeaderSelect.tsx

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+import { IHeaderParams } from "ag-grid-community";
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * AgGrid's existing select header doesn't work the way we want.
+ * If you have partial select then clicking the header checkbox will select all,
+ * but we want to deselect all on partial select.
+ */
+export const GridHeaderSelect = ({ api }: IHeaderParams) => {
+  // This is used to force an update on selection change
+  const [updateCounter, setUpdateCounter] = useState(0);
+  const selectedNodeCount = api.getSelectedRows().length;
+
+  const clickHandler = useCallback(() => {
+    setUpdateCounter(updateCounter + 1);
+  }, [updateCounter]);
+
+  useEffect(() => {
+    api.addEventListener("selectionChanged", clickHandler);
+    return () => api.removeEventListener("selectionChanged", clickHandler);
+  }, [api, clickHandler]);
+
+  const handleMultiSelect = () => {
+    if (selectedNodeCount == 0) {
+      api.selectAllFiltered();
+    } else {
+      api.deselectAll();
+    }
+  };
+
+  const totalNodeCount = api.getModel().getRowCount();
+  const partialSelect = selectedNodeCount != 0 && selectedNodeCount != totalNodeCount;
+  const allSelected = selectedNodeCount != 0 && selectedNodeCount == totalNodeCount;
+
+  return (
+    <div
+      className={clsx(
+        "ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper",
+        partialSelect && "ag-indeterminate",
+        allSelected && "ag-checked",
+      )}
+      onClick={handleMultiSelect}
+    >
+      <input
+        type="checkbox"
+        className={"ag-checkbox-input-wrapper"}
+        onChange={() => {
+          /* do nothing */
+        }}
+      />
+    </div>
+  );
+};

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -0,0 +1,22 @@
+import { GenericMultiEditCellClass } from "../GenericCellClass";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
+
+export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType>(
+  colDef: GenericCellColDef<RowType, GridFormMultiSelectProps<RowType, ValueType>>,
+) =>
+  GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
+    initialWidth: 65,
+    maxWidth: 150,
+    cellRenderer: GridRendererGenericCell,
+    cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        ...colDef.cellEditorParams,
+        form: GridFormMultiSelect,
+      },
+    }),
+  });

package/src/components/gridPopoverEdit/GridPopoutMenu.scss

@@ -0,0 +1,9 @@
+@use 'node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+.GridPopoutMenu-burger svg {
+  fill: lui.$sea;
+}
+
+.GridPopoutMenu-burgerDisabled svg {
+  fill: lui.$disabled-color;
+}

package/src/components/gridPopoverEdit/GridPopoutMenu.tsx

@@ -0,0 +1,35 @@
+import "./GridPopoutMenu.scss";
+import "@szhsin/react-menu/dist/index.css";
+
+import { ColDef } from "ag-grid-community";
+import { GenericMultiEditCellClass } from "../GenericCellClass";
+import { GridBaseRow } from "../Grid";
+import { GridCell } from "../GridCell";
+import { GridFormPopoutMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoutMenu";
+import { GridRenderPopoutMenuCell } from "../gridRender/GridRenderPopoutMenuCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+
+/**
+ * Popout burger menu
+ */
+export const GridPopoutMenu = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormPopoutMenuProps<RowType>>,
+): ColDef =>
+  GridCell<RowType, GridFormPopoutMenuProps<RowType>>({
+    maxWidth: 64,
+    editable: colDef.editable != null ? colDef.editable : true,
+    cellRenderer: GridRenderPopoutMenuCell,
+    cellClass: colDef?.cellEditorParams?.multiEdit !== false ? GenericMultiEditCellClass : undefined,
+    ...colDef,
+    cellRendererParams: {
+      // Menus open on single click, this parameter is picked up in Grid.tsx
+      singleClickEdit: true,
+    },
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        multiEdit: true,
+        ...colDef.cellEditorParams,
+        form: GridFormPopoutMenu,
+      },
+    }),
+  });

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -0,0 +1,24 @@
+import { GenericMultiEditCellClass } from "../GenericCellClass";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
+import { bearingValueFormatter } from "../../utils/bearing";
+import { GridCell } from "../GridCell";
+import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
+import { GridBaseRow } from "../Grid";
+
+export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
+) =>
+  GridCell<RowType, GridFormEditBearingProps<RowType>>({
+    initialWidth: 65,
+    maxWidth: 150,
+    valueFormatter: bearingValueFormatter,
+    cellRenderer: GridRendererGenericCell,
+    cellClass: colDef.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        ...colDef.cellEditorParams,
+        form: GridFormEditBearing,
+      },
+    }),
+  });

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -0,0 +1,22 @@
+import { GenericMultiEditCellClass } from "../GenericCellClass";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
+
+export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
+  colDef: GenericCellColDef<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>,
+) =>
+  GridCell<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>({
+    initialWidth: 65,
+    maxWidth: 150,
+    cellRenderer: GridRendererGenericCell,
+    cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        ...colDef.cellEditorParams,
+        form: GridFormDropDown,
+      },
+    }),
+  });

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -0,0 +1,22 @@
+import { GridCell } from "../GridCell";
+import { GridFormMessage, GridFormMessageProps } from "../gridForm/GridFormMessage";
+import { GridBaseRow } from "../Grid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+
+export const GridPopoverMessage = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormMessageProps<RowType>>,
+) => {
+  return GridCell<RowType, GridFormMessageProps<RowType>>({
+    maxWidth: 140,
+    ...colDef,
+    cellRendererParams: colDef.cellRendererParams ?? {
+      singleClickEdit: true,
+    },
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        ...colDef.cellEditorParams,
+        form: GridFormMessage,
+      },
+    }),
+  });
+};

package/src/components/gridRender/GridRenderGenericCell.scss

@@ -0,0 +1,15 @@
+@use 'node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+.AgGridGenericCellRenderer-icon {
+  margin-right: 4px;
+}
+
+.AgGridGenericCellRenderer-ic_infoIcon {
+  @extend .AgGridGenericCellRenderer-icon;
+  fill: lui.$info;
+}
+
+.AgGridGenericCellRenderer-ic_warningIcon {
+  @extend .AgGridGenericCellRenderer-icon;
+  fill: lui.$warning;
+}

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -0,0 +1,49 @@
+import "./GridRenderGenericCell.scss";
+
+import { useContext } from "react";
+import { UpdatingContext } from "../../contexts/UpdatingContext";
+import { GridLoadableCell } from "../GridLoadableCell";
+import { GridIcon } from "../GridIcon";
+import { ColDef, ICellRendererParams } from "ag-grid-community";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { GenericCellEditorParams } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+
+export interface GenericCellColDef<RowType extends GridBaseRow, FormProps extends Record<string, any>> extends ColDef {
+  cellRendererParams?: GenericCellRendererParams;
+  cellEditorParams?: GenericCellEditorParams<RowType> & FormProps;
+}
+
+export interface GenericCellRendererParams {
+  singleClickEdit?: boolean;
+  warning?: (props: ICellRendererParams) => string | boolean | undefined;
+  info?: (props: ICellRendererParams) => string | boolean | undefined;
+}
+
+export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element => {
+  const { checkUpdating } = useContext(UpdatingContext);
+
+  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams | undefined;
+  const warningFn = cellRendererParams?.warning;
+  const warningText = warningFn ? warningFn(props) : undefined;
+  const infoFn = cellRendererParams?.info;
+  const infoText = infoFn ? infoFn(props) : undefined;
+
+  const defaultFormatter = (props: ValueFormatterParams): string => props.value;
+  const formatter = props.colDef?.valueFormatter ?? defaultFormatter;
+  if (typeof formatter === "string") {
+    console.error("valueFormatter must be a function");
+    return <span>valueFormatter must be a function</span>;
+  }
+  const formatted = formatter(props as ValueFormatterParams);
+
+  return (
+    <GridLoadableCell isLoading={checkUpdating(props.colDef?.field ?? props.colDef?.colId ?? "", props.data.id)}>
+      <>
+        {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
+        {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
+        <span title={formatted}>{formatted}</span>
+      </>
+    </GridLoadableCell>
+  );
+};