@etsoo/materialui 1.1.67 → 1.1.69

package/src/DataGridEx.tsx

@@ -1,132 +1,132 @@
-import { css } from '@emotion/css';
+import { css } from "@emotion/css";
 import {
-    GridAlignGet,
-    GridCellFormatterProps,
-    GridCellRendererProps,
-    GridColumn,
-    GridHeaderCellRendererProps,
-    GridLoaderStates,
-    ScrollerGrid,
-    ScrollerGridForwardRef,
-    ScrollerGridItemRendererProps,
-    ScrollerGridProps,
-    useCombinedRefs
-} from '@etsoo/react';
-import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
+  GridAlignGet,
+  GridCellFormatterProps,
+  GridCellRendererProps,
+  GridColumn,
+  GridHeaderCellRendererProps,
+  GridLoaderStates,
+  ScrollerGrid,
+  ScrollerGridForwardRef,
+  ScrollerGridItemRendererProps,
+  ScrollerGridProps,
+  useCombinedRefs
+} from "@etsoo/react";
+import { DataTypes, IdDefaultType, Utils } from "@etsoo/shared";
 import {
-    Box,
-    BoxProps,
-    Checkbox,
-    Paper,
-    TableSortLabel,
-    useTheme
-} from '@mui/material';
-import React from 'react';
-import { DataGridRenderers } from './DataGridRenderers';
-import { MouseEventWithDataHandler } from './MUGlobal';
+  Box,
+  BoxProps,
+  Checkbox,
+  Paper,
+  TableSortLabel,
+  useTheme
+} from "@mui/material";
+import React from "react";
+import { DataGridRenderers } from "./DataGridRenderers";
+import { MouseEventWithDataHandler } from "./MUGlobal";
 
 /**
  * Footer item renderer props
  */
 export type DataGridExFooterItemRendererProps<T extends object> = {
-    column: GridColumn<T>;
-    index: number;
-    states: GridLoaderStates<T>;
-    cellProps: any;
-    checkable: boolean;
+  column: GridColumn<T>;
+  index: number;
+  states: GridLoaderStates<T>;
+  cellProps: any;
+  checkable: boolean;
 };
 
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
 export type DataGridExProps<
-    T extends object,
-    D extends DataTypes.Keys<T>
+  T extends object,
+  D extends DataTypes.Keys<T>
 > = Omit<
-    ScrollerGridProps<T, D>,
-    'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
+  ScrollerGridProps<T, D>,
+  "itemRenderer" | "columnCount" | "columnWidth" | "width"
 > & {
-    /**
-     * Alternating colors for odd/even rows
-     */
-    alternatingColors?: [string?, string?];
-
-    /**
-     * Checkable to choose multiple items
-     * @default false
-     */
-    checkable?: boolean;
-
-    /**
-     * Rows count to have the bottom border
-     */
-    borderRowsCount?: number;
-
-    /**
-     * Bottom height
-     */
-    bottomHeight?: number;
-
-    /**
-     * Columns
-     */
-    columns: GridColumn<T>[];
-
-    /**
-     * Footer item renderer
-     */
-    footerItemRenderer?: (
-        rows: T[],
-        props: DataGridExFooterItemRendererProps<T>
-    ) => React.ReactNode;
-
-    /**
-     * Header height
-     * @default 56
-     */
-    headerHeight?: number;
-
-    /**
-     * Hide the footer
-     * @default false
-     */
-    hideFooter?: boolean;
-
-    /**
-     * Hover color
-     */
-    hoverColor?: string;
-
-    /**
-     * Double click handler
-     */
-    onDoubleClick?: MouseEventWithDataHandler<T>;
-
-    /**
-     * Click handler
-     */
-    onClick?: MouseEventWithDataHandler<T>;
-
-    /**
-     * Selectable to support hover over and out effect and row clickable
-     * @default true
-     */
-    selectable?: boolean;
-
-    /**
-     * Selected color
-     */
-    selectedColor?: string;
-
-    /**
-     * Width
-     */
-    width?: number;
+  /**
+   * Alternating colors for odd/even rows
+   */
+  alternatingColors?: [string?, string?];
+
+  /**
+   * Checkable to choose multiple items
+   * @default false
+   */
+  checkable?: boolean;
+
+  /**
+   * Rows count to have the bottom border
+   */
+  borderRowsCount?: number;
+
+  /**
+   * Bottom height
+   */
+  bottomHeight?: number;
+
+  /**
+   * Columns
+   */
+  columns: GridColumn<T>[];
+
+  /**
+   * Footer item renderer
+   */
+  footerItemRenderer?: (
+    rows: T[],
+    props: DataGridExFooterItemRendererProps<T>
+  ) => React.ReactNode;
+
+  /**
+   * Header height
+   * @default 56
+   */
+  headerHeight?: number;
+
+  /**
+   * Hide the footer
+   * @default false
+   */
+  hideFooter?: boolean;
+
+  /**
+   * Hover color
+   */
+  hoverColor?: string;
+
+  /**
+   * Double click handler
+   */
+  onDoubleClick?: MouseEventWithDataHandler<T>;
+
+  /**
+   * Click handler
+   */
+  onClick?: MouseEventWithDataHandler<T>;
+
+  /**
+   * Selectable to support hover over and out effect and row clickable
+   * @default true
+   */
+  selectable?: boolean;
+
+  /**
+   * Selected color
+   */
+  selectedColor?: string;
+
+  /**
+   * Width
+   */
+  width?: number;
 };
 
 // Borders
-const boldBorder = '2px solid rgba(224, 224, 224, 1)';
-const thinBorder = '1px solid rgba(224, 224, 224, 1)';
+const boldBorder = "2px solid rgba(224, 224, 224, 1)";
+const thinBorder = "1px solid rgba(224, 224, 224, 1)";
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -135,52 +135,50 @@ const scrollbarSize = 16;
 const minWidth = 120;
 
 const createGridStyle = (
-    alternatingColors: [string?, string?],
-    selectedColor: string,
-    hoverColor: string
+  alternatingColors: [string?, string?],
+  selectedColor: string,
+  hoverColor: string
 ) => {
-    return css({
-        '.DataGridEx-Selected': {
-            backgroundColor: selectedColor
-        },
-        '.DataGridEx-Hover:not(.DataGridEx-Selected)': {
-            backgroundColor: hoverColor
-        },
-        '& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)':
-            {
-                backgroundColor: alternatingColors[0]
-            },
-        '& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)':
-            {
-                backgroundColor: alternatingColors[1]
-            },
-        '& .DataGridEx-Cell-Border': {
-            borderBottom: thinBorder
-        }
-    });
+  return css({
+    ".DataGridEx-Selected": {
+      backgroundColor: selectedColor
+    },
+    ".DataGridEx-Hover:not(.DataGridEx-Selected)": {
+      backgroundColor: hoverColor
+    },
+    "& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
+      backgroundColor: alternatingColors[0]
+    },
+    "& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
+      backgroundColor: alternatingColors[1]
+    },
+    "& .DataGridEx-Cell-Border": {
+      borderBottom: thinBorder
+    }
+  });
 };
 
 const rowItems = (
-    div: HTMLDivElement,
-    callback: (div: HTMLDivElement) => void
+  div: HTMLDivElement,
+  callback: (div: HTMLDivElement) => void
 ) => {
-    const row = div.dataset['row'];
-    if (div.parentElement == null || row == null) return;
-    doRowItems(div.parentElement, parseFloat(row), callback);
+  const row = div.dataset["row"];
+  if (div.parentElement == null || row == null) return;
+  doRowItems(div.parentElement, parseFloat(row), callback);
 };
 
 const doRowItems = (
-    parent: HTMLElement,
-    rowIndex: number,
-    callback: (div: HTMLDivElement) => void
+  parent: HTMLElement,
+  rowIndex: number,
+  callback: (div: HTMLDivElement) => void
 ) => {
-    if (parent == null || rowIndex == null) return;
+  if (parent == null || rowIndex == null) return;
 
-    parent
-        ?.querySelectorAll<HTMLDivElement>(`div[data-row="${rowIndex}"]`)
-        .forEach((rowItem) => {
-            callback(rowItem);
-        });
+  parent
+    ?.querySelectorAll<HTMLDivElement>(`div[data-row="${rowIndex}"]`)
+    .forEach((rowItem) => {
+      callback(rowItem);
+    });
 };
 
 /**
@@ -189,18 +187,18 @@ const doRowItems = (
  * @returns Total width and unset items
  */
 export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
-    return columns.reduce<{ total: number; unset: number }>(
-        (previousValue, currentItem) => {
-            previousValue.total +=
-                currentItem.width ?? currentItem.minWidth ?? minWidth;
-            if (currentItem.width == null) previousValue.unset++;
-            return previousValue;
-        },
-        {
-            total: 0,
-            unset: 0
-        }
-    );
+  return columns.reduce<{ total: number; unset: number }>(
+    (previousValue, currentItem) => {
+      previousValue.total +=
+        currentItem.width ?? currentItem.minWidth ?? minWidth;
+      if (currentItem.width == null) previousValue.unset++;
+      return previousValue;
+    },
+    {
+      total: 0,
+      unset: 0
+    }
+  );
 }
 
 /**
@@ -209,505 +207,492 @@ export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
  * @returns Component
  */
 export function DataGridEx<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: DataGridExProps<T, D>) {
-    // Theme
-    const theme = useTheme();
+  // Theme
+  const theme = useTheme();
 
-    const defaultHeaderRenderer = (states: GridLoaderStates<T>) => {
-        const { orderBy } = states;
-        return (
+  const defaultHeaderRenderer = (states: GridLoaderStates<T>) => {
+    const { orderBy } = states;
+    return (
+      <Box
+        className="DataGridEx-Header"
+        display="flex"
+        alignItems="center"
+        borderBottom={boldBorder}
+        fontWeight={500}
+        minWidth={widthCalculator.total}
+        height={headerHeight}
+      >
+        {columns.map((column, index) => {
+          // Destruct
+          const {
+            align,
+            field,
+            header,
+            headerCellRenderer,
+            sortable,
+            sortAsc = true,
+            type
+          } = column;
+
+          // Header text
+          const headerText = header ?? field;
+
+          // Cell props
+          const cellProps: BoxProps = {};
+
+          // Sortable
+          let sortLabel: React.ReactNode;
+          if (headerCellRenderer) {
+            sortLabel = headerCellRenderer({
+              cellProps,
+              column,
+              columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
+              states
+            });
+          } else if (sortable && field != null) {
+            const active = orderBy === field;
+
+            sortLabel = (
+              <TableSortLabel
+                active={active}
+                direction={sortAsc ? "asc" : "desc"}
+                onClick={(_event) => {
+                  if (active) column.sortAsc = !sortAsc;
+
+                  handleSort(field, column.sortAsc);
+                }}
+              >
+                {headerText}
+              </TableSortLabel>
+            );
+          } else {
+            sortLabel = headerText;
+          }
+
+          return (
             <Box
-                className="DataGridEx-Header"
-                display="flex"
-                alignItems="center"
-                borderBottom={boldBorder}
-                fontWeight={500}
-                minWidth={widthCalculator.total}
-                height={headerHeight}
+              key={field ?? index.toString()}
+              textAlign={GridAlignGet(align, type)}
+              width={columnWidth(index)}
             >
-                {columns.map((column, index) => {
-                    // Destruct
-                    const {
-                        align,
-                        field,
-                        header,
-                        headerCellRenderer,
-                        sortable,
-                        sortAsc = true,
-                        type
-                    } = column;
-
-                    // Header text
-                    const headerText = header ?? field;
-
-                    // Cell props
-                    const cellProps: BoxProps = {};
-
-                    // Sortable
-                    let sortLabel: React.ReactNode;
-                    if (headerCellRenderer) {
-                        sortLabel = headerCellRenderer({
-                            cellProps,
-                            column,
-                            columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
-                            states
-                        });
-                    } else if (sortable && field != null) {
-                        const active = orderBy === field;
-
-                        sortLabel = (
-                            <TableSortLabel
-                                active={active}
-                                direction={sortAsc ? 'asc' : 'desc'}
-                                onClick={(_event) => {
-                                    if (active) column.sortAsc = !sortAsc;
-
-                                    handleSort(field, column.sortAsc);
-                                }}
-                            >
-                                {headerText}
-                            </TableSortLabel>
-                        );
-                    } else {
-                        sortLabel = headerText;
-                    }
-
-                    return (
-                        <Box
-                            key={field ?? index.toString()}
-                            textAlign={GridAlignGet(align, type)}
-                            width={columnWidth(index)}
-                        >
-                            <Box
-                                className="DataGridEx-Cell"
-                                onMouseEnter={handleMouseEnter}
-                                {...cellProps}
-                            >
-                                {sortLabel}
-                            </Box>
-                        </Box>
-                    );
-                })}
+              <Box
+                className="DataGridEx-Cell"
+                onMouseEnter={handleMouseEnter}
+                {...cellProps}
+              >
+                {sortLabel}
+              </Box>
             </Box>
-        );
-    };
+          );
+        })}
+      </Box>
+    );
+  };
 
-    function defaultFooterRenderer(rows: T[], states: GridLoaderStates<T>) {
-        return (
+  function defaultFooterRenderer(rows: T[], states: GridLoaderStates<T>) {
+    return (
+      <Box
+        className="DataGridEx-Footer"
+        display="flex"
+        alignItems="center"
+        borderTop={thinBorder}
+        marginTop="1px"
+        minWidth={widthCalculator.total}
+        height={bottomHeight - 1}
+      >
+        {columns.map((column, index) => {
+          // Destruct
+          const { align, field, type } = column;
+
+          // Cell props
+          const cellProps: BoxProps = {};
+
+          // Cell
+          const cell = footerItemRenderer
+            ? footerItemRenderer(rows, {
+                column,
+                index: checkable ? index - 1 : index, // Ignore the checkbox case
+                states,
+                cellProps,
+                checkable
+              })
+            : undefined;
+
+          return (
             <Box
-                className="DataGridEx-Footer"
-                display="flex"
-                alignItems="center"
-                borderTop={thinBorder}
-                marginTop="1px"
-                minWidth={widthCalculator.total}
-                height={bottomHeight - 1}
+              key={"bottom-" + (field ?? index.toString())}
+              textAlign={GridAlignGet(align, type)}
+              width={columnWidth(index)}
             >
-                {columns.map((column, index) => {
-                    // Destruct
-                    const { align, field, type } = column;
-
-                    // Cell props
-                    const cellProps: BoxProps = {};
-
-                    // Cell
-                    const cell = footerItemRenderer
-                        ? footerItemRenderer(rows, {
-                              column,
-                              index: checkable ? index - 1 : index, // Ignore the checkbox case
-                              states,
-                              cellProps,
-                              checkable
-                          })
-                        : undefined;
-
-                    return (
-                        <Box
-                            key={'bottom-' + (field ?? index.toString())}
-                            textAlign={GridAlignGet(align, type)}
-                            width={columnWidth(index)}
-                        >
-                            <Box
-                                className="DataGridEx-Cell"
-                                onMouseEnter={handleMouseEnter}
-                                {...cellProps}
-                            >
-                                {cell}
-                            </Box>
-                        </Box>
-                    );
-                })}
+              <Box
+                className="DataGridEx-Cell"
+                onMouseEnter={handleMouseEnter}
+                {...cellProps}
+              >
+                {cell}
+              </Box>
             </Box>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  // Destruct
+  const {
+    alternatingColors = [theme.palette.grey[100], undefined],
+    borderRowsCount,
+    bottomHeight = 53,
+    checkable = false,
+    className,
+    columns,
+    defaultOrderBy,
+    height,
+    headerHeight = 56,
+    headerRenderer = defaultHeaderRenderer,
+    footerRenderer = defaultFooterRenderer,
+    footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer,
+    hideFooter = false,
+    hoverColor = "#f6f9fb",
+    idField = "id" as D,
+    mRef = React.createRef(),
+    onClick,
+    onDoubleClick,
+    selectable = true,
+    selectedColor = "#edf4fb",
+    width,
+    ...rest
+  } = props;
+
+  if (checkable) {
+    const cbColumn: GridColumn<T> = {
+      field: "selected" as any, // Avoid validation from data model
+      header: "",
+      sortable: false,
+      width: 50,
+      cellRenderer: ({
+        cellProps,
+        data,
+        selected
+      }: GridCellRendererProps<T, BoxProps>) => {
+        cellProps.sx = {
+          padding: "4px!important"
+        };
+
+        return (
+          <Checkbox
+            color="primary"
+            checked={selected}
+            onChange={(_event, checked) => {
+              refs.current.ref?.selectItem(data, checked);
+            }}
+          />
         );
-    }
+      },
+      headerCellRenderer: ({
+        cellProps,
+        states
+      }: GridHeaderCellRendererProps<T, BoxProps>) => {
+        // 2 = border height
+        const hpad = (headerHeight - 42) / 2;
+        cellProps.sx = {
+          padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
+        };
 
-    // Destruct
-    const {
-        alternatingColors = [theme.palette.grey[100], undefined],
-        borderRowsCount,
-        bottomHeight = 53,
-        checkable = false,
-        className,
-        columns,
-        defaultOrderBy,
-        height,
-        headerHeight = 56,
-        headerRenderer = defaultHeaderRenderer,
-        footerRenderer = defaultFooterRenderer,
-        footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer,
-        hideFooter = false,
-        hoverColor = '#f6f9fb',
-        idField = 'id' as D,
-        mRef = React.createRef(),
-        onClick,
-        onDoubleClick,
-        selectable = true,
-        selectedColor = '#edf4fb',
-        width,
-        ...rest
-    } = props;
-
-    if (checkable) {
-        const cbColumn: GridColumn<T> = {
-            field: 'selected' as any, // Avoid validation from data model
-            header: '',
-            sortable: false,
-            width: 50,
-            cellRenderer: ({
-                cellProps,
-                data,
-                selected
-            }: GridCellRendererProps<T, BoxProps>) => {
-                cellProps.sx = {
-                    padding: '4px!important'
-                };
-
-                return (
-                    <Checkbox
-                        color="primary"
-                        checked={selected}
-                        onChange={(_event, checked) => {
-                            refs.current.ref?.selectItem(data, checked);
-                        }}
-                    />
-                );
-            },
-            headerCellRenderer: ({
-                cellProps,
-                states
-            }: GridHeaderCellRendererProps<T, BoxProps>) => {
-                // 2 = border height
-                const hpad = (headerHeight - 42) / 2;
-                cellProps.sx = {
-                    padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
-                };
-
-                return (
-                    <Checkbox
-                        color="primary"
-                        indeterminate={
-                            states.selectedItems.length > 0 &&
-                            states.selectedItems.length < states.loadedItems
-                        }
-                        checked={states.selectedItems.length > 0}
-                        onChange={(_event, checked) =>
-                            refs.current.ref?.selectAll(checked)
-                        }
-                    />
-                );
+        return (
+          <Checkbox
+            color="primary"
+            indeterminate={
+              states.selectedItems.length > 0 &&
+              states.selectedItems.length < states.loadedItems
             }
-        };
+            checked={states.selectedItems.length > 0}
+            onChange={(_event, checked) => refs.current.ref?.selectAll(checked)}
+          />
+        );
+      }
+    };
 
-        // Update to the latest version
-        if (columns[0].field === 'selected') {
-            columns[0] = cbColumn;
-        } else {
-            columns.unshift(cbColumn);
-        }
+    // Update to the latest version
+    if (columns[0].field === "selected") {
+      columns[0] = cbColumn;
+    } else {
+      columns.unshift(cbColumn);
     }
+  }
+
+  const refs = React.useRef<{ ref?: ScrollerGridForwardRef<T> }>({});
+
+  const mRefLocal = useCombinedRefs(mRef, (ref: ScrollerGridForwardRef<T>) => {
+    if (ref == null) return;
+    refs.current.ref = ref;
+  });
+
+  // New sort
+  const handleSort = (field: string, asc?: boolean) => {
+    reset({ orderBy: field, orderByAsc: asc });
+  };
+
+  // Reset
+  const reset = (add: object) => {
+    refs.current.ref?.reset(add);
+  };
+
+  // Show hover tooltip for trucated text
+  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+    const div = event.currentTarget;
+    const { innerText, offsetWidth, scrollWidth } = div;
+    if (offsetWidth < scrollWidth) {
+      div.title = innerText;
+    } else {
+      div.title = "";
+    }
+  };
 
-    const refs = React.useRef<{ ref?: ScrollerGridForwardRef<T> }>({});
-
-    const mRefLocal = useCombinedRefs(
-        mRef,
-        (ref: ScrollerGridForwardRef<T>) => {
-            if (ref == null) return;
-            refs.current.ref = ref;
-        }
-    );
-
-    // New sort
-    const handleSort = (field: string, asc?: boolean) => {
-        reset({ orderBy: field, orderByAsc: asc });
-    };
-
-    // Reset
-    const reset = (add: object) => {
-        refs.current.ref?.reset(add);
-    };
+  // selectedRowIndex state
+  const selectedRowIndex = React.useRef(-1);
 
-    // Show hover tooltip for trucated text
-    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
-        const div = event.currentTarget;
-        const { innerText, offsetWidth, scrollWidth } = div;
-        if (offsetWidth < scrollWidth) {
-            div.title = innerText;
-        } else {
-            div.title = '';
-        }
-    };
+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    const div = event.currentTarget;
+    const row = div.dataset["row"];
+    if (div.parentElement == null || row == null) return;
 
-    // selectedRowIndex state
-    const selectedRowIndex = React.useRef(-1);
+    const rowIndex = parseFloat(row);
 
-    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-        const div = event.currentTarget;
-        const row = div.dataset['row'];
-        if (div.parentElement == null || row == null) return;
+    // No change
+    if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
 
-        const rowIndex = parseFloat(row);
+    if (selectedRowIndex.current != -1) {
+      doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+        preDiv.classList.remove("DataGridEx-Selected");
+      });
+    }
 
-        // No change
-        if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
+    rowItems(div, (currentDiv) => {
+      currentDiv.classList.add("DataGridEx-Selected");
+    });
 
-        if (selectedRowIndex.current != -1) {
-            doRowItems(
-                div.parentElement,
-                selectedRowIndex.current,
-                (preDiv) => {
-                    preDiv.classList.remove('DataGridEx-Selected');
-                }
-            );
-        }
+    selectedRowIndex.current = rowIndex;
+  };
 
-        rowItems(div, (currentDiv) => {
-            currentDiv.classList.add('DataGridEx-Selected');
-        });
+  const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
+    rowItems(event.currentTarget, (div) => {
+      div.classList.add("DataGridEx-Hover");
+    });
+  };
 
-        selectedRowIndex.current = rowIndex;
+  const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
+    rowItems(event.currentTarget, (div) => {
+      div.classList.remove("DataGridEx-Hover");
+    });
+  };
+
+  /**
+   * Item renderer
+   */
+  const itemRenderer = ({
+    columnIndex,
+    rowIndex,
+    style,
+    data,
+    selectedItems
+  }: ScrollerGridItemRendererProps<T>) => {
+    // Column
+    const {
+      align,
+      cellRenderer = DataGridRenderers.defaultCellRenderer,
+      cellBoxStyle,
+      field,
+      type,
+      valueFormatter,
+      renderProps
+    } = columns[columnIndex];
+
+    // Props
+    const formatProps: GridCellFormatterProps<T> = {
+      data,
+      field,
+      rowIndex,
+      columnIndex
     };
 
-    const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
-        rowItems(event.currentTarget, (div) => {
-            div.classList.add('DataGridEx-Hover');
-        });
-    };
+    let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+    if (
+      borderRowsCount != null &&
+      borderRowsCount > 0 &&
+      (rowIndex + 1) % borderRowsCount === 0
+    ) {
+      rowClass += ` DataGridEx-Cell-Border`;
+    }
 
-    const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
-        rowItems(event.currentTarget, (div) => {
-            div.classList.remove('DataGridEx-Hover');
-        });
+    // Selected
+    const selected =
+      data != null &&
+      (selectedRowIndex.current === rowIndex ||
+        selectedItems.some(
+          (selectedItem) =>
+            selectedItem != null && selectedItem[idField] === data[idField]
+        ));
+
+    if (selected) {
+      rowClass += ` DataGridEx-Selected`;
+    }
+
+    // Box style
+    const boxStyle =
+      data == null || cellBoxStyle == null
+        ? undefined
+        : typeof cellBoxStyle === "function"
+        ? cellBoxStyle(data)
+        : cellBoxStyle;
+
+    const cellProps: BoxProps = {
+      className: "DataGridEx-Cell",
+      textAlign: GridAlignGet(align, type),
+      sx: { ...boxStyle }
     };
 
-    /**
-     * Item renderer
-     */
-    const itemRenderer = ({
-        columnIndex,
-        rowIndex,
-        style,
-        data,
-        selectedItems
-    }: ScrollerGridItemRendererProps<T>) => {
-        // Column
-        const {
-            align,
-            cellRenderer = DataGridRenderers.defaultCellRenderer,
-            field,
-            type,
-            valueFormatter,
-            renderProps
-        } = columns[columnIndex];
-
-        // Props
-        const formatProps: GridCellFormatterProps<T> = {
-            data,
-            field,
-            rowIndex,
-            columnIndex
-        };
+    const child = cellRenderer({
+      data,
+      field,
+      formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
+      selected,
+      type,
+      rowIndex,
+      columnIndex,
+      cellProps,
+      renderProps
+    });
 
-        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
-        if (
-            borderRowsCount != null &&
-            borderRowsCount > 0 &&
-            (rowIndex + 1) % borderRowsCount === 0
-        ) {
-            rowClass += ` DataGridEx-Cell-Border`;
+    return (
+      <div
+        className={rowClass}
+        style={style}
+        data-row={rowIndex}
+        data-column={columnIndex}
+        onMouseDown={selectable && !checkable ? handleMouseDown : undefined}
+        onMouseOver={selectable ? handleMouseOver : undefined}
+        onMouseOut={selectable ? handleMouseOut : undefined}
+        onClick={(event) => onClick && data != null && onClick(event, data)}
+        onDoubleClick={(event) =>
+          onDoubleClick && data != null && onDoubleClick(event, data)
         }
+      >
+        <Box {...cellProps} onMouseEnter={handleMouseEnter}>
+          {child}
+        </Box>
+      </div>
+    );
+  };
+
+  // Column width calculator
+  const widthCalculator = React.useMemo(
+    () => DataGridExCalColumns(columns),
+    [columns]
+  );
+
+  // Column width
+  const columnWidth = React.useCallback(
+    (index: number) => {
+      // Ignore null case
+      if (width == null) return 0;
+
+      // Column
+      const column = columns[index];
+      if (column.width != null) return column.width;
+
+      // More space
+      const leftWidth =
+        width - widthCalculator.total - (width < 800 ? 0 : scrollbarSize);
+
+      // Shared width
+      const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
+
+      return (column.minWidth || minWidth) + sharedWidth;
+    },
+    [columns, width]
+  );
+
+  // Table
+  const table = React.useMemo(() => {
+    const defaultOrderByAsc = defaultOrderBy
+      ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
+      : undefined;
 
-        // Selected
-        const selected =
-            data != null &&
-            (selectedRowIndex.current === rowIndex ||
-                selectedItems.some(
-                    (selectedItem) =>
-                        selectedItem != null &&
-                        selectedItem[idField] === data[idField]
-                ));
-
-        if (selected) {
-            rowClass += ` DataGridEx-Selected`;
+    return (
+      <ScrollerGrid<T, D>
+        className={Utils.mergeClasses(
+          "DataGridEx-Body",
+          "DataGridEx-CustomBar",
+          className,
+          createGridStyle(alternatingColors, selectedColor, hoverColor)
+        )}
+        columnCount={columns.length}
+        columnWidth={columnWidth}
+        defaultOrderBy={defaultOrderBy}
+        defaultOrderByAsc={defaultOrderByAsc}
+        height={
+          height -
+          headerHeight -
+          (hideFooter ? 0 : bottomHeight + 1) -
+          scrollbarSize
         }
-
-        const cellProps: BoxProps = {
-            className: 'DataGridEx-Cell',
-            textAlign: GridAlignGet(align, type)
-        };
-
-        const child = cellRenderer({
-            data,
-            field,
-            formattedValue: valueFormatter
-                ? valueFormatter(formatProps)
-                : undefined,
-            selected,
-            type,
-            rowIndex,
-            columnIndex,
-            cellProps,
-            renderProps
-        });
-
-        return (
-            <div
-                className={rowClass}
-                style={style}
-                data-row={rowIndex}
-                data-column={columnIndex}
-                onMouseDown={
-                    selectable && !checkable ? handleMouseDown : undefined
-                }
-                onMouseOver={selectable ? handleMouseOver : undefined}
-                onMouseOut={selectable ? handleMouseOut : undefined}
-                onClick={(event) =>
-                    onClick && data != null && onClick(event, data)
-                }
-                onDoubleClick={(event) =>
-                    onDoubleClick && data != null && onDoubleClick(event, data)
-                }
-            >
-                <Box {...cellProps} onMouseEnter={handleMouseEnter}>
-                    {child}
-                </Box>
-            </div>
-        );
-    };
-
-    // Column width calculator
-    const widthCalculator = React.useMemo(
-        () => DataGridExCalColumns(columns),
-        [columns]
+        headerRenderer={headerRenderer}
+        idField={idField}
+        itemRenderer={itemRenderer}
+        footerRenderer={hideFooter ? undefined : footerRenderer}
+        width={Math.max(width ?? 0, widthCalculator.total)}
+        mRef={mRefLocal}
+        {...rest}
+      />
     );
+  }, [width]);
 
-    // Column width
-    const columnWidth = React.useCallback(
-        (index: number) => {
-            // Ignore null case
-            if (width == null) return 0;
-
-            // Column
-            const column = columns[index];
-            if (column.width != null) return column.width;
-
-            // More space
-            const leftWidth =
-                width -
-                widthCalculator.total -
-                (width < 800 ? 0 : scrollbarSize);
-
-            // Shared width
-            const sharedWidth =
-                leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
-
-            return (column.minWidth || minWidth) + sharedWidth;
+  return (
+    <Paper
+      sx={{
+        fontSize: "0.875rem",
+        height,
+        "& .DataGridEx-Cell": {
+          padding: 2,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
         },
-        [columns, width]
-    );
-
-    // Table
-    const table = React.useMemo(() => {
-        const defaultOrderByAsc = defaultOrderBy
-            ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
-            : undefined;
-
-        return (
-            <ScrollerGrid<T, D>
-                className={Utils.mergeClasses(
-                    'DataGridEx-Body',
-                    'DataGridEx-CustomBar',
-                    className,
-                    createGridStyle(
-                        alternatingColors,
-                        selectedColor,
-                        hoverColor
-                    )
-                )}
-                columnCount={columns.length}
-                columnWidth={columnWidth}
-                defaultOrderBy={defaultOrderBy}
-                defaultOrderByAsc={defaultOrderByAsc}
-                height={
-                    height -
-                    headerHeight -
-                    (hideFooter ? 0 : bottomHeight + 1) -
-                    scrollbarSize
-                }
-                headerRenderer={headerRenderer}
-                idField={idField}
-                itemRenderer={itemRenderer}
-                footerRenderer={hideFooter ? undefined : footerRenderer}
-                width={Math.max(width ?? 0, widthCalculator.total)}
-                mRef={mRefLocal}
-                {...rest}
-            />
-        );
-    }, [width]);
-
-    return (
-        <Paper
-            sx={{
-                fontSize: '0.875rem',
-                height,
-                '& .DataGridEx-Cell': {
-                    padding: 2,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
-                },
-                '& .DataGridEx-CustomBar': {
-                    '@media (min-width: 800px)': {
-                        '::-webkit-scrollbar': {
-                            width: scrollbarSize,
-                            height: scrollbarSize,
-                            backgroundColor: '#f6f6f6'
-                        },
-                        '::-webkit-scrollbar-thumb': {
-                            backgroundColor: 'rgba(0,0,0,0.4)',
-                            borderRadius: '2px'
-                        },
-                        '::-webkit-scrollbar-track-piece:start': {
-                            background: 'transparent'
-                        },
-                        '::-webkit-scrollbar-track-piece:end': {
-                            background: 'transparent'
-                        }
-                    }
-                }
-            }}
-        >
-            <div
-                className="DataGridEx-CustomBar"
-                style={{
-                    width,
-                    overflowX: 'auto',
-                    overflowY: 'hidden'
-                }}
-            >
-                {table}
-            </div>
-        </Paper>
-    );
+        "& .DataGridEx-CustomBar": {
+          "@media (min-width: 800px)": {
+            "::-webkit-scrollbar": {
+              width: scrollbarSize,
+              height: scrollbarSize,
+              backgroundColor: "#f6f6f6"
+            },
+            "::-webkit-scrollbar-thumb": {
+              backgroundColor: "rgba(0,0,0,0.4)",
+              borderRadius: "2px"
+            },
+            "::-webkit-scrollbar-track-piece:start": {
+              background: "transparent"
+            },
+            "::-webkit-scrollbar-track-piece:end": {
+              background: "transparent"
+            }
+          }
+        }
+      }}
+    >
+      <div
+        className="DataGridEx-CustomBar"
+        style={{
+          width,
+          overflowX: "auto",
+          overflowY: "hidden"
+        }}
+      >
+        {table}
+      </div>
+    </Paper>
+  );
 }