@addev-be/ui 0.14.4 → 0.14.5

package/dist/services/types/users.d.ts

@@ -0,0 +1,118 @@
+import * as t from 'io-ts';
+export declare const userDtoCodec: t.IntersectionC<[t.TypeC<{
+    username: t.StringC;
+    permissions: t.ArrayC<t.StringC>;
+    isAdmin: t.BooleanC;
+    profile: t.UnionC<[t.TypeC<{
+        name: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.NullC]>;
+    id: t.UnionC<[t.StringC, t.NullC]>;
+}>, t.PartialC<{
+    name: t.StringC;
+    email: t.StringC;
+    lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+}>]>;
+export type UserDTO = t.TypeOf<typeof userDtoCodec>;
+/*****/
+export declare const getUserRequestDtoCodec: t.TypeC<{
+    id: t.StringC;
+}>;
+export declare const getUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>;
+}>;
+export type GetUserRequestDTO = t.TypeOf<typeof getUserRequestDtoCodec>;
+export type GetUserResponseDTO = t.TypeOf<typeof getUserResponseDtoCodec>;
+/*****/
+export declare const getAllUsersRequestDtoCodec: t.TypeC<{}>;
+export declare const getAllUsersResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.ArrayC<t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>>;
+}>;
+export type GetAllUsersRequestDTO = t.TypeOf<typeof getAllUsersRequestDtoCodec>;
+export type GetAllUsersResponseDTO = t.TypeOf<typeof getAllUsersResponseDtoCodec>;
+/*****/
+export declare const saveUserRequestDtoCodec: t.TypeC<{
+    data: t.IntersectionC<[t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>, t.PartialC<{
+        password: t.StringC;
+    }>]>;
+    password: t.StringC;
+}>;
+export declare const saveUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>;
+}>;
+export type SaveUserRequestDTO = t.TypeOf<typeof saveUserRequestDtoCodec>;
+export type SaveUserResponseDTO = t.TypeOf<typeof saveUserResponseDtoCodec>;
+/*****/
+export declare const deleteUserRequestDtoCodec: t.TypeC<{
+    id: t.StringC;
+}>;
+export declare const deleteUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+}>;
+export type DeleteUserRequestDTO = t.TypeOf<typeof deleteUserRequestDtoCodec>;
+export type DeleteUserResponseDTO = t.TypeOf<typeof deleteUserResponseDtoCodec>;

package/dist/services/types/users.js

@@ -0,0 +1,83 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteUserResponseDtoCodec = exports.deleteUserRequestDtoCodec = exports.saveUserResponseDtoCodec = exports.saveUserRequestDtoCodec = exports.getAllUsersResponseDtoCodec = exports.getAllUsersRequestDtoCodec = exports.getUserResponseDtoCodec = exports.getUserRequestDtoCodec = exports.userDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+var base_1 = require("./base");
+var userProfiles_1 = require("./userProfiles");
+exports.userDtoCodec = t.intersection([
+    t.type(__assign(__assign({}, base_1.baseModelDtoCodec.props), { username: t.string, permissions: t.array(t.string), isAdmin: t.boolean, profile: t.union([userProfiles_1.userProfileDtoCodec, t.null]) })),
+    t.partial({
+        name: t.string,
+        email: t.string,
+        lastLogin: t.union([t.string, t.null]),
+    }),
+], 'UserDTO');
+/*****/
+exports.getUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'GetUserRequestDTO');
+exports.getUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'GetUserResponseDTO');
+/*****/
+exports.getAllUsersRequestDtoCodec = t.type({}, 'GetAllUsersRequestDTO');
+exports.getAllUsersResponseDtoCodec = t.type({
+    status: t.number,
+    data: t.array(exports.userDtoCodec),
+}, 'GetAllUsersResponseDTO');
+/*****/
+exports.saveUserRequestDtoCodec = t.type({
+    data: t.intersection([
+        exports.userDtoCodec,
+        t.partial({
+            password: t.string,
+        }),
+    ]),
+    password: t.string,
+}, 'SaveUserRequestDTO');
+exports.saveUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'SaveUserResponseDTO');
+/*****/
+exports.deleteUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'DeleteUserRequestDTO');
+exports.deleteUserResponseDtoCodec = t.type({
+    status: t.number,
+}, 'DeleteUserResponseDTO');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

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

@@ -6,6 +6,7 @@ import {
   DataGridColumn,
   DataGridDateColumn,
   DataGridNumberColumn,
+  DataGridSelectColumn,
   DataGridSettings,
   DataGridTextColumn,
 } from '../types';
@@ -17,6 +18,12 @@ import {
   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 { forwardRef } from 'react';
 import moment from 'moment';
 import { repeat } from 'lodash';
 
@@ -30,7 +37,7 @@ export const buildExcelFormat = (decimals = 2, suffix = '') =>
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -40,13 +47,14 @@ export const textColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const mailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -56,13 +64,14 @@ export const mailColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const phoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -72,13 +81,14 @@ export const phoneColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const dateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridDateColumn<R>>
+  otherOptions?: Partial<DataGridDateColumn<R>>
 ): DataGridDateColumn<R> => ({
   key,
   type: 'date',
@@ -95,13 +105,14 @@ export const dateColumn = <R extends Record<string, any>>(
     ...dateFilter(key),
     renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
   },
-  ...options,
+  editComponent: DateEditableCell,
+  ...otherOptions,
 });
 
 export const dateTimeColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridDateColumn<R>>
+  otherOptions?: Partial<DataGridDateColumn<R>>
 ): DataGridDateColumn<R> => ({
   key,
   type: 'date',
@@ -118,13 +129,14 @@ export const dateTimeColumn = <R extends Record<string, any>>(
     ...dateFilter(key),
     renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
   },
-  ...options,
+  editComponent: DateEditableCell,
+  ...otherOptions,
 });
 
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -134,151 +146,168 @@ export const monthColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  ...otherOptions,
 });
 
 export const numberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridNumberColumn<R>>
-): 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) ?? '',
-  },
-  ...options,
-});
+  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) => (
+      <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,
-  options?: Partial<DataGridNumberColumn<R>>
-): 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
-      ),
-  },
-  ...options,
-});
+  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,
-  options?: Partial<DataGridNumberColumn<R>>
-): 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
-      ),
-  },
-  ...options,
-});
+  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,
-  options?: Partial<DataGridCheckboxColumn<R>>
+  otherOptions?: Partial<DataGridCheckboxColumn<R>>
 ): DataGridCheckboxColumn<R> => ({
   key,
   type: 'checkbox',
@@ -299,13 +328,46 @@ export const checkboxColumn = <R extends Record<string, any>>(
     unchecked: (_, filteredRows) =>
       `${filteredRows.filter((row) => !row[key]).length} décochés`,
   },
-  ...options,
+  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: ({ value, onChange, onClose }) => (
+    <Select
+      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,
-  options?: Partial<DataGridColorColumn<R>>
+  otherOptions?: Partial<DataGridColorColumn<R>>
 ): DataGridColorColumn<R> => ({
   key,
   type: 'color',
@@ -317,5 +379,5 @@ export const colorColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   filter: textFilter(key),
   footer: (rows) => `${rows.length} éléments`,
-  ...options,
+  ...otherOptions,
 });