@addev-be/ui 0.19.0 → 0.19.2

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

@@ -1,386 +1,386 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  DataGridCheckboxColumn,
-  DataGridColorColumn,
-  DataGridColumn,
-  DataGridDateColumn,
-  DataGridNumberColumn,
-  DataGridSelectColumn,
-  DataGridSettings,
-  DataGridTextColumn,
-} from '../types';
-import { Ref, forwardRef } from 'react';
-import { dateFilter, numberFilter, textFilter } from './filters';
-import {
-  formatMoney,
-  formatNumber,
-  formatNumberInvariant,
-  formatPercentage,
-} from '../../../../helpers/numbers';
-
-import { CheckboxEditableCell } from '../DataGridEditableCell/CheckboxEditableCell';
-import { DateEditableCell } from '../DataGridEditableCell/DateEditableCell';
-import { NumberEditableCell } from '../DataGridEditableCell/NumberEditableCell';
-import { Select } from '../../../forms/Form/Select';
-import { TextEditableCell } from '../DataGridEditableCell/TextEditableCell';
-import moment from 'moment';
-import { repeat } from 'lodash';
-
-export const isColumnVisible = <R,>(
-  obj: DataGridColumn<R> | DataGridSettings
-): boolean => obj?.order !== -1;
-
-export const buildExcelFormat = (decimals = 2, suffix = '') =>
-  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
-
-export const textColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridTextColumn<R>>
-): DataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => row[key] ?? '',
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
-  editComponent: TextEditableCell,
-  ...otherOptions,
-});
-
-export const mailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridTextColumn<R>>
-): DataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
-  editComponent: TextEditableCell,
-  ...otherOptions,
-});
-
-export const phoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridTextColumn<R>>
-): DataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
-  editComponent: TextEditableCell,
-  ...otherOptions,
-});
-
-export const dateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridDateColumn<R>>
-): DataGridDateColumn<R> => ({
-  key,
-  type: 'date',
-  name: title,
-  render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
-  excelOptions: {
-    formatter: () => 'dd/mm/yyyy',
-    valueGetter: (value) => moment(value).format('DD/MM/YYYY') ?? '',
-  },
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: {
-    ...dateFilter(key),
-    renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
-  },
-  editComponent: DateEditableCell,
-  ...otherOptions,
-});
-
-export const dateTimeColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridDateColumn<R>>
-): DataGridDateColumn<R> => ({
-  key,
-  type: 'date',
-  name: title,
-  render: (row) => moment(row[key]).format('DD/MM/YYYY HH:mm:ss') ?? '',
-  excelOptions: {
-    formatter: () => 'dd/mm/yyyy hh:mm:ss',
-    valueGetter: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
-  },
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: {
-    ...dateFilter(key),
-    renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
-  },
-  editComponent: DateEditableCell,
-  ...otherOptions,
-});
-
-export const monthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridTextColumn<R>>
-): DataGridTextColumn<R> => ({
-  key,
-  type: 'text',
-  name: title,
-  render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
-  ...otherOptions,
-});
-
-export const numberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  otherOptions?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => {
-  const column: DataGridNumberColumn<R> = {
-    key,
-    type: 'number',
-    name: title,
-    render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelOptions: {
-      formatter: () => buildExcelFormat(decimals),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: {
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    filter: {
-      ...numberFilter(key),
-      renderer: (value) => formatNumber(value, decimals) ?? '',
-    },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
-      <NumberEditableCell<R>
-        ref={ref}
-        decimals={column.decimals}
-        currency={column.currency}
-        {...props}
-      />
-    )),
-    ...otherOptions,
-  };
-  return column;
-};
-
-export const moneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  otherOptions?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => {
-  const column: DataGridNumberColumn<R> = {
-    key,
-    type: 'number',
-    name: title,
-    render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelOptions: {
-      formatter: () => buildExcelFormat(decimals, ' €'),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...numberFilter(key),
-      renderer: (value) => formatMoney(value, decimals) ?? '',
-    },
-    footer: {
-      sum: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatMoney(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatMoney(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    ...otherOptions,
-  };
-  return column;
-};
-
-export const percentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  otherOptions?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => {
-  const column: DataGridNumberColumn<R> = {
-    key,
-    type: 'number',
-    name: title,
-    render: (row) => formatPercentage(row[key]) ?? '',
-    excelOptions: {
-      formatter: () => buildExcelFormat(decimals, '%'),
-      valueGetter: (value) => formatNumberInvariant(value, decimals),
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    footer: {
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-    },
-    ...otherOptions,
-  };
-  return column;
-};
-
-export const checkboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridCheckboxColumn<R>>
-): DataGridCheckboxColumn<R> => ({
-  key,
-  type: 'checkbox',
-  name: title,
-  render: (row) => (
-    <>
-      <input type="checkbox" checked={row[key]} readOnly />
-      <span>{row[key] ? ' Oui' : ' Non'}</span>
-    </>
-  ),
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: numberFilter(key),
-  footer: {
-    count: (_, filteredRows) => `${filteredRows.length} éléments`,
-    checked: (_, filteredRows) =>
-      `${filteredRows.filter((row) => !!row[key]).length} cochés`,
-    unchecked: (_, filteredRows) =>
-      `${filteredRows.filter((row) => !row[key]).length} décochés`,
-  },
-  editComponent: CheckboxEditableCell,
-  ...otherOptions,
-});
-
-export const selectColumn = <R extends Record<string, any>, T>(
-  key: string,
-  title: string,
-  items: T[],
-  itemKey: (item: T | null) => string,
-  itemLabel: (item: T | null) => string,
-  otherOptions?: Partial<DataGridSelectColumn<R, T>>
-): DataGridSelectColumn<R, T> => ({
-  key,
-  type: 'select',
-  name: title,
-  render: (row) => itemLabel(row[key]) ?? '',
-  getter: (row) => row[key] ?? null,
-  sortGetter: (row) => itemLabel(row[key]) ?? '',
-  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-  filter: textFilter(key),
-  items,
-  itemKey,
-  itemLabel,
-  editComponent: forwardRef(
-    ({ value, onChange, onClose }, ref: Ref<HTMLSelectElement>) => (
-      <Select
-        ref={ref}
-        items={items}
-        itemKey={itemKey}
-        itemLabel={itemLabel}
-        value={value}
-        onChange={onChange}
-        onBlur={() => onClose(true)}
-      />
-    )
-  ),
-  ...otherOptions,
-});
-
-export const colorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  otherOptions?: Partial<DataGridColorColumn<R>>
-): DataGridColorColumn<R> => ({
-  key,
-  type: 'color',
-  name: title,
-  render: (row) => (
-    <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
-  ),
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: textFilter(key),
-  footer: (rows) => `${rows.length} éléments`,
-  ...otherOptions,
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  DataGridCheckboxColumn,
+  DataGridColorColumn,
+  DataGridColumn,
+  DataGridDateColumn,
+  DataGridNumberColumn,
+  DataGridSelectColumn,
+  DataGridSettings,
+  DataGridTextColumn,
+} from '../types';
+import { Ref, forwardRef } from 'react';
+import { dateFilter, numberFilter, textFilter } from './filters';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import { CheckboxEditableCell } from '../DataGridEditableCell/CheckboxEditableCell';
+import { DateEditableCell } from '../DataGridEditableCell/DateEditableCell';
+import { NumberEditableCell } from '../DataGridEditableCell/NumberEditableCell';
+import { Select } from '../../../forms/Form/Select';
+import { TextEditableCell } from '../DataGridEditableCell/TextEditableCell';
+import moment from 'moment';
+import { repeat } from 'lodash';
+
+export const isColumnVisible = <R,>(
+  obj: DataGridColumn<R> | DataGridSettings
+): boolean => obj?.order !== -1;
+
+export const buildExcelFormat = (decimals = 2, suffix = '') =>
+  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
+
+export const textColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => row[key] ?? '',
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  editComponent: TextEditableCell,
+  ...otherOptions,
+});
+
+export const mailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  editComponent: TextEditableCell,
+  ...otherOptions,
+});
+
+export const phoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  editComponent: TextEditableCell,
+  ...otherOptions,
+});
+
+export const dateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridDateColumn<R>>
+): DataGridDateColumn<R> => ({
+  key,
+  type: 'date',
+  name: title,
+  render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy',
+    valueGetter: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: {
+    ...dateFilter(key),
+    renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+  },
+  editComponent: DateEditableCell,
+  ...otherOptions,
+});
+
+export const dateTimeColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridDateColumn<R>>
+): DataGridDateColumn<R> => ({
+  key,
+  type: 'date',
+  name: title,
+  render: (row) => moment(row[key]).format('DD/MM/YYYY HH:mm:ss') ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy hh:mm:ss',
+    valueGetter: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: {
+    ...dateFilter(key),
+    renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
+  },
+  editComponent: DateEditableCell,
+  ...otherOptions,
+});
+
+export const monthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  ...otherOptions,
+});
+
+export const numberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: {
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
+    ...otherOptions,
+  };
+  return column;
+};
+
+export const moneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, ' €'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatMoney(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatMoney(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    ...otherOptions,
+  };
+  return column;
+};
+
+export const percentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, '%'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+    },
+    ...otherOptions,
+  };
+  return column;
+};
+
+export const checkboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridCheckboxColumn<R>>
+): DataGridCheckboxColumn<R> => ({
+  key,
+  type: 'checkbox',
+  name: title,
+  render: (row) => (
+    <>
+      <input type="checkbox" checked={row[key]} readOnly />
+      <span>{row[key] ? ' Oui' : ' Non'}</span>
+    </>
+  ),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: numberFilter(key),
+  footer: {
+    count: (_, filteredRows) => `${filteredRows.length} éléments`,
+    checked: (_, filteredRows) =>
+      `${filteredRows.filter((row) => !!row[key]).length} cochés`,
+    unchecked: (_, filteredRows) =>
+      `${filteredRows.filter((row) => !row[key]).length} décochés`,
+  },
+  editComponent: CheckboxEditableCell,
+  ...otherOptions,
+});
+
+export const selectColumn = <R extends Record<string, any>, T>(
+  key: string,
+  title: string,
+  items: T[],
+  itemKey: (item: T | null) => string,
+  itemLabel: (item: T | null) => string,
+  otherOptions?: Partial<DataGridSelectColumn<R, T>>
+): DataGridSelectColumn<R, T> => ({
+  key,
+  type: 'select',
+  name: title,
+  render: (row) => itemLabel(row[key]) ?? '',
+  getter: (row) => row[key] ?? null,
+  sortGetter: (row) => itemLabel(row[key]) ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  items,
+  itemKey,
+  itemLabel,
+  editComponent: forwardRef(
+    ({ value, onChange, onClose }, ref: Ref<HTMLSelectElement>) => (
+      <Select
+        ref={ref}
+        items={items}
+        itemKey={itemKey}
+        itemLabel={itemLabel}
+        value={value}
+        onChange={onChange}
+        onBlur={() => onClose(true)}
+      />
+    )
+  ),
+  ...otherOptions,
+});
+
+export const colorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  otherOptions?: Partial<DataGridColorColumn<R>>
+): DataGridColorColumn<R> => ({
+  key,
+  type: 'color',
+  name: title,
+  render: (row) => (
+    <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+  ),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: textFilter(key),
+  footer: (rows) => `${rows.length} éléments`,
+  ...otherOptions,
+});