@addev-be/ui 0.2.6 → 0.2.7

package/dist/components/data/DataGrid/helpers/columns.js

@@ -19,12 +19,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var numbers_1 = require("../../../../helpers/numbers");
 var filters_1 = require("./filters");
 var moment_1 = __importDefault(require("moment"));
+var lodash_1 = require("lodash");
 var isColumnVisible = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1; };
 exports.isColumnVisible = isColumnVisible;
+var buildExcelFormat = function (decimals, suffix) {
+    if (decimals === void 0) { decimals = 2; }
+    if (suffix === void 0) { suffix = ''; }
+    return "#0".concat(decimals > 0 ? ".".concat((0, lodash_1.repeat)('0', decimals)) : '').concat(suffix);
+};
 var textColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.textColumn = textColumn;
@@ -36,7 +42,7 @@ var mailColumn = function (key, title, options) {
                 return ((0, jsx_runtime_1.jsx)("a", { 
                     // className="text-blue-500 hover:text-blue-700"
                     href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.mailColumn = mailColumn;
@@ -48,21 +54,21 @@ var phoneColumn = function (key, title, options) {
                 return ((0, jsx_runtime_1.jsx)("a", { 
                     // className="text-blue-500 hover:text-blue-700"
                     href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.phoneColumn = phoneColumn;
 var dateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.dateColumn = dateColumn;
 var monthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.monthColumn = monthColumn;
@@ -70,12 +76,22 @@ var numberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (value) { return value !== null && value !== void 0 ? value : 0; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: {
+                sum: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0), decimals);
+                },
+                average: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0) /
+                        (filteredRows.length || 1), decimals);
+                },
+                count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
+                max: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(Math.max.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+                min: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(Math.min.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+            }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.numberColumn = numberColumn;
@@ -83,21 +99,60 @@ var moneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return buildExcelFormat(decimals, ' €'); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+                sum: function (_, filteredRows) {
+                    return (0, numbers_1.formatMoney)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0), decimals);
+                },
+                average: function (_, filteredRows) {
+                    return (0, numbers_1.formatMoney)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0) /
+                        (filteredRows.length || 1), decimals);
+                },
+                count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
+                max: function (_, filteredRows) {
+                    return (0, numbers_1.formatMoney)(Math.max.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+                min: function (_, filteredRows) {
+                    return (0, numbers_1.formatMoney)(Math.min.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+            } }, options),
         _a);
 };
 exports.moneyColumn = moneyColumn;
-var percentageColumn = function (key, title, options) {
+var percentageColumn = function (key, title, decimals, options) {
     var _a;
+    if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return buildExcelFormat(decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
+                average: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0) /
+                        (filteredRows.length || 1), decimals);
+                },
+                count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
+                max: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(Math.max.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+                min: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(Math.min.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
+                },
+                sum: function (_, filteredRows) {
+                    return (0, numbers_1.formatNumber)(filteredRows.reduce(function (acc, row) { var _a; return acc + ((_a = row[key]) !== null && _a !== void 0 ? _a : 0); }, 0), decimals);
+                },
+            } }, options),
         _a);
 };
 exports.percentageColumn = percentageColumn;
 var checkboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
+                count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
+                checked: function (_, filteredRows) {
+                    return "".concat(filteredRows.filter(function (row) { return !!row[key]; }).length, " coch\u00E9s");
+                },
+                unchecked: function (_, filteredRows) {
+                    return "".concat(filteredRows.filter(function (row) { return !row[key]; }).length, " d\u00E9coch\u00E9s");
+                },
+            } }, options),
         _a);
 };
 exports.checkboxColumn = checkboxColumn;
@@ -107,7 +162,7 @@ var colorColumn = function (key, title, options) {
         _a[key] = __assign({ name: title, render: function (row) {
                 var _a;
                 return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key), footer: function (rows) { return "".concat(rows.length, " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.colorColumn = colorColumn;

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

@@ -1,2 +1,2 @@
 import { DataGridContext, DataGridContextProps, DataGridProps } from '../types';
-export declare const useDataGrid: <R>(props: DataGridProps<R>) => [DataGridContextProps<R>, DataGridContext<R>];
+export declare const useDataGrid: <R>(props: DataGridProps<R>, override?: Partial<DataGridContextProps<R>>) => [DataGridContextProps<R>, DataGridContext<R>];

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

@@ -66,12 +66,13 @@ var helpers_1 = require("../helpers");
 var lodash_1 = require("lodash");
 var useDataGridSettings_1 = require("./useDataGridSettings");
 var hooks_1 = require("../../../../hooks");
-var useDataGrid = function (props) {
-    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _a = props.rowHeight, rowHeight = _a === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _a, onVisibleRowsChange = props.onVisibleRowsChange, onSelectionChange = props.onSelectionChange, selectable = props.selectable, initialSorts = props.initialSorts;
-    var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
+var useDataGrid = function (props, override) {
+    var _a;
+    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _b = props.rowHeight, rowHeight = _b === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _b, onVisibleRowsChange = props.onVisibleRowsChange, onSelectionChange = props.onSelectionChange, selectable = props.selectable, initialSorts = props.initialSorts;
+    var _c = (0, react_1.useState)(props.columns), columns = _c[0], setColumns = _c[1];
     var visibleColumns = (0, _1.useSortedColumns)(columns);
     /** SETTINGS */
-    var _c = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _c.settings, setSettings = _c.setSettings, saveSettings = _c.saveSettings;
+    var _d = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _d.settings, setSettings = _d.setSettings, saveSettings = _d.saveSettings;
     var setColumnWidth = (0, react_1.useCallback)(function (key, width) {
         setSettings(function (prev) {
             var _a;
@@ -79,7 +80,7 @@ var useDataGrid = function (props) {
         });
     }, [setSettings]);
     var gridTemplateColumns = (0, react_1.useMemo)(function () {
-        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-8)'] : []), true), visibleColumns.map(function (_a) {
+        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-10)'] : []), true), visibleColumns.map(function (_a) {
             var _b;
             var col = _a[1];
             return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
@@ -95,14 +96,14 @@ var useDataGrid = function (props) {
             ? 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 _e = (0, react_1.useState)([]), selectedKeys = _e[0], setSelectedKeys = _e[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);
     }, [onSelectionChange, selectedKeys]);
     /** 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 _f = (0, react_1.useState)({}), filters = _f[0], setFilters = _f[1];
+    var _g = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _g[0], setFilteredRows = _g[1];
     (0, react_1.useEffect)(function () {
         onFiltersChanged === null || onFiltersChanged === void 0 ? void 0 : onFiltersChanged(filters);
     }, [filters, onFiltersChanged]);
@@ -116,10 +117,10 @@ var useDataGrid = function (props) {
         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 _h = (0, react_1.useState)([-1, -1]), editingCell = _h[0], setEditingCell = _h[1];
     /** 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 _j = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _j[0], setSorts = _j[1];
+    var _k = (0, react_1.useState)(rows), sortedRows = _k[0], setSortedRows = _k[1];
     (0, react_1.useEffect)(function () {
         var sortedRows = __spreadArray([], filteredRows, true);
         if (props.sort !== false) {
@@ -148,10 +149,10 @@ var useDataGrid = function (props) {
     /** VIRTUAL SCROLLING */
     var scrollableRef = (0, react_1.useRef)(null);
     var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
-    var _k = (0, react_1.useState)(0), scrollTop = _k[0], setScrollTop = _k[1];
-    var _l = 
+    var _l = (0, react_1.useState)(0), scrollTop = _l[0], setScrollTop = _l[1];
+    var _m = 
     // props.showAllRows ? [0, sortedRows.length] :
-    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)], index = _l[0], length = _l[1];
+    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)], index = _m[0], length = _m[1];
     var onScroll = (0, react_1.useCallback)(function (e) {
         var target = e.target;
         setScrollTop(target.scrollTop);
@@ -162,29 +163,56 @@ var useDataGrid = function (props) {
     (0, react_1.useEffect)(function () {
         onVisibleRowsChange === null || onVisibleRowsChange === void 0 ? void 0 : onVisibleRowsChange(indexWithTolerance, lengthWithTolerance);
     }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
+    /** FOOTERS */
+    var _o = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _o[0], setFooters = _o[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];
+            if (!column) {
+                return acc;
+            }
+            if (typeof column.footer === 'function') {
+                acc[columnKey] = column.footer;
+            }
+            else if (typeof column.footer === 'object' &&
+                typeof column.footer[footerKey] === 'function') {
+                acc[columnKey] = column.footer[footerKey];
+            }
+            return acc;
+        }, {});
+    }, [columns, footers]);
     /** COPYING */
-    var copyTable = (0, _1.useDataGridCopy)(sortedRows, columns, loadCopyRows).copyTable;
-    var contextValue = (0, react_1.useMemo)(function () { return (__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, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns })); }, [
-        columns,
-        copyTable,
-        editingCell,
-        filters,
-        index,
-        length,
-        onScroll,
+    var copyTable = (0, _1.useDataGridCopy)({
+        rows: rows,
+        visibleColumns: visibleColumns,
+        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, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions }), override)); }, [
         props,
-        rowKeyGetter,
-        saveSettings,
-        selectedKeys,
+        columns,
+        visibleColumns,
+        sortedRows,
         selectedRows,
+        selectedKeys,
+        sorts,
+        filters,
+        editingCell,
+        copyTable,
         setColumnWidth,
-        setSettings,
         settings,
-        sortedRows,
-        sorts,
-        visibleColumns,
+        setSettings,
+        saveSettings,
         visibleRows,
+        onScroll,
+        index,
+        length,
+        rowKeyGetter,
         gridTemplateColumns,
+        footers,
+        footerFunctions,
+        override,
     ]);
     var context = (0, react_1.useMemo)(function () {
         return (0, react_1.createContext)({
@@ -214,6 +242,8 @@ var useDataGrid = function (props) {
             index: 0,
             length: 0,
             gridTemplateColumns: '',
+            footers: {},
+            setFooters: function () { },
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);

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

@@ -1,4 +1,4 @@
-import { DataGridColumns } from '../types';
-export declare const useDataGridCopy: <R>(rows: R[], columns: DataGridColumns<R>, loadCopyRows?: () => Promise<R[]>) => {
+import { DataGridContextProps } from '../types';
+export declare const useDataGridCopy: <R>({ rows, visibleColumns, loadCopyRows, footerFunctions, }: Pick<DataGridContextProps<R>, "rows" | "visibleColumns" | "loadCopyRows" | "footerFunctions">) => {
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
 };

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

@@ -48,23 +48,26 @@ 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>\n            ".concat(Object.values(columns !== null && columns !== void 0 ? columns : {})
-            .map(function (col) {
-            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat(col.footer
-                ? col.footer(rowsToCopy, rowsToCopy, [])
-                : '', "\n                    </td>");
+        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>");
-    }, [columns]);
+    }, [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 : '';
@@ -75,33 +78,38 @@ var useDataGridCopy = function (rows, columns, loadCopyRows) {
     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 !== null && columns !== void 0 ? columns : {})
-            .map(function (col) {
-            return col.footer ? col.footer(rowsToCopy, 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 : '';
         })
             .join('\t');
-    }, [columns]);
+    }, [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)
@@ -114,29 +122,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([
@@ -145,8 +147,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,2 +1,4 @@
-import { DataGridProps } from './types';
-export declare const DataGrid: <R>(props: DataGridProps<R>) => import("react/jsx-runtime").JSX.Element;
+import { DataGridContextProps, DataGridProps } from './types';
+export declare const DataGrid: <R>({ contextOverride, ...props }: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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)) {
@@ -54,23 +65,22 @@ var react_1 = require("react");
 var hooks_1 = require("./hooks");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-var DataGrid = function (props) {
+var DataGrid = function (_a) {
+    var contextOverride = _a.contextOverride, props = __rest(_a, ["contextOverride"]);
     var className = props.className, 
     // onRowDoubleClick,
     onVisibleRowsChange = props.onVisibleRowsChange;
-    var _a = (0, hooks_1.useDataGrid)(props), contextProps = _a[0], DataGridContext = _a[1];
-    var selectedKeys = contextProps.selectedKeys, setSelectedKeys = contextProps.setSelectedKeys, columns = contextProps.columns, visibleColumns = contextProps.visibleColumns, _b = contextProps.rowHeight, rowHeight = _b === void 0 ? 32 : _b, _c = contextProps.headerRowHeight, headerRowHeight = _c === void 0 ? 40 : _c, scrollableRef = contextProps.scrollableRef, onScroll = contextProps.onScroll, rowKeyGetter = contextProps.rowKeyGetter;
+    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 hasFooter = Object.values(columns).some(function (col) { return col.footer; });
-    var setRowSelection = (0, react_1.useCallback)(function (row, selected) {
-        var key = rowKeyGetter(row);
-        if (selected) {
-            if (!selectedKeys.includes(key))
-                setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
+    var toggleSelection = (0, react_1.useCallback)(function (key) {
+        if (selectedKeys.includes(key)) {
+            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
         }
         else {
-            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
+            setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
         }
-    }, [rowKeyGetter, selectedKeys, setSelectedKeys]);
+    }, [selectedKeys, setSelectedKeys]);
     var rowTemplate = (0, react_1.useCallback)(function (row, rowIndex) {
         var _a, _b;
         if (!row) {
@@ -81,7 +91,7 @@ var DataGrid = function (props) {
             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, { children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selectedKeys.includes(key), onChange: function (e) { return setRowSelection(row, e.target.checked); } }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
+        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));
@@ -90,7 +100,7 @@ var DataGrid = function (props) {
         props,
         rowKeyGetter,
         selectedKeys,
-        setRowSelection,
+        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 })] }) }));

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

@@ -32,13 +32,17 @@ export declare const DataGridContainer: import("styled-components/dist/types").I
     $rowsCount: number;
     $showToolsHeader?: boolean;
 }>> & string;
-export declare const DataGridHeaderRow: 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;
-}>, {
+type DataGridHeaderOrFooterRowProps = {
     $headerRowHeight?: number;
     $headerColor?: ThemeColor;
     $gridTemplateColumns: string;
-}>, never>> & string;
+};
+export declare const DataGridHeaderRow: 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 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"> & {
     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;