@addev-be/ui 0.2.5 → 0.2.7

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

@@ -1,15 +1,9 @@
-import { ThemeColor } from '../../../../providers/ThemeProvider/types';
-export declare const Menu: 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;
-export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
-}>, never>, {
-    $color?: ThemeColor;
-}>> & string;
 export declare const InputContainer: 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;
 export declare const CheckboxesContainer: 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;
+export declare const Separator: 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;

package/dist/components/data/DataGrid/DataGridFilterMenu/styles.js

@@ -3,46 +3,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxesContainer = exports.InputContainer = exports.MenuItem = exports.Menu = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-exports.Menu = styled_components_1.default.div.attrs({
-    className: 'Menu',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  inset: 0;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"])));
-exports.MenuItem = styled_components_1.default.button.attrs({
-    className: 'MenuItem',
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n"])), function (_a) {
-    var $color = _a.$color;
-    return $color
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "], ["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "])), $color, $color) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "], ["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "])));
-});
+exports.Separator = exports.CheckboxesContainer = exports.InputContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
 exports.InputContainer = styled_components_1.default.div.attrs({
     className: 'InputContainer',
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-2);\n  margin-top: var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-2);\n  margin-top: var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
 exports.CheckboxesContainer = styled_components_1.default.div.attrs({
     className: 'CheckboxesContainer',
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-2);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-50);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"], ["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-2);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-50);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"], ["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
+exports.Separator = styled_components_1.default.div.attrs({
+    className: 'Separator',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,4 +1,4 @@
 import { DataGridContext } from './types';
 export declare const DataGridFooter: <R>({ context, }: {
     context: DataGridContext<R>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,31 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFooter = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var getScrollbarSize_1 = require("../../../helpers/getScrollbarSize");
-var lodash_1 = require("lodash");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+var styles = __importStar(require("./styles"));
 var hooks_1 = require("./hooks");
-var SCROLL_BAR_SIZE = (0, getScrollbarSize_1.getScrollBarSize)();
 var DataGridFooter = function (_a) {
     var context = _a.context;
-    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, _c = _b.rowHeight, rowHeight = _c === void 0 ? 48 : _c, selectable = _b.selectable;
-    return ((0, jsx_runtime_1.jsx)("tfoot", { 
-        // className="block border-t border-t-gray-300"
-        style: {
-            paddingRight: "".concat(SCROLL_BAR_SIZE[0], "px"),
-        }, children: (0, jsx_runtime_1.jsxs)("tr", { 
-            // className="grid bg-gray-100"
-            style: {
-                height: "".concat(rowHeight, "px"),
-            }, children: [!!selectable && ((0, jsx_runtime_1.jsx)("div", {}, "__select_checkbox__")), visibleColumns.map(function (_a) {
-                    var _b, _c;
-                    var key = _a[0], col = _a[1];
-                    return ((0, jsx_runtime_1.jsx)("div", { className: (0, lodash_1.join)([
-                            // 'inline-block relative group px-3 py-0 text-left text-sm hover:bg-gray-50 leading-6',
-                            col.className,
-                            col.footerClassName,
-                            // '!overflow-visible',
-                        ], ' '), style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = col.footer) === null || _c === void 0 ? void 0 : _c.call(col, rows, sortedRows, selectedRows) }, key));
-                })] }) }));
+    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, selectable = _b.selectable, _c = _b.footers, footers = _c === void 0 ? {} : _c, gridTemplateColumns = _b.gridTemplateColumns, footerFunctions = _b.footerFunctions;
+    if (!Object.keys(footers).length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (_a) {
+                var _b, _c;
+                var key = _a[0], col = _a[1];
+                return ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderCellContainer, { style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[key]) === null || _c === void 0 ? void 0 : _c.call(footerFunctions, rows, sortedRows, selectedRows) }, key));
+            })] }));
 };
 exports.DataGridFooter = DataGridFooter;

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

@@ -111,9 +111,7 @@ var DataGridHeader = function (_a) {
         copyTable().then(function () { return setIsLoadingVisible(false); });
     }, [copyTable]);
     var toolsRow = ((0, jsx_runtime_1.jsxs)(styles.DataGridToolsRow, { children: [(0, jsx_runtime_1.jsx)(layout_1.Loading, { visible: isLoadingVisible }), refresh && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", onClick: refresh, children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowsRotateIcon, {}), "Rafra\u00EEchir"] })), (0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "emerald", size: "small", onClick: runCopyTable, children: [(0, jsx_runtime_1.jsx)(Icons_1.CopyIcon, {}), "Copier la table"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", color: "danger", onClick: function () { return setFilters({}); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer les filtres"] }), name && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "info", size: "small", onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableColumnsIcon, {}), "Param\u00E8tres des colonnes"] }))] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell
-                    //  className="inline-flex items-center justify-center w-12 select-none"
-                    , { children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, onChange: function () { return toggleAll(!checkboxStatus); } }) })), visibleColumns.map(function (_a, index) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, { "$headerColor": headerColor, onClick: function () { return toggleAll(!(checkboxStatus !== null && checkboxStatus !== void 0 ? checkboxStatus : true)); }, children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, readOnly: true }) })), visibleColumns.map(function (_a, index) {
                         var key = _a[0], col = _a[1];
                         return ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnKey: key, column: col, context: context, columnIndex: index, isFilterOpen: visibleFilter === key, onFilterButtonClicked: onFilterButtonClicked }, key));
                     })] })] }));

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

@@ -28,38 +28,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 var styles = __importStar(require("./styles"));
-var Icons_1 = require("../../../Icons");
 var react_1 = require("react");
+var Icons_1 = require("../../../Icons");
 var DataGridFilterMenu_1 = require("./DataGridFilterMenu");
 var layout_1 = require("../../layout");
 var IconButton_1 = require("../../forms/IconButton");
 var hooks_1 = require("./hooks");
 var providers_1 = require("../../../providers");
 var DataGridHeaderCell = function (_a) {
-    var _b, _c;
+    var _b;
     var columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context;
     var getElementScreenRect = (0, providers_1.useUi)().getElementScreenRect;
     var contextValue = (0, hooks_1.useDataGridContext)(context);
-    var _d = contextValue.filters, filters = _d === void 0 ? {} : _d, _e = contextValue.sorts, sorts = _e === void 0 ? {} : _e, setSorts = contextValue.setSorts, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
+    var _c = contextValue.filters, filters = _c === void 0 ? {} : _c, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
     var filterButtonRef = (0, react_1.useRef)(null);
-    /** SORTING */
-    var SortIcon = sorts[columnKey]
-        ? sorts[columnKey] === 'desc'
-            ? Icons_1.ArrowUpZAIcon
-            : Icons_1.ArrowDownAZIcon
-        : Icons_1.ArrowsUpDownIcon;
-    var onSortButtonClicked = (0, react_1.useCallback)(function (columnKey) {
-        var _a, _b;
-        var sort = sorts[columnKey];
-        if (!sort || sort === 'desc') {
-            setSorts((_a = {}, _a[columnKey] = 'asc', _a));
-        }
-        else {
-            setSorts((_b = {}, _b[columnKey] = 'desc', _b));
-        }
-    }, [setSorts, sorts]);
     /** RESIZING */
-    var _f = (0, react_1.useState)(false), isResizing = _f[0], setIsResizing = _f[1];
+    var _d = (0, react_1.useState)(false), isResizing = _d[0], setIsResizing = _d[1];
     var resizingOffset = (0, react_1.useRef)(0);
     var onResizeStart = (0, react_1.useCallback)(function (e) {
         resizingOffset.current = e.screenX - (column.width || 150);
@@ -75,7 +59,7 @@ var DataGridHeaderCell = function (_a) {
         setIsResizing(false);
         saveSettings();
     }, [saveSettings]);
-    var _g = (0, react_1.useState)(false), isFilterDropdownVisible = _g[0], setIsFilterDropdownVisible = _g[1];
+    var _e = (0, react_1.useState)(false), isFilterDropdownVisible = _e[0], setIsFilterDropdownVisible = _e[1];
     var filterDropdown = (0, react_1.useMemo)(function () {
         if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
             return null;
@@ -83,7 +67,7 @@ var DataGridHeaderCell = function (_a) {
         var filterButtonRect = getElementScreenRect(filterButtonRef.current);
         filterButtonRect.x += window.scrollX;
         filterButtonRect.y += window.scrollY;
-        return ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": filterButtonRect, onClose: function () { return setIsFilterDropdownVisible(false); }, "$width": 320, "$height": [200, 320], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { columnKey: columnKey, columnIndex: columnIndex, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": filterButtonRect, onClose: function () { return setIsFilterDropdownVisible(false); }, "$width": 320, "$height": [250, 400], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { columnKey: columnKey, columnIndex: columnIndex, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
     }, [
         columnIndex,
         columnKey,
@@ -94,6 +78,7 @@ var DataGridHeaderCell = function (_a) {
     var onFilterButtonClicked = (0, react_1.useCallback)(function () {
         setIsFilterDropdownVisible(true);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.sortGetter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: headerColor, size: "small", icon: SortIcon, onClick: function () { return onSortButtonClicked === null || onSortButtonClicked === void 0 ? void 0 : onSortButtonClicked(columnKey); } })), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", ref: filterButtonRef, icon: ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0 ? Icons_1.FilterFullIcon : Icons_1.FilterIcon, color: ((_c = filters[columnKey]) === null || _c === void 0 ? void 0 : _c.values.length) > 0 ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
+    var hasFilters = ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0;
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", className: hasFilters ? 'danger' : '', ref: filterButtonRef, icon: Icons_1.ChevronDownIcon, color: hasFilters ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
 };
 exports.DataGridHeaderCell = DataGridHeaderCell;

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

@@ -1,7 +1,7 @@
-import { DataGridFilter, DataGridFilterType } from '../types';
-type FilterModalContentProps<R, T extends DataGridFilterType = DataGridFilterType> = {
-    filter: DataGridFilter<R, T>;
-    onFilterChanged: (filter: DataGridFilter<R, T>) => void;
+import { DataGridFilter } from '../types';
+type FilterModalContentProps = {
+    filter: DataGridFilter;
+    onFilterChanged: (filter: DataGridFilter) => void;
 };
-export declare const FilterModalContent: <R, T extends DataGridFilterType = keyof import("../types").DataGridFilterPredicates>({ filter, onFilterChanged, }: FilterModalContentProps<R, T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FilterModalContent: ({ filter, onFilterChanged, }: FilterModalContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -83,15 +83,17 @@ var FilterModalContent = function (_a) {
     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: 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 : '', 
-                        // className={(type === 'number' ? 'w-24 ' : '') + 'text-sm'}
-                        onChange: function (e) {
-                            var newValues = __spreadArray([], values, true);
-                            newValues[0] =
-                                type === 'number'
-                                    ? Number(e.target.value)
-                                    : String(e.target.value);
-                            onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                        } })] }), (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') {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[0] = Number(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
+                            else {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[0] = String(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
                         } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)("input", { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', 
                         // className="text-sm w-24"
                         onChange: function (e) {

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

@@ -1,12 +1,13 @@
-import { DataGridFilterFormatter, DataGridFilterGroup } from './types';
-type FilterValuesScrollerProps<R extends string | number | null> = {
-    values: R[];
+import { DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterRenderer, DataGridFilterValue } from './types';
+type FilterValuesScrollerProps = {
+    values: DataGridFilterValue[];
     rowHeight?: number;
     formatter: DataGridFilterFormatter;
+    renderer: DataGridFilterRenderer;
     onRangeChange?: (startIndex: number, length: number) => void;
-    onToggle?: (values: R[]) => void;
-    selectedValues?: R[];
-    groups?: DataGridFilterGroup<R>[];
+    onToggle?: (values: DataGridFilterValue[]) => void;
+    selectedValues?: DataGridFilterValue[];
+    groups?: DataGridFilterGroup[];
 };
-export declare const FilterValuesScroller: <R extends string | number | null>({ values, rowHeight, onRangeChange, onToggle, formatter, selectedValues, groups, }: FilterValuesScrollerProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterValuesScroller: ({ values, rowHeight, onRangeChange, onToggle, formatter, renderer, selectedValues, groups, }: FilterValuesScrollerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -39,23 +39,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var styles = __importStar(require("./styles"));
 var lodash_1 = require("lodash");
-var react_1 = require("react");
 var helpers_1 = require("./helpers");
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
-var defaultFormatter = function (value) { return (value == null ? null : String(value)); };
 var CheckboxTemplate = function (_a) {
     var selectedValues = _a.selectedValues, value = _a.value, index = _a.index, className = _a.className, style = _a.style, onToggle = _a.onToggle;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, lodash_1.join)([
             // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
             className,
-        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.displayValue || '(Vides)', onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle(value.values); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedValues.includes(value.values[0]), readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
+        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.title, onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle([value.value]); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedValues.includes(value.value), readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
 };
 var FilterValuesScroller = function (_a) {
-    var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? defaultFormatter : _c, _d = _a.selectedValues, selectedValues = _d === void 0 ? [] : _d, groups = _a.groups;
+    var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? helpers_1.defaultRendererAndFormatter : _c, _d = _a.renderer, renderer = _d === void 0 ? helpers_1.defaultRendererAndFormatter : _d, _e = _a.selectedValues, selectedValues = _e === void 0 ? [] : _e, groups = _a.groups;
     var scrollableRef = (0, react_1.useRef)(null);
     var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
     var tolerance = 20;
-    var _e = (0, react_1.useState)(0), scrollTop = _e[0], setScrollTop = _e[1];
+    var _f = (0, react_1.useState)(0), scrollTop = _f[0], setScrollTop = _f[1];
     var index = Math.floor(scrollTop / rowHeight);
     var length = Math.ceil(height / rowHeight);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,7 +62,7 @@ var FilterValuesScroller = function (_a) {
         var target = e.target;
         setScrollTop(function () { return target.scrollTop; });
     }, 50), []);
-    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, formatter !== null && formatter !== void 0 ? formatter : defaultFormatter, groups); }, [values, groups, formatter]);
+    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, renderer, formatter, groups); }, [values, groups, renderer, formatter]);
     var visibleCheckboxes = checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance);
     var firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
     (0, react_1.useEffect)(function () {

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

@@ -7,6 +7,6 @@ export declare const dateColumn: <R extends Record<string, any>>(key: string, ti
 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, 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

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

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

@@ -1,4 +1,4 @@
-import { DataGridFilter, DataGridFilterCheckbox, DataGridFilterDataType, DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterPredicates, DataGridFilterType } from '../types';
+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[];
 export declare const applyFilter: <R>(rows: R[], filter: DataGridFilter) => R[];
@@ -10,7 +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 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,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.numberFilter = exports.textFilter = exports.getCheckboxes = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
+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 () {
@@ -219,13 +219,21 @@ var getDateGroups = function (dates) {
     });
 };
 exports.getDateGroups = getDateGroups;
-var getCheckboxes = function (values, formatter, groups, level) {
+var defaultRendererAndFormatter = function (value) {
+    return String(value !== null && value !== void 0 ? value : '').trim() || '(Vides)';
+};
+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);
 };