Created dynamic callback to support dynamic conditions

src/columnGrid/types/header.type.ts

@@ -5,6 +5,7 @@ import { EditorProps, EditorRef } from '../../editorManager'
 import { PopperProps } from '@material-ui/core/Popper/Popper'
 import { ReactDatePickerProps } from 'react-datepicker'
 import { Row } from '../../types'
+import { DynamicCallback } from '../../types/dynamic-callback'
 
 export interface CellRendererProps<TRow = Row> {
 	row: TRow
@@ -40,10 +41,6 @@ export interface DisableNavigationFn {
 	(coords: NavigationCoords): boolean
 }
 
-export interface CellClassNameFn<TRow = Row> {
-	(row: TRow, column: Column): string
-}
-
 export interface ComponentPropsFn<TRow = Row> {
 	(row: TRow, column: Column):
 		| Partial<React.HTMLAttributes<HTMLInputElement>>
@@ -68,7 +65,7 @@ export interface Column<Key = string, Metadata = unknown> {
 	maxLength?: number
 	width?: React.ReactText
 	className?: string
-	cellClassName?: string | CellClassNameFn
+	cellClassName?: string | DynamicCallback<Row, string>
 	readOnly?: boolean | IsReadOnlyCallback
 	disableNavigation?: boolean | DisableNavigationFn
 	/**
@@ -122,9 +119,9 @@ export interface Column<Key = string, Metadata = unknown> {
 	 * Forces to disable the backspace keydown on cells (travel like excel default behaviour)
 	 * @default false
 	 */
-	disableBackspace?: boolean
-	disableCellPaste?: boolean
-	disableCellCut?: boolean
+	disableBackspace?: boolean | DynamicCallback<Row, boolean>
+	disableCellPaste?: boolean | DynamicCallback<Row, boolean>
+	disableCellCut?: boolean | DynamicCallback<Row, boolean>
 	/**
 	 * Number of ms to open editor (used in second arms)
 	 * @default undefined
@@ -142,7 +139,7 @@ export interface Column<Key = string, Metadata = unknown> {
 export interface NestedHeader {
 	title: string
 	tooltip?: string
-	className?: string
+	className?: string | DynamicCallback<Row, string>
 	tooltipProps?: {
 		/** @default true **/
 		arrow?: boolean

src/gridWrapper/GridWrapper.tsx

@@ -175,7 +175,7 @@ const GridWrapper = React.memo((props: GridWrapperProps) => {
 				classes.cellDefaultStyle,
 				theme?.cellClass,
 				typeof column.cellClassName === 'function'
-					? column.cellClassName(row, column)
+					? column.cellClassName({ row, column })
 					: column.cellClassName,
 			)
 			if (isRowActive && !cell.dummy && theme?.currentRowClass) {
@@ -187,7 +187,6 @@ const GridWrapper = React.memo((props: GridWrapperProps) => {
 			}
 
 			if (props.selection && props.selection.cellClassName) {
-				const row = props.apiRef.current.getRowAt(rowIndex)
 				const isRowSelected = props.apiRef.current.isRowSelected(row?.[props.selection.key])
 				if (isRowSelected) {
 					cellClassName = clsx(cellClassName, props.selection.cellClassName)

src/rowSelection/selectionProps.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Row } from '../types'
+import { DynamicCallback } from '../types/dynamic-callback'
 
 export interface SelectionProps {
 	/**
@@ -17,7 +18,7 @@ export interface SelectionProps {
 	/**
 	 * Classname for the row checkbox
 	 */
-	checkboxClass?: string
+	checkboxClass?: string | DynamicCallback<Row, string>
 
 	/**
 	 * Style for the column of selection
@@ -26,7 +27,7 @@ export interface SelectionProps {
 	/**
 	 * Style for the cell in the selected row
 	 */
-	cellClassName?: string
+	cellClassName?: string | DynamicCallback<Row, string>
 
 	/**
 	 * @default 2%

src/types/dynamic-callback.ts

@@ -0,0 +1,10 @@
+import { Row } from './row.type'
+import { Column } from '../columnGrid/types'
+
+export interface DynamicCallbackParams<TRow> {
+	row: TRow
+	column: Column
+}
+export interface DynamicCallback<TRow = Row, TResult = unknown> {
+	(params: DynamicCallbackParams<TRow>): TResult
+}