@addev-be/ui 0.2.6 → 0.2.7

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

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterValuesScrollerContainer = exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
+exports.FilterValuesScrollerContainer = exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.VIRTUAL_SCROLL_TOLERANCE = 20;
 exports.TOOLBAR_HEIGHT = 40;
@@ -86,6 +86,14 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_13 ||
     return "".concat($rowHeight, "px");
 }, exports.VirtualScrollerContainer);
 exports.DataGridContainer.displayName = 'DataGridContainer';
+var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __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 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+    return "".concat($headerRowHeight, "px");
+}, function (_a) {
+    var $headerColor = _a.$headerColor;
+    return $headerColor
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __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_15 || (templateObject_15 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
+});
 exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
     return ({
@@ -93,32 +101,34 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  top: ", "px;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  top: ", "px;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
-    return "".concat($headerRowHeight, "px");
-}, exports.TOOLBAR_HEIGHT, function (_a) {
-    var $headerColor = _a.$headerColor;
-    return $headerColor
-        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __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_15 || (templateObject_15 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
-});
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, exports.TOOLBAR_HEIGHT);
 exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';
-exports.DataGridRow = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a) {
+    var $gridTemplateColumns = _a.$gridTemplateColumns;
+    return ({
+        style: {
+            gridTemplateColumns: $gridTemplateColumns,
+        },
+    });
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
+exports.DataGridFooterRow.displayName = 'DataGridFooterRow';
+exports.DataGridRow = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
 exports.DataGridRow.displayName = 'DataGridRow';
-exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
+exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
 exports.LoadingCell.displayName = 'LoadingCell';
-var selectionCellStyle = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+var selectionCellStyle = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
+exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.SelectionCell.displayName = 'SelectionCell';
-exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.HeaderSelectionCell.displayName = 'HeaderSelectionCell';
 exports.ResizeBackdrop = styled_components_1.default.div.attrs({
     className: 'ResizeBackdrop',
-})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
+})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
 exports.ResizeBackdrop.displayName = 'ResizeBackdrop';
 exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
     className: 'FilterValuesScrollerContainer',
-})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), function (_a) {
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), function (_a) {
     var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;

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

@@ -6,13 +6,15 @@ export type DataGridCellFC = FC<{
     onDoubleClick?: MouseEventHandler;
     style?: CSSProperties;
 }>;
+export type DataGridFooterPredefinedFunction = 'average' | 'count' | 'max' | 'min' | 'sum';
+export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
 export type DataGridColumn<R> = {
     component?: DataGridCellFC;
     editable?: boolean;
     excelFormatter?: (value: any) => string;
     excelValue?: (value: any) => string;
     filter?: DataGridFilter;
-    footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
+    footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
     getter?: (row: R) => string | number;
     name: string;
     order?: number;
@@ -50,6 +52,8 @@ export type DataGridProps<R> = {
     filter?: boolean;
     sort?: boolean;
     initialSorts?: Record<string, DataGridSort>;
+    initialFooters?: Record<string, string>;
+    onFootersChanged?: (footers: Record<string, string>) => void;
     filterValuesLoader?: (columnKey: string) => Promise<(string | number | null)[]>;
     loadCopyRows?: () => Promise<R[]>;
     refresh?: () => void;
@@ -66,6 +70,9 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     setSorts: (sorts: Record<string, DataGridSort>) => void;
     filters?: DataGridFilters;
     setFilters: Dispatch<SetStateAction<DataGridFilters>>;
+    footers?: Record<string, string>;
+    setFooters: Dispatch<SetStateAction<Record<string, string>>>;
+    footerFunctions?: Record<string, DataGridFooterFunction<R>>;
     visibleColumns: DataGridColumnKeyValuePair<R>[];
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
     setColumnWidth: (key: string, width: number) => void;

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

@@ -11,6 +11,6 @@ export declare const sqlDateColumn: <R extends Record<string, any>>(key: string,
 export declare const sqlMonthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlNumberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlMoneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlPercentageColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
+export declare const sqlPercentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlCheckboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlColorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;

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

@@ -19,7 +19,7 @@ var dates_1 = require("../../../../helpers/dates");
 var sqlTextColumn = 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: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign(__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: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options), { footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }),
         _a);
 };
 exports.sqlTextColumn = sqlTextColumn;
@@ -37,35 +37,35 @@ var sqlComposedColumn = function (key, title, fields, options) {
                     { constantValue: field },
                     { fieldName: field },
                 ]; }),
-            }, 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: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0] }, options),
+            }, 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: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0], footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlComposedColumn = sqlComposedColumn;
 var sqlMailColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { 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: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlMailColumn = sqlMailColumn;
 var sqlPhoneColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { 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: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (0, dates_1.formatDate)(row[key]); }, 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, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (0, dates_1.formatDate)(row[key]); }, 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, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlDateColumn = sqlDateColumn;
 var sqlMonthColumn = 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: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlMonthColumn = sqlMonthColumn;
@@ -73,7 +73,13 @@ var sqlNumberColumn = 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+                sum: null,
+                avg: null,
+                count: null,
+                max: null,
+                min: null,
+            } }, options),
         _a);
 };
 exports.sqlNumberColumn = sqlNumberColumn;
@@ -81,21 +87,28 @@ var sqlMoneyColumn = 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, type: 'number', 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+                sum: null,
+                avg: null,
+                count: null,
+                max: null,
+                min: null,
+            } }, options),
         _a);
 };
 exports.sqlMoneyColumn = sqlMoneyColumn;
-var sqlPercentageColumn = function (key, title, options) {
+var sqlPercentageColumn = 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatPercentage)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.sqlPercentageColumn = sqlPercentageColumn;
 var sqlCheckboxColumn = 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlCheckboxColumn = sqlCheckboxColumn;

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

@@ -63,24 +63,25 @@ var DataGrid_1 = require("../DataGrid");
 var helpers_1 = require("./helpers");
 var helpers_2 = require("../DataGrid/helpers");
 var SqlRequestDataGrid = function (_a) {
-    var _b;
+    var _b, _c;
     var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
     var currentRows = (0, react_1.useRef)([]);
-    var _c = (0, react_1.useState)([]), rows = _c[0], setRows = _c[1];
-    var _d = (0, react_1.useState)(0), start = _d[0], setStart = _d[1];
-    var _e = (0, react_1.useState)(50), length = _e[0], setLength = _e[1];
-    var _f = (0, react_1.useState)(-1), total = _f[0], setTotal = _f[1];
-    var _g = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _g[0], sqlIdRequest = _g[1];
-    var _h = (0, react_1.useState)({}), conditions = _h[0], setConditions = _h[1];
-    var _j = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
-        var _b, _c;
+    var _d = (0, react_1.useState)([]), rows = _d[0], setRows = _d[1];
+    var _e = (0, react_1.useState)(0), start = _e[0], setStart = _e[1];
+    var _f = (0, react_1.useState)(50), length = _f[0], setLength = _f[1];
+    var _g = (0, react_1.useState)(-1), count = _g[0], setCount = _g[1];
+    var _h = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _h[0], sqlIdRequest = _h[1], sqlPartialRequest = _h[2];
+    var _j = (0, react_1.useState)({}), conditions = _j[0], setConditions = _j[1];
+    var _k = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
+        var _b, _c, _d;
         var columnKey = _a[0], direction = _a[1];
         return ({
             field: (_c = (_b = props.columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            type: (_d = props.columns[columnKey].type) !== null && _d !== void 0 ? _d : 'text',
             direction: direction.toUpperCase(),
         });
-    })), orderBy = _j[0], setOrderBy = _j[1];
-    var _k = (0, react_1.useMemo)(function () {
+    })), orderBy = _k[0], setOrderBy = _k[1];
+    var _l = (0, react_1.useMemo)(function () {
         var _a, _b;
         return [
             __spreadArray(__spreadArray([], Object.keys(props.columns), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
@@ -88,16 +89,19 @@ var SqlRequestDataGrid = function (_a) {
                 return (0, helpers_2.isColumnVisible)(props.columns[key]);
             }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
         ];
-    }, [props.columns, props.hiddenColumns]), columnsKeys = _k[0], visibleColumnsKeys = _k[1];
+    }, [props.columns, props.hiddenColumns]), columnsKeys = _l[0], visibleColumnsKeys = _l[1];
+    var columnTypes = (0, react_1.useMemo)(function () {
+        return visibleColumnsKeys.map(function (key) { var _a; return String((_a = props.columns[key].type) !== null && _a !== void 0 ? _a : 'text'); });
+    }, [visibleColumnsKeys, props.columns]);
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);
         setStart(0);
         setLength(50);
-        setTotal(-1);
+        setCount(-1);
     }, []);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
         var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
-        setTotal(-1);
+        setCount(-1);
         setConditions(newConditions);
     }, []);
     var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
@@ -111,29 +115,32 @@ var SqlRequestDataGrid = function (_a) {
         });
         setOrderBy(newOrderBy);
     }, [refresh]);
-    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getTotal) {
+    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
         if (conditions === void 0) { conditions = []; }
         if (orderBy === void 0) { orderBy = []; }
         if (start === void 0) { start = 0; }
         if (length === void 0) { length = 100; }
-        if (getTotal === void 0) { getTotal = false; }
+        if (getCount === void 0) { getCount = false; }
         sqlRequest({
             columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
             returnColumns: returnColumns.includes('Id')
                 ? returnColumns
                 : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+            columnTypes: columnTypes.includes('Id')
+                ? columnTypes
+                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
             conditions: conditions,
             orderBy: orderBy,
             start: start,
             length: length,
-            getTotal: getTotal,
+            getCount: getCount,
         }).then(function (response) {
             var _a;
             var _b;
-            if (getTotal) {
-                currentRows.current = Array(response.total).fill(null);
-                if (getTotal)
-                    setTotal((_b = response.total) !== null && _b !== void 0 ? _b : 0);
+            if (getCount) {
+                currentRows.current = Array(response.count).fill(null);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
             }
             var parsedRows = props.parser
                 ? response.data.map(props.parser)
@@ -146,18 +153,20 @@ var SqlRequestDataGrid = function (_a) {
         trailing: true,
     }));
     var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return sqlRequest({
             columns: columnsKeys,
             returnColumns: [columnKey],
-            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values(lodash_1.default.pickBy(conditions, function (condition, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            columnTypes: [(_a = props.columns[columnKey].type) !== null && _a !== void 0 ? _a : 'text'],
+            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
             orderBy: [
                 {
-                    field: (_f = (_d = (_b = props.columns[columnKey].filterField) !== null && _b !== void 0 ? _b : (_c = props.columns[columnKey].field) === null || _c === void 0 ? void 0 : _c.fieldAlias) !== null && _d !== void 0 ? _d : (_e = props.columns[columnKey].field) === null || _e === void 0 ? void 0 : _e.fieldName) !== null && _f !== void 0 ? _f : columnKey,
+                    field: (_g = (_e = (_c = props.columns[columnKey].filterField) !== null && _c !== void 0 ? _c : (_d = props.columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = props.columns[columnKey].field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
+                    type: (_h = props.columns[columnKey].type) !== null && _h !== void 0 ? _h : 'text',
                     direction: 'ASC',
                 },
             ],
-            getTotal: false,
+            getCount: false,
             unique: true,
         }).then(function (response) {
             return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = props.columns[columnKey].filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
@@ -165,14 +174,14 @@ var SqlRequestDataGrid = function (_a) {
     }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, total < 0);
+        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, count < 0);
     }, [
         props.columns,
         conditions,
         orderBy,
         start,
         length,
-        total,
+        count,
         props.conditions,
         columnsKeys,
         visibleColumnsKeys,
@@ -182,10 +191,11 @@ var SqlRequestDataGrid = function (_a) {
         return sqlRequest({
             columns: columnsKeys,
             returnColumns: visibleColumnsKeys,
+            columnTypes: columnTypes,
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) {
             return props.parser ? response.data.map(props.parser) : response.data;
         });
@@ -193,23 +203,27 @@ var SqlRequestDataGrid = function (_a) {
         sqlRequest,
         columnsKeys,
         visibleColumnsKeys,
+        columnTypes,
         props.conditions,
         props.parser,
         conditions,
         orderBy,
-        total,
+        count,
     ]);
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlIdRequest({
-            columns: columnsKeys,
+            columns: columnsKeys.includes('Id')
+                ? columnsKeys
+                : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
             returnColumns: ['Id'],
+            columnTypes: ['text'],
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]);
+    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);
@@ -219,6 +233,64 @@ var SqlRequestDataGrid = function (_a) {
     var onSelectionChange = (0, react_1.useCallback)(function (selectedKeys) {
         onSelectionChangeFromProps === null || onSelectionChangeFromProps === void 0 ? void 0 : onSelectionChangeFromProps(selectedKeys);
     }, [onSelectionChangeFromProps]);
-    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds }, props)));
+    /** FOOTERS */
+    var _m = (0, react_1.useState)((_c = props.initialFooters) !== null && _c !== void 0 ? _c : {}), footers = _m[0], setFooters = _m[1];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _o = (0, react_1.useState)({}), footerData = _o[0], setFooterData = _o[1];
+    var loadFooters = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (Object.keys(footers).length === 0) {
+            setFooterData({});
+        }
+        else {
+            sqlPartialRequest({
+                columns: columnsKeys.includes('Id')
+                    ? columnsKeys
+                    : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
+                returnColumns: [],
+                columnTypes: [],
+                totalColumns: footers,
+                conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
+                orderBy: orderBy,
+            }).then(function (response) { var _a; return setFooterData((_a = response.totals) !== null && _a !== void 0 ? _a : {}); });
+        }
+    }, [
+        columnsKeys,
+        conditions,
+        footers,
+        orderBy,
+        props.conditions,
+        sqlPartialRequest,
+    ]);
+    (0, react_1.useEffect)(function () {
+        loadFooters();
+    }, [loadFooters]);
+    var footerFunctions = (0, react_1.useMemo)(function () {
+        return !footerData
+            ? {}
+            : Object.entries(footers).reduce(function (acc, _a) {
+                var _b, _c;
+                var columnKey = _a[0], footerKey = _a[1];
+                var column = props.columns[columnKey];
+                var footerFunc = typeof (column === null || column === void 0 ? void 0 : column.footer) === 'function'
+                    ? column.footer
+                    : (_b = column === null || column === void 0 ? void 0 : column.footer) === null || _b === void 0 ? void 0 : _b[footerKey];
+                var render = footerFunc
+                    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        function (data) { return footerFunc([data], [], []); }
+                    : (_c = column === null || column === void 0 ? void 0 : column.render) !== null && _c !== void 0 ? _c : lodash_1.default.identity;
+                if (!column) {
+                    return acc;
+                }
+                acc[columnKey] = function () { return render(footerData, column); };
+                return acc;
+            }, {});
+    }, [footerData, footers, props.columns]);
+    var contextOverride = (0, react_1.useMemo)(function () { return ({
+        footers: footers,
+        setFooters: setFooters,
+        footerFunctions: footerFunctions,
+    }); }, [footers, setFooters, footerFunctions]);
+    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds, contextOverride: contextOverride }, props)));
 };
 exports.SqlRequestDataGrid = SqlRequestDataGrid;

package/dist/components/ui/ContextMenu/index.d.ts

@@ -0,0 +1,11 @@
+import { Divider, MenuItemContainer, SubMenu } from './styles';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+    Item: typeof MenuItemContainer;
+    ParentItem: typeof ParentMenuItem;
+    Divider: typeof Divider;
+    SubMenu: typeof SubMenu;
+};
+export declare const ContextMenu: ContextMenuFC;
+export declare const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ui/ContextMenu/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentMenuItem = exports.ContextMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var react_1 = require("react");
+var ContextMenu = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { onClick: function (e) { return e.stopPropagation(); }, children: children }));
+};
+exports.ContextMenu = ContextMenu;
+var ParentMenuItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = (0, react_1.useState)(false), isOpened = _b[0], setIsOpened = _b[1];
+    var _c = (0, react_1.useState)(null), currentTimeout = _c[0], setCurrentTimeout = _c[1];
+    var stopTimeout = (0, react_1.useCallback)(function () {
+        if (currentTimeout) {
+            clearTimeout(currentTimeout);
+        }
+        setCurrentTimeout(null);
+    }, [currentTimeout]);
+    var startTimeout = (0, react_1.useCallback)(function (open) {
+        stopTimeout();
+        setCurrentTimeout(window.setTimeout(function () {
+            setIsOpened(open);
+        }, open ? 100 : 300));
+    }, [stopTimeout]);
+    var open = (0, react_1.useCallback)(function () { return startTimeout(true); }, [startTimeout]);
+    var close = (0, react_1.useCallback)(function () { return startTimeout(false); }, [startTimeout]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuItemContainer, __assign({}, props, { className: isOpened ? 'opened' : '', onMouseEnter: open, onMouseLeave: close, "$withArrow": true, children: children })));
+};
+exports.ParentMenuItem = ParentMenuItem;
+exports.ContextMenu.Item = styles_1.MenuItemContainer;
+exports.ContextMenu.ParentItem = exports.ParentMenuItem;
+exports.ContextMenu.Divider = styles_1.Divider;
+exports.ContextMenu.SubMenu = styles_1.SubMenu;

package/dist/components/ui/ContextMenu/styles.d.ts

@@ -0,0 +1,18 @@
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+export declare const MenuContainer: 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 SubMenu: 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 MenuItemContainer: 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").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>, {
+    $color?: ThemeColor;
+    disabled?: boolean;
+    $withArrow?: boolean;
+    $opened?: boolean;
+}>> & string;
+export declare const Divider: 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;