@addev-be/ui 0.16.4 → 0.16.7

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

@@ -1,17 +1,16 @@
-import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
-export declare const sqlTextColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-/**
- * Creates a column with a composed value from multiple fields,
- * and filtered by a text filter on the first field
- */
-export declare const sqlComposedColumn: <R extends Record<string, any>>(key: string, title: string, fields: string[], options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlMailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlPhoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlDateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlDateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-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, 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>;
+import { SqlRequestDataGridCheckboxColumn, SqlRequestDataGridDateColumn, SqlRequestDataGridForeignListColumn, SqlRequestDataGridNumberColumn, SqlRequestDataGridTextColumn } from '../types';
+import { DeepPartial } from '../../../../typings';
+import { SqlRequestForeignListItemFC } from '../../SqlRequestForeignList/types';
+export declare const sqlTextColumn: <R extends Record<string, any>>(key: string, title: React.ReactNode, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlMailColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlPhoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlDateColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridDateColumn<R>>) => SqlRequestDataGridDateColumn<R>;
+export declare const sqlDateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridDateColumn<R>>) => SqlRequestDataGridDateColumn<R>;
+export declare const sqlMonthColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlNumberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>) => SqlRequestDataGridNumberColumn<R>;
+export declare const sqlMoneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, currency?: string | ((row: R) => string), options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>) => SqlRequestDataGridNumberColumn<R>;
+export declare const sqlPercentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>) => SqlRequestDataGridNumberColumn<R>;
+export declare const sqlCheckboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridCheckboxColumn<R>>) => SqlRequestDataGridCheckboxColumn<R>;
+export declare const sqlImageColumn: <R extends Record<string, any>>(key: string, title: string, urlPrefix: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlColorColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
+export declare const sqlForeignListColumn: <R extends Record<string, any>, T extends Record<string, any>, C extends string>(key: string, columnMapping: Record<keyof R, C>, title: string, requestName: string, ItemTemplate: SqlRequestForeignListItemFC<T>, options?: DeepPartial<SqlRequestDataGridForeignListColumn<R, T | null>>) => SqlRequestDataGridForeignListColumn<R, T | null>;

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

@@ -11,126 +11,278 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sqlColorColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateTimeColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlComposedColumn = exports.sqlTextColumn = void 0;
+exports.sqlForeignListColumn = exports.sqlColorColumn = exports.sqlImageColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateTimeColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlTextColumn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_1 = require("react");
+var styles_1 = require("../styles");
 var helpers_1 = require("../../DataGrid/helpers");
 var dates_1 = require("../../../../helpers/dates");
 var numbers_1 = require("../../../../helpers/numbers");
+var lodash_1 = require("lodash");
+var CheckboxEditableCell_1 = require("../../DataGrid/DataGridEditableCell/CheckboxEditableCell");
+var constants_1 = require("../../DataGrid/constants");
+var DateEditableCell_1 = require("../../DataGrid/DataGridEditableCell/DateEditableCell");
+var NumberEditableCell_1 = require("../../DataGrid/DataGridEditableCell/NumberEditableCell");
+var SqlRequestForeignList_1 = require("../../SqlRequestForeignList");
+var TextEditableCell_1 = require("../../DataGrid/DataGridEditableCell/TextEditableCell");
 var sqlTextColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _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);
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        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"); },
+        editComponent: TextEditableCell_1.TextEditableCell,
+    }, options);
 };
 exports.sqlTextColumn = sqlTextColumn;
-/**
- * Creates a column with a composed value from multiple fields,
- * and filtered by a text filter on the first field
- */
-var sqlComposedColumn = function (key, title, fields, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ field: {
-                fieldAlias: key,
-                operator: 'jsonObject',
-                operands: fields.flatMap(function (field) { return [
-                    { 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], 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        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"); },
+        editComponent: TextEditableCell_1.TextEditableCell,
+    }, options);
 };
 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        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"); },
+        editComponent: TextEditableCell_1.TextEditableCell,
+    }, options);
 };
 exports.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, type: 'date', 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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy'; }, excelValue: function (value) { return (0, dates_1.formatDate)(value, 'YYYY-MM-DD'); }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDate)(value); }, renderer: function (value) { return (0, dates_1.formatDate)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        name: title,
+        type: 'date',
+        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 : ''; },
+        excelOptions: {
+            formatter: function () { return 'dd/mm/yyyy'; },
+            valueGetter: function (value) { return (0, dates_1.formatDate)(value, 'YYYY-MM-DD'); },
+        },
+        filter: __assign(__assign({}, (0, helpers_1.dateFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDate)(value); }, renderer: function (value) { return (0, dates_1.formatDate)(value); } }),
+        footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); },
+        editComponent: DateEditableCell_1.DateEditableCell,
+    }, options);
 };
 exports.sqlDateColumn = sqlDateColumn;
 var sqlDateTimeColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, type: 'date', render: function (row) { return (0, dates_1.formatDateTime)(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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy hh:mm:ss'; }, excelValue: function (value) { return (0, dates_1.formatDateTime)(value, 'YYYY-MM-DD HH:mm:ss'); }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDateTime)(value); }, renderer: function (value) { return (0, dates_1.formatDateTime)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        name: title,
+        type: 'date',
+        render: function (row) { return (0, dates_1.formatDateTime)(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 : ''; },
+        excelOptions: {
+            formatter: function () { return 'dd/mm/yyyy hh:mm:ss'; },
+            valueGetter: function (value) { return (0, dates_1.formatDateTime)(value, 'YYYY-MM-DD HH:mm:ss'); },
+        },
+        filter: __assign(__assign({}, (0, helpers_1.dateFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDateTime)(value); }, renderer: function (value) { return (0, dates_1.formatDateTime)(value); } }),
+        footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); },
+        editComponent: DateEditableCell_1.DateEditableCell,
+    }, options);
 };
 exports.sqlDateTimeColumn = sqlDateTimeColumn;
 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        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);
 };
 exports.sqlMonthColumn = sqlMonthColumn;
 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 (0, helpers_1.buildExcelFormat)(decimals); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, 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);
+    var column = {
+        key: key,
+        name: title,
+        type: 'number',
+        decimals: decimals,
+        textAlign: 'right',
+        render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; },
+        excelOptions: {
+            formatter: function () { return (0, helpers_1.buildExcelFormat)(decimals); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
+        },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
+        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,
+        },
+        editComponent: (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, props))); }),
+    };
+    return (0, lodash_1.merge)(column, options);
 };
 exports.sqlNumberColumn = sqlNumberColumn;
-var sqlMoneyColumn = function (key, title, decimals, options) {
-    var _a;
+var sqlMoneyColumn = function (key, title, decimals, currency, options) {
     if (decimals === void 0) { decimals = 2; }
-    return (_a = {},
-        _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, helpers_1.buildExcelFormat)(decimals, ' €'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, 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);
+    if (currency === void 0) { currency = 'EUR'; }
+    var column = {
+        key: key,
+        name: title,
+        type: 'number',
+        decimals: decimals,
+        currency: currency,
+        textAlign: 'right',
+        render: typeof currency === 'function'
+            ? function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals, currency(row))) !== null && _a !== void 0 ? _a : ''; }
+            : function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals, currency)) !== null && _a !== void 0 ? _a : ''; },
+        excelOptions: {
+            formatter: typeof currency === 'function'
+                ? function (row) { return (0, helpers_1.buildExcelFormat)(decimals, currency(row)); }
+                : function () { return (0, helpers_1.buildExcelFormat)(decimals, currency); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
+        },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
+        filter: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: typeof currency === 'function'
+                ? function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals, currency(value))) !== null && _a !== void 0 ? _a : ''; }
+                : function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals, currency)) !== null && _a !== void 0 ? _a : ''; } }),
+        footer: {
+            sum: null,
+            avg: null,
+            count: null,
+            max: null,
+            min: null,
+        },
+        editComponent: (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, props))); }),
+    };
+    return (0, lodash_1.merge)(column, options);
 };
 exports.sqlMoneyColumn = sqlMoneyColumn;
 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, helpers_1.buildExcelFormat)(decimals, '%'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, 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);
+    var column = {
+        key: key,
+        name: title,
+        type: 'number',
+        render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; },
+        excelOptions: {
+            formatter: function () { return (0, helpers_1.buildExcelFormat)(decimals, '%'); },
+            valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
+        },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
+        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 : ''; } }),
+        editComponent: (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, props))); }),
+    };
+    return (0, lodash_1.merge)(column, options);
 };
 exports.sqlPercentageColumn = sqlPercentageColumn;
 var sqlCheckboxColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                var value = !!+((_a = row[key]) !== null && _a !== void 0 ? _a : 0);
-                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value ? ' 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);
+    return (0, lodash_1.merge)({
+        key: key,
+        name: title,
+        type: 'checkbox',
+        render: function (row) {
+            var _a;
+            var value = !!+((_a = row[key]) !== null && _a !== void 0 ? _a : 0);
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value ? ' 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"); },
+        editComponent: CheckboxEditableCell_1.CheckboxEditableCell,
+    }, options);
 };
 exports.sqlCheckboxColumn = sqlCheckboxColumn;
+var sqlImageColumn = function (key, title, urlPrefix, options) {
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { return ((0, jsx_runtime_1.jsx)(styles_1.SqlImageWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.SqlImage, { src: row[key] ? "".concat(urlPrefix).concat(row[key]) : "".concat(urlPrefix, "no-image.png"), alt: title }) })); },
+        getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+        footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); },
+    }, options);
+};
+exports.sqlImageColumn = sqlImageColumn;
 var sqlColorColumn = function (key, title, options) {
-    var _a;
-    return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); }, excelValue: function () { return ''; }, excelBackgroundColor: function (value) { return value; }, 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 : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
-                        backgroundColor: value,
-                        width: 'var(--space-16)',
-                        height: '1em',
-                    }, children: "\u00A0" })); } }) }, options),
-        _a);
+    return (0, lodash_1.merge)({
+        key: key,
+        type: 'text',
+        name: title,
+        render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); },
+        excelOptions: {
+            valueGetter: function () { return ''; },
+            colorGetter: function (value) { return value; },
+        },
+        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 : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    backgroundColor: value,
+                    width: 'var(--space-16)',
+                    height: '1em',
+                }, children: "\u00A0" })); } }),
+    }, options);
 };
 exports.sqlColorColumn = sqlColorColumn;
+var convertRowToItem = function (row, columnMapping) { return (0, lodash_1.mapKeys)(row, function (_, key) { return columnMapping[key]; }); };
+var convertItemToPartialRow = function (row, item, columnMapping) {
+    var partialRow = {};
+    Object.entries(columnMapping).forEach(function (_a) {
+        var _b;
+        var key = _a[0], value = _a[1];
+        partialRow[key] = ((_b = item === null || item === void 0 ? void 0 : item[value]) !== null && _b !== void 0 ? _b : null);
+    });
+    return partialRow;
+};
+var sqlForeignListColumn = function (key, columnMapping, title, requestName, ItemTemplate, options) {
+    var column = {
+        key: key,
+        name: title,
+        type: 'foreignList',
+        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 : ''; },
+        render: function (row) { return ((0, jsx_runtime_1.jsx)(ItemTemplate, { item: convertRowToItem(row, columnMapping), index: 0 })); },
+        filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, renderer: function (value) { return value; } }),
+        footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); },
+        requestName: requestName,
+        idColumn: 'Id',
+        itemTemplate: ItemTemplate,
+        columns: Object.values(columnMapping),
+        editComponent: (0, react_1.forwardRef)(function (_a, ref) {
+            var row = _a.row, onChange = _a.onChange, onClose = _a.onClose, context = _a.context;
+            var _b = (0, react_1.useContext)(context).rowHeight, rowHeight = _b === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _b;
+            return ((0, jsx_runtime_1.jsx)(SqlRequestForeignList_1.SqlRequestForeignList, { initialValue: convertRowToItem(row, columnMapping), maxRows: 10, rowHeight: rowHeight - 2, onItemChanged: onChange, onBlur: function () { return onClose(true); }, ref: ref, requestName: column.requestName, idColumn: column.idColumn, columns: column.columns, itemTemplate: column.itemTemplate, valueTemplate: column.valueTemplate }));
+        }),
+        itemToPartialRow: function (row, value) {
+            return convertItemToPartialRow(row, value, columnMapping);
+        },
+    };
+    return (0, lodash_1.merge)(column, options);
+};
+exports.sqlForeignListColumn = sqlForeignListColumn;