@addev-be/ui 1.1.3 → 1.1.4

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

@@ -1,479 +1,526 @@
-/* eslint-disable react/display-name */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { Ref, forwardRef, useContext } from 'react';
-import { SqlImage, SqlImageWrapper } from '../styles';
-import {
-  SqlRequestDataGridCheckboxColumn,
-  SqlRequestDataGridDateColumn,
-  SqlRequestDataGridForeignListColumn,
-  SqlRequestDataGridNumberColumn,
-  SqlRequestDataGridTextColumn,
-} from '../types';
-import {
-  buildExcelFormat,
-  dateFilter,
-  numberFilter,
-  textFilter,
-} from '../../DataGrid/helpers';
-import { formatDate, formatDateTime } from '../../../../helpers/dates';
-import {
-  formatMoney,
-  formatNumber,
-  formatNumberInvariant,
-  formatPercentage,
-} from '../../../../helpers/numbers';
-import { mapKeys, merge } from 'lodash';
-
-import { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
-import { DEFAULT_ROW_HEIGHT } from '../../DataGrid/constants';
-import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
-import { DeepPartial } from '../../../../typings';
-import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
-import { SqlRequestForeignList } from '../../SqlRequestForeignList';
-import { SqlRequestForeignListItemFC } from '../../SqlRequestForeignList/types';
-import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
-
-export const sqlTextColumn = <R extends Record<string, any>>(
-  key: string,
-  title: React.ReactNode,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => value ?? '',
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: TextEditableCell,
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-export const sqlMailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => <a href={`mailto:${value}`}>{value ?? ''}</a>,
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: TextEditableCell,
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-export const sqlPhoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => <a href={`tel:${value}`}>{value ?? ''}</a>,
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: TextEditableCell,
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-export const sqlDateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridDateColumn<R>>
-): SqlRequestDataGridDateColumn<R> =>
-  merge(
-    {
-      key,
-      name: title,
-      type: 'date',
-      render: (value) => formatDate(value),
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      excelOptions: {
-        formatter: () => 'dd/mm/yyyy',
-        valueGetter: (value) => formatDate(value, 'YYYY-MM-DD'),
-      },
-      filter: {
-        ...dateFilter(key),
-        getter: (value) => value[key] ?? '',
-        formatter: (value) => formatDate(value),
-        renderer: (value) => formatDate(value),
-      },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: DateEditableCell,
-    } as SqlRequestDataGridDateColumn<R>,
-    options
-  );
-
-export const sqlDateTimeColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridDateColumn<R>>
-): SqlRequestDataGridDateColumn<R> =>
-  merge(
-    {
-      key,
-      name: title,
-      type: 'date',
-      render: (value) => formatDateTime(value),
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      excelOptions: {
-        formatter: () => 'dd/mm/yyyy hh:mm:ss',
-        valueGetter: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
-      },
-      filter: {
-        ...dateFilter(key),
-        getter: (value) => value[key] ?? '',
-        formatter: (value) => formatDateTime(value),
-        renderer: (value) => formatDateTime(value),
-      },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: DateEditableCell,
-    } as SqlRequestDataGridDateColumn<R>,
-    options
-  );
-
-export const sqlMonthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => (value ? `${value} mois ` : ''),
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-      footer: (rows) => `${rows[0][key]} éléments`,
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-export const sqlNumberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    decimals,
-    textAlign: 'right',
-    render: (value) => formatNumber(value, decimals) ?? '',
-    excelOptions: {
-      formatter: () => buildExcelFormat(decimals),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? 0,
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer: (value) => formatNumber(value, decimals) ?? '',
-    },
-    footer: {
-      sum: null,
-      avg: null,
-      count: null,
-      max: null,
-      min: null,
-    },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        prefix={column.prefix}
-        suffix={column.suffix}
-        {...props}
-      />
-    )),
-  };
-  return merge(column, options);
-};
-
-export const sqlMoneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  currency: string | ((row: R) => string) = 'EUR',
-  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    decimals,
-    currency,
-    textAlign: 'right',
-    render:
-      typeof currency === 'function'
-        ? (value, row) => formatMoney(value, decimals, currency(row)) ?? ''
-        : (value) => formatMoney(value, decimals, currency) ?? '',
-    excelOptions: {
-      formatter:
-        typeof currency === 'function'
-          ? (row) => buildExcelFormat(decimals, currency(row))
-          : () => buildExcelFormat(decimals, currency),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? 0,
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer:
-        typeof currency === 'function'
-          ? (value) => formatMoney(value, decimals, currency(value)) ?? ''
-          : (value) => formatMoney(value, decimals, currency) ?? '',
-    },
-    footer: {
-      sum: null,
-      avg: null,
-      count: null,
-      max: null,
-      min: null,
-    },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-  };
-  return merge(column, options);
-};
-
-export const sqlPercentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    render: (value) => formatPercentage(value) ?? '',
-    excelOptions: {
-      formatter: () => buildExcelFormat(decimals, '%'),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? 0,
-    filter: {
-      ...numberFilter(key),
-      getter: (value) => value[key] ?? 0,
-      renderer: (value) => formatPercentage(value, decimals) ?? '',
-    },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-  };
-  return merge(column, options);
-};
-
-export const sqlCheckboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridCheckboxColumn<R>>
-): SqlRequestDataGridCheckboxColumn<R> =>
-  merge(
-    {
-      key,
-      name: title,
-      type: 'checkbox',
-      render: (value) => {
-        return (
-          <>
-            <input type="checkbox" checked={value} readOnly />
-            <span>{value ? ' Oui' : ' Non'}</span>
-          </>
-        );
-      },
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: { ...numberFilter(key), getter: (value) => +(value[key] ?? 0) },
-      footer: (rows) => `${rows[0][key]} éléments`,
-      editComponent: CheckboxEditableCell,
-    } as SqlRequestDataGridCheckboxColumn<R>,
-    options
-  );
-
-export const sqlImageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  urlPrefix: string,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => (
-        <SqlImageWrapper>
-          <SqlImage
-            src={value ? `${urlPrefix}${value}` : `${urlPrefix}no-image.png`}
-            alt={title}
-          />
-        </SqlImageWrapper>
-      ),
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      footer: (rows) => `${rows[0][key]} éléments`,
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-export const sqlColorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> =>
-  merge(
-    {
-      key,
-      type: 'text',
-      name: title,
-      render: (value) => (
-        <div style={{ position: 'absolute', inset: 0, backgroundColor: value }}>
-          &nbsp;
-        </div>
-      ),
-      excelOptions: {
-        valueGetter: () => '',
-        colorGetter: (value) => value,
-      },
-      getter: (row) => row[key] ?? '',
-      sortGetter: (row) => row[key] ?? '',
-      filter: {
-        ...textFilter(key),
-        getter: (value) => value[key] ?? '',
-        renderer: (value) => (
-          <div
-            style={{
-              backgroundColor: value,
-              width: 'var(--space-16)',
-              height: '1em',
-            }}
-          >
-            &nbsp;
-          </div>
-        ),
-      },
-    } as SqlRequestDataGridTextColumn<R>,
-    options
-  );
-
-const convertRowToItem = <R extends Record<string, any>, T>(
-  row: R,
-  columnMapping: Record<string, keyof R>
-) => mapKeys(row, (_, key) => columnMapping[key]) as T;
-
-const convertItemToPartialRow = <
-  R extends Record<string, any>,
-  T extends Record<string, any>
->(
-  key: string,
-  row: R,
-  item: T | null,
-  columnMapping: Record<keyof R, keyof T>
-): Partial<R> => {
-  const partialRow = { Id: key } as unknown as Partial<R>;
-  Object.entries(columnMapping).forEach(([key, value]: [keyof R, keyof T]) => {
-    partialRow[key] = (item?.[value] ?? null) as R[keyof R];
-  });
-  return partialRow;
-};
-
-export 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> => {
-  const column: SqlRequestDataGridForeignListColumn<R, T | null> = {
-    key,
-    name: title,
-    type: 'foreignList',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    render: (value, row) => (
-      <ItemTemplate
-        item={convertRowToItem<R, T>(row, columnMapping)}
-        index={0}
-      />
-    ),
-    filter: {
-      ...textFilter(key),
-      getter: (value) => value[key] ?? '',
-      renderer: (value) => value,
-    },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    requestName,
-    idColumn: 'Id',
-    itemTemplate: ItemTemplate,
-    columns: Object.values(columnMapping),
-    editComponent: forwardRef(
-      ({ row, onChange, onClose, context }, ref: Ref<HTMLDivElement>) => {
-        const { rowHeight = DEFAULT_ROW_HEIGHT } = useContext(context);
-        return (
-          <SqlRequestForeignList<T>
-            initialValue={convertRowToItem<R, T>(row, columnMapping)}
-            maxRows={10}
-            rowHeight={rowHeight - 2}
-            onItemChanged={onChange}
-            onBlur={() => onClose(true)}
-            ref={ref}
-            requestName={column.requestName}
-            idColumn={column.idColumn}
-            columns={column.columns}
-            itemTemplate={column.itemTemplate}
-            valueTemplate={column.valueTemplate}
-          />
-        );
-      }
-    ),
-    itemToPartialRow: (key, row, value) =>
-      convertItemToPartialRow(key, row, value, columnMapping),
-  };
-  return merge(column, options);
-};
+/* eslint-disable react/display-name */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { Ref, forwardRef, useContext } from 'react';
+import { SqlImage, SqlImageWrapper } from '../styles';
+import {
+  SqlRequestDataGridCheckboxColumn,
+  SqlRequestDataGridDateColumn,
+  SqlRequestDataGridForeignListColumn,
+  SqlRequestDataGridNumberColumn,
+  SqlRequestDataGridTextColumn,
+} from '../types';
+import {
+  buildExcelFormat,
+  dateFilter,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+import { mapKeys, merge } from 'lodash';
+
+import { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
+import { DEFAULT_ROW_HEIGHT } from '../../DataGrid/constants';
+import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
+import { DeepPartial } from '../../../../typings';
+import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
+import { SqlRequestForeignList } from '../../SqlRequestForeignList';
+import { SqlRequestForeignListItemFC } from '../../SqlRequestForeignList/types';
+import { StyledTypography } from '../../../../helpers/styled/typography';
+import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
+
+export const sqlTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: React.ReactNode,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <StyledTypography {...options?.typography}>{value}</StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: TextEditableCell,
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+export const sqlMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <StyledTypography
+          href={`mailto:${value}`}
+          {...options?.typography}
+          as={'a'}
+        >
+          {value}
+        </StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: TextEditableCell,
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+export const sqlPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <StyledTypography
+          href={`tel:${value}`}
+          {...options?.typography}
+          as={'a'}
+        >
+          {value}
+        </StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: TextEditableCell,
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+export const sqlDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridDateColumn<R>>
+): SqlRequestDataGridDateColumn<R> =>
+  merge(
+    {
+      key,
+      name: title,
+      type: 'date',
+      render: (value) => (
+        <StyledTypography {...options?.typography}>
+          {formatDate(value)}
+        </StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      excelOptions: {
+        formatter: () => 'dd/mm/yyyy',
+        valueGetter: (value) => formatDate(value, 'YYYY-MM-DD'),
+      },
+      filter: {
+        ...dateFilter(key),
+        getter: (value) => value[key] ?? '',
+        formatter: (value) => formatDate(value),
+        renderer: (value) => formatDate(value),
+      },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: DateEditableCell,
+    } as SqlRequestDataGridDateColumn<R>,
+    options
+  );
+
+export const sqlDateTimeColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridDateColumn<R>>
+): SqlRequestDataGridDateColumn<R> =>
+  merge(
+    {
+      key,
+      name: title,
+      type: 'date',
+      render: (value) => (
+        <StyledTypography {...options?.typography}>
+          {formatDateTime(value)}
+        </StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      excelOptions: {
+        formatter: () => 'dd/mm/yyyy hh:mm:ss',
+        valueGetter: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
+      },
+      filter: {
+        ...dateFilter(key),
+        getter: (value) => value[key] ?? '',
+        formatter: (value) => formatDateTime(value),
+        renderer: (value) => formatDateTime(value),
+      },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: DateEditableCell,
+    } as SqlRequestDataGridDateColumn<R>,
+    options
+  );
+
+export const sqlMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <StyledTypography {...options?.typography}>
+          {value + 'Mois'}
+        </StyledTypography>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+      footer: (rows) => `${rows[0][key]} éléments`,
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+export const sqlNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
+    name: title,
+    type: 'number',
+    decimals,
+    textAlign: 'right',
+    render: (value) => (
+      <StyledTypography {...options?.typography}>
+        {formatNumber(value, decimals)}
+      </StyledTypography>
+    ),
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        prefix={column.prefix}
+        suffix={column.suffix}
+        {...props}
+      />
+    )),
+  };
+  return merge(column, options);
+};
+
+export const sqlMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  currency: string | ((row: R) => string) = 'EUR',
+  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
+    name: title,
+    type: 'number',
+    decimals,
+    currency,
+    textAlign: 'right',
+    render:
+      typeof currency === 'function'
+        ? (value, row) => (
+            <StyledTypography {...options?.typography}>
+              {formatMoney(value, decimals, currency(row))}
+            </StyledTypography>
+          )
+        : (value) => (
+            <StyledTypography {...options?.typography}>
+              {formatMoney(value, decimals, currency)}
+            </StyledTypography>
+          ),
+    excelOptions: {
+      formatter:
+        typeof currency === 'function'
+          ? (row) => buildExcelFormat(decimals, currency(row))
+          : () => buildExcelFormat(decimals, currency),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer:
+        typeof currency === 'function'
+          ? (value) => formatMoney(value, decimals, currency(value)) ?? ''
+          : (value) => formatMoney(value, decimals, currency) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
+  };
+  return merge(column, options);
+};
+
+export const sqlPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: DeepPartial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
+    name: title,
+    type: 'number',
+    render: (value) => (
+      <StyledTypography {...options?.typography}>
+        {formatPercentage(value)}
+      </StyledTypography>
+    ),
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, '%'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
+    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
+  };
+  return merge(column, options);
+};
+
+export const sqlCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridCheckboxColumn<R>>
+): SqlRequestDataGridCheckboxColumn<R> =>
+  merge(
+    {
+      key,
+      name: title,
+      type: 'checkbox',
+      render: (value) => {
+        return (
+          <>
+            <input type="checkbox" checked={value} readOnly />
+            <span>{value ? ' Oui' : ' Non'}</span>
+          </>
+        );
+      },
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: { ...numberFilter(key), getter: (value) => +(value[key] ?? 0) },
+      footer: (rows) => `${rows[0][key]} éléments`,
+      editComponent: CheckboxEditableCell,
+    } as SqlRequestDataGridCheckboxColumn<R>,
+    options
+  );
+
+export const sqlImageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  urlPrefix: string,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <SqlImageWrapper>
+          <SqlImage
+            src={value ? `${urlPrefix}${value}` : `${urlPrefix}no-image.png`}
+            alt={title}
+          />
+        </SqlImageWrapper>
+      ),
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      footer: (rows) => `${rows[0][key]} éléments`,
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+export const sqlColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: DeepPartial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> =>
+  merge(
+    {
+      key,
+      type: 'text',
+      name: title,
+      render: (value) => (
+        <div style={{ position: 'absolute', inset: 0, backgroundColor: value }}>
+          &nbsp;
+        </div>
+      ),
+      excelOptions: {
+        valueGetter: () => '',
+        colorGetter: (value) => value,
+      },
+      getter: (row) => row[key] ?? '',
+      sortGetter: (row) => row[key] ?? '',
+      filter: {
+        ...textFilter(key),
+        getter: (value) => value[key] ?? '',
+        renderer: (value) => (
+          <div
+            style={{
+              backgroundColor: value,
+              width: 'var(--space-16)',
+              height: '1em',
+            }}
+          >
+            &nbsp;
+          </div>
+        ),
+      },
+    } as SqlRequestDataGridTextColumn<R>,
+    options
+  );
+
+const convertRowToItem = <R extends Record<string, any>, T>(
+  row: R,
+  columnMapping: Record<string, keyof R>
+) => mapKeys(row, (_, key) => columnMapping[key]) as T;
+
+const convertItemToPartialRow = <
+  R extends Record<string, any>,
+  T extends Record<string, any>
+>(
+  key: string,
+  row: R,
+  item: T | null,
+  columnMapping: Record<keyof R, keyof T>
+): Partial<R> => {
+  const partialRow = { Id: key } as unknown as Partial<R>;
+  Object.entries(columnMapping).forEach(([key, value]: [keyof R, keyof T]) => {
+    partialRow[key] = (item?.[value] ?? null) as R[keyof R];
+  });
+  return partialRow;
+};
+
+export 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> => {
+  const column: SqlRequestDataGridForeignListColumn<R, T | null> = {
+    key,
+    name: title,
+    type: 'foreignList',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    render: (value, row) => (
+      <ItemTemplate
+        item={convertRowToItem<R, T>(row, columnMapping)}
+        index={0}
+      />
+    ),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      renderer: (value) => value,
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    requestName,
+    idColumn: 'Id',
+    itemTemplate: ItemTemplate,
+    columns: Object.values(columnMapping),
+    editComponent: forwardRef(
+      ({ row, onChange, onClose, context }, ref: Ref<HTMLDivElement>) => {
+        const { rowHeight = DEFAULT_ROW_HEIGHT } = useContext(context);
+        return (
+          <SqlRequestForeignList<T>
+            initialValue={convertRowToItem<R, T>(row, columnMapping)}
+            maxRows={10}
+            rowHeight={rowHeight - 2}
+            onItemChanged={onChange}
+            onBlur={() => onClose(true)}
+            ref={ref}
+            requestName={column.requestName}
+            idColumn={column.idColumn}
+            columns={column.columns}
+            itemTemplate={column.itemTemplate}
+            valueTemplate={column.valueTemplate}
+          />
+        );
+      }
+    ),
+    itemToPartialRow: (key, row, value) =>
+      convertItemToPartialRow(key, row, value, columnMapping),
+  };
+  return merge(column, options);
+};