@addev-be/ui 0.7.0 → 0.7.1

package/dist/components/data/DataGrid/hooks/useDataGridCopy.js

@@ -48,72 +48,70 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGridCopy = void 0;
 var react_1 = require("react");
-var useDataGridCopy = function (rows, columns, loadCopyRows) {
+var useDataGridCopy = function (_a) {
+    var rows = _a.rows, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? [] : _b, loadCopyRows = _a.loadCopyRows, footerFunctions = _a.footerFunctions;
     var generateHeadersHtml = (0, react_1.useCallback)(function () {
-        return "<tr>\n            ".concat(Object.values(columns !== null && columns !== void 0 ? columns : {})
-            .map(function (col) {
+        return "<tr>\n            ".concat(visibleColumns
+            .map(function (_a) {
+            var col = _a[1];
             return "<th style=\"\n                        text-align: left;\n                        font-weight: bold;\n                        white-space: nowrap;\n                    \">\n                        ".concat(col.name, "\n                    </th>");
         })
             .join('\n'), "\n        </tr>");
-    }, [columns]);
+    }, [visibleColumns]);
     var generateFootersHtml = (0, react_1.useCallback)(function (rowsToCopy) {
-        // return `<tr>
-        //       ${Object.values(columns ?? {})
-        //         .map(
-        //           (col) =>
-        //             `<td style="
-        //                 font-weight: bold;
-        //                 white-space: nowrap;
-        //               ">
-        //                   ${
-        //                     col.footer
-        //                       ? col.footer(rowsToCopy, rowsToCopy, [])
-        //                       : ''
-        //                   }
-        //               </td>`
-        //         )
-        //         .join('\n')}
-        //   </tr>`;
-        return '';
-    }, [columns]);
+        console.log('generate footers html');
+        return "<tr>\n            ".concat(visibleColumns
+            .map(function (_a) {
+            var _b, _c;
+            var colKey = _a[0];
+            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat((_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, rowsToCopy, [])) !== null && _c !== void 0 ? _c : '', "\n                    </td>");
+        })
+            .join('\n'), "\n        </tr>");
+    }, [footerFunctions, visibleColumns]);
     var generateCellText = (0, react_1.useCallback)(function (col, value) {
         var _a;
         return col.excelValue ? col.excelValue(value) : (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '';
     }, []);
     var generateCellHtml = (0, react_1.useCallback)(function (col, value) { return "<td style=\"\n        ".concat(col.excelFormatter
         ? "mso-number-format: '" + col.excelFormatter(col) + "';"
+        : '', "\n        ").concat(col.excelBackgroundColor
+        ? "background-color: '" + col.excelBackgroundColor(value) + "';"
         : '', "\n        white-space: nowrap;\n      \">\n        ").concat(generateCellText(col, value), "\n      </td>"); }, [generateCellText]);
     var generateCopyHtml = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
         return "\n            <table>\n                ".concat(includeHeaders ? generateHeadersHtml() : '', "\n                ").concat((rowsToCopy || [])
             .map(function (row) {
-            return "<tr>\n                        ".concat(Object.values(columns !== null && columns !== void 0 ? columns : {})
-                .map(function (col) {
+            return "<tr>\n                        ".concat(visibleColumns
+                .map(function (_a) {
+                var col = _a[1];
                 var value = col.getter && row ? col.getter(row) : '';
                 return generateCellHtml(col, value);
             })
                 .join('\n'), "\n                    </tr>");
         })
             .join('\n'), "\n                  ").concat(includeFooters ? generateFootersHtml(rowsToCopy) : '', "\n            </table>\n        ");
-    }, [columns, generateCellHtml, generateFootersHtml, generateHeadersHtml]);
+    }, [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]);
     var generateHeadersText = (0, react_1.useCallback)(function () {
-        return Object.values(columns !== null && columns !== void 0 ? columns : {})
-            .map(function (col) { return col.name; })
-            .join('\t');
-    }, [columns]);
+        return visibleColumns.map(function (_a) {
+            var col = _a[1];
+            return col.name;
+        }).join('\t');
+    }, [visibleColumns]);
     var generateFootersText = (0, react_1.useCallback)(function (rowsToCopy) {
-        // return Object.values(columns ?? {})
-        //   .map((col) =>
-        //     col.footer ? col.footer(rowsToCopy, rowsToCopy, []) : ''
-        //   )
-        //   .join('\t');
-        return '';
-    }, [columns]);
+        return visibleColumns
+            .map(function (_a) {
+            var _b, _c;
+            var colKey = _a[0];
+            return (_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, [], [])) !== null && _c !== void 0 ? _c : '';
+        })
+            .join('\t');
+    }, [footerFunctions, visibleColumns]);
     var generateCopyText = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
         return __spreadArray(__spreadArray([
             includeHeaders ? generateHeadersText() : ''
         ], (rowsToCopy || []).map(function (row) {
-            return Object.values(columns !== null && columns !== void 0 ? columns : {})
-                .map(function (col) {
+            return visibleColumns
+                .map(function (_a) {
+                var col = _a[1];
                 var value = col.getter && row ? col.getter(row) : '';
                 return col.excelValue
                     ? col.excelValue(value)
@@ -126,29 +124,23 @@ var useDataGridCopy = function (rows, columns, loadCopyRows) {
             includeFooters ? generateFootersText(rowsToCopy) : '',
         ], false).filter(function (s) { return s != null; })
             .join('\n');
-    }, [columns, generateFootersText, generateHeadersText]);
+    }, [visibleColumns, generateFootersText, generateHeadersText]);
     var copyTable = (0, react_1.useCallback)(function () {
         var args_1 = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args_1[_i] = arguments[_i];
         }
         return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (includeHeaders, includeFooters) {
-            var rowsToCopy, _a, copyHtml, copyText;
+            var rowsToCopy, copyHtml, copyText;
             if (includeHeaders === void 0) { includeHeaders = true; }
             if (includeFooters === void 0) { includeFooters = true; }
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!loadCopyRows) return [3 /*break*/, 2];
-                        return [4 /*yield*/, loadCopyRows()];
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (loadCopyRows !== null && loadCopyRows !== void 0 ? loadCopyRows : (function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, rows];
+                        }); }); }))()];
                     case 1:
-                        _a = _b.sent();
-                        return [3 /*break*/, 3];
-                    case 2:
-                        _a = rows;
-                        _b.label = 3;
-                    case 3:
-                        rowsToCopy = _a;
+                        rowsToCopy = _a.sent();
                         copyHtml = generateCopyHtml(rowsToCopy, includeHeaders, includeFooters);
                         copyText = generateCopyText(rowsToCopy, includeHeaders, includeFooters);
                         return [4 /*yield*/, navigator['clipboard'].write([
@@ -157,8 +149,8 @@ var useDataGridCopy = function (rows, columns, loadCopyRows) {
                                     'text/html': new Blob([copyHtml], { type: 'text/html' }),
                                 }),
                             ])];
-                    case 4:
-                        _b.sent();
+                    case 2:
+                        _a.sent();
                         return [2 /*return*/];
                 }
             });

package/dist/components/data/DataGrid/index.d.ts

@@ -1,4 +1,8 @@
-import { DataGridContextProps, DataGridProps } from './types';
-export declare const DataGrid: <R>({ contextOverride, ...props }: DataGridProps<R> & {
+import { ForwardedRef } from 'react';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
+export declare const DataGridInner: <R>({ contextOverride, ...props }: DataGridProps<R> & {
     contextOverride?: Partial<DataGridContextProps<R>>;
-}) => import("react/jsx-runtime").JSX.Element;
+}, ref: ForwardedRef<DataGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGrid: <R>(props: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+} & import("react").RefAttributes<DataGridRefProps>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,65 +33,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGrid = void 0;
+exports.DataGrid = exports.DataGridInner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
-var DataGridCell_1 = require("./DataGridCell");
+var react_1 = require("react");
 var DataGridFooter_1 = require("./DataGridFooter");
 var DataGridHeader_1 = require("./DataGridHeader");
-var VirtualScroller_1 = require("./VirtualScroller");
-var react_1 = require("react");
+var DataGridRowTemplate_1 = require("./DataGridRowTemplate");
+var VirtualScroller_1 = require("../VirtualScroller");
 var hooks_1 = require("./hooks");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-var DataGrid = function (_a) {
+var DataGridInner = function (_a, ref) {
     var contextOverride = _a.contextOverride, props = __rest(_a, ["contextOverride"]);
-    var className = props.className, 
-    // onRowDoubleClick,
-    onVisibleRowsChange = props.onVisibleRowsChange;
+    var scrollableRef = (0, react_1.useRef)(null);
+    var className = props.className;
     var _b = (0, hooks_1.useDataGrid)(props, contextOverride), contextProps = _b[0], DataGridContext = _b[1];
-    var selectedKeys = contextProps.selectedKeys, setSelectedKeys = contextProps.setSelectedKeys, columns = contextProps.columns, visibleColumns = contextProps.visibleColumns, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? 32 : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, scrollableRef = contextProps.scrollableRef, onScroll = contextProps.onScroll, rowKeyGetter = contextProps.rowKeyGetter;
+    var columns = contextProps.columns, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? 32 : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        refresh: refresh !== null && refresh !== void 0 ? refresh : (function () { }),
+        setSelectedKeys: setSelectedKeys,
+    }); }, [refresh, setSelectedKeys]);
     var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
-    var toggleSelection = (0, react_1.useCallback)(function (key) {
-        if (selectedKeys.includes(key)) {
-            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
-        }
-        else {
-            setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
-        }
-    }, [selectedKeys, setSelectedKeys]);
-    var rowTemplate = (0, react_1.useCallback)(function (row, rowIndex) {
-        var _a, _b;
-        if (!row) {
-            return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(rowIndex, "-").concat(index))); })] }, "loading-row-".concat(rowIndex)));
-        }
-        var key = rowKeyGetter(row);
-        var _c = (_b = (_a = props.rowClassNameGetter) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : {
-            className: '',
-            style: undefined,
-        }, className = _c.className, style = _c.style;
-        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { onClick: function () { return toggleSelection(key); }, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selectedKeys.includes(key), readOnly: true }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
-                    var key = _a[0], col = _a[1];
-                    return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (index === 0 ? { className: className, style: style } : {}), { row: row, rowIndex: rowIndex, column: col, columnIndex: index, context: DataGridContext, columnKey: key }), "loading-".concat(rowIndex, "-").concat(index)));
-                })] }, key));
-    }, [
-        DataGridContext,
-        props,
-        rowKeyGetter,
-        selectedKeys,
-        toggleSelection,
-        visibleColumns,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, onScroll: onScroll, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, className: className, children: [(0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { onRangeChange: onVisibleRowsChange, hasFooter: hasFooter, rowTemplate: rowTemplate, context: DataGridContext }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
+    var rowTemplate = DataGridRowTemplate_1.DataGridRowTemplate;
+    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, "$withFooter": hasFooter, className: className, children: [(0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: styles.DEFAULT_ROW_HEIGHT, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
 };
-exports.DataGrid = DataGrid;
+exports.DataGridInner = DataGridInner;
+exports.DataGrid = (0, react_1.forwardRef)(exports.DataGridInner);

package/dist/components/data/DataGrid/styles.d.ts

@@ -1,21 +1,8 @@
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export declare const VIRTUAL_SCROLL_TOLERANCE = 20;
 export declare const TOOLBAR_HEIGHT = 40;
 export declare const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export declare const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export declare const DEFAULT_ROW_HEIGHT = 32;
-export declare const DEFAULT_FILTER_ROW_HEIGHT = 24;
-export declare const TopPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BottomPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $height: number;
-}>> & string;
-export declare const VirtualScrollerRowsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, {
-    $gridTemplateColumns: string;
-    $topPadding: number;
-    $rowHeight?: number;
-}>, never>> & string;
 export declare const DataGridResizeGrip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $headerColor?: ThemeColor;
 }>> & string;
@@ -31,6 +18,7 @@ export declare const DataGridContainer: import("styled-components/dist/types").I
     $rowHeight?: number;
     $rowsCount: number;
     $showToolsHeader?: boolean;
+    $withFooter?: boolean;
 }>> & string;
 type DataGridHeaderOrFooterRowProps = {
     $headerRowHeight?: number;
@@ -56,9 +44,4 @@ export declare const HeaderSelectionCell: import("styled-components/dist/types")
 export declare const ResizeBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;
-export declare const FilterValuesScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, never>, {
-    $rowHeight?: number;
-}>> & string;
 export {};

package/dist/components/data/DataGrid/styles.js

@@ -27,51 +27,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterValuesScrollerContainer = exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
+exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_FOOTER_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.VIRTUAL_SCROLL_TOLERANCE = 20;
+var styles_1 = require("../VirtualScroller/styles");
 exports.TOOLBAR_HEIGHT = 40;
 exports.DEFAULT_HEADER_ROW_HEIGHT = 40;
+exports.DEFAULT_FOOTER_ROW_HEIGHT = 40;
 exports.DEFAULT_ROW_HEIGHT = 32;
-exports.DEFAULT_FILTER_ROW_HEIGHT = 24;
-exports.TopPaddingRow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-exports.BottomPaddingRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-exports.VirtualScrollerContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"], ["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"])), function (_a) {
-    var $height = _a.$height;
-    return "".concat($height, "px");
-});
-exports.VirtualScrollerRowsContainer = styled_components_1.default.div.attrs(function (_a) {
-    var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
-    var rowHeightValue = "".concat($rowHeight, "px");
-    return {
-        style: {
-            top: "".concat($topPadding, "px"),
-            gridTemplateColumns: $gridTemplateColumns,
-            gridAutoRows: rowHeightValue,
-        },
-    };
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), exports.TopPaddingRow, exports.BottomPaddingRow);
-exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
+exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "], ["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "], ["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "])));
 });
-exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
+exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
     var $isResizing = _a.$isResizing;
     return ($isResizing ? 1 : 0);
 }, function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "])));
 }, exports.DataGridResizeGrip);
 exports.DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-exports.DataGridCell = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"], ["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"])));
+exports.DataGridCell = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"], ["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"])));
 exports.DataGridCell.displayName = 'DataGridCell';
-exports.DataGridToolsRow = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"])));
+exports.DataGridToolsRow = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"])));
 exports.DataGridToolsRow.displayName = 'DataGridToolsRow';
-exports.DataGridContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"], ["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"])), function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
-    return "".concat(exports.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto");
+exports.DataGridContainer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"], ["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"])), function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b, _c = _a.$withFooter, $withFooter = _c === void 0 ? false : _c;
+    return "".concat(exports.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto ").concat($withFooter ? exports.DEFAULT_FOOTER_ROW_HEIGHT + 'px' : '');
 }, exports.DataGridToolsRow, exports.TOOLBAR_HEIGHT, exports.DataGridHeaderCellContainer, function (_a) {
     var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
@@ -84,15 +67,15 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_13 ||
 }, function (_a) {
     var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
-}, exports.VirtualScrollerContainer);
+}, styles_1.VirtualScrollerContainer);
 exports.DataGridContainer.displayName = 'DataGridContainer';
-var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
     var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
+        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
 });
 exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -101,7 +84,7 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, exports.TOOLBAR_HEIGHT);
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, exports.TOOLBAR_HEIGHT);
 exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -110,25 +93,19 @@ exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
 exports.DataGridFooterRow.displayName = 'DataGridFooterRow';
-exports.DataGridRow = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+exports.DataGridRow = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
 exports.DataGridRow.displayName = 'DataGridRow';
-exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
+exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
 exports.LoadingCell.displayName = 'LoadingCell';
-var selectionCellStyle = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+var selectionCellStyle = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
+exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.SelectionCell.displayName = 'SelectionCell';
-exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.HeaderSelectionCell.displayName = 'HeaderSelectionCell';
 exports.ResizeBackdrop = styled_components_1.default.div.attrs({
     className: 'ResizeBackdrop',
-})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
 exports.ResizeBackdrop.displayName = 'ResizeBackdrop';
-exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
-    className: 'FilterValuesScrollerContainer',
-})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), function (_a) {
-    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
-    return "".concat($rowHeight, "px");
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

package/dist/components/data/DataGrid/types.d.ts

@@ -6,12 +6,13 @@ export type DataGridCellFC = FC<{
     onDoubleClick?: MouseEventHandler;
     style?: CSSProperties;
 }>;
-export type DataGridFooterPredefinedFunction = 'average' | 'count' | 'max' | 'min' | 'sum';
+export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';
 export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
 export type DataGridColumn<R> = {
     component?: DataGridCellFC;
     editable?: boolean;
     excelFormatter?: (value: any) => string;
+    excelBackgroundColor?: (value: any) => string;
     excelValue?: (value: any) => string;
     filter?: DataGridFilter;
     footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
@@ -38,6 +39,7 @@ export type DataGridProps<R> = {
     editable?: boolean;
     onRowDoubleClick?: (row: R, e: MouseEvent) => void;
     onSelectionChange?: (keys: string[]) => void;
+    onSelectedRowsChanged?: (rows: R[]) => void;
     getAllIds?: () => Promise<string[]>;
     onFiltersChanged?: (filters: DataGridFilters) => void;
     onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
@@ -79,13 +81,10 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     saveSettings: (newSettings?: DataGridSettings) => void;
     settings: DataGridSettings;
     setSettings: Dispatch<SetStateAction<DataGridSettings>>;
-    visibleRows: R[];
-    scrollableRef: React.RefObject<HTMLDivElement>;
-    onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-    index: number;
     length: number;
     rowKeyGetter: (row: R) => string;
     gridTemplateColumns: string;
+    toggleSelection: (key: string) => void;
 };
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
 export declare const dataGridSettingCodec: t.PartialC<{
@@ -131,6 +130,7 @@ export type DataGridFilterOperators<K extends string, T> = {
     [key in K]: DataGridFilterPredicateBuilder<T>;
 };
 export type DataGridFilterPredicates = {
+    date: DataGridFilterOperators<'before' | 'after' | 'equals' | 'notEquals' | 'inRange' | 'inArray', string>;
     text: DataGridFilterOperators<'contains' | 'notContains' | 'equals' | 'notEquals' | 'startsWith' | 'endsWith' | 'inArray', string>;
     number: DataGridFilterOperators<'equals' | 'notEquals' | 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'inRange' | 'inArray', number>;
 };
@@ -150,13 +150,23 @@ export type DataGridFilter<T extends string = DataGridFilterType> = T extends Da
 } : never;
 export type DataGridFilterGroup = {
     name: string;
-    values?: (string | number | null)[];
+    displayValue: DataGridFilterValue;
+    values?: DataGridFilterValue[];
     groups?: DataGridFilterGroup[];
 };
 export type DataGridFilterValue = string | number | null;
 export type DataGridFilterCheckbox = {
     displayValue: ReactNode;
     title: string;
-    value: DataGridFilterValue;
+    values: DataGridFilterValue[];
     level: number;
 };
+export type DataGridRowTemplateProps<R> = {
+    selected?: boolean;
+    toggleSelection?: () => void;
+    context: DataGridContext<R>;
+};
+export type DataGridRefProps = {
+    refresh: () => void;
+    setSelectedKeys: (keys: string[]) => void;
+};

package/dist/components/data/SqlRequestDataGrid/helpers/columns.d.ts

@@ -8,6 +8,7 @@ export declare const sqlComposedColumn: <R extends Record<string, any>>(key: str
 export declare const sqlMailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlPhoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlDateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
+export declare const sqlDateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlMonthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlNumberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlMoneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;