@addev-be/ui 0.19.2 → 0.19.4

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

@@ -59,18 +59,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGrid = void 0;
+var constants_1 = require("../constants");
 var react_1 = require("react");
 var _1 = require(".");
 var helpers_1 = require("../helpers");
-var lodash_1 = require("lodash");
+var useDataGridChangedRows_1 = require("./useDataGridChangedRows");
 var useDataGridSettings_1 = require("./useDataGridSettings");
 var useDataGrid = function (props, override) {
-    var _a;
-    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, onSelectionChange = props.onSelectionChange, onSelectedRowsChanged = props.onSelectedRowsChanged, selectable = props.selectable, initialSorts = props.initialSorts;
-    var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
+    var _a, _b, _c, _d;
+    var onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, onSelectionChange = props.onSelectionChange, onSelectedRowsChanged = props.onSelectedRowsChanged, selectable = props.selectable, initialSorts = props.initialSorts;
+    var _e = (0, react_1.useState)(props.columns), columns = _e[0], setColumns = _e[1];
     var visibleColumns = (0, _1.useSortedColumns)(columns);
+    var _f = (0, react_1.useState)((_a = override === null || override === void 0 ? void 0 : override.rows) !== null && _a !== void 0 ? _a : props.rows), innerRows = _f[0], setInnerRows = _f[1];
+    var _g = [
+        (_b = override === null || override === void 0 ? void 0 : override.rows) !== null && _b !== void 0 ? _b : innerRows,
+        (_c = override === null || override === void 0 ? void 0 : override.setRows) !== null && _c !== void 0 ? _c : setInnerRows,
+    ], rows = _g[0], setRows = _g[1];
     /** SETTINGS */
-    var _c = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _c.settings, setSettings = _c.setSettings, saveSettings = _c.saveSettings;
+    var _h = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _h.settings, setSettings = _h.setSettings, saveSettings = _h.saveSettings;
     var setColumnWidth = (0, react_1.useCallback)(function (key, width) {
         setSettings(function (prev) {
             var _a;
@@ -78,15 +84,11 @@ var useDataGrid = function (props, override) {
         });
     }, [setSettings]);
     var gridTemplateColumns = (0, react_1.useMemo)(function () {
-        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-8)'] : []), true), visibleColumns.map(function (_a) {
-            var _b;
-            var col = _a[1];
-            return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
-        }), true).join(' ');
+        return __spreadArray(__spreadArray([], (selectable ? [constants_1.SELECTION_CELL_WIDTH] : []), true), visibleColumns.map(function (col) { var _a; return "".concat((_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH, "px"); }), true).join(' ');
     }, [selectable, visibleColumns]);
     // Update columns when settings change
     (0, react_1.useEffect)(function () {
-        setColumns(function (prev) { return (0, lodash_1.merge)({}, prev, settings); });
+        setColumns(function (prev) { return prev.map(function (col) { return (__assign(__assign({}, col), settings[col.key])); }); });
     }, [settings]);
     /** ROWS SELECTION **/
     var rowKeyGetter = (0, react_1.useMemo)(function () {
@@ -94,7 +96,7 @@ var useDataGrid = function (props, override) {
             ? props.rowKey
             : function (row) { return String(row === null || row === void 0 ? void 0 : row[props.rowKey]); };
     }, [props.rowKey]);
-    var _d = (0, react_1.useState)([]), selectedKeys = _d[0], setSelectedKeys = _d[1];
+    var _j = (0, react_1.useState)([]), selectedKeys = _j[0], setSelectedKeys = _j[1];
     var selectedRows = (0, react_1.useMemo)(function () { return props.rows.filter(function (row) { return selectedKeys.includes(rowKeyGetter(row)); }); }, [props.rows, rowKeyGetter, selectedKeys]);
     (0, react_1.useEffect)(function () {
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedKeys);
@@ -111,8 +113,8 @@ var useDataGrid = function (props, override) {
         }
     }, [selectedKeys, setSelectedKeys]);
     /** ROWS FILTERING **/
-    var _e = (0, react_1.useState)({}), filters = _e[0], setFilters = _e[1];
-    var _f = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _f[0], setFilteredRows = _f[1];
+    var _k = (0, react_1.useState)({}), filters = _k[0], setFilters = _k[1];
+    var _l = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _l[0], setFilteredRows = _l[1];
     (0, react_1.useEffect)(function () {
         onFiltersChanged === null || onFiltersChanged === void 0 ? void 0 : onFiltersChanged(filters);
     }, [filters, onFiltersChanged]);
@@ -126,17 +128,21 @@ var useDataGrid = function (props, override) {
         setFilteredRows(filteredRows !== null && filteredRows !== void 0 ? filteredRows : []);
     }, [filters, props.filter, rows]);
     /** CELL EDITING */
-    var _g = (0, react_1.useState)([-1, -1]), editingCell = _g[0], setEditingCell = _g[1];
+    var _m = (0, react_1.useState)([-1, -1]), editingCell = _m[0], setEditingCell = _m[1];
+    var onRowAdded = (0, react_1.useCallback)(function (row) {
+        setRows(function (prev) { return __spreadArray([row], prev, true); });
+    }, [setRows]);
+    var _o = (0, useDataGridChangedRows_1.useDataGridChangedRows)(onRowAdded), addedRows = _o.addedRows, updatedRows = _o.updatedRows, editRow = _o.editRow, addRow = _o.addRow, updateRow = _o.updateRow, clearChangedRows = _o.clearChangedRows;
     /** ROWS SORTING **/
-    var _h = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _h[0], setSorts = _h[1];
-    var _j = (0, react_1.useState)(rows), sortedRows = _j[0], setSortedRows = _j[1];
+    var _p = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _p[0], setSorts = _p[1];
+    var _q = (0, react_1.useState)(rows), sortedRows = _q[0], setSortedRows = _q[1];
     (0, react_1.useEffect)(function () {
         var sortedRows = __spreadArray([], filteredRows, true);
         if (props.sort !== false) {
             Object.entries(sorts).forEach(function (_a) {
                 var sortKey = _a[0], sort = _a[1];
                 // Get the sort column and make sure it exists and is sortable
-                var sortColumn = columns[sortKey];
+                var sortColumn = columns.find(function (col) { return col.key === sortKey; });
                 if (!sortColumn || typeof sortColumn.sortGetter !== 'function')
                     return;
                 // Sort the rows using the sortGetter function of the column
@@ -157,12 +163,33 @@ var useDataGrid = function (props, override) {
     }, [sorts, onSortsChanged]);
     /** VIRTUAL SCROLLING */
     var scrollableRef = (0, react_1.useRef)(null);
+    /** RESIZING */
+    var _r = (0, react_1.useState)(null), resizingColumnKey = _r[0], setResizingColumnKey = _r[1];
+    var resizingOffset = (0, react_1.useRef)(0);
+    var startResizing = (0, react_1.useCallback)(function (e, columnKey) {
+        var resizingColumn = columns.find(function (col) { return col.key === columnKey; });
+        if (resizingColumn) {
+            resizingOffset.current =
+                e.screenX - ((resizingColumn === null || resizingColumn === void 0 ? void 0 : resizingColumn.width) || constants_1.DEFAULT_COLUMN_WIDTH);
+            setResizingColumnKey(columnKey);
+        }
+    }, [columns]);
+    var moveResizing = (0, react_1.useCallback)(function (e) {
+        if (resizingColumnKey) {
+            var newWidth = Math.max(86, e.screenX - resizingOffset.current);
+            setColumnWidth(resizingColumnKey, newWidth);
+        }
+    }, [resizingColumnKey, setColumnWidth]);
+    var endResizing = (0, react_1.useCallback)(function () {
+        setResizingColumnKey(null);
+        saveSettings();
+    }, [saveSettings]);
     /** FOOTERS */
-    var _k = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _k[0], setFooters = _k[1];
+    var _s = (0, react_1.useState)((_d = props.initialFooters) !== null && _d !== void 0 ? _d : {}), footers = _s[0], setFooters = _s[1];
     var footerFunctions = (0, react_1.useMemo)(function () {
         return Object.entries(footers).reduce(function (acc, _a) {
             var columnKey = _a[0], footerKey = _a[1];
-            var column = columns[columnKey];
+            var column = columns.find(function (col) { return col.key === columnKey; });
             if (!column) {
                 return acc;
             }
@@ -184,7 +211,7 @@ var useDataGrid = function (props, override) {
         footerFunctions: footerFunctions,
         loadCopyRows: loadCopyRows,
     }).copyTable;
-    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, scrollableRef: scrollableRef, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions, toggleSelection: toggleSelection }), override)); }, [
+    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, scrollableRef: scrollableRef, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions, toggleSelection: toggleSelection, resizingColumnKey: resizingColumnKey, startResizing: startResizing, moveResizing: moveResizing, endResizing: endResizing, addedRows: addedRows, updatedRows: updatedRows, editRow: editRow, addRow: addRow, updateRow: updateRow, clearChangedRows: clearChangedRows, setRows: setRows }), override)); }, [
         props,
         columns,
         visibleColumns,
@@ -199,18 +226,28 @@ var useDataGrid = function (props, override) {
         settings,
         setSettings,
         saveSettings,
-        scrollableRef,
         rowKeyGetter,
         gridTemplateColumns,
         footers,
         footerFunctions,
         toggleSelection,
+        resizingColumnKey,
+        startResizing,
+        moveResizing,
+        endResizing,
+        addedRows,
+        updatedRows,
+        editRow,
+        addRow,
+        updateRow,
+        clearChangedRows,
+        setRows,
         override,
     ]);
     var context = (0, react_1.useMemo)(function () {
         return (0, react_1.createContext)({
             rows: [],
-            columns: {},
+            columns: [],
             visibleColumns: [],
             rowKey: '',
             rowKeyGetter: function () { return ''; },
@@ -234,6 +271,17 @@ var useDataGrid = function (props, override) {
             footers: {},
             setFooters: function () { },
             toggleSelection: function () { },
+            resizingColumnKey: null,
+            startResizing: function () { },
+            moveResizing: function () { },
+            endResizing: function () { },
+            addedRows: {},
+            updatedRows: {},
+            setRows: function () { },
+            editRow: function () { },
+            addRow: function () { },
+            updateRow: function () { },
+            clearChangedRows: function () { },
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);

package/dist/components/data/DataGrid/hooks/useDataGridChangedRows.d.ts

@@ -0,0 +1,9 @@
+import { DataGridEditedRows } from '../types';
+export declare const useDataGridChangedRows: <R>(onRowAdded: (row: R) => void) => {
+    addedRows: DataGridEditedRows<R>;
+    updatedRows: DataGridEditedRows<R>;
+    editRow: (key: string, row: Partial<R>) => void;
+    addRow: (key: string, row: R) => void;
+    updateRow: (key: string, row: Partial<R>) => void;
+    clearChangedRows: (keys?: string[]) => void;
+};

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

@@ -0,0 +1,71 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridChangedRows = void 0;
+var react_1 = require("react");
+var lodash_1 = require("lodash");
+var useDataGridChangedRows = function (onRowAdded) {
+    var _a = (0, react_1.useState)({}), addedRows = _a[0], setAddedRows = _a[1];
+    var _b = (0, react_1.useState)({}), updatedRows = _b[0], setUpdatedRows = _b[1];
+    var addRow = (0, react_1.useCallback)(function (key, row) {
+        setAddedRows(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
+        });
+        onRowAdded(row);
+    }, [onRowAdded]);
+    var updateRow = (0, react_1.useCallback)(function (key, row) {
+        setUpdatedRows(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
+        });
+    }, []);
+    var editRow = (0, react_1.useCallback)(function (key, row) {
+        if (addedRows[key]) {
+            setAddedRows(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), row), _a)));
+            });
+        }
+        else if (updatedRows[key]) {
+            setUpdatedRows(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), row), _a)));
+            });
+        }
+        else {
+            setUpdatedRows(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
+            });
+        }
+    }, [addedRows, updatedRows]);
+    var clearChangedRows = (0, react_1.useCallback)(function (keys) {
+        if (!keys) {
+            setAddedRows({});
+            setUpdatedRows({});
+            return;
+        }
+        setAddedRows(function (prev) { return (0, lodash_1.pickBy)(prev, function (_, key) { return !keys.includes(key); }); });
+        setUpdatedRows(function (prev) { return (0, lodash_1.pickBy)(prev, function (_, key) { return !keys.includes(key); }); });
+    }, []);
+    return {
+        addedRows: addedRows,
+        updatedRows: updatedRows,
+        editRow: editRow,
+        addRow: addRow,
+        updateRow: updateRow,
+        clearChangedRows: clearChangedRows,
+    };
+};
+exports.useDataGridChangedRows = useDataGridChangedRows;

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

@@ -52,8 +52,7 @@ 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(visibleColumns
-            .map(function (_a) {
-            var col = _a[1];
+            .map(function (col) {
             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>");
@@ -61,29 +60,32 @@ var useDataGridCopy = function (_a) {
     var generateFootersHtml = (0, react_1.useCallback)(function (rowsToCopy) {
         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>");
+            .map(function (col) {
+            var _a, _b;
+            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat((_b = (_a = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _a === void 0 ? void 0 : _a.call(footerFunctions, rowsToCopy, rowsToCopy, [])) !== null && _b !== void 0 ? _b : '', "\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 _a, _b;
+        return ((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.valueGetter)
+            ? col.excelOptions.valueGetter(value)
+            : (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : '';
     }, []);
-    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 generateCellHtml = (0, react_1.useCallback)(function (col, value) {
+        var _a, _b;
+        return "<td style=\"\n        ".concat(((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.formatter)
+            ? "mso-number-format: '" + col.excelOptions.formatter(col) + "';"
+            : '', "\n        ").concat(((_b = col.excelOptions) === null || _b === void 0 ? void 0 : _b.colorGetter)
+            ? "background-color: '" + col.excelOptions.colorGetter(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(visibleColumns
-                .map(function (_a) {
-                var col = _a[1];
-                var value = col.getter && row ? col.getter(row) : '';
+                .map(function (col) {
+                var value = row ? col.getter(row) : '';
                 return generateCellHtml(col, value);
             })
                 .join('\n'), "\n                    </tr>");
@@ -91,18 +93,11 @@ var useDataGridCopy = function (_a) {
             .join('\n'), "\n                  ").concat(includeFooters ? generateFootersHtml(rowsToCopy) : '', "\n            </table>\n        ");
     }, [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]);
     var generateHeadersText = (0, react_1.useCallback)(function () {
-        return visibleColumns.map(function (_a) {
-            var col = _a[1];
-            return col.name;
-        }).join('\t');
+        return visibleColumns.map(function (col) { return col.name; }).join('\t');
     }, [visibleColumns]);
     var generateFootersText = (0, react_1.useCallback)(function (rowsToCopy) {
         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 : '';
-        })
+            .map(function (col) { var _a, _b; return (_b = (_a = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _a === void 0 ? void 0 : _a.call(footerFunctions, rowsToCopy, [], [])) !== null && _b !== void 0 ? _b : ''; })
             .join('\t');
     }, [footerFunctions, visibleColumns]);
     var generateCopyText = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
@@ -110,11 +105,11 @@ var useDataGridCopy = function (_a) {
             includeHeaders ? generateHeadersText() : ''
         ], (rowsToCopy || []).map(function (row) {
             return visibleColumns
-                .map(function (_a) {
-                var col = _a[1];
-                var value = col.getter && row ? col.getter(row) : '';
-                return col.excelValue
-                    ? col.excelValue(value)
+                .map(function (col) {
+                var _a;
+                var value = row ? col.getter(row) : '';
+                return ((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.valueGetter)
+                    ? col.excelOptions.valueGetter(value)
                     : value != null && value !== undefined
                         ? value.toString()
                         : '';

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

@@ -33,15 +33,25 @@ 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 = exports.DataGridInner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var react_1 = require("react");
+var constants_1 = require("./constants");
+var VirtualScroller_1 = require("../VirtualScroller");
 var DataGridFooter_1 = require("./DataGridFooter");
 var DataGridHeader_1 = require("./DataGridHeader");
 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 */
@@ -50,14 +60,17 @@ var DataGridInner = function (_a, ref) {
     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 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;
+    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _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, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing;
     (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 fixedColumnWidths = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], (selectable ? [constants_1.SELECTION_CELL_WIDTH] : []), true), Object.values(columns)
+        .slice(0, fixedColumnsCount !== null && fixedColumnsCount !== void 0 ? fixedColumnsCount : 0)
+        .map(function (col) { var _a; return (_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH; }), true); }, [columns, fixedColumnsCount, selectable]);
     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 })] }) }));
+    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, "$fixedColumnWidths": fixedColumnWidths, children: [resizingColumnKey && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: moveResizing, onMouseUp: endResizing })), (0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { integrated: true, gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
 };
 exports.DataGridInner = DataGridInner;
 exports.DataGrid = (0, react_1.forwardRef)(exports.DataGridInner);

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

@@ -1,8 +1,5 @@
+import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-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 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;
@@ -11,14 +8,19 @@ type DataGridHeaderCellContainerProps = {
     $headerColor?: ThemeColor;
 };
 export declare const DataGridHeaderCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridHeaderCellContainerProps>> & string;
-export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridHeaderTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const dataGridCellCss: import("styled-components").RuleSet<DataGridCellFCProps>;
+export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridCellFCProps>> & string;
+export declare const DataGridHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DataGridToolsRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridToolsRowButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DataGridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $headerRowHeight?: number;
     $rowHeight?: number;
     $rowsCount: number;
     $showToolsHeader?: boolean;
     $withFooter?: boolean;
+    $fixedColumnWidths?: (string | number)[];
 }>> & string;
 type DataGridHeaderOrFooterRowProps = {
     $headerRowHeight?: number;
@@ -31,11 +33,14 @@ export declare const DataGridHeaderRow: import("styled-components/dist/types").I
 export declare const DataGridFooterRow: 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;
 }>, DataGridHeaderOrFooterRowProps>, never>> & string;
-export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+type DataGridRowProps = {
+    $edited?: boolean;
+};
+export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridRowProps>> & string;
+export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, "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>> & string;
-export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, "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>> & string;
 export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, "ref"> & {