@addev-be/ui 0.19.0 → 0.19.2

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

@@ -88,7 +88,7 @@ var FilterModalContent = function (_a) {
     if (!filter)
         return null;
     var operator = filter.operator, type = filter.type, values = filter.values;
-    return ((0, jsx_runtime_1.jsxs)(styles.FilterModalContentContainer, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterOperator", children: [(0, jsx_runtime_1.jsx)("span", { children: "Op\u00E9rateur :" }), (0, jsx_runtime_1.jsx)(forms_1.Select, { name: "filterOperator", items: Object.entries(filterOperators[filter.type]), itemKey: function (item) { return item[0]; }, itemLabel: function (item) { return item[1]; }, value: String(operator), className: "text-sm", onChange: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(styles.FilterModalContentContainer, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterOperator", children: [(0, jsx_runtime_1.jsx)("span", { children: "Op\u00E9rateur :" }), (0, jsx_runtime_1.jsx)(forms_1.Select, { name: "filterOperator", items: Object.entries(filterOperators[filter.type]), itemKey: 0, itemLabel: 1, value: String(operator), className: "text-sm", onChange: function (e) {
                             return onFilterChanged(__assign(__assign({}, filter), { operator: e.target.value }));
                         } })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [operator === 'inRange' ? 'Entre' : 'Valeur', " :"] }), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: value1Ref, name: "filterValue1", type: filter.type, value: (_b = values[0]) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
                             if (type === 'number') {

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

@@ -1,15 +1,14 @@
-import { DataGridCheckboxColumn, DataGridColorColumn, DataGridColumn, DataGridDateColumn, DataGridNumberColumn, DataGridSelectColumn, DataGridSettings, DataGridTextColumn } from '../types';
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
 export declare const isColumnVisible: <R>(obj: DataGridColumn<R> | DataGridSettings) => boolean;
 export declare const buildExcelFormat: (decimals?: number, suffix?: string) => string;
-export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
-export declare const dateTimeColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
-export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
-export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
-export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
-export declare const checkboxColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridCheckboxColumn<R>>) => DataGridCheckboxColumn<R>;
-export declare const selectColumn: <R extends Record<string, any>, T>(key: string, title: string, items: T[], itemKey: (item: T | null) => string, itemLabel: (item: T | null) => string, otherOptions?: Partial<DataGridSelectColumn<R, T>>) => DataGridSelectColumn<R, T>;
-export declare const colorColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridColorColumn<R>>) => DataGridColorColumn<R>;
+export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const dateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const checkboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const colorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;

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

@@ -14,16 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 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; };
@@ -34,113 +28,149 @@ 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, 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)); };
+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);
+};
 exports.textColumn = textColumn;
-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)); };
+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);
+};
 exports.mailColumn = mailColumn;
-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)); };
+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);
+};
 exports.phoneColumn = phoneColumn;
-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)); };
+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);
+};
 exports.dateColumn = dateColumn;
-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)); };
+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);
+};
 exports.dateTimeColumn = dateTimeColumn;
-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)); };
+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);
+};
 exports.monthColumn = monthColumn;
-var numberColumn = function (key, title, decimals, otherOptions) {
+var numberColumn = function (key, title, decimals, options) {
+    var _a;
     if (decimals === void 0) { decimals = 2; }
-    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;
+    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);
 };
 exports.numberColumn = numberColumn;
-var moneyColumn = function (key, title, decimals, otherOptions) {
+var moneyColumn = function (key, title, decimals, options) {
+    var _a;
     if (decimals === void 0) { decimals = 2; }
-    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;
+    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);
 };
 exports.moneyColumn = moneyColumn;
-var percentageColumn = function (key, title, decimals, otherOptions) {
+var percentageColumn = function (key, title, decimals, options) {
+    var _a;
     if (decimals === void 0) { decimals = 2; }
-    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;
+    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);
 };
 exports.percentageColumn = percentageColumn;
-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)); };
+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);
+};
 exports.checkboxColumn = checkboxColumn;
-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)); };
+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);
+};
 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("../types").DataGridColumn<R>[][];
-export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => import("../types").DataGridColumn<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>][];

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

@@ -1,30 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGridSettings = exports.useDataGridCopy = exports.useDataGrid = void 0;
+exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGrid = exports.useDataGridSettings = exports.useDataGridCopy = void 0;
 var react_1 = require("react");
 var columns_1 = require("../helpers/columns");
-var useDataGrid_1 = require("./useDataGrid");
-Object.defineProperty(exports, "useDataGrid", { enumerable: true, get: function () { return useDataGrid_1.useDataGrid; } });
+var lodash_1 = require("lodash");
 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 [
-        columns.filter(columns_1.isColumnVisible),
-        columns.filter(function (col) { return !(0, columns_1.isColumnVisible)(col); }),
+        (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]);
 };
 exports.useVisibleAndHiddenColumns = useVisibleAndHiddenColumns;
 var useSortedColumns = function (columns) {
     return (0, react_1.useMemo)(function () {
-        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); });
+        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); });
     }, [columns]);
 };
 exports.useSortedColumns = useSortedColumns;

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

@@ -59,24 +59,18 @@ 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 useDataGridChangedRows_1 = require("./useDataGridChangedRows");
+var lodash_1 = require("lodash");
 var useDataGridSettings_1 = require("./useDataGridSettings");
 var useDataGrid = function (props, override) {
-    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 _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 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 _h = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _h.settings, setSettings = _h.setSettings, saveSettings = _h.saveSettings;
+    var _c = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _c.settings, setSettings = _c.setSettings, saveSettings = _c.saveSettings;
     var setColumnWidth = (0, react_1.useCallback)(function (key, width) {
         setSettings(function (prev) {
             var _a;
@@ -84,11 +78,15 @@ var useDataGrid = function (props, override) {
         });
     }, [setSettings]);
     var gridTemplateColumns = (0, react_1.useMemo)(function () {
-        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(' ');
+        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(' ');
     }, [selectable, visibleColumns]);
     // Update columns when settings change
     (0, react_1.useEffect)(function () {
-        setColumns(function (prev) { return prev.map(function (col) { return (__assign(__assign({}, col), settings[col.key])); }); });
+        setColumns(function (prev) { return (0, lodash_1.merge)({}, prev, settings); });
     }, [settings]);
     /** ROWS SELECTION **/
     var rowKeyGetter = (0, react_1.useMemo)(function () {
@@ -96,7 +94,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 _j = (0, react_1.useState)([]), selectedKeys = _j[0], setSelectedKeys = _j[1];
+    var _d = (0, react_1.useState)([]), selectedKeys = _d[0], setSelectedKeys = _d[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);
@@ -113,8 +111,8 @@ var useDataGrid = function (props, override) {
         }
     }, [selectedKeys, setSelectedKeys]);
     /** ROWS FILTERING **/
-    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];
+    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];
     (0, react_1.useEffect)(function () {
         onFiltersChanged === null || onFiltersChanged === void 0 ? void 0 : onFiltersChanged(filters);
     }, [filters, onFiltersChanged]);
@@ -128,21 +126,17 @@ var useDataGrid = function (props, override) {
         setFilteredRows(filteredRows !== null && filteredRows !== void 0 ? filteredRows : []);
     }, [filters, props.filter, rows]);
     /** CELL EDITING */
-    var _m = (0, react_1.useState)([-1, -1]), editingCell = _m[0], setEditingCell = _m[1];
-    var onRowAdded = (0, react_1.useCallback)(function (row) {
-        setRows(function (prev) { return __spreadArray([row], prev, true); });
-    }, [setRows]);
-    var _o = (0, useDataGridChangedRows_1.useDataGridChangedRows)(onRowAdded), addedRows = _o.addedRows, updatedRows = _o.updatedRows, editRow = _o.editRow, addRow = _o.addRow, updateRow = _o.updateRow, clearChangedRows = _o.clearChangedRows;
+    var _g = (0, react_1.useState)([-1, -1]), editingCell = _g[0], setEditingCell = _g[1];
     /** ROWS SORTING **/
-    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];
+    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];
     (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.find(function (col) { return col.key === sortKey; });
+                var sortColumn = columns[sortKey];
                 if (!sortColumn || typeof sortColumn.sortGetter !== 'function')
                     return;
                 // Sort the rows using the sortGetter function of the column
@@ -163,33 +157,12 @@ 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 _s = (0, react_1.useState)((_d = props.initialFooters) !== null && _d !== void 0 ? _d : {}), footers = _s[0], setFooters = _s[1];
+    var _k = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _k[0], setFooters = _k[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.find(function (col) { return col.key === columnKey; });
+            var column = columns[columnKey];
             if (!column) {
                 return acc;
             }
@@ -211,7 +184,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, resizingColumnKey: resizingColumnKey, startResizing: startResizing, moveResizing: moveResizing, endResizing: endResizing, addedRows: addedRows, updatedRows: updatedRows, editRow: editRow, addRow: addRow, updateRow: updateRow, clearChangedRows: clearChangedRows, setRows: setRows }), 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 }), override)); }, [
         props,
         columns,
         visibleColumns,
@@ -226,28 +199,18 @@ var useDataGrid = function (props, override) {
         settings,
         setSettings,
         saveSettings,
+        scrollableRef,
         rowKeyGetter,
         gridTemplateColumns,
         footers,
         footerFunctions,
         toggleSelection,
-        resizingColumnKey,
-        startResizing,
-        moveResizing,
-        endResizing,
-        addedRows,
-        updatedRows,
-        editRow,
-        addRow,
-        updateRow,
-        clearChangedRows,
-        setRows,
         override,
     ]);
     var context = (0, react_1.useMemo)(function () {
         return (0, react_1.createContext)({
             rows: [],
-            columns: [],
+            columns: {},
             visibleColumns: [],
             rowKey: '',
             rowKeyGetter: function () { return ''; },
@@ -271,17 +234,6 @@ var useDataGrid = function (props, override) {
             footers: {},
             setFooters: function () { },
             toggleSelection: function () { },
-            resizingColumnKey: null,
-            startResizing: function () { },
-            moveResizing: function () { },
-            endResizing: function () { },
-            addedRows: {},
-            updatedRows: {},
-            setRows: function () { },
-            editRow: function () { },
-            addRow: function () { },
-            updateRow: function () { },
-            clearChangedRows: function () { },
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);