@addev-be/ui 0.2.2 → 0.2.6

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

@@ -14,82 +14,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withGroupBy = exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.isColumnVisible = void 0;
+exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.isColumnVisible = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var numbers_1 = require("../../../../helpers/numbers");
-var lodash_1 = __importDefault(require("lodash"));
+var filters_1 = require("./filters");
 var moment_1 = __importDefault(require("moment"));
-var isColumnVisible = function (obj) {
-    return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1;
-};
+var isColumnVisible = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1; };
 exports.isColumnVisible = isColumnVisible;
 var textColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.textColumn = textColumn;
 var mailColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _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 : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.mailColumn = mailColumn;
 var phoneColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _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 : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.phoneColumn = phoneColumn;
 var dateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.dateColumn = dateColumn;
 var monthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.monthColumn = monthColumn;
@@ -97,11 +70,11 @@ var numberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
                 type: 'number',
                 operator: 'equals',
                 values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
+                getter: function (value) { return value !== null && value !== void 0 ? value : 0; },
             } }, options),
         _a);
 };
@@ -110,58 +83,31 @@ var moneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.moneyColumn = moneyColumn;
 var percentageColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.percentageColumn = percentageColumn;
 var checkboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.checkboxColumn = checkboxColumn;
 var colorColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _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: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.colorColumn = colorColumn;
-var withGroupBy = function (columns) {
-    return lodash_1.default.mapValues(columns, function (column, key) {
-        var _a;
-        return (__assign(__assign({}, column), { field: __assign(__assign({}, ((_a = column.field) !== null && _a !== void 0 ? _a : { fieldName: key })), { groupBy: true }) }));
-    });
-};
-exports.withGroupBy = withGroupBy;

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

@@ -1,8 +1,7 @@
-import { DataGridFilter, DataGridFilterCheckbox, DataGridFilterDataType, DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterPredicates, DataGridFilterType, DataGridFilters } from '../types';
-import { ConditionDTO } from '../../../../services/advancedRequests';
+import { DataGridFilter, DataGridFilterCheckbox, DataGridFilterDataType, DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterPredicates, DataGridFilterRenderer, DataGridFilterType, DataGridFilterValue } from '../types';
 export declare const filtersPredicates: DataGridFilterPredicates;
-export declare const applyFilters: <R>(rows: R[], filters: DataGridFilter<R, DataGridFilterType>[]) => R[];
-export declare const applyFilter: <R, T extends DataGridFilterType>(rows: R[], filter: DataGridFilter<R, T>) => R[];
+export declare const applyFilters: <R>(rows: R[], filters: DataGridFilter[]) => R[];
+export declare const applyFilter: <R>(rows: R[], filter: DataGridFilter) => R[];
 export declare const defaultFilterGetter: (row: any, columnKey: string) => any;
 export declare const defaultFilterValues: {
     [K in DataGridFilterType]: DataGridFilterDataType<K>;
@@ -11,6 +10,8 @@ export declare const defaultValueParsers: {
     [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
 };
 export declare const groupDatesByYearAndMonth: (dates: any[]) => Record<string, Record<string, any[]>>;
-export declare const getDateGroups: <R extends string | number | null>(dates: any[]) => DataGridFilterGroup<R>[];
-export declare const convertFiltersToConditions: <R>(filters: DataGridFilters<R>) => ConditionDTO[];
-export declare const getCheckboxes: <R extends string | number | null>(values: R[], formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup<R>[], level?: number) => DataGridFilterCheckbox<R>[];
+export declare const getDateGroups: (dates: any[]) => DataGridFilterGroup[];
+export declare const defaultRendererAndFormatter: (value: any) => string;
+export declare const getCheckboxes: (values: DataGridFilterValue[], renderer: DataGridFilterRenderer, formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup[], level?: number) => DataGridFilterCheckbox[];
+export declare const textFilter: (key: string) => DataGridFilter<"text">;
+export declare const numberFilter: (key: string) => DataGridFilter<"number">;

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

@@ -13,8 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCheckboxes = exports.convertFiltersToConditions = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
-var lodash_1 = __importDefault(require("lodash"));
+exports.numberFilter = exports.textFilter = exports.getCheckboxes = exports.defaultRendererAndFormatter = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
 var moment_1 = __importDefault(require("moment"));
 var escapeRegExp = function (s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); };
 var textContainsPredicate = function () {
@@ -220,30 +219,36 @@ var getDateGroups = function (dates) {
     });
 };
 exports.getDateGroups = getDateGroups;
-var convertFiltersToConditions = function (filters) {
-    return Object.entries(filters).map(function (_a) {
-        var columnKey = _a[0], filter = _a[1];
-        var condition = {
-            field: {
-                fieldName: columnKey,
-            },
-            operator: filter.operator,
-            value: ['inArray', 'inRange'].includes(filter.operator)
-                ? filter.values
-                : lodash_1.default.castArray(filter.values)[0],
-        };
-        return condition;
-    });
+var defaultRendererAndFormatter = function (value) {
+    return String(value !== null && value !== void 0 ? value : '').trim() || '(Vides)';
 };
-exports.convertFiltersToConditions = convertFiltersToConditions;
-var getCheckboxes = function (values, formatter, groups, level) {
+exports.defaultRendererAndFormatter = defaultRendererAndFormatter;
+var getCheckboxes = function (values, renderer, formatter, groups, level) {
     if (level === void 0) { level = 0; }
     return __spreadArray(__spreadArray([], (groups !== null && groups !== void 0 ? groups : [])
-        .map(function (group) { var _a; return (0, exports.getCheckboxes)((_a = group.values) !== null && _a !== void 0 ? _a : [], formatter, group.groups, level + 1); })
+        .map(function (group) {
+        var _a;
+        return (0, exports.getCheckboxes)((_a = group.values) !== null && _a !== void 0 ? _a : [], renderer, formatter, group.groups, level + 1);
+    })
         .flat(), true), values.map(function (value) { return ({
-        displayValue: formatter(value),
-        values: [value],
+        displayValue: renderer(value),
+        title: formatter(value),
+        value: value !== null && value !== void 0 ? value : '',
         level: level,
     }); }), true);
 };
 exports.getCheckboxes = getCheckboxes;
+var textFilter = function (key) { return ({
+    type: 'text',
+    operator: 'contains',
+    values: [''],
+    getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+}); };
+exports.textFilter = textFilter;
+var numberFilter = function (key) { return ({
+    type: 'number',
+    operator: 'equals',
+    values: [0],
+    getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+}); };
+exports.numberFilter = numberFilter;

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

@@ -1,3 +1,2 @@
-export * from './columns';
 export * from './filters';
-export * from './advancedRequests';
+export * from './columns';

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

@@ -14,6 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./columns"), exports);
 __exportStar(require("./filters"), exports);
-__exportStar(require("./advancedRequests"), exports);
+__exportStar(require("./columns"), exports);

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

@@ -3,5 +3,5 @@ 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, import("../types").DataGridFilterType | undefined>>[];
-export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => [string, import("../types").DataGridColumn<R, import("../types").DataGridFilterType | undefined>][];
+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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGrid = exports.useDataGridSettings = exports.useDataGridCopy = void 0;
 var react_1 = require("react");
-var helpers_1 = require("../helpers");
+var columns_1 = require("../helpers/columns");
 var lodash_1 = require("lodash");
 var useDataGridCopy_1 = require("./useDataGridCopy");
 Object.defineProperty(exports, "useDataGridCopy", { enumerable: true, get: function () { return useDataGridCopy_1.useDataGridCopy; } });
@@ -16,8 +16,8 @@ var useDataGridContext = function (context) {
 exports.useDataGridContext = useDataGridContext;
 var useVisibleAndHiddenColumns = function (columns) {
     return (0, react_1.useMemo)(function () { return [
-        (0, lodash_1.pickBy)(columns, function (col) { return (0, helpers_1.isColumnVisible)(col); }),
-        (0, lodash_1.pickBy)(columns, function (col) { return !(0, helpers_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;
@@ -26,7 +26,7 @@ var useSortedColumns = function (columns) {
         return Object.entries(columns)
             .filter(function (_a) {
             var col = _a[1];
-            return (0, helpers_1.isColumnVisible)(col);
+            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]);

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

@@ -67,7 +67,7 @@ var lodash_1 = require("lodash");
 var useDataGridSettings_1 = require("./useDataGridSettings");
 var hooks_1 = require("../../../../hooks");
 var useDataGrid = function (props) {
-    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _a = props.rowHeight, rowHeight = _a === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _a, onVisibleRowsChange = props.onVisibleRowsChange;
+    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _a = props.rowHeight, rowHeight = _a === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _a, onVisibleRowsChange = props.onVisibleRowsChange, onSelectionChange = props.onSelectionChange, selectable = props.selectable, initialSorts = props.initialSorts;
     var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
     var visibleColumns = (0, _1.useSortedColumns)(columns);
     /** SETTINGS */
@@ -78,12 +78,28 @@ var useDataGrid = function (props) {
             return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { width: width }), _a)));
         });
     }, [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(' ');
+    }, [selectable, visibleColumns]);
     // Update columns when settings change
     (0, react_1.useEffect)(function () {
         setColumns(function (prev) { return (0, lodash_1.merge)({}, prev, settings); });
     }, [settings]);
     /** ROWS SELECTION **/
-    var _d = (0, react_1.useState)([]), selectedRows = _d[0], setSelectedRows = _d[1];
+    var rowKeyGetter = (0, react_1.useMemo)(function () {
+        return typeof props.rowKey === 'function'
+            ? 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 selectedRows = (0, react_1.useMemo)(function () { return props.rows.filter(function (row) { return selectedKeys.includes(rowKeyGetter(row)); }); }, [props.rows, rowKeyGetter, selectedKeys]);
+    (0, react_1.useEffect)(function () {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedKeys);
+    }, [onSelectionChange, selectedKeys]);
     /** ROWS FILTERING **/
     var _e = (0, react_1.useState)({}), filters = _e[0], setFilters = _e[1];
     var _f = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _f[0], setFilteredRows = _f[1];
@@ -102,7 +118,7 @@ var useDataGrid = function (props) {
     /** CELL EDITING */
     var _g = (0, react_1.useState)([-1, -1]), editingCell = _g[0], setEditingCell = _g[1];
     /** ROWS SORTING **/
-    var _h = (0, react_1.useState)({}), sorts = _h[0], setSorts = _h[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);
@@ -148,7 +164,7 @@ var useDataGrid = function (props) {
     }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
     /** COPYING */
     var copyTable = (0, _1.useDataGridCopy)(sortedRows, columns, loadCopyRows).copyTable;
-    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, setSelectedRows: setSelectedRows, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length })); }, [
+    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns })); }, [
         columns,
         copyTable,
         editingCell,
@@ -157,7 +173,9 @@ var useDataGrid = function (props) {
         length,
         onScroll,
         props,
+        rowKeyGetter,
         saveSettings,
+        selectedKeys,
         selectedRows,
         setColumnWidth,
         setSettings,
@@ -166,6 +184,7 @@ var useDataGrid = function (props) {
         sorts,
         visibleColumns,
         visibleRows,
+        gridTemplateColumns,
     ]);
     var context = (0, react_1.useMemo)(function () {
         return (0, react_1.createContext)({
@@ -173,9 +192,11 @@ var useDataGrid = function (props) {
             columns: {},
             visibleColumns: [],
             rowKey: '',
+            rowKeyGetter: function () { return ''; },
             sortedRows: [],
             selectedRows: [],
-            setSelectedRows: function () { },
+            selectedKeys: [],
+            setSelectedKeys: function () { },
             setSorts: function () { },
             setFilters: function () { },
             editingCell: [-1, -1],
@@ -192,6 +213,7 @@ var useDataGrid = function (props) {
             onScroll: function () { },
             index: 0,
             length: 0,
+            gridTemplateColumns: '',
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);

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

@@ -73,7 +73,6 @@ var useDataGridCopy = function (rows, columns, loadCopyRows) {
         ? "mso-number-format: '" + col.excelFormatter(col) + "';"
         : '', "\n        white-space: nowrap;\n      \">\n        ").concat(generateCellText(col, value), "\n      </td>"); }, [generateCellText]);
     var generateCopyHtml = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
-        console.log('generateCopyHtml', rowsToCopy, columns);
         return "\n            <table>\n                ".concat(includeHeaders ? generateHeadersHtml() : '', "\n                ").concat((rowsToCopy || [])
             .map(function (row) {
             return "<tr>\n                        ".concat(Object.values(columns !== null && columns !== void 0 ? columns : {})

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

@@ -11,7 +11,6 @@ var useDataGridSettings = function (name) {
         if (name) {
             var settingName = "user.datagrid.settings.".concat(name);
             var gridSettingsJson = (settings === null || settings === void 0 ? void 0 : settings[settingName]) || '{}';
-            console.log('read datagrid settings for', settingName, gridSettingsJson);
             var gridSettings = {};
             try {
                 gridSettings = JSON.parse(gridSettingsJson);

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -35,54 +46,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
-var react_1 = require("react");
 var DataGridCell_1 = require("./DataGridCell");
 var DataGridFooter_1 = require("./DataGridFooter");
 var DataGridHeader_1 = require("./DataGridHeader");
 var VirtualScroller_1 = require("./VirtualScroller");
+var react_1 = require("react");
 var hooks_1 = require("./hooks");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 var DataGrid = function (props) {
     var className = props.className, 
     // onRowDoubleClick,
-    onSelectionChange = props.onSelectionChange, onVisibleRowsChange = props.onVisibleRowsChange, rowKey = props.rowKey;
+    onVisibleRowsChange = props.onVisibleRowsChange;
     var _a = (0, hooks_1.useDataGrid)(props), contextProps = _a[0], DataGridContext = _a[1];
-    var selectedRows = contextProps.selectedRows, setSelectedRows = contextProps.setSelectedRows, columns = contextProps.columns, visibleColumns = contextProps.visibleColumns, _b = contextProps.rowHeight, rowHeight = _b === void 0 ? 32 : _b, _c = contextProps.headerRowHeight, headerRowHeight = _c === void 0 ? 40 : _c, scrollableRef = contextProps.scrollableRef, onScroll = contextProps.onScroll;
+    var selectedKeys = contextProps.selectedKeys, setSelectedKeys = contextProps.setSelectedKeys, columns = contextProps.columns, visibleColumns = contextProps.visibleColumns, _b = contextProps.rowHeight, rowHeight = _b === void 0 ? 32 : _b, _c = contextProps.headerRowHeight, headerRowHeight = _c === void 0 ? 40 : _c, scrollableRef = contextProps.scrollableRef, onScroll = contextProps.onScroll, rowKeyGetter = contextProps.rowKeyGetter;
     var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
     var setRowSelection = (0, react_1.useCallback)(function (row, selected) {
+        var key = rowKeyGetter(row);
         if (selected) {
-            if (!selectedRows.includes(row))
-                setSelectedRows(__spreadArray(__spreadArray([], selectedRows, true), [row], false));
+            if (!selectedKeys.includes(key))
+                setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
         }
         else {
-            setSelectedRows(selectedRows.filter(function (p) { return p !== row; }));
+            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
         }
-    }, [selectedRows, setSelectedRows]);
-    (0, react_1.useEffect)(function () {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedRows);
-    }, [onSelectionChange, selectedRows]);
+    }, [rowKeyGetter, selectedKeys, setSelectedKeys]);
     var rowTemplate = (0, react_1.useCallback)(function (row, rowIndex) {
         var _a, _b;
+        if (!row) {
+            return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(rowIndex, "-").concat(index))); })] }, "loading-row-".concat(rowIndex)));
+        }
+        var key = rowKeyGetter(row);
         var _c = (_b = (_a = props.rowClassNameGetter) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : {
             className: '',
             style: undefined,
         }, className = _c.className, style = _c.style;
-        if (!row) {
-            return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(rowIndex, "-").concat(index))); })] }, "loading-row-".concat(rowIndex)));
-        }
-        var key = String(typeof rowKey === 'function' ? rowKey(row) : row[rowKey]);
-        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", 
-                        // className="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-600"
-                        value: key, checked: selectedRows.includes(row), onChange: function (e) { return setRowSelection(row, e.target.checked); } }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
+        return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selectedKeys.includes(key), onChange: function (e) { return setRowSelection(row, e.target.checked); } }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
                     var key = _a[0], col = _a[1];
-                    return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { className: className, style: style, row: row, rowIndex: rowIndex, column: col, columnIndex: index, context: DataGridContext, columnKey: key }, "loading-".concat(rowIndex, "-").concat(index)));
+                    return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (index === 0 ? { className: className, style: style } : {}), { row: row, rowIndex: rowIndex, column: col, columnIndex: index, context: DataGridContext, columnKey: key }), "loading-".concat(rowIndex, "-").concat(index)));
                 })] }, key));
     }, [
         DataGridContext,
         props,
-        rowKey,
-        selectedRows,
+        rowKeyGetter,
+        selectedKeys,
         setRowSelection,
         visibleColumns,
     ]);

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

@@ -20,7 +20,7 @@ export declare const DataGridResizeGrip: import("styled-components/dist/types").
     $headerColor?: ThemeColor;
 }>> & string;
 type DataGridHeaderCellContainerProps = {
-    $isResizing: boolean;
+    $isResizing?: boolean;
     $headerColor?: ThemeColor;
 };
 export declare const DataGridHeaderCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridHeaderCellContainerProps>> & string;
@@ -43,7 +43,12 @@ export declare const DataGridRow: import("styled-components/dist/types").IStyled
 export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
-export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 export declare const ResizeBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;