@olenbetong/appframe-ds 1.3.6 → 1.3.8

package/src/grid/useAfColumns.tsx

@@ -1,371 +1,371 @@
-import {
-	GRID_AGGREGATION_ROOT_FOOTER_ROW_ID,
-	GRID_CHECKBOX_SELECTION_FIELD,
-	GRID_DETAIL_PANEL_TOGGLE_FIELD,
-	GRID_TREE_DATA_GROUPING_FIELD,
-	GridActionsCellItem,
-	type GridActionsCellItemProps,
-	type GridAlignment,
-	type GridApi,
-	type GridColDef,
-	type GridColType,
-	type GridColumnVisibilityModel,
-	type GridRowId,
-	GridRowModes,
-	type GridRowParams,
-	getAggregationFooterRowIdFromGroupId,
-	gridEditRowsStateSelector,
-	useGridApiContext,
-	useGridSelector,
-} from "@mui/x-data-grid-premium";
-import { FloppydiskIcon, PencilIcon, TrashIcon, XMarkIcon } from "@navikt/aksel-icons";
-import { type DataObject, uid } from "@olenbetong/appframe-data";
-import { usePermissions } from "@olenbetong/appframe-react";
-
-import React, { useMemo } from "react";
-
-import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
-import { deleteRow } from "./editing.js";
-import { operators } from "./filter.js";
-import { dateTimeValueFormatter, dateValueFormatter } from "./formatters.js";
-import { isNewItemRow } from "./useAfNewItemRow.js";
-import { getLocalizedString } from "../i18n.js";
-
-/** `auto-generated-group-footer-`, without spelling it out: every group's total row shares it. */
-const AGGREGATION_FOOTER_ID_PREFIX = String(getAggregationFooterRowIdFromGroupId(""));
-
-export type AfGridColDef = GridColDef & {
-	sortColumn?: string;
-	filterColumn?: string;
-	/**
-	 * Whether the column should be hidden by default
-	 */
-	hide?: boolean;
-	/**
-	 * Mark this column as calculated/virtual — it does not correspond to a field in
-	 * the data object. Calculated columns are always non-editable and are excluded
-	 * from server-side sort and filter operations.
-	 */
-	calculated?: boolean;
-};
-
-/**
- * Whether the cell belongs to a row the grid generated to hold totals rather than to a record.
- *
- * The row type is not enough on its own: the grand total is pinned to the bottom, so it arrives as
- * a `pinnedRow` — the same type as the grid's own new-item row, whose `renderCell` must still run.
- * Its id is the reliable marker, and MUI exports the constants for it.
- */
-function isAggregationRow(params: { id: GridRowId; rowNode?: { type?: string } }) {
-	if (params.rowNode?.type === "group") return true;
-
-	return (
-		typeof params.id === "string" &&
-		(params.id === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID || params.id.startsWith(AGGREGATION_FOOTER_ID_PREFIX))
-	);
-}
-
-export function getColumnVisibilityModel(columns: AfGridColumn[]): GridColumnVisibilityModel {
-	let visibility: GridColumnVisibilityModel = {};
-	for (let column of columns) {
-		if (typeof column !== "string" && column.hide) {
-			visibility[column.field] = false;
-		}
-	}
-	return visibility;
-}
-
-export function afColumnsToMuiColumn({
-	apiRef,
-	allowUpdate,
-	columnsProp,
-	dataObject,
-}: useAfColumnsOptions & { allowDelete: boolean; allowUpdate: boolean }) {
-	let columns = columnsProp;
-	if (columns.length === 0) {
-		columns = dataObject.getFields().map((field) => field.name);
-	}
-
-	let sysColumns = [GRID_CHECKBOX_SELECTION_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_TREE_DATA_GROUPING_FIELD];
-	let muiColumns: GridColDef[] = [];
-	let currentColumns = apiRef.current?.getAllColumns?.();
-
-	for (let column of columnsProp) {
-		let fieldName = typeof column === "string" ? column : column.field;
-
-		if (sysColumns.includes(fieldName)) {
-			muiColumns.push(typeof column === "string" ? { field: column } : column);
-		} else {
-			let fieldDef = dataObject.getFields(fieldName);
-			let type = "string";
-			if (typeof column !== "string" && column.type) {
-				type = column.type;
-			} else if (fieldDef?.type) {
-				type = fieldDef.type;
-			}
-
-			if (type === "datetime") {
-				type = "dateTime";
-			}
-
-			if (type === "bigint") {
-				type = "number";
-			}
-
-			if (!muiColumnTypes.includes(type)) {
-				type = "string";
-			}
-
-			let align: GridAlignment;
-			switch (type) {
-				case "number":
-					align = "right";
-					break;
-				case "date":
-				case "dateTime":
-					align = "center";
-					break;
-				default:
-					align = "left";
-					break;
-			}
-
-			let valueFormatter: (value: any) => string | number | boolean | object | null | undefined = (value) => value;
-
-			if (type === "date") {
-				valueFormatter = dateValueFormatter;
-			} else if (type === "dateTime") {
-				valueFormatter = dateTimeValueFormatter;
-			}
-
-			let editable = allowUpdate && !fieldDef?.ignored && !fieldDef?.computed && !fieldDef?.joined;
-
-			// Calculated columns are never editable regardless of data object permissions
-			if (typeof column !== "string" && column.calculated) {
-				editable = false;
-			}
-
-			let currentWidth = currentColumns?.find((c) => c.field === fieldName)?.width;
-
-			let col: GridColDef;
-			if (typeof column === "string") {
-				col = {
-					field: column,
-					type: type as GridColType,
-					headerName: column,
-					valueFormatter,
-					editable,
-					align,
-					headerAlign: align,
-					width: currentWidth ?? 150,
-				};
-			} else {
-				let { hide, calculated, ...rest } = column;
-				col = {
-					headerName: fieldDef?.caption ?? fieldName,
-					editable,
-					type: type as GridColType,
-					valueFormatter,
-					align,
-					headerAlign: align,
-					...rest,
-					width: currentWidth ?? rest.width ?? 150,
-				};
-			}
-
-			if ((operators as any)[type]) {
-				col.filterOperators = (operators as any)[type];
-			}
-
-			/*
-			 * A total or group row has no record behind it — the grid generates it — so a
-			 * `renderCell` that reads its value off `params.row`, which most do, has nothing to
-			 * read. Left alone that reads as a broken feature in two ways: turning on a sum shows
-			 * a pinned row of empty cells, and every unaggregated column renders whatever its
-			 * `renderCell` makes of an empty record (a status chip saying "Open", say).
-			 *
-			 * So the aggregated value is rendered where there is one, nothing where there is not,
-			 * and `renderCell` is left to the data rows it was written for. A column that wants to
-			 * shape its total formats it with `valueFormatter`, which the grid applies to
-			 * aggregation cells too.
-			 */
-			if (col.renderCell) {
-				let renderDataCell = col.renderCell;
-				col.renderCell = (params) => {
-					if (params.aggregation) return params.formattedValue ?? params.value ?? "";
-					if (isAggregationRow(params)) return "";
-
-					return renderDataCell(params);
-				};
-			}
-
-			// The header filter cell is fully replaced by our own, which edits the
-			// shared filter tree instead of MUI's filter model.
-			if (col.filterable !== false && col.type !== "actions") {
-				col.renderHeaderFilter = (props) => <AfHeaderFilterCell {...props} dataObject={dataObject} />;
-			}
-
-			muiColumns.push(col);
-		}
-	}
-
-	return muiColumns;
-}
-
-const GridActionItem = React.forwardRef<
-	HTMLButtonElement,
-	GridActionsCellItemProps & {
-		rowId: GridRowId;
-		mode: GridRowModes;
-		dataObject: DataObject<any>;
-		requireUpdate?: boolean;
-		requireDelete?: boolean;
-	}
->(function GridActionItem({ dataObject, mode, rowId, requireDelete = false, requireUpdate = false, ...props }, ref) {
-	let apiRef = useGridApiContext();
-	let rowModesModel = useGridSelector(apiRef, gridEditRowsStateSelector);
-	let { allowUpdate, allowDelete } = usePermissions(dataObject);
-
-	let currentMode = typeof rowModesModel[rowId] === "undefined" ? GridRowModes.View : GridRowModes.Edit;
-
-	if (currentMode !== mode) {
-		return null;
-	}
-
-	if (requireDelete && !allowDelete) {
-		return null;
-	}
-
-	if (requireUpdate && !allowUpdate) {
-		return null;
-	}
-
-	return <GridActionsCellItem ref={ref} {...props} />;
-});
-
-export type AfGridColumn = string | AfGridColDef;
-const muiColumnTypes = ["string", "number", "date", "dateTime", "boolean", "singleSelect", "actions"];
-
-export type useAfColumnsOptions = {
-	apiRef: React.RefObject<GridApi | null>;
-	disableDelete?: boolean;
-	disableEdit?: boolean;
-	dataObject: DataObject<any>;
-	columnsProp: AfGridColumn[];
-	idField: string;
-};
-
-export function useAfColumns({
-	apiRef,
-	dataObject,
-	disableEdit,
-	disableDelete,
-	columnsProp,
-	idField,
-}: useAfColumnsOptions): GridColDef[] {
-	let { allowUpdate, allowDelete } = usePermissions(dataObject);
-
-	return useMemo(() => {
-		let columns = afColumnsToMuiColumn({
-			allowDelete,
-			allowUpdate,
-			apiRef,
-			dataObject,
-			disableEdit,
-			disableDelete,
-			columnsProp,
-			idField,
-		});
-
-		const handleEditClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
-			event.stopPropagation();
-			apiRef.current?.startRowEditMode({ id });
-		};
-
-		const handleSaveClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
-			event.stopPropagation();
-			apiRef.current?.stopRowEditMode({ id });
-		};
-
-		const handleDeleteClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
-			event.stopPropagation();
-			await deleteRow({ apiRef, dataObject, id, idField });
-		};
-
-		const handleCancelClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
-			event.stopPropagation();
-			apiRef.current?.stopRowEditMode({ id, ignoreModifications: true });
-
-			const row = apiRef.current?.getRow(id);
-			if (row?.isNew) {
-				apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" } as any]);
-			}
-		};
-
-		if (!columns.find((c) => c.type === "actions") && (allowDelete || allowUpdate)) {
-			columns.push({
-				field: "actions",
-				type: "actions",
-				headerName: getLocalizedString("Actions"),
-				getActions: ({ id }: GridRowParams) => {
-					// The new item row only exists while inserting is allowed, so its save and
-					// cancel actions do not depend on the update permission, and it has nothing
-					// to edit or delete in view mode.
-					let isNewItem = isNewItemRow(id);
-					let actions = [
-						<GridActionItem
-							key="save"
-							icon={<FloppydiskIcon aria-hidden />}
-							label={getLocalizedString("Save")}
-							onClick={handleSaveClick(id)}
-							mode={GridRowModes.Edit}
-							dataObject={dataObject}
-							rowId={id}
-							requireUpdate={!isNewItem}
-						/>,
-						<GridActionItem
-							key="revert"
-							icon={<XMarkIcon aria-hidden />}
-							label={getLocalizedString("Cancel")}
-							onClick={handleCancelClick(id)}
-							mode={GridRowModes.Edit}
-							dataObject={dataObject}
-							rowId={id}
-							requireUpdate={!isNewItem}
-						/>,
-					];
-
-					if (isNewItem) {
-						return actions;
-					}
-
-					return [
-						<GridActionItem
-							key="edit"
-							icon={<PencilIcon aria-hidden />}
-							label={getLocalizedString("Edit")}
-							onClick={handleEditClick(id)}
-							mode={GridRowModes.View}
-							dataObject={dataObject}
-							rowId={id}
-							requireUpdate
-						/>,
-						<GridActionItem
-							key="delete"
-							icon={<TrashIcon aria-hidden />}
-							label={getLocalizedString("Delete")}
-							onClick={handleDeleteClick(id)}
-							mode={GridRowModes.View}
-							dataObject={dataObject}
-							rowId={id}
-							requireDelete
-						/>,
-						...actions,
-					];
-				},
-			});
-		}
-
-		return columns;
-	}, [columnsProp, disableDelete, disableEdit, allowUpdate, allowDelete, idField, dataObject, apiRef]);
-}
+import {
+	GRID_AGGREGATION_ROOT_FOOTER_ROW_ID,
+	GRID_CHECKBOX_SELECTION_FIELD,
+	GRID_DETAIL_PANEL_TOGGLE_FIELD,
+	GRID_TREE_DATA_GROUPING_FIELD,
+	GridActionsCellItem,
+	type GridActionsCellItemProps,
+	type GridAlignment,
+	type GridApi,
+	type GridColDef,
+	type GridColType,
+	type GridColumnVisibilityModel,
+	type GridRowId,
+	GridRowModes,
+	type GridRowParams,
+	getAggregationFooterRowIdFromGroupId,
+	gridEditRowsStateSelector,
+	useGridApiContext,
+	useGridSelector,
+} from "@mui/x-data-grid-premium";
+import { FloppydiskIcon, PencilIcon, TrashIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
+import { usePermissions } from "@olenbetong/appframe-react";
+
+import React, { useMemo } from "react";
+
+import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
+import { deleteRow } from "./editing.js";
+import { operators } from "./filter.js";
+import { dateTimeValueFormatter, dateValueFormatter } from "./formatters.js";
+import { isNewItemRow } from "./useAfNewItemRow.js";
+import { getLocalizedString } from "../i18n.js";
+
+/** `auto-generated-group-footer-`, without spelling it out: every group's total row shares it. */
+const AGGREGATION_FOOTER_ID_PREFIX = String(getAggregationFooterRowIdFromGroupId(""));
+
+export type AfGridColDef = GridColDef & {
+	sortColumn?: string;
+	filterColumn?: string;
+	/**
+	 * Whether the column should be hidden by default
+	 */
+	hide?: boolean;
+	/**
+	 * Mark this column as calculated/virtual — it does not correspond to a field in
+	 * the data object. Calculated columns are always non-editable and are excluded
+	 * from server-side sort and filter operations.
+	 */
+	calculated?: boolean;
+};
+
+/**
+ * Whether the cell belongs to a row the grid generated to hold totals rather than to a record.
+ *
+ * The row type is not enough on its own: the grand total is pinned to the bottom, so it arrives as
+ * a `pinnedRow` — the same type as the grid's own new-item row, whose `renderCell` must still run.
+ * Its id is the reliable marker, and MUI exports the constants for it.
+ */
+function isAggregationRow(params: { id: GridRowId; rowNode?: { type?: string } }) {
+	if (params.rowNode?.type === "group") return true;
+
+	return (
+		typeof params.id === "string" &&
+		(params.id === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID || params.id.startsWith(AGGREGATION_FOOTER_ID_PREFIX))
+	);
+}
+
+export function getColumnVisibilityModel(columns: AfGridColumn[]): GridColumnVisibilityModel {
+	let visibility: GridColumnVisibilityModel = {};
+	for (let column of columns) {
+		if (typeof column !== "string" && column.hide) {
+			visibility[column.field] = false;
+		}
+	}
+	return visibility;
+}
+
+export function afColumnsToMuiColumn({
+	apiRef,
+	allowUpdate,
+	columnsProp,
+	dataObject,
+}: useAfColumnsOptions & { allowDelete: boolean; allowUpdate: boolean }) {
+	let columns = columnsProp;
+	if (columns.length === 0) {
+		columns = dataObject.getFields().map((field) => field.name);
+	}
+
+	let sysColumns = [GRID_CHECKBOX_SELECTION_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_TREE_DATA_GROUPING_FIELD];
+	let muiColumns: GridColDef[] = [];
+	let currentColumns = apiRef.current?.getAllColumns?.();
+
+	for (let column of columnsProp) {
+		let fieldName = typeof column === "string" ? column : column.field;
+
+		if (sysColumns.includes(fieldName)) {
+			muiColumns.push(typeof column === "string" ? { field: column } : column);
+		} else {
+			let fieldDef = dataObject.getFields(fieldName);
+			let type = "string";
+			if (typeof column !== "string" && column.type) {
+				type = column.type;
+			} else if (fieldDef?.type) {
+				type = fieldDef.type;
+			}
+
+			if (type === "datetime") {
+				type = "dateTime";
+			}
+
+			if (type === "bigint") {
+				type = "number";
+			}
+
+			if (!muiColumnTypes.includes(type)) {
+				type = "string";
+			}
+
+			let align: GridAlignment;
+			switch (type) {
+				case "number":
+					align = "right";
+					break;
+				case "date":
+				case "dateTime":
+					align = "center";
+					break;
+				default:
+					align = "left";
+					break;
+			}
+
+			let valueFormatter: (value: any) => string | number | boolean | object | null | undefined = (value) => value;
+
+			if (type === "date") {
+				valueFormatter = dateValueFormatter;
+			} else if (type === "dateTime") {
+				valueFormatter = dateTimeValueFormatter;
+			}
+
+			let editable = allowUpdate && !fieldDef?.ignored && !fieldDef?.computed && !fieldDef?.joined;
+
+			// Calculated columns are never editable regardless of data object permissions
+			if (typeof column !== "string" && column.calculated) {
+				editable = false;
+			}
+
+			let currentWidth = currentColumns?.find((c) => c.field === fieldName)?.width;
+
+			let col: GridColDef;
+			if (typeof column === "string") {
+				col = {
+					field: column,
+					type: type as GridColType,
+					headerName: column,
+					valueFormatter,
+					editable,
+					align,
+					headerAlign: align,
+					width: currentWidth ?? 150,
+				};
+			} else {
+				let { hide, calculated, ...rest } = column;
+				col = {
+					headerName: fieldDef?.caption ?? fieldName,
+					editable,
+					type: type as GridColType,
+					valueFormatter,
+					align,
+					headerAlign: align,
+					...rest,
+					width: currentWidth ?? rest.width ?? 150,
+				};
+			}
+
+			if ((operators as any)[type]) {
+				col.filterOperators = (operators as any)[type];
+			}
+
+			/*
+			 * A total or group row has no record behind it — the grid generates it — so a
+			 * `renderCell` that reads its value off `params.row`, which most do, has nothing to
+			 * read. Left alone that reads as a broken feature in two ways: turning on a sum shows
+			 * a pinned row of empty cells, and every unaggregated column renders whatever its
+			 * `renderCell` makes of an empty record (a status chip saying "Open", say).
+			 *
+			 * So the aggregated value is rendered where there is one, nothing where there is not,
+			 * and `renderCell` is left to the data rows it was written for. A column that wants to
+			 * shape its total formats it with `valueFormatter`, which the grid applies to
+			 * aggregation cells too.
+			 */
+			if (col.renderCell) {
+				let renderDataCell = col.renderCell;
+				col.renderCell = (params) => {
+					if (params.aggregation) return params.formattedValue ?? params.value ?? "";
+					if (isAggregationRow(params)) return "";
+
+					return renderDataCell(params);
+				};
+			}
+
+			// The header filter cell is fully replaced by our own, which edits the
+			// shared filter tree instead of MUI's filter model.
+			if (col.filterable !== false && col.type !== "actions") {
+				col.renderHeaderFilter = (props) => <AfHeaderFilterCell {...props} dataObject={dataObject} />;
+			}
+
+			muiColumns.push(col);
+		}
+	}
+
+	return muiColumns;
+}
+
+const GridActionItem = React.forwardRef<
+	HTMLButtonElement,
+	GridActionsCellItemProps & {
+		rowId: GridRowId;
+		mode: GridRowModes;
+		dataObject: DataObject<any>;
+		requireUpdate?: boolean;
+		requireDelete?: boolean;
+	}
+>(function GridActionItem({ dataObject, mode, rowId, requireDelete = false, requireUpdate = false, ...props }, ref) {
+	let apiRef = useGridApiContext();
+	let rowModesModel = useGridSelector(apiRef, gridEditRowsStateSelector);
+	let { allowUpdate, allowDelete } = usePermissions(dataObject);
+
+	let currentMode = typeof rowModesModel[rowId] === "undefined" ? GridRowModes.View : GridRowModes.Edit;
+
+	if (currentMode !== mode) {
+		return null;
+	}
+
+	if (requireDelete && !allowDelete) {
+		return null;
+	}
+
+	if (requireUpdate && !allowUpdate) {
+		return null;
+	}
+
+	return <GridActionsCellItem ref={ref} {...props} />;
+});
+
+export type AfGridColumn = string | AfGridColDef;
+const muiColumnTypes = ["string", "number", "date", "dateTime", "boolean", "singleSelect", "actions"];
+
+export type useAfColumnsOptions = {
+	apiRef: React.RefObject<GridApi | null>;
+	disableDelete?: boolean;
+	disableEdit?: boolean;
+	dataObject: DataObject<any>;
+	columnsProp: AfGridColumn[];
+	idField: string;
+};
+
+export function useAfColumns({
+	apiRef,
+	dataObject,
+	disableEdit,
+	disableDelete,
+	columnsProp,
+	idField,
+}: useAfColumnsOptions): GridColDef[] {
+	let { allowUpdate, allowDelete } = usePermissions(dataObject);
+
+	return useMemo(() => {
+		let columns = afColumnsToMuiColumn({
+			allowDelete,
+			allowUpdate,
+			apiRef,
+			dataObject,
+			disableEdit,
+			disableDelete,
+			columnsProp,
+			idField,
+		});
+
+		const handleEditClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.startRowEditMode({ id });
+		};
+
+		const handleSaveClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.stopRowEditMode({ id });
+		};
+
+		const handleDeleteClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			await deleteRow({ apiRef, dataObject, id, idField });
+		};
+
+		const handleCancelClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.stopRowEditMode({ id, ignoreModifications: true });
+
+			const row = apiRef.current?.getRow(id);
+			if (row?.isNew) {
+				apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" } as any]);
+			}
+		};
+
+		if (!columns.find((c) => c.type === "actions") && (allowDelete || allowUpdate)) {
+			columns.push({
+				field: "actions",
+				type: "actions",
+				headerName: getLocalizedString("Actions"),
+				getActions: ({ id }: GridRowParams) => {
+					// The new item row only exists while inserting is allowed, so its save and
+					// cancel actions do not depend on the update permission, and it has nothing
+					// to edit or delete in view mode.
+					let isNewItem = isNewItemRow(id);
+					let actions = [
+						<GridActionItem
+							key="save"
+							icon={<FloppydiskIcon aria-hidden />}
+							label={getLocalizedString("Save")}
+							onClick={handleSaveClick(id)}
+							mode={GridRowModes.Edit}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate={!isNewItem}
+						/>,
+						<GridActionItem
+							key="revert"
+							icon={<XMarkIcon aria-hidden />}
+							label={getLocalizedString("Cancel")}
+							onClick={handleCancelClick(id)}
+							mode={GridRowModes.Edit}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate={!isNewItem}
+						/>,
+					];
+
+					if (isNewItem) {
+						return actions;
+					}
+
+					return [
+						<GridActionItem
+							key="edit"
+							icon={<PencilIcon aria-hidden />}
+							label={getLocalizedString("Edit")}
+							onClick={handleEditClick(id)}
+							mode={GridRowModes.View}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate
+						/>,
+						<GridActionItem
+							key="delete"
+							icon={<TrashIcon aria-hidden />}
+							label={getLocalizedString("Delete")}
+							onClick={handleDeleteClick(id)}
+							mode={GridRowModes.View}
+							dataObject={dataObject}
+							rowId={id}
+							requireDelete
+						/>,
+						...actions,
+					];
+				},
+			});
+		}
+
+		return columns;
+	}, [columnsProp, disableDelete, disableEdit, allowUpdate, allowDelete, idField, dataObject, apiRef]);
+}