@addev-be/ui 0.20.1 → 0.20.3

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

@@ -14,10 +14,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateTimeColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.buildExcelFormat = exports.isColumnVisible = void 0;
+exports.colorColumn = exports.selectColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateTimeColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.buildExcelFormat = exports.isColumnVisible = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var filters_1 = require("./filters");
 var numbers_1 = require("../../../../helpers/numbers");
+var CheckboxEditableCell_1 = require("../DataGridEditableCell/CheckboxEditableCell");
+var DateEditableCell_1 = require("../DataGridEditableCell/DateEditableCell");
+var NumberEditableCell_1 = require("../DataGridEditableCell/NumberEditableCell");
+var Select_1 = require("../../../forms/Form/Select");
+var TextEditableCell_1 = require("../DataGridEditableCell/TextEditableCell");
 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; };
@@ -28,149 +34,113 @@ var buildExcelFormat = function (decimals, suffix) {
     return "#0".concat(decimals > 0 ? ".".concat((0, lodash_1.repeat)('0', decimals)) : '').concat(suffix);
 };
 exports.buildExcelFormat = buildExcelFormat;
-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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
-        _a);
-};
+var textColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', 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), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.textColumn = textColumn;
-var mailColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
-        _a);
-};
+var mailColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { 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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.mailColumn = mailColumn;
-var phoneColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
-        _a);
-};
+var phoneColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { 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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.phoneColumn = phoneColumn;
-var dateColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, type: 'date', render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return 'dd/mm/yyyy'; }, excelValue: function (date) { var _a; return (_a = (0, moment_1.default)(date).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: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var dateColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
+        formatter: function () { return 'dd/mm/yyyy'; },
+        valueGetter: function (value) { var _a; return (_a = (0, moment_1.default)(value).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: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; } }), editComponent: DateEditableCell_1.DateEditableCell }, otherOptions)); };
 exports.dateColumn = dateColumn;
-var dateTimeColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, type: 'date', render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return 'dd/mm/yyyy hh:mm:ss'; }, excelValue: function (date) { var _a; return (_a = (0, moment_1.default)(date).format('DD/MM/YYYY HH:mm:ss')) !== 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: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; } }) }, options),
-        _a);
-};
+var dateTimeColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
+        formatter: function () { return 'dd/mm/yyyy hh:mm:ss'; },
+        valueGetter: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== 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: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; } }), editComponent: DateEditableCell_1.DateEditableCell }, otherOptions)); };
 exports.dateTimeColumn = dateTimeColumn;
-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 : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
-        _a);
-};
+var monthColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', 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) }, otherOptions)); };
 exports.monthColumn = monthColumn;
-var numberColumn = function (key, title, decimals, options) {
-    var _a;
+var numberColumn = function (key, title, decimals, otherOptions) {
     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 (0, exports.buildExcelFormat)(decimals); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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 : ''; }, 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);
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
+            formatter: function () { return (0, exports.buildExcelFormat)(decimals); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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 : ''; }, 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 : ''; } }), editComponent: (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, props))); }) }, otherOptions);
+    return column;
 };
 exports.numberColumn = numberColumn;
-var moneyColumn = function (key, title, decimals, options) {
-    var _a;
+var moneyColumn = function (key, title, decimals, otherOptions) {
     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, exports.buildExcelFormat)(decimals, ' €'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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);
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
+            formatter: function () { return (0, exports.buildExcelFormat)(decimals, ' €'); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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);
+            },
+        } }, otherOptions);
+    return column;
 };
 exports.moneyColumn = moneyColumn;
-var percentageColumn = function (key, title, decimals, options) {
-    var _a;
+var percentageColumn = function (key, title, decimals, otherOptions) {
     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, exports.buildExcelFormat)(decimals, '%'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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);
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
+            formatter: function () { return (0, exports.buildExcelFormat)(decimals, '%'); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, 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);
+            },
+        } }, otherOptions);
+    return column;
 };
 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], readOnly: true }), (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);
-};
+var checkboxColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'checkbox', 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], readOnly: true }), (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");
+        },
+    }, editComponent: CheckboxEditableCell_1.CheckboxEditableCell }, otherOptions)); };
 exports.checkboxColumn = checkboxColumn;
-var colorColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _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), footer: function (rows) { return "".concat(rows.length, " \u00E9l\u00E9ments"); } }, options),
-        _a);
-};
+var selectColumn = function (key, title, items, itemKey, itemLabel, otherOptions) { return (__assign({ key: key, type: 'select', name: title, render: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : null; }, sortGetter: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), items: items, itemKey: itemKey, itemLabel: itemLabel, editComponent: (0, react_1.forwardRef)(function (_a, ref) {
+        var value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
+        return ((0, jsx_runtime_1.jsx)(Select_1.Select, { ref: ref, items: items, itemKey: itemKey, itemLabel: itemLabel, value: value, onChange: onChange, onBlur: function () { return onClose(true); } }));
+    }) }, otherOptions)); };
+exports.selectColumn = selectColumn;
+var colorColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'color', 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), footer: function (rows) { return "".concat(rows.length, " \u00E9l\u00E9ments"); } }, otherOptions)); };
 exports.colorColumn = colorColumn;

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

@@ -1,7 +1,7 @@
 import { DataGridColumns, DataGridContext } from '../types';
+export { useDataGrid } from './useDataGrid';
 export { useDataGridCopy } from './useDataGridCopy';
 export { useDataGridSettings } from './useDataGridSettings';
-export { useDataGrid } from './useDataGrid';
 export declare const useDataGridContext: <R>(context: DataGridContext<R>) => import("../types").DataGridContextProps<R>;
-export declare const useVisibleAndHiddenColumns: <R>(columns: DataGridColumns<R>) => import("lodash").Dictionary<import("../types").DataGridColumn<R>>[];
-export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => [string, import("../types").DataGridColumn<R>][];
+export declare const useVisibleAndHiddenColumns: <R>(columns: DataGridColumns<R>) => import("../types").DataGridColumn<R>[][];
+export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => import("../types").DataGridColumn<R>[];

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

@@ -1,34 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGrid = exports.useDataGridSettings = exports.useDataGridCopy = void 0;
+exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGridSettings = exports.useDataGridCopy = exports.useDataGrid = void 0;
 var react_1 = require("react");
 var columns_1 = require("../helpers/columns");
-var lodash_1 = require("lodash");
+var useDataGrid_1 = require("./useDataGrid");
+Object.defineProperty(exports, "useDataGrid", { enumerable: true, get: function () { return useDataGrid_1.useDataGrid; } });
 var useDataGridCopy_1 = require("./useDataGridCopy");
 Object.defineProperty(exports, "useDataGridCopy", { enumerable: true, get: function () { return useDataGridCopy_1.useDataGridCopy; } });
 var useDataGridSettings_1 = require("./useDataGridSettings");
 Object.defineProperty(exports, "useDataGridSettings", { enumerable: true, get: function () { return useDataGridSettings_1.useDataGridSettings; } });
-var useDataGrid_1 = require("./useDataGrid");
-Object.defineProperty(exports, "useDataGrid", { enumerable: true, get: function () { return useDataGrid_1.useDataGrid; } });
 var useDataGridContext = function (context) {
     return (0, react_1.useContext)(context);
 };
 exports.useDataGridContext = useDataGridContext;
 var useVisibleAndHiddenColumns = function (columns) {
     return (0, react_1.useMemo)(function () { return [
-        (0, lodash_1.pickBy)(columns, function (col) { return (0, columns_1.isColumnVisible)(col); }),
-        (0, lodash_1.pickBy)(columns, function (col) { return !(0, columns_1.isColumnVisible)(col); }),
+        columns.filter(columns_1.isColumnVisible),
+        columns.filter(function (col) { return !(0, columns_1.isColumnVisible)(col); }),
     ]; }, [columns]);
 };
 exports.useVisibleAndHiddenColumns = useVisibleAndHiddenColumns;
 var useSortedColumns = function (columns) {
     return (0, react_1.useMemo)(function () {
-        return Object.entries(columns)
-            .filter(function (_a) {
-            var col = _a[1];
-            return (0, columns_1.isColumnVisible)(col);
-        })
-            .sort(function (a, b) { var _a, _b; return ((_a = a[1].order) !== null && _a !== void 0 ? _a : 0) - ((_b = b[1].order) !== null && _b !== void 0 ? _b : 0); });
+        return columns
+            .filter(columns_1.isColumnVisible)
+            .sort(function (a, b) { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); });
     }, [columns]);
 };
 exports.useSortedColumns = useSortedColumns;

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

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -59,18 +58,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 +83,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 +95,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 +112,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 +127,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)(rowKeyGetter, onRowAdded), addedRows = _o.addedRows, updatedRows = _o.updatedRows, editRow = _o.editRow, addRow = _o.addRow, addRows = _o.addRows, 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 +162,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 +210,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, addRows: addRows, updateRow: updateRow, clearChangedRows: clearChangedRows, setRows: setRows }), override)); }, [
         props,
         columns,
         visibleColumns,
@@ -199,18 +225,29 @@ var useDataGrid = function (props, override) {
         settings,
         setSettings,
         saveSettings,
-        scrollableRef,
         rowKeyGetter,
         gridTemplateColumns,
         footers,
         footerFunctions,
         toggleSelection,
+        resizingColumnKey,
+        startResizing,
+        moveResizing,
+        endResizing,
+        addedRows,
+        updatedRows,
+        editRow,
+        addRow,
+        addRows,
+        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,18 @@ 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 () { },
+            addRows: 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 @@
+export declare const useDataGridChangedRows: <R>(rowKeyGetter: (row: Partial<R>) => string, onRowAdded: (row: R) => void) => {
+    addedRows: Partial<R>[];
+    updatedRows: Partial<R>[];
+    editRow: (row: Partial<R>) => void;
+    addRow: (row: Partial<R>) => void;
+    addRows: (rows: R[]) => void;
+    updateRow: (row: Partial<R>) => void;
+    clearChangedRows: (keys?: string[]) => void;
+};