@etsoo/materialui 1.5.71 → 1.5.72

package/lib/cjs/TableEx.js

@@ -34,7 +34,7 @@ function TableEx(props) {
     // Theme
     const theme = (0, styles_1.useTheme)();
     // Destruct
-    const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
+    const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onDataChange, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
     const selectable = onSelectChange != null;
     // Rows per page
     let rowsPerPageLocal;
@@ -90,6 +90,9 @@ function TableEx(props) {
         });
     };
     react_2.default.useImperativeHandle(mRef, () => ({
+        get element() {
+            return null;
+        },
         delete(index) {
             const item = rows.at(index);
             if (item) {
@@ -104,20 +107,11 @@ function TableEx(props) {
             newRows.splice(start, 0, item);
             setRows(newRows);
         },
-        /**
-         * Refresh data
-         */
         refresh() {
             loadDataLocal();
         },
-        /**
-         * Reset
-         */
         reset,
-        scrollToRef(scrollOffset) {
-            // Not implemented
-        },
-        scrollToItemRef(index) {
+        scrollToRow(param) {
             // Not implemented
         }
     }), []);
@@ -291,7 +285,7 @@ function TableEx(props) {
                                                 rowIndex,
                                                 columnIndex,
                                                 cellProps,
-                                                setItems
+                                                triggerChange: () => onDataChange?.(rows, rowIndex, columnIndex)
                                             })) : ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, { children: "\u00A0" }));
                                             return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
                                         })] }, rowId));

package/lib/cjs/pages/DataGridPage.js

@@ -33,9 +33,10 @@ function DataGridPage(props) {
         if (ref == null)
             return;
         states.ref = ref;
+        if (ref.element)
+            setStates({ element: ref.element });
         //setStates({ ref });
     });
-    const initLoadedRef = react_2.default.useRef(null);
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });
@@ -45,33 +46,6 @@ function DataGridPage(props) {
     };
     // Search data
     const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollLeft, scrollTop } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onGridScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     // Watch container
     const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -96,10 +70,7 @@ function DataGridPage(props) {
         const gridHeight = states.height;
         if (gridHeight == null)
             return;
-        return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
-                if (element != null)
-                    setStates({ element });
-            }, ...rest }));
+        return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, ...rest }));
     }, [states.height]);
     const { ref, data } = states;
     react_2.default.useEffect(() => {

package/lib/cjs/pages/FixedListPage.js

@@ -25,7 +25,6 @@ function FixedListPage(props) {
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
-    const initLoadedRef = react_2.default.useRef(null);
     // Scroll container
     const [scrollContainer, updateScrollContainer] = react_2.default.useState();
     const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
@@ -33,6 +32,8 @@ function FixedListPage(props) {
             return;
         const first = states.ref == null;
         states.ref = ref;
+        if (ref.element)
+            updateScrollContainer(ref.element);
         if (first)
             reset();
     });
@@ -49,35 +50,6 @@ function FixedListPage(props) {
     const localLoadData = (props, lastItem) => {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
-    // Search data
-    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollOffset } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onListScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     // Watch container
     const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -92,12 +64,11 @@ function FixedListPage(props) {
                         : adjustHeight(height, rect);
             return ((0, jsx_runtime_1.jsx)(Box_1.default, { id: "list-container", sx: {
                     height: height + "px"
-                }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
-                        if (element != null)
-                            updateScrollContainer(element);
-                    }, ...rest }) }));
+                }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, ...rest }) }));
         }
     }, [rect]);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout

package/lib/cjs/pages/ListPage.js

@@ -33,7 +33,6 @@ function ListPage(props) {
         if (first)
             reset();
     });
-    const initLoadedRef = react_2.default.useRef(null);
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;
@@ -52,36 +51,9 @@ function ListPage(props) {
     const rect = dimensions[0][2];
     // Search data
     const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollOffset } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onListScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest })] }) }));
 }

package/lib/cjs/pages/ResponsivePage.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import type { DataGridPageProps } from "./DataGridPageProps";
-import type { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "../ScrollerListEx";
-import { ListChildComponentProps } from "react-window";
+import type { ScrollerListExItemSize, ScrollerListExProps } from "../ScrollerListEx";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
@@ -19,14 +18,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Min width to show Datagrid
      */
     dataGridMinWidth?: number;
-    /**
-     * Inner item renderer
-     */
-    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
     /**
      * Item renderer
      */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
     /**
      * Item size, a function indicates its a variable size list
      */

package/lib/cjs/uses/useGridCacheInitLoad.d.ts

@@ -0,0 +1,2 @@
+import { ScrollerGridProps } from "@etsoo/react";
+export declare function useGridCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerGridProps<T>["onInitLoad"];

package/lib/cjs/uses/useGridCacheInitLoad.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridCacheInitLoad = useGridCacheInitLoad;
+const react_1 = require("@etsoo/react");
+const react_2 = __importDefault(require("react"));
+const GridUtils_1 = require("../GridUtils");
+const shared_1 = require("@etsoo/shared");
+function useGridCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = react_2.default.useRef(null);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+        // Update flag value
+        ref.current = true;
+        return (ref) => {
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const data = JSON.parse(scrollData);
+                shared_1.ExtendUtils.waitFor(() => ref.scrollToCell({
+                    rowIndex: data.rowStartIndex,
+                    columnIndex: data.columnStartIndex
+                }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

package/lib/cjs/uses/useListCacheInitLoad.d.ts

@@ -0,0 +1,2 @@
+import { ScrollerListProps } from "@etsoo/react";
+export declare function useListCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerListProps<T>["onInitLoad"];

package/lib/cjs/uses/useListCacheInitLoad.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListCacheInitLoad = useListCacheInitLoad;
+const react_1 = require("@etsoo/react");
+const react_2 = __importDefault(require("react"));
+const GridUtils_1 = require("../GridUtils");
+const shared_1 = require("@etsoo/shared");
+function useListCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = react_2.default.useRef(null);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+        // Update flag value
+        ref.current = true;
+        return (ref) => {
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const data = JSON.parse(scrollData);
+                shared_1.ExtendUtils.waitFor(() => ref.scrollToRow({ index: data.startIndex }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

package/lib/mjs/DataGridEx.d.ts

@@ -14,7 +14,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
+export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "cellComponent" | "columnCount" | "columnWidth" | "onClick" | "onDoubleClick" | "onInitLoad" | "width"> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -70,6 +70,13 @@ export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadD
      * Click handler
      */
     onClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Data change handler
+     * @param rows Rows
+     * @param rowIndex Row index
+     * @param columnIndex Column index
+     */
+    onDataChange?: (rows: T[], rowIndex: number, columnIndex: number) => void;
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true

package/lib/mjs/DataGridEx.js

@@ -9,6 +9,8 @@ import Box from "@mui/material/Box";
 import TableSortLabel from "@mui/material/TableSortLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Paper from "@mui/material/Paper";
+import { GridUtils } from "./GridUtils";
+import { useGridCacheInitLoad } from "./uses/useGridCacheInitLoad";
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
 const thinBorder = "1px solid rgba(224, 224, 224, 1)";
@@ -128,7 +130,7 @@ export function DataGridEx(props) {
             }) }));
     }
     // 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", mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, cacheKey, cacheMinutes = 15, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDataChange, onDoubleClick, onUpdateRows, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
             field: "selected", // Avoid validation from data model
@@ -161,6 +163,8 @@ export function DataGridEx(props) {
             columns.unshift(cbColumn);
         }
     }
+    // Init handler
+    const initHandler = useGridCacheInitLoad(cacheKey, cacheMinutes);
     const refs = React.useRef({});
     const mRefLocal = useCombinedRefs(mRef, (ref) => {
         if (ref == null)
@@ -219,57 +223,6 @@ export function DataGridEx(props) {
             div.classList.remove("DataGridEx-Hover");
         });
     };
-    /**
-     * Item renderer
-     */
-    const itemRenderer = ({ columnIndex, rowIndex, style, data, selectedItems, setItems }) => {
-        // Column
-        const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
-        // Props
-        const formatProps = {
-            data,
-            field,
-            rowIndex,
-            columnIndex
-        };
-        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
-        if (borderRowsCount != null &&
-            borderRowsCount > 0 &&
-            (rowIndex + 1) % borderRowsCount === 0) {
-            rowClass += ` DataGridEx-Cell-Border`;
-        }
-        // 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 = {
-            className: "DataGridEx-Cell",
-            textAlign: GridAlignGet(align, type),
-            sx: { ...boxStyle }
-        };
-        const child = cellRenderer({
-            data,
-            field,
-            formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
-            selected,
-            type,
-            rowIndex,
-            columnIndex,
-            cellProps,
-            renderProps: typeof renderProps === "function" ? renderProps(data) : renderProps,
-            setItems
-        });
-        return (_jsx("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), children: _jsx(Box, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
-    };
     // Column width calculator
     const widthCalculator = React.useMemo(() => DataGridExCalColumns(columns), [columns]);
     // Column width
@@ -287,12 +240,74 @@ export function DataGridEx(props) {
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
     }, [columns, width]);
+    const onUpdateRowsHandler = React.useCallback((rows, state) => {
+        GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
+        onUpdateRows?.(rows, state);
+    }, [onUpdateRows, cacheKey]);
     // Table
     const table = React.useMemo(() => {
-        return (_jsx(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, 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 }));
+        return (_jsx(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), onCellsRendered: cacheKey
+                ? (visibleCells) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleCells))
+                : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, cellComponent: ({ rowIndex, columnIndex, style, rows, states }) => {
+                // Column
+                const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
+                // Data
+                const data = rows[rowIndex];
+                // Props
+                const formatProps = {
+                    data,
+                    field,
+                    rowIndex,
+                    columnIndex
+                };
+                let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+                if (borderRowsCount != null &&
+                    borderRowsCount > 0 &&
+                    (rowIndex + 1) % borderRowsCount === 0) {
+                    rowClass += ` DataGridEx-Cell-Border`;
+                }
+                // Selected
+                const selected = data != null &&
+                    (selectedRowIndex.current === rowIndex ||
+                        states.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 = {
+                    className: "DataGridEx-Cell",
+                    textAlign: GridAlignGet(align, type),
+                    sx: { ...boxStyle }
+                };
+                const child = cellRenderer({
+                    data,
+                    field,
+                    formattedValue: valueFormatter
+                        ? valueFormatter(formatProps)
+                        : undefined,
+                    selected,
+                    type,
+                    rowIndex,
+                    columnIndex,
+                    cellProps,
+                    renderProps: typeof renderProps === "function"
+                        ? renderProps(data)
+                        : renderProps,
+                    triggerChange: () => onDataChange?.(rows, rowIndex, columnIndex)
+                });
+                return (_jsx("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), children: _jsx(Box, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
+            }, columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, height: typeof height === "number"
+                ? height -
+                    headerHeight -
+                    (hideFooter ? 0 : bottomHeight + 1) -
+                    scrollbarSize
+                : height, headerRenderer: headerRenderer, idField: idField, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
     return (_jsx(Paper, { sx: {
             fontSize: "0.875rem",

package/lib/mjs/DataGridRenderers.d.ts

@@ -10,7 +10,7 @@ export declare namespace DataGridRenderers {
      * @param param Props
      * @returns Component
      */
-    function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }: GridCellRendererProps<T>): React.ReactNode;
+    function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps, triggerChange }: GridCellRendererProps<T>): React.ReactNode;
     /**
      * Default footer item renderer
      * @param rows Rows

package/lib/mjs/DataGridRenderers.js

@@ -15,7 +15,7 @@ export var DataGridRenderers;
      * @param param Props
      * @returns Component
      */
-    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }) {
+    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps, triggerChange }) {
         // Is loading
         if (data == null) {
             // First column, show loading indicator

package/lib/mjs/MUUtils.d.ts

@@ -1,5 +1,3 @@
-import { QueryRQ } from "@etsoo/appscript";
-import { IdType } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/internals";
 /**
  * MU utilities
@@ -12,11 +10,4 @@ export declare namespace MUUtils {
      * @returns Results
      */
     function getGridData<T>(grid: GridApiCommunity, checkField: keyof T | ((item: T) => boolean)): T[];
-    /**
-     * Setup paging keysets
-     * @param data Paging data
-     * @param lastItem Last item of the query
-     * @param idField Id field
-     */
-    function setupPagingKeysets<T, K extends IdType = number>(data: QueryRQ<K>, lastItem: T | undefined, idField: keyof T & string): QueryRQ<K>;
 }

package/lib/mjs/MUUtils.js

@@ -26,30 +26,4 @@ export var MUUtils;
         return items;
     }
     MUUtils.getGridData = getGridData;
-    /**
-     * Setup paging keysets
-     * @param data Paging data
-     * @param lastItem Last item of the query
-     * @param idField Id field
-     */
-    function setupPagingKeysets(data, lastItem, idField) {
-        // If the id field is not set for ordering, add it with descending
-        if (typeof data.queryPaging === "object") {
-            const orderBy = (data.queryPaging.orderBy ??= []);
-            const idUpper = idField.toUpperCase();
-            if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
-                orderBy.push({ field: idField, desc: true, unique: true });
-            }
-            // Set the paging keysets
-            if (lastItem) {
-                const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
-                data.queryPaging.keysets = keysets;
-            }
-            else {
-                data.queryPaging.keysets = undefined;
-            }
-        }
-        return data;
-    }
-    MUUtils.setupPagingKeysets = setupPagingKeysets;
 })(MUUtils || (MUUtils = {}));

package/lib/mjs/MobileListItemRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ListItemReact } from "@etsoo/react";
 import React from "react";
-import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
+import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -8,7 +8,7 @@ import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/mjs/ResponsibleContainer.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import { ListChildComponentProps } from "react-window";
 import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
-import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
+import { ScrollerListExItemSize, ScrollerListExProps } from "./ScrollerListEx";
 import { SxProps, Theme } from "@mui/material/styles";
 /**
  * ResponsibleContainer props
@@ -41,14 +40,10 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * Grid height
      */
     height?: number;
-    /**
-     * Inner item renderer
-     */
-    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
     /**
      * Item renderer
      */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
     /**
      * Item size, a function indicates its a variable size list
      */