@addev-be/ui 0.14.5 → 0.15.1

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

@@ -1,366 +1,478 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { SqlImage, SqlImageWrapper } from '../styles';
-import {
-  SqlRequestDataGridCheckboxColumn,
-  SqlRequestDataGridDateColumn,
-  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 { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
-import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
-import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
-import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
-import { forwardRef } from 'react';
-
-export const sqlTextColumn = <R extends Record<string, any>>(
-  key: string,
-  title: React.ReactNode,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => row[key] ?? '',
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-  footer: (rows) => `${rows[0][key]} éléments`,
-  editComponent: TextEditableCell,
-  ...options,
-});
-
-export const sqlMailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</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,
-  ...options,
-});
-
-export const sqlPhoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</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,
-  ...options,
-});
-
-export const sqlDateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridDateColumn<R>>
-): SqlRequestDataGridDateColumn<R> => ({
-  key,
-  name: title,
-  type: 'date',
-  render: (row) => formatDate(row[key]),
-  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,
-  ...options,
-});
-
-export const sqlDateTimeColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridDateColumn<R>>
-): SqlRequestDataGridDateColumn<R> => ({
-  key,
-  name: title,
-  type: 'date',
-  render: (row) => formatDateTime(row[key]),
-  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,
-  ...options,
-});
-
-export const sqlMonthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-  footer: (rows) => `${rows[0][key]} éléments`,
-  ...options,
-});
-
-export const sqlNumberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    decimals,
-    textAlign: 'right',
-    render: (row) => formatNumber(row[key], 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) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-    ...options,
-  };
-  return column;
-};
-
-export const sqlMoneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  currency: string | ((row: R) => string) = 'EUR',
-  options?: Partial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    decimals,
-    currency,
-    textAlign: 'right',
-    render:
-      typeof currency === 'function'
-        ? (row) => formatMoney(row[key], decimals, currency(row)) ?? ''
-        : (row) => formatMoney(row[key], 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) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-    ...options,
-  };
-  return column;
-};
-
-export const sqlPercentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<SqlRequestDataGridNumberColumn<R>>
-): SqlRequestDataGridNumberColumn<R> => {
-  const column: SqlRequestDataGridNumberColumn<R> = {
-    key,
-    name: title,
-    type: 'number',
-    render: (row) => formatPercentage(row[key]) ?? '',
-    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) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-    ...options,
-  };
-  return column;
-};
-
-export const sqlCheckboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridCheckboxColumn<R>>
-): SqlRequestDataGridCheckboxColumn<R> => ({
-  key,
-  name: title,
-  type: 'checkbox',
-  render: (row) => {
-    const value = !!+(row[key] ?? 0);
-    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,
-  ...options,
-});
-
-export const sqlImageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  urlPrefix: string,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => (
-    <SqlImageWrapper>
-      <SqlImage
-        src={row[key] ? `${urlPrefix}${row[key]}` : `${urlPrefix}no-image.png`}
-        alt={title}
-      />
-    </SqlImageWrapper>
-  ),
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (rows) => `${rows[0][key]} éléments`,
-  ...options,
-});
-
-export const sqlColorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridTextColumn<R>>
-): SqlRequestDataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => (
-    <div style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}>
-      &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>
-    ),
-  },
-  ...options,
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+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 { forwardRef, useContext } from 'react';
+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: (row) => row[key] ?? '',
+      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: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</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: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</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: (row) => formatDate(row[key]),
+      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: (row) => formatDateTime(row[key]),
+      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: (row) => (row[key] ? `${row[key]} 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: (row) => formatNumber(row[key], 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) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...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'
+        ? (row) => formatMoney(row[key], decimals, currency(row)) ?? ''
+        : (row) => formatMoney(row[key], 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) => (
+      <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: (row) => formatPercentage(row[key]) ?? '',
+    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) => (
+      <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: (row) => {
+        const value = !!+(row[key] ?? 0);
+        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: (row) => (
+        <SqlImageWrapper>
+          <SqlImage
+            src={
+              row[key] ? `${urlPrefix}${row[key]}` : `${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: (row) => (
+        <div
+          style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
+        >
+          &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>
+>(
+  row: R,
+  item: T | null,
+  columnMapping: Record<keyof R, keyof T>
+): Partial<R> => {
+  const partialRow = {} 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: (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) => {
+      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: (row, value) =>
+      convertItemToPartialRow(row, value, columnMapping),
+  };
+  return merge(column, options);
+};