@addev-be/ui 0.21.6 → 0.21.7

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

@@ -34,7 +34,7 @@ var defaultRender = function (value) { return (!value ? '' : String(value)); };
 var DataGridCell = function (_a) {
     var _b, _c;
     var row = _a.row, rowIndex = _a.rowIndex, columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context, style = _a.style;
-    var _d = (0, hooks_1.useDataGridContext)(context), name = _d.name, editable = _d.editable, _e = _d.editingCell, editingCell = _e === void 0 ? [-1, -1] : _e, setEditingCell = _d.setEditingCell, onRowDoubleClick = _d.onRowDoubleClick, userSelect = _d.userSelect;
+    var _d = (0, hooks_1.useDataGridContext)(context), name = _d.name, editable = _d.editable, _e = _d.editingCell, editingCell = _e === void 0 ? [-1, -1] : _e, setEditingCell = _d.setEditingCell, onRowDoubleClick = _d.onRowDoubleClick, userSelect = _d.userSelect, headerColor = _d.headerColor;
     var isEditable = !!editable &&
         'editable' in column &&
         !!column.editable &&
@@ -54,6 +54,6 @@ var DataGridCell = function (_a) {
     if (isEditing) {
         return ((0, jsx_runtime_1.jsx)(DataGridEditableCell_1.DataGridEditableCell, { row: row, rowIndex: rowIndex, columnKey: columnKey, columnIndex: columnIndex, column: column, context: context, userSelect: userSelect }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
     }
-    return ((0, jsx_runtime_1.jsx)(DataGridCellComponent, { onDoubleClick: onDoubleClick, style: style, "$userSelect": userSelect, "$color": column.color, "$textAlign": column.textAlign, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(value, row, column) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
+    return ((0, jsx_runtime_1.jsx)(DataGridCellComponent, { onDoubleClick: onDoubleClick, style: style, "$userSelect": userSelect, "$color": column.color, "$textAlign": column.textAlign, "$headerColor": headerColor, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(value, row, column) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
 };
 exports.DataGridCell = DataGridCell;

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

@@ -0,0 +1,2 @@
+import { DataGridColumn, DataGridFilterValue } from '../types';
+export declare const sortAvailableValues: <R>(values: unknown[], column: DataGridColumn<R>) => DataGridFilterValue[];

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortAvailableValues = void 0;
+var lodash_1 = require("lodash");
+var sortAvailableValues = function (values, column) {
+    switch (column === null || column === void 0 ? void 0 : column.type) {
+        case 'number':
+            return (0, lodash_1.uniq)(values).sort(function (a, b) { return a - b; });
+        case 'select':
+            return (0, lodash_1.uniq)(values).sort(function (a, b) {
+                return column.itemLabel(a).localeCompare(column.itemLabel(b));
+            });
+        default:
+            return (0, lodash_1.uniq)(values).sort(function (a, b) {
+                return a.localeCompare(b);
+            });
+    }
+};
+exports.sortAvailableValues = sortAvailableValues;

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

@@ -66,6 +66,7 @@ var ContextMenu_1 = require("../../../ui/ContextMenu");
 var FilterValuesScroller_1 = require("./FilterValuesScroller");
 var forms_1 = require("../../../forms");
 var styles_1 = require("../../../ui/ContextMenu/styles");
+var helpers_2 = require("./helpers");
 var hooks_1 = require("./hooks");
 var sortAsc = {
     number: ['Trier du plus petit au plus grand', Icons_1.ArrowDown19Icon],
@@ -119,14 +120,9 @@ var DataGridFilterMenu = function (_a) {
             });
             var availableRows = (0, helpers_1.applyFilters)(rows, otherFilters);
             var values_1 = availableRows.map(function (row) { return column.filter.getter(row); });
-            setAvailableValues(function () {
-                var _a;
-                return (0, lodash_1.uniq)(values_1).sort(((_a = column.filter) === null || _a === void 0 ? void 0 : _a.type) === 'number'
-                    ? function (a, b) { return a - b; }
-                    : function (a, b) { return a.localeCompare(b); });
-            });
+            setAvailableValues(function () { return (0, helpers_2.sortAvailableValues)(values_1, column); });
         }
-    }, [column.filter, column.key, filterValuesLoader, filters, rows]);
+    }, [column, filterValuesLoader, filters, rows]);
     var selectedValues = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = filters === null || filters === void 0 ? void 0 : filters[column.key]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []; }, [column.key, filters]);
     var clearFilter = (0, react_1.useCallback)(function () {
         var newFilters = __assign({}, filters);

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

@@ -34,7 +34,7 @@ var DataGridFooter = function (_a) {
     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 (col) {
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (col) {
                 var _a, _b, _c;
                 return ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderCellContainer, { style: { width: ((_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH) + 'px' }, "$headerColor": (_b = col.color) !== null && _b !== void 0 ? _b : headerColor, children: (_c = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _c === void 0 ? void 0 : _c.call(footerFunctions, rows, sortedRows, selectedRows) }, col.key));
             })] }));

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

@@ -66,6 +66,6 @@ var DataGridHeaderCell = function (_a) {
     }, []);
     var isResizing = resizingColumnKey === columnKey;
     var hasFilters = ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0;
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": (_c = column.color) !== null && _c !== void 0 ? _c : headerColor, "$isResizing": isResizing, children: [filterDropdown, typeof column.name === 'string' ? ((0, jsx_runtime_1.jsx)("span", { children: column.name })) : ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderTextContainer, { 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, bordered: true })), column.resizable !== false && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: function (e) { return startResizing(e, columnKey); } }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": (_c = column.color) !== null && _c !== void 0 ? _c : headerColor, "$isResizing": isResizing, "$hasFilterOpened": isFilterDropdownVisible || hasFilters, children: [filterDropdown, typeof column.name === 'string' ? ((0, jsx_runtime_1.jsx)("span", { children: column.name })) : ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderTextContainer, { 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, bordered: true })), column.resizable !== false && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: function (e) { return startResizing(e, columnKey); } }) }))] }));
 };
 exports.DataGridHeaderCell = DataGridHeaderCell;

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

@@ -134,7 +134,7 @@ var checkboxColumn = function (key, title, otherOptions) { return (__assign({ ke
         },
     }, editComponent: CheckboxEditableCell_1.CheckboxEditableCell }, otherOptions)); };
 exports.checkboxColumn = checkboxColumn;
-var selectColumn = function (key, title, items, itemKey, itemLabel, otherOptions) { return (__assign({ key: key, type: 'select', name: title, render: function (value, row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : null; }, sortGetter: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), items: items, itemKey: itemKey, itemLabel: itemLabel, editComponent: (0, components_1.forwardRefWithName)(function (_a, ref) {
+var selectColumn = function (key, title, items, itemKey, itemLabel, otherOptions) { return (__assign({ key: key, type: 'select', name: title, render: function (value, row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : null; }, sortGetter: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.textFilter)(key)), { renderer: function (value) { var _a; return (_a = itemLabel(value)) !== null && _a !== void 0 ? _a : ''; } }), items: items, itemKey: itemKey, itemLabel: itemLabel, editComponent: (0, components_1.forwardRefWithName)(function (_a, ref) {
         var value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
         return ((0, jsx_runtime_1.jsx)(Select_1.Select, { ref: ref, items: items, itemKey: itemKey, itemLabel: itemLabel, value: value, onChange: onChange, onBlur: function () { return onClose(true); } }));
     }, 'SelectColumnEditComponent') }, otherOptions)); };

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

@@ -72,13 +72,13 @@ var DataGridInner = function (_a, ref) {
     var className = props.className;
     var spaceProps = (0, styled_1.extractSpaceProps)(props);
     var _b = (0, hooks_1.useDataGrid)(props, contextOverride), contextProps = _b[0], DataGridContext = _b[1];
-    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys, addRows = contextProps.addRows, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing;
+    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys, addRows = contextProps.addRows, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing, footerFunctions = contextProps.footerFunctions;
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         refresh: refresh !== null && refresh !== void 0 ? refresh : (function () { }),
         setSelectedKeys: setSelectedKeys,
         addRows: addRows,
     }); }, [addRows, refresh, setSelectedKeys]);
-    var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
+    var hasFooter = footerFunctions && Object.values(footerFunctions).length > 0;
     var fixedColumnWidths = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], (selectable ? [constants_1.SELECTION_CELL_WIDTH] : []), true), Object.values(columns)
         .slice(0, fixedColumnsCount !== null && fixedColumnsCount !== void 0 ? fixedColumnsCount : 0)
         .map(function (col) { var _a; return (_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH; }), true); }, [columns, fixedColumnsCount, selectable]);

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

@@ -8,6 +8,7 @@ export declare const DataGridResizeGrip: import("styled-components/dist/types").
 type DataGridHeaderCellContainerProps = {
     $isResizing?: boolean;
     $headerColor?: ThemeColor;
+    $hasFilterOpened?: boolean;
 };
 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;
 export declare const DataGridHeaderTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -33,24 +33,29 @@ var styled_1 = require("../../../helpers/styled");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../VirtualScroller/styles");
 exports.DataGridWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  ", "\n"])), styled_1.space);
-exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
-    var $headerColor = _a.$headerColor;
-    return $headerColor
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: var(--color-base-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-base-500);\n          }\n        "], ["\n          background-color: var(--color-base-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-base-500);\n          }\n        "])));
+exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: var(--color-", "-400);\n    &:hover,\n    &.active {\n      background-color: var(--color-", "-500);\n    }\n  "], ["\n    background-color: var(--color-", "-400);\n    &:hover,\n    &.active {\n      background-color: var(--color-", "-500);\n    }\n  "])), $headerColor, $headerColor);
 });
-exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
+exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: bold;\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n  box-sizing: border-box;\n\n  z-index: ", ";\n\n  ", "\n\n  button {\n    display: ", ";\n  }\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n    button {\n      display: flex;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: bold;\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n  box-sizing: border-box;\n\n  z-index: ", ";\n\n  ", "\n\n  button {\n    display: ", ";\n  }\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n    button {\n      display: flex;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
     var $isResizing = _a.$isResizing;
     return ($isResizing ? 1 : 0);
 }, function (_a) {
-    var $headerColor = _a.$headerColor;
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: var(--color-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "])));
+}, function (_a) {
+    var $hasFilterOpened = _a.$hasFilterOpened;
+    return ($hasFilterOpened ? 'flex' : 'none');
 }, exports.DataGridResizeGrip);
 exports.DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-exports.DataGridHeaderTextContainer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"])));
-exports.dataGridCellCss = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-base-200);\n  border-bottom: 1px solid var(--color-base-200);\n  background-color: ", ";\n  text-align: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-base-200);\n  border-bottom: 1px solid var(--color-base-200);\n  background-color: ", ";\n  text-align: ", ";\n"])), function (_a) {
+exports.DataGridHeaderTextContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"])));
+exports.dataGridCellCss = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  ", "\n  background-color: ", ";\n  text-align: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  ", "\n  background-color: ", ";\n  text-align: ", ";\n"])), function (_a) {
     var $userSelect = _a.$userSelect;
     return ($userSelect ? 'text' : 'none');
+}, function (_a) {
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    border-right: 1px solid var(--color-", "-200);\n    border-bottom: 1px solid var(--color-", "-200);\n    &:first-child {\n      border-left: 1px solid var(--color-", "-300);\n    }\n    &:last-child {\n      border-right: 1px solid var(--color-", "-300);\n    }\n  "], ["\n    border-right: 1px solid var(--color-", "-200);\n    border-bottom: 1px solid var(--color-", "-200);\n    &:first-child {\n      border-left: 1px solid var(--color-", "-300);\n    }\n    &:last-child {\n      border-right: 1px solid var(--color-", "-300);\n    }\n  "])), $headerColor, $headerColor, $headerColor, $headerColor);
 }, function (_a) {
     var _b = _a.$color, $color = _b === void 0 ? 'base' : _b;
     return "var(--color-".concat($color, "-50)");
@@ -60,7 +65,7 @@ exports.dataGridCellCss = (0, styled_components_1.css)(templateObject_9 || (temp
 });
 exports.DataGridCell = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.dataGridCellCss);
 exports.DataGridCell.displayName = 'DataGridCell';
-exports.DataGridHeaderTitle = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-text-800);\n  height: auto;\n"], ["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-text-800);\n  height: auto;\n"])));
+exports.DataGridHeaderTitle = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  white-space: normal;\n  font-weight: bold;\n  color: var(--color-text-800);\n  height: auto;\n"], ["\n  white-space: normal;\n  font-weight: bold;\n  color: var(--color-text-800);\n  height: auto;\n"])));
 exports.DataGridToolsRow = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  align-items: flex-end;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  align-items: flex-end;\n"])));
 exports.DataGridToolsRowHeaderContent = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 exports.DataGridToolsRowButtonsContainer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"], ["\n  flex-shrink: 0;\n  display: flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"])));
@@ -86,7 +91,7 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_15 ||
         : "calc(".concat($fixedColumnWidths
             .slice(0, i)
             .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
-            .join(' + '), ")"), ";\n      background-color: var(--color-base-200);\n      z-index: 1;\n    }"); });
+            .join(' + '), ")"), ";\n      z-index: 1;\n    }"); });
 }, function (_a) {
     var _b = _a.$fixedColumnWidths, $fixedColumnWidths = _b === void 0 ? [] : _b;
     return $fixedColumnWidths.map(function (width, i) { return "\n    ".concat(exports.DataGridCell, ":nth-child(").concat(i + 1, ") {\n      position: sticky;\n      left: ").concat(i === 0
@@ -97,14 +102,14 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_15 ||
             .join(' + '), ")"), ";\n      background-color: var(--color-base-50);\n      z-index: 1;\n    }"); });
 }, styles_1.VirtualScrollerFiller);
 exports.DataGridContainer.displayName = 'DataGridContainer';
-var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n\n  ", ":first-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n  ", ":last-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n\n  ", ":first-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n  ", ":last-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n"])), function (_a) {
+var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
     var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
-    var $headerColor = _a.$headerColor;
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n        "])));
-}, exports.DataGridHeaderCellContainer, exports.DataGridHeaderCellContainer);
+        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n          ", ":first-child {\n            border-left: 1px solid var(--color-", "-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-", "-300);\n          }\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n          ", ":first-child {\n            border-left: 1px solid var(--color-", "-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-", "-300);\n          }\n        "])), $headerColor, $headerColor, exports.DataGridHeaderCellContainer, $headerColor, exports.DataGridHeaderCellContainer, $headerColor) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n          ", ":first-child {\n            border-left: 1px solid var(--color-base-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-base-300);\n          }\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n          ", ":first-child {\n            border-left: 1px solid var(--color-base-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-base-300);\n          }\n        "])), exports.DataGridHeaderCellContainer, exports.DataGridHeaderCellContainer);
+});
 exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
     return ({
@@ -112,7 +117,10 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid var(--color-base-300);\n  top: 0;\n"], ["\n  ", "\n  border-top: 1px solid var(--color-base-300);\n  top: 0;\n"])), dataGridHeaderOrFooterRowCss);
+})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n  top: 0;\n  border-top: 1px solid\n    var(--color-", "-300);\n"], ["\n  ", "\n  top: 0;\n  border-top: 1px solid\n    var(--color-", "-300);\n"])), dataGridHeaderOrFooterRowCss, function (_a) {
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    return $headerColor;
+});
 exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -121,9 +129,15 @@ exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n  border-bottom: 1px solid var(--color-base-300);\n  bottom: 0;\n"], ["\n  ", "\n  border-bottom: 1px solid var(--color-base-300);\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid var(--color-", "-300);\n  border-bottom: 1px solid\n    var(--color-", "-300);\n  bottom: 0;\n"], ["\n  ", "\n  border-top: 1px solid var(--color-", "-300);\n  border-bottom: 1px solid\n    var(--color-", "-300);\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss, function (_a) {
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    return $headerColor;
+}, function (_a) {
+    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    return $headerColor;
+});
 exports.DataGridFooterRow.displayName = 'DataGridFooterRow';
-exports.DataGridRow = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: contents;\n\n  ", ":first-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n  ", ":last-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"], ["\n  display: contents;\n\n  ", ":first-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n  ", ":last-child {\n    border-left: 1px solid var(--color-base-300);\n  }\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"])), exports.DataGridCell, exports.DataGridCell, exports.DataGridCell, function (_a) {
+exports.DataGridRow = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: contents;\n\n  &:last-child > ", " {\n    border-bottom: none;\n  }\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"], ["\n  display: contents;\n\n  &:last-child > ", " {\n    border-bottom: none;\n  }\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"])), exports.DataGridCell, exports.DataGridCell, function (_a) {
     var $edited = _a.$edited;
     return $edited && (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "], ["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "])), exports.DataGridCell, exports.SelectionCell, exports.DataGridCell, exports.SelectionCell);
 });

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

@@ -9,6 +9,7 @@ export type DataGridCellFCProps = {
     $color?: ThemeColor;
     $textAlign?: 'left' | 'right' | 'center';
     $userSelect?: boolean;
+    $headerColor?: ThemeColor;
 };
 export type DataGridCellFC = FC<DataGridCellFCProps>;
 export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.21.6",
+  "version": "0.21.7",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.21.6",
+    "@addev-be/framework-utils": "^0.21.7",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -26,6 +26,7 @@ export const DataGridCell = <R, T>({
     setEditingCell,
     onRowDoubleClick,
     userSelect,
+    headerColor,
   } = useDataGridContext(context);
   const isEditable =
     !!editable &&
@@ -72,6 +73,7 @@ export const DataGridCell = <R, T>({
       $userSelect={userSelect}
       $color={column.color}
       $textAlign={column.textAlign}
+      $headerColor={headerColor}
     >
       {(column.render ?? defaultRender)(value, row, column)}
     </DataGridCellComponent>

package/src/components/data/DataGrid/DataGridFilterMenu/helpers.ts

@@ -0,0 +1,23 @@
+import { DataGridColumn, DataGridFilterValue } from '../types';
+
+import { uniq } from 'lodash';
+
+export const sortAvailableValues = <R>(
+  values: unknown[],
+  column: DataGridColumn<R>
+): DataGridFilterValue[] => {
+  switch (column?.type) {
+    case 'number':
+      return uniq(values).sort(
+        (a, b) => (a as number) - (b as number)
+      ) as number[];
+    case 'select':
+      return uniq(values).sort((a, b) =>
+        column.itemLabel(a).localeCompare(column.itemLabel(b))
+      ) as string[];
+    default:
+      return uniq(values).sort((a, b) =>
+        (a as string).localeCompare(b as string)
+      ) as string[];
+  }
+};

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -33,7 +33,7 @@ import {
   defaultRendererAndFormatter,
   getDateGroups,
 } from '../helpers';
-import { intersection, uniq, without } from 'lodash';
+import { intersection, without } from 'lodash';
 import {
   useCallback,
   useContext,
@@ -47,6 +47,7 @@ import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from './FilterValuesScroller';
 import { Input } from '../../../forms';
 import { MenuContainer } from '../../../ui/ContextMenu/styles';
+import { sortAvailableValues } from './helpers';
 import { useFilterModal } from './hooks';
 
 type FilterValuesProps<R> = {
@@ -120,15 +121,9 @@ export const DataGridFilterMenu = <R,>({
         .map(([, filter]) => filter);
       const availableRows = applyFilters(rows, otherFilters);
       const values = availableRows.map((row) => column.filter!.getter(row));
-      setAvailableValues(() =>
-        uniq(values).sort(
-          column.filter?.type === 'number'
-            ? (a, b) => (a as number) - (b as number)
-            : (a, b) => (a as string).localeCompare(b as string)
-        )
-      );
+      setAvailableValues(() => sortAvailableValues(values, column));
     }
-  }, [column.filter, column.key, filterValuesLoader, filters, rows]);
+  }, [column, filterValuesLoader, filters, rows]);
 
   const selectedValues = useMemo(
     () => filters?.[column.key]?.values ?? [],

package/src/components/data/DataGrid/DataGridFooter.tsx

@@ -26,7 +26,10 @@ export const DataGridFooter = <R,>({
   }
 
   return (
-    <styles.DataGridFooterRow $gridTemplateColumns={gridTemplateColumns}>
+    <styles.DataGridFooterRow
+      $gridTemplateColumns={gridTemplateColumns}
+      $headerColor={headerColor}
+    >
       {!!selectable && <styles.HeaderSelectionCell />}
       {visibleColumns.map((col) => (
         <styles.DataGridHeaderCellContainer

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -76,6 +76,7 @@ export const DataGridHeaderCell = <R,>({
     <styles.DataGridHeaderCellContainer
       $headerColor={column.color ?? headerColor}
       $isResizing={isResizing}
+      $hasFilterOpened={isFilterDropdownVisible || hasFilters}
     >
       {filterDropdown}
 

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -351,7 +351,10 @@ export const selectColumn = <R extends Record<string, any>, T>(
   getter: (row) => row[key] ?? null,
   sortGetter: (row) => itemLabel(row[key]) ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
+  filter: {
+    ...textFilter(key),
+    renderer: (value) => itemLabel(value) ?? '',
+  },
   items,
   itemKey,
   itemLabel,

package/src/components/data/DataGrid/index.tsx

@@ -51,6 +51,7 @@ export const DataGridInner = <R,>(
     resizingColumnKey,
     moveResizing,
     endResizing,
+    footerFunctions,
   } = contextProps;
 
   useImperativeHandle(
@@ -63,7 +64,8 @@ export const DataGridInner = <R,>(
     [addRows, refresh, setSelectedKeys]
   );
 
-  const hasFooter = Object.values(columns).some((col) => col.footer);
+  const hasFooter =
+    footerFunctions && Object.values(footerFunctions).length > 0;
   const fixedColumnWidths = useMemo(
     () => [
       ...(selectable ? [SELECTION_CELL_WIDTH] : []),

package/src/components/data/DataGrid/styles.ts

@@ -29,22 +29,13 @@ export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   width: var(--space-1);
   height: 100%;
 
-  ${({ $headerColor }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-400);
-          &:hover,
-          &.active {
-            background-color: var(--color-${$headerColor}-500);
-          }
-        `
-      : css`
-          background-color: var(--color-base-400);
-          &:hover,
-          &.active {
-            background-color: var(--color-base-500);
-          }
-        `}
+  ${({ $headerColor = 'base' }) => css`
+    background-color: var(--color-${$headerColor}-400);
+    &:hover,
+    &.active {
+      background-color: var(--color-${$headerColor}-500);
+    }
+  `}
 
   cursor: col-resize;
   display: none;
@@ -53,23 +44,25 @@ export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
 type DataGridHeaderCellContainerProps = {
   $isResizing?: boolean;
   $headerColor?: ThemeColor;
+  $hasFilterOpened?: boolean;
 };
 
 export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContainerProps>`
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
-  font-weight: var(--font-bold);
+  font-weight: bold;
   gap: var(--space-1);
   height: 100%;
   user-select: none;
   line-height: 1.5rem;
   padding: 0 var(--space-3);
   position: relative;
+  box-sizing: border-box;
 
   z-index: ${({ $isResizing }) => ($isResizing ? 1 : 0)};
 
-  ${({ $headerColor }) =>
+  ${({ $headerColor = 'base' }) =>
     $headerColor
       ? css`
           background-color: var(--color-${$headerColor}-200);
@@ -103,10 +96,17 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
           }
         `}
 
+  button {
+    display: ${({ $hasFilterOpened }) => ($hasFilterOpened ? 'flex' : 'none')};
+  }
+
   &:hover {
     ${DataGridResizeGrip} {
       display: block;
     }
+    button {
+      display: flex;
+    }
   }
 
   & > span {
@@ -138,8 +138,16 @@ export const dataGridCellCss = css<DataGridCellFCProps>`
   text-overflow: ellipsis;
   user-select: ${({ $userSelect }) => ($userSelect ? 'text' : 'none')};
   white-space: nowrap;
-  border-right: 1px solid var(--color-base-200);
-  border-bottom: 1px solid var(--color-base-200);
+  ${({ $headerColor = 'base' }) => css`
+    border-right: 1px solid var(--color-${$headerColor}-200);
+    border-bottom: 1px solid var(--color-${$headerColor}-200);
+    &:first-child {
+      border-left: 1px solid var(--color-${$headerColor}-300);
+    }
+    &:last-child {
+      border-right: 1px solid var(--color-${$headerColor}-300);
+    }
+  `}
   background-color: ${({ $color = 'base' }) => `var(--color-${$color}-50)`};
   text-align: ${({ $textAlign = 'left' }) => $textAlign};
 `;
@@ -151,7 +159,7 @@ DataGridCell.displayName = 'DataGridCell';
 
 export const DataGridHeaderTitle = styled.div`
   white-space: normal;
-  font-weight: var(--font-bold);
+  font-weight: bold;
   color: var(--color-text-800);
   height: auto;
 `;
@@ -234,7 +242,6 @@ export const DataGridContainer = styled.div<{
               .map((w) => (typeof w === 'number' ? `${w}px` : w))
               .join(' + ')})`
       };
-      background-color: var(--color-base-200);
       z-index: 1;
     }`
     )}
@@ -282,23 +289,28 @@ const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
   position: sticky;
   align-items: center;
 
-  ${({ $headerColor }) =>
+  ${({ $headerColor = 'base' }) =>
     $headerColor
       ? css`
           background-color: var(--color-${$headerColor}-100);
           color: var(--color-${$headerColor}-900);
+          ${DataGridHeaderCellContainer}:first-child {
+            border-left: 1px solid var(--color-${$headerColor}-300);
+          }
+          ${DataGridHeaderCellContainer}:last-child {
+            border-right: 1px solid var(--color-${$headerColor}-300);
+          }
         `
       : css`
           background-color: var(--color-base-200);
           color: var(--color-text-800);
+          ${DataGridHeaderCellContainer}:first-child {
+            border-left: 1px solid var(--color-base-300);
+          }
+          ${DataGridHeaderCellContainer}:last-child {
+            border-right: 1px solid var(--color-base-300);
+          }
         `}
-
-  ${DataGridHeaderCellContainer}:first-child {
-    border-left: 1px solid var(--color-base-300);
-  }
-  ${DataGridHeaderCellContainer}:last-child {
-    border-left: 1px solid var(--color-base-300);
-  }
 `;
 
 export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
@@ -309,8 +321,9 @@ export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-top: 1px solid var(--color-base-300);
   top: 0;
+  border-top: 1px solid
+    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
 `;
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 
@@ -322,7 +335,10 @@ export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-bottom: 1px solid var(--color-base-300);
+  border-top: 1px solid var(--color-${({ $headerColor = 'base' }) =>
+    $headerColor}-300);
+  border-bottom: 1px solid
+    var(--color-${({ $headerColor = 'base' }) => $headerColor}-300);
   bottom: 0;
 `;
 DataGridFooterRow.displayName = 'DataGridFooterRow';
@@ -334,11 +350,8 @@ type DataGridRowProps = {
 export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
-  ${DataGridCell}:first-child {
-    border-left: 1px solid var(--color-base-300);
-  }
-  ${DataGridCell}:last-child {
-    border-left: 1px solid var(--color-base-300);
+  &:last-child > ${DataGridCell} {
+    border-bottom: none;
   }
 
   &:hover > ${DataGridCell} {

package/src/components/data/DataGrid/types.ts

@@ -23,6 +23,7 @@ export type DataGridCellFCProps = {
   $color?: ThemeColor;
   $textAlign?: 'left' | 'right' | 'center';
   $userSelect?: boolean;
+  $headerColor?: ThemeColor;
 };
 
 export type DataGridCellFC = FC<DataGridCellFCProps>;

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/icons.tsx","./src/index.ts","./src/typings.d.ts","./src/components/index.ts","./src/components/auth/loginform.tsx","./src/components/auth/loginpage.tsx","./src/components/auth/passwordrecoveryform.tsx","./src/components/auth/passwordresetform.tsx","./src/components/auth/index.ts","./src/components/auth/styles.ts","./src/components/data/index.ts","./src/components/data/datagrid/datagridcell.tsx","./src/components/data/datagrid/datagridfooter.tsx","./src/components/data/datagrid/datagridheader.tsx","./src/components/data/datagrid/datagridheadercell.tsx","./src/components/data/datagrid/datagridrowtemplate.tsx","./src/components/data/datagrid/datagridtoolbar.tsx","./src/components/data/datagrid/constants.ts","./src/components/data/datagrid/index.tsx","./src/components/data/datagrid/styles.ts","./src/components/data/datagrid/types.ts","./src/components/data/datagrid/datagridcolumnsmodal/helpers.ts","./src/components/data/datagrid/datagridcolumnsmodal/hooks.tsx","./src/components/data/datagrid/datagridcolumnsmodal/index.tsx","./src/components/data/datagrid/datagridcolumnsmodal/styles.ts","./src/components/data/datagrid/datagrideditablecell/checkboxeditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/dateeditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/numbereditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/texteditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/index.tsx","./src/components/data/datagrid/datagrideditablecell/styles.ts","./src/components/data/datagrid/datagrideditablecell/types.ts","./src/components/data/datagrid/datagridfiltermenu/filtervaluesscroller.tsx","./src/components/data/datagrid/datagridfiltermenu/hooks.tsx","./src/components/data/datagrid/datagridfiltermenu/index.tsx","./src/components/data/datagrid/datagridfiltermenu/styles.ts","./src/components/data/datagrid/filtermodalcontent/index.tsx","./src/components/data/datagrid/filtermodalcontent/styles.ts","./src/components/data/datagrid/helpers/columns.tsx","./src/components/data/datagrid/helpers/filters.ts","./src/components/data/datagrid/helpers/index.ts","./src/components/data/datagrid/hooks/index.ts","./src/components/data/datagrid/hooks/usedatagrid.tsx","./src/components/data/datagrid/hooks/usedatagridchangedrows.ts","./src/components/data/datagrid/hooks/usedatagridcopy.ts","./src/components/data/datagrid/hooks/usedatagridsettings.ts","./src/components/data/datagrid/hooks/userefreshmodal.tsx","./src/components/data/sqlrequestdatagrid/sqlrequestforeignlisteditablecell.tsx","./src/components/data/sqlrequestdatagrid/index.tsx","./src/components/data/sqlrequestdatagrid/styles.ts","./src/components/data/sqlrequestdatagrid/types.ts","./src/components/data/sqlrequestdatagrid/helpers/columns.tsx","./src/components/data/sqlrequestdatagrid/helpers/index.ts","./src/components/data/sqlrequestdatagrid/helpers/sqlrequests.ts","./src/components/data/sqlrequestforeignlist/index.tsx","./src/components/data/sqlrequestforeignlist/styles.ts","./src/components/data/sqlrequestforeignlist/types.ts","./src/components/data/sqlrequestgrid/index.tsx","./src/components/data/sqlrequestgrid/styles.ts","./src/components/data/sqlrequestgrid/types.ts","./src/components/data/sqlrequestgrid/filters/filterssidebar.tsx","./src/components/data/sqlrequestgrid/filters/styles.ts","./src/components/data/sqlrequestgrid/helpers/index.ts","./src/components/data/sqlrequestgrid/helpers/sqlrequests.ts","./src/components/data/virtualscroller/hooks.ts","./src/components/data/virtualscroller/index.tsx","./src/components/data/virtualscroller/styles.ts","./src/components/data/virtualscroller/types.ts","./src/components/forms/autotextarea.tsx","./src/components/forms/button.tsx","./src/components/forms/iconbutton.tsx","./src/components/forms/indeterminatecheckbox.tsx","./src/components/forms/numberinput.tsx","./src/components/forms/select.tsx","./src/components/forms/verticallabel.tsx","./src/components/forms/index.ts","./src/components/forms/styles.ts","./src/components/forms/form/checkbox.tsx","./src/components/forms/form/formgroup.tsx","./src/components/forms/form/input.tsx","./src/components/forms/form/row.tsx","./src/components/forms/form/select.tsx","./src/components/forms/form/textarea.tsx","./src/components/forms/form/index.tsx","./src/components/forms/form/styles.ts","./src/components/layout/columns.ts","./src/components/layout/flexbox.ts","./src/components/layout/index.ts","./src/components/layout/dropdown/index.tsx","./src/components/layout/dropdown/styles.ts","./src/components/layout/grid/index.tsx","./src/components/layout/grid/styles.ts","./src/components/layout/loading/index.tsx","./src/components/layout/loading/styles.ts","./src/components/layout/masonry/index.tsx","./src/components/layout/masonry/styles.ts","./src/components/layout/modal/index.tsx","./src/components/layout/modal/styles.ts","./src/components/search/highlightedtext.tsx","./src/components/search/quicksearchbar.tsx","./src/components/search/quicksearchresults.tsx","./src/components/search/index.ts","./src/components/search/styles.ts","./src/components/search/types.ts","./src/components/ui/ellipsis.tsx","./src/components/ui/label.tsx","./src/components/ui/index.ts","./src/components/ui/avatar/index.tsx","./src/components/ui/avatar/styles.ts","./src/components/ui/card/index.tsx","./src/components/ui/card/styles.ts","./src/components/ui/contextmenu/index.tsx","./src/components/ui/contextmenu/styles.ts","./src/components/ui/message/index.tsx","./src/components/ui/message/styles.ts","./src/components/ui/tabsview/tabslist.tsx","./src/components/ui/tabsview/tabsview.tsx","./src/components/ui/tabsview/index.ts","./src/components/ui/tabsview/styles.ts","./src/components/ui/tabsview/types.ts","./src/config/index.ts","./src/helpers/components.ts","./src/helpers/dates.ts","./src/helpers/getscrollbarsize.ts","./src/helpers/index.ts","./src/helpers/numbers.ts","./src/helpers/responsive.ts","./src/helpers/text.ts","./src/helpers/styled/index.ts","./src/helpers/styled/space.ts","./src/hooks/index.ts","./src/hooks/usecontainermediaquery.ts","./src/hooks/useelementsize.ts","./src/hooks/usemediaquery.ts","./src/hooks/usemediaqueryforwidth.ts","./src/hooks/usemutablestate.ts","./src/hooks/useshowarchived.ts","./src/hooks/usewindowsize.ts","./src/providers/hooks.ts","./src/providers/index.ts","./src/providers/authenticationprovider/helpers.ts","./src/providers/authenticationprovider/index.tsx","./src/providers/loadingprovider/index.tsx","./src/providers/portalsprovider/index.tsx","./src/providers/portalsprovider/styles.ts","./src/providers/settingsprovider/index.tsx","./src/providers/themeprovider/themeprovider.ts","./src/providers/themeprovider/defaulttheme.ts","./src/providers/themeprovider/helpers.ts","./src/providers/themeprovider/index.ts","./src/providers/themeprovider/types.ts","./src/providers/trackingprovider/hooks.ts","./src/providers/trackingprovider/index.tsx","./src/providers/uiproviders/index.tsx","./src/providers/uiproviders/styles.ts","./src/services/httpservice.ts","./src/services/websocketservice.ts","./src/services/advancedrequests.ts","./src/services/base.ts","./src/services/globalsearch.ts","./src/services/hooks.ts","./src/services/index.ts","./src/services/smartqueries.ts","./src/services/smartrequests.ts","./src/services/sqlrequests.ts","./src/services/updatesqlrequests.ts","./src/services/requests/auth.ts","./src/services/requests/generic.ts","./src/services/requests/tracking.ts","./src/services/requests/userprofiles.ts","./src/services/requests/users.ts","./src/services/types/auth.ts","./src/services/types/base.ts","./src/services/types/generic.ts","./src/services/types/tracking.ts","./src/services/types/userprofiles.ts","./src/services/types/users.ts"],"version":"5.6.2"}
+{"root":["./src/icons.tsx","./src/index.ts","./src/typings.d.ts","./src/components/index.ts","./src/components/auth/loginform.tsx","./src/components/auth/loginpage.tsx","./src/components/auth/passwordrecoveryform.tsx","./src/components/auth/passwordresetform.tsx","./src/components/auth/index.ts","./src/components/auth/styles.ts","./src/components/data/index.ts","./src/components/data/datagrid/datagridcell.tsx","./src/components/data/datagrid/datagridfooter.tsx","./src/components/data/datagrid/datagridheader.tsx","./src/components/data/datagrid/datagridheadercell.tsx","./src/components/data/datagrid/datagridrowtemplate.tsx","./src/components/data/datagrid/datagridtoolbar.tsx","./src/components/data/datagrid/constants.ts","./src/components/data/datagrid/index.tsx","./src/components/data/datagrid/styles.ts","./src/components/data/datagrid/types.ts","./src/components/data/datagrid/datagridcolumnsmodal/helpers.ts","./src/components/data/datagrid/datagridcolumnsmodal/hooks.tsx","./src/components/data/datagrid/datagridcolumnsmodal/index.tsx","./src/components/data/datagrid/datagridcolumnsmodal/styles.ts","./src/components/data/datagrid/datagrideditablecell/checkboxeditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/dateeditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/numbereditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/texteditablecell.tsx","./src/components/data/datagrid/datagrideditablecell/index.tsx","./src/components/data/datagrid/datagrideditablecell/styles.ts","./src/components/data/datagrid/datagrideditablecell/types.ts","./src/components/data/datagrid/datagridfiltermenu/filtervaluesscroller.tsx","./src/components/data/datagrid/datagridfiltermenu/helpers.ts","./src/components/data/datagrid/datagridfiltermenu/hooks.tsx","./src/components/data/datagrid/datagridfiltermenu/index.tsx","./src/components/data/datagrid/datagridfiltermenu/styles.ts","./src/components/data/datagrid/filtermodalcontent/index.tsx","./src/components/data/datagrid/filtermodalcontent/styles.ts","./src/components/data/datagrid/helpers/columns.tsx","./src/components/data/datagrid/helpers/filters.ts","./src/components/data/datagrid/helpers/index.ts","./src/components/data/datagrid/hooks/index.ts","./src/components/data/datagrid/hooks/usedatagrid.tsx","./src/components/data/datagrid/hooks/usedatagridchangedrows.ts","./src/components/data/datagrid/hooks/usedatagridcopy.ts","./src/components/data/datagrid/hooks/usedatagridsettings.ts","./src/components/data/datagrid/hooks/userefreshmodal.tsx","./src/components/data/sqlrequestdatagrid/sqlrequestforeignlisteditablecell.tsx","./src/components/data/sqlrequestdatagrid/index.tsx","./src/components/data/sqlrequestdatagrid/styles.ts","./src/components/data/sqlrequestdatagrid/types.ts","./src/components/data/sqlrequestdatagrid/helpers/columns.tsx","./src/components/data/sqlrequestdatagrid/helpers/index.ts","./src/components/data/sqlrequestdatagrid/helpers/sqlrequests.ts","./src/components/data/sqlrequestforeignlist/index.tsx","./src/components/data/sqlrequestforeignlist/styles.ts","./src/components/data/sqlrequestforeignlist/types.ts","./src/components/data/sqlrequestgrid/index.tsx","./src/components/data/sqlrequestgrid/styles.ts","./src/components/data/sqlrequestgrid/types.ts","./src/components/data/sqlrequestgrid/filters/filterssidebar.tsx","./src/components/data/sqlrequestgrid/filters/styles.ts","./src/components/data/sqlrequestgrid/helpers/index.ts","./src/components/data/sqlrequestgrid/helpers/sqlrequests.ts","./src/components/data/virtualscroller/hooks.ts","./src/components/data/virtualscroller/index.tsx","./src/components/data/virtualscroller/styles.ts","./src/components/data/virtualscroller/types.ts","./src/components/forms/autotextarea.tsx","./src/components/forms/button.tsx","./src/components/forms/iconbutton.tsx","./src/components/forms/indeterminatecheckbox.tsx","./src/components/forms/numberinput.tsx","./src/components/forms/select.tsx","./src/components/forms/verticallabel.tsx","./src/components/forms/index.ts","./src/components/forms/styles.ts","./src/components/forms/form/checkbox.tsx","./src/components/forms/form/formgroup.tsx","./src/components/forms/form/input.tsx","./src/components/forms/form/row.tsx","./src/components/forms/form/select.tsx","./src/components/forms/form/textarea.tsx","./src/components/forms/form/index.tsx","./src/components/forms/form/styles.ts","./src/components/layout/columns.ts","./src/components/layout/flexbox.ts","./src/components/layout/index.ts","./src/components/layout/dropdown/index.tsx","./src/components/layout/dropdown/styles.ts","./src/components/layout/grid/index.tsx","./src/components/layout/grid/styles.ts","./src/components/layout/loading/index.tsx","./src/components/layout/loading/styles.ts","./src/components/layout/masonry/index.tsx","./src/components/layout/masonry/styles.ts","./src/components/layout/modal/index.tsx","./src/components/layout/modal/styles.ts","./src/components/search/highlightedtext.tsx","./src/components/search/quicksearchbar.tsx","./src/components/search/quicksearchresults.tsx","./src/components/search/index.ts","./src/components/search/styles.ts","./src/components/search/types.ts","./src/components/ui/ellipsis.tsx","./src/components/ui/label.tsx","./src/components/ui/index.ts","./src/components/ui/avatar/index.tsx","./src/components/ui/avatar/styles.ts","./src/components/ui/card/index.tsx","./src/components/ui/card/styles.ts","./src/components/ui/contextmenu/index.tsx","./src/components/ui/contextmenu/styles.ts","./src/components/ui/message/index.tsx","./src/components/ui/message/styles.ts","./src/components/ui/tabsview/tabslist.tsx","./src/components/ui/tabsview/tabsview.tsx","./src/components/ui/tabsview/index.ts","./src/components/ui/tabsview/styles.ts","./src/components/ui/tabsview/types.ts","./src/config/index.ts","./src/helpers/components.ts","./src/helpers/dates.ts","./src/helpers/getscrollbarsize.ts","./src/helpers/index.ts","./src/helpers/numbers.ts","./src/helpers/responsive.ts","./src/helpers/text.ts","./src/helpers/styled/index.ts","./src/helpers/styled/space.ts","./src/hooks/index.ts","./src/hooks/usecontainermediaquery.ts","./src/hooks/useelementsize.ts","./src/hooks/usemediaquery.ts","./src/hooks/usemediaqueryforwidth.ts","./src/hooks/usemutablestate.ts","./src/hooks/useshowarchived.ts","./src/hooks/usewindowsize.ts","./src/providers/hooks.ts","./src/providers/index.ts","./src/providers/authenticationprovider/helpers.ts","./src/providers/authenticationprovider/index.tsx","./src/providers/loadingprovider/index.tsx","./src/providers/portalsprovider/index.tsx","./src/providers/portalsprovider/styles.ts","./src/providers/settingsprovider/index.tsx","./src/providers/themeprovider/themeprovider.ts","./src/providers/themeprovider/defaulttheme.ts","./src/providers/themeprovider/helpers.ts","./src/providers/themeprovider/index.ts","./src/providers/themeprovider/types.ts","./src/providers/trackingprovider/hooks.ts","./src/providers/trackingprovider/index.tsx","./src/providers/uiproviders/index.tsx","./src/providers/uiproviders/styles.ts","./src/services/httpservice.ts","./src/services/websocketservice.ts","./src/services/advancedrequests.ts","./src/services/base.ts","./src/services/globalsearch.ts","./src/services/hooks.ts","./src/services/index.ts","./src/services/smartqueries.ts","./src/services/smartrequests.ts","./src/services/sqlrequests.ts","./src/services/updatesqlrequests.ts","./src/services/requests/auth.ts","./src/services/requests/generic.ts","./src/services/requests/tracking.ts","./src/services/requests/userprofiles.ts","./src/services/requests/users.ts","./src/services/types/auth.ts","./src/services/types/base.ts","./src/services/types/generic.ts","./src/services/types/tracking.ts","./src/services/types/userprofiles.ts","./src/services/types/users.ts"],"version":"5.6.2"}