@addev-be/ui 0.20.5 → 0.20.8

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

@@ -1,41 +1,86 @@
 import * as t from 'io-ts';
 import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from 'react';
-import { SettingsContextProps } from '../../../providers/SettingsProvider';
+import { DataGridEditableCellFC } from './DataGridEditableCell/types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export type DataGridCellFC = FC<{
+export type DataGridCellFCProps = {
     onDoubleClick?: MouseEventHandler;
     style?: CSSProperties;
-}>;
+    $color?: ThemeColor;
+    $textAlign?: 'left' | 'right' | 'center';
+    $userSelect?: boolean;
+};
+export type DataGridCellFC = FC<DataGridCellFCProps>;
 export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';
 export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
-export type DataGridColumn<R> = {
+type ExcelOptions = {
+    formatter?: (value: any) => string;
+    colorGetter?: (value: any) => string;
+    valueGetter?: (value: any) => string;
+};
+type CommonGridColumnProps<R, T> = {
+    key: string;
     component?: DataGridCellFC;
-    editable?: boolean;
-    excelFormatter?: (value: any) => string;
-    excelBackgroundColor?: (value: any) => string;
-    excelValue?: (value: any) => string;
+    color?: ThemeColor;
+    excelOptions?: ExcelOptions;
+    textAlign?: 'left' | 'right' | 'center';
     filter?: DataGridFilter;
     footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
-    getter?: (row: R) => string | number;
-    name: string;
+    name: ReactNode;
     order?: number;
-    propertyName?: keyof R;
+    getter: (row: R) => T;
     render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
     resizable?: boolean;
     sortGetter?: (row: R) => string | number;
-    type?: 'text' | 'number' | 'date';
     width?: number;
-    settingsContext?: Context<SettingsContextProps>;
 };
-export type DataGridColumns<R> = Record<string, DataGridColumn<R>>;
+export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
+    editable?: boolean;
+    editComponent?: DataGridEditableCellFC<R, T>;
+    itemToPartialRow?: (key: string, row: R, value: T) => Partial<R>;
+};
+export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'text';
+};
+export type DataGridNumberColumn<R> = EditableDataGridColumn<R, number> & {
+    type: 'number';
+    decimals?: number;
+    currency?: string | ((row: R) => string);
+    prefix?: string;
+    suffix?: string;
+};
+export type DataGridDateColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'date';
+};
+export type DataGridCheckboxColumn<R> = EditableDataGridColumn<R, boolean> & {
+    type: 'checkbox';
+};
+export type DataGridSelectColumn<R, T = any> = EditableDataGridColumn<R, T | null> & {
+    type: 'select';
+    items: T[];
+    itemKey: (item: T) => string;
+    itemLabel: (item: T) => string;
+};
+export type DataGridForeignListColumn<R> = EditableDataGridColumn<R, string | null> & {
+    type: 'foreignList';
+};
+export type DataGridColorColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'color';
+};
+export type DataGridColumn<R> = DataGridTextColumn<R> | DataGridNumberColumn<R> | DataGridDateColumn<R> | DataGridCheckboxColumn<R> | DataGridSelectColumn<R> | DataGridForeignListColumn<R> | DataGridColorColumn<R>;
+export type DataGridColumnWithFilter<R> = DataGridColumn<R> & {
+    filter: DataGridFilter;
+};
+export type DataGridColumns<R> = DataGridColumn<R>[];
 export type DataGridFilters = Record<string, DataGridFilter<DataGridFilterType>>;
 export type DataGridProps<R> = {
     name?: string;
     className?: string;
     rows: R[];
+    setRows?: Dispatch<SetStateAction<R[]>>;
     columns: DataGridColumns<R>;
-    rowKey: keyof R | ((row: R) => string);
+    rowKey: string;
     selectable?: boolean;
+    userSelect?: boolean;
     editable?: boolean;
     onRowDoubleClick?: (row: R, e: MouseEvent) => void;
     onSelectionChange?: (keys: string[]) => void;
@@ -60,8 +105,13 @@ export type DataGridProps<R> = {
     loadCopyRows?: () => Promise<R[]>;
     refresh?: () => void;
     headerColor?: ThemeColor;
+    fixedColumnsCount?: number;
+    onRowEdited?: (row: R, columnKey: keyof R, value: any) => void;
+    onSaveClicked?: (addedRows: DataGridEditedRows<R>, editedRows: DataGridEditedRows<R>) => Promise<string[]>;
+    onAddClicked?: () => Promise<R>;
 };
 export type DataGridContextProps<R> = DataGridProps<R> & {
+    setRows: Dispatch<SetStateAction<R[]>>;
     editingCell?: [number, number];
     setEditingCell: Dispatch<SetStateAction<[number, number]>>;
     sortedRows: R[];
@@ -75,7 +125,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     footers?: Record<string, string>;
     setFooters: Dispatch<SetStateAction<Record<string, string>>>;
     footerFunctions?: Record<string, DataGridFooterFunction<R>>;
-    visibleColumns: DataGridColumnKeyValuePair<R>[];
+    visibleColumns: DataGridColumns<R>;
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
     setColumnWidth: (key: string, width: number) => void;
     saveSettings: (newSettings?: DataGridSettings) => void;
@@ -84,7 +134,18 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     length: number;
     rowKeyGetter: (row: R) => string;
     gridTemplateColumns: string;
+    resizingColumnKey: string | null;
+    startResizing: (e: MouseEvent, columnKey: string) => void;
+    moveResizing: (e: MouseEvent) => void;
+    endResizing: () => void;
     toggleSelection: (key: string) => void;
+    addedRows: DataGridEditedRows<R>;
+    updatedRows: DataGridEditedRows<R>;
+    editRow: (row: Partial<R>) => void;
+    addRow: (row: R) => void;
+    addRows: (rows: R[]) => void;
+    updateRow: (row: Partial<R>) => void;
+    clearChangedRows: (keys?: string[]) => void;
 };
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
 export declare const dataGridSettingCodec: t.PartialC<{
@@ -114,6 +175,11 @@ export type DataGridCellProps<R> = {
     context: DataGridContext<R>;
     className?: string;
     style?: CSSProperties;
+    userSelect?: boolean;
+    color?: ThemeColor;
+};
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
+    column: EditableDataGridColumn<R, T>;
 };
 export type DataGridHeaderCellProps<R> = {
     columnKey: string;
@@ -122,6 +188,7 @@ export type DataGridHeaderCellProps<R> = {
     context: DataGridContext<R>;
     onFilterButtonClicked?: (columnKey: string) => void;
     isFilterOpen?: boolean;
+    color?: ThemeColor;
 };
 export type DataGridSort = 'asc' | 'desc';
 export type DataGridFilterPredicate<T> = (valueToVerify: T) => boolean;
@@ -166,7 +233,10 @@ export type DataGridRowTemplateProps<R> = {
     toggleSelection?: () => void;
     context: DataGridContext<R>;
 };
-export type DataGridRefProps = {
+export type DataGridRefProps<R> = {
     refresh: () => void;
     setSelectedKeys: (keys: string[]) => void;
+    addRows: (rows: R[]) => void;
 };
+export type DataGridEditedRows<R> = Partial<R>[];
+export {};

package/dist/components/data/SqlRequestDataGrid/SqlRequestForeignListEditableCell.d.ts

@@ -0,0 +1,2 @@
+import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
+export declare const SqlRequestForeignListEditableCell: <R extends Record<string, any>>(props: SqlRequestForeignListProps<R> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;

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

@@ -0,0 +1,19 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SqlRequestForeignListEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var SqlRequestForeignList_1 = require("../SqlRequestForeignList");
+var SqlRequestForeignListEditableCellInner = function (props, ref) { return (0, jsx_runtime_1.jsx)(SqlRequestForeignList_1.SqlRequestForeignList, __assign({}, props, { ref: ref })); };
+exports.SqlRequestForeignListEditableCell = (0, react_1.forwardRef)(SqlRequestForeignListEditableCellInner);

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,279 @@ 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 react/display-name */
+/* 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, prefix: column.prefix, suffix: column.suffix }, 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 (key, row, item, columnMapping) {
+    var partialRow = { Id: key };
+    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 (key, row, value) {
+            return convertItemToPartialRow(key, row, value, columnMapping);
+        },
+    };
+    return (0, lodash_1.merge)(column, options);
+};
+exports.sqlForeignListColumn = sqlForeignListColumn;