refactor: add ColumnDefinition type (#1357)

* refactor: add ColumnDefinition type

Closes #1193

* refactor: code review - rename things

* fix: fix wrong import and lint

front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx

@@ -1,4 +1,5 @@
 import { isViewFieldBoolean } from '@/ui/editable-field/types/guards/isViewFieldBoolean';
+import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
 import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate';
 import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFieldDoubleText';
 import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip';
@@ -9,12 +10,9 @@ import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPh
 import { isViewFieldRelation } from '@/ui/editable-field/types/guards/isViewFieldRelation';
 import { isViewFieldText } from '@/ui/editable-field/types/guards/isViewFieldText';
 import { isViewFieldURL } from '@/ui/editable-field/types/guards/isViewFieldURL';
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 
-import { isViewFieldChip } from '../../../editable-field/types/guards/isViewFieldChip';
+import type { ColumnDefinition } from '../../types/ColumnDefinition';
 import { GenericEditableBooleanCell } from '../type/components/GenericEditableBooleanCell';
 import { GenericEditableChipCell } from '../type/components/GenericEditableChipCell';
 import { GenericEditableDateCell } from '../type/components/GenericEditableDateCell';
@@ -29,37 +27,41 @@ import { GenericEditableTextCell } from '../type/components/GenericEditableTextC
 import { GenericEditableURLCell } from '../type/components/GenericEditableURLCell';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldMetadata>;
 };
 
-export function GenericEditableCell({ viewField: fieldDefinition }: OwnProps) {
-  if (isViewFieldEmail(fieldDefinition)) {
-    return <GenericEditableEmailCell viewField={fieldDefinition} />;
-  } else if (isViewFieldText(fieldDefinition)) {
-    return <GenericEditableTextCell viewField={fieldDefinition} />;
-  } else if (isViewFieldRelation(fieldDefinition)) {
-    return <GenericEditableRelationCell fieldDefinition={fieldDefinition} />;
-  } else if (isViewFieldDoubleTextChip(fieldDefinition)) {
-    return <GenericEditableDoubleTextChipCell viewField={fieldDefinition} />;
-  } else if (isViewFieldDoubleText(fieldDefinition)) {
-    return <GenericEditableDoubleTextCell viewField={fieldDefinition} />;
-  } else if (isViewFieldPhone(fieldDefinition)) {
-    return <GenericEditablePhoneCell viewField={fieldDefinition} />;
-  } else if (isViewFieldURL(fieldDefinition)) {
-    return <GenericEditableURLCell viewField={fieldDefinition} />;
-  } else if (isViewFieldDate(fieldDefinition)) {
-    return <GenericEditableDateCell viewField={fieldDefinition} />;
-  } else if (isViewFieldNumber(fieldDefinition)) {
-    return <GenericEditableNumberCell viewField={fieldDefinition} />;
-  } else if (isViewFieldBoolean(fieldDefinition)) {
-    return <GenericEditableBooleanCell viewField={fieldDefinition} />;
-  } else if (isViewFieldChip(fieldDefinition)) {
-    return <GenericEditableChipCell viewField={fieldDefinition} />;
-  } else if (isViewFieldMoney(fieldDefinition)) {
-    return <GenericEditableMoneyCell viewField={fieldDefinition} />;
+export function GenericEditableCell({ columnDefinition }: OwnProps) {
+  if (isViewFieldEmail(columnDefinition)) {
+    return <GenericEditableEmailCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldText(columnDefinition)) {
+    return <GenericEditableTextCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldRelation(columnDefinition)) {
+    return <GenericEditableRelationCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldDoubleTextChip(columnDefinition)) {
+    return (
+      <GenericEditableDoubleTextChipCell columnDefinition={columnDefinition} />
+    );
+  } else if (isViewFieldDoubleText(columnDefinition)) {
+    return (
+      <GenericEditableDoubleTextCell columnDefinition={columnDefinition} />
+    );
+  } else if (isViewFieldPhone(columnDefinition)) {
+    return <GenericEditablePhoneCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldURL(columnDefinition)) {
+    return <GenericEditableURLCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldDate(columnDefinition)) {
+    return <GenericEditableDateCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldNumber(columnDefinition)) {
+    return <GenericEditableNumberCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldBoolean(columnDefinition)) {
+    return <GenericEditableBooleanCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldChip(columnDefinition)) {
+    return <GenericEditableChipCell columnDefinition={columnDefinition} />;
+  } else if (isViewFieldMoney(columnDefinition)) {
+    return <GenericEditableMoneyCell columnDefinition={columnDefinition} />;
   } else {
     console.warn(
-      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,
+      `Unknown field metadata type: ${columnDefinition.metadata.type} in GenericEditableCell`,
     );
     return <></>;
   }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx

@@ -2,18 +2,16 @@ import styled from '@emotion/styled';
 import { IconCheck, IconX } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldBooleanMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldBooleanMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
 import { EditableCellDisplayContainer } from '../../components/EditableCellContainer';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldBooleanMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldBooleanMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
@@ -36,13 +34,13 @@ function capitalizeFirstLetter(value: string) {
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
 
-export function GenericEditableBooleanCell({ viewField }: OwnProps) {
+export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const [fieldValue, setFieldValue] = useRecoilState<boolean>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -54,7 +52,7 @@ export function GenericEditableBooleanCell({ viewField }: OwnProps) {
       setFieldValue(newValue);
 
       if (currentRowEntityId && updateField) {
-        updateField(currentRowEntityId, viewField, newValue);
+        updateField(currentRowEntityId, columnDefinition, newValue);
       }
     } catch (error) {
       console.warn(

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx

@@ -1,30 +1,31 @@
-import {
-  ViewFieldChipMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableChipCellDisplayMode } from './GenericEditableChipCellDisplayMode';
 import { GenericEditableChipCellEditMode } from './GenericEditableChipCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldChipMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableChipCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   return (
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableChipCellEditMode viewField={viewField} />
+        <GenericEditableChipCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={
-        <GenericEditableChipCellDisplayMode fieldDefinition={viewField} />
+        <GenericEditableChipCellDisplayMode
+          columnDefinition={columnDefinition}
+        />
       }
     ></EditableCell>
   );

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx

@@ -1,39 +1,38 @@
 import { useRecoilValue } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
-import {
-  ViewFieldChipMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 import { getLogoUrlFromDomainName } from '~/utils';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 type OwnProps = {
-  fieldDefinition: ViewFieldDefinition<ViewFieldChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldChipMetadata>;
 };
 
 export function GenericEditableChipCellDisplayMode({
-  fieldDefinition,
+  columnDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const content = useRecoilValue<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: fieldDefinition.metadata.contentFieldName,
+      fieldName: columnDefinition.metadata.contentFieldName,
     }),
   );
 
   const chipUrl = useRecoilValue<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: fieldDefinition.metadata.urlFieldName,
+      fieldName: columnDefinition.metadata.urlFieldName,
     }),
   );
 
-  switch (fieldDefinition.metadata.relationType) {
+  switch (columnDefinition.metadata.relationType) {
     case Entity.Company: {
       return (
         <CompanyChip
@@ -45,7 +44,7 @@ export function GenericEditableChipCellDisplayMode({
     }
     default:
       console.warn(
-        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableChipCellEditMode`,
+        `Unknown relation type: "${columnDefinition.metadata.relationType}" in GenericEditableChipCellEditMode`,
       );
       return <> </>;
   }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx

@@ -1,27 +1,28 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldChipMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldChipMetadata>;
 };
 
-export function GenericEditableChipCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableChipCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.contentFieldName,
+      fieldName: columnDefinition.metadata.contentFieldName,
     }),
   );
 
@@ -33,13 +34,13 @@ export function GenericEditableChipCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newText);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, newText);
+      updateField(currentRowEntityId, columnDefinition, newText);
     }
   }
 
   return (
     <TextCellEdit
-      placeholder={viewField.metadata.placeHolder ?? ''}
+      placeholder={columnDefinition.metadata.placeHolder ?? ''}
       autoFocus
       value={fieldValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx

@@ -1,23 +1,22 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDateMetadata } from '@/ui/editable-field/types/ViewField';
 import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableDateCellEditMode } from './GenericEditableDateCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDateMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditableDateCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -25,7 +24,7 @@ export function GenericEditableDateCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,7 +32,7 @@ export function GenericEditableDateCell({
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableDateCellEditMode viewField={viewField} />
+        <GenericEditableDateCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={<DateInputDisplay value={fieldValue} />}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx

@@ -1,28 +1,29 @@
 import { DateTime } from 'luxon';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDateMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { DateCellEdit } from './DateCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDateMetadata>;
 };
 
-export function GenericEditableDateCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableDateCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -40,7 +41,7 @@ export function GenericEditableDateCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newDateISO);
 
     if (currentRowEntityId && updateField && newDateISO) {
-      updateField(currentRowEntityId, viewField, newDateISO);
+      updateField(currentRowEntityId, columnDefinition, newDateISO);
     }
   }
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx

@@ -1,34 +1,33 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDoubleTextMetadata } from '@/ui/editable-field/types/ViewField';
 import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableDoubleTextCellEditMode } from './GenericEditableDoubleTextCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDoubleTextMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDoubleTextMetadata>;
 };
 
-export function GenericEditableDoubleTextCell({ viewField }: OwnProps) {
+export function GenericEditableDoubleTextCell({ columnDefinition }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const firstValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.firstValueFieldName,
+      fieldName: columnDefinition.metadata.firstValueFieldName,
     }),
   );
 
   const secondValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.secondValueFieldName,
+      fieldName: columnDefinition.metadata.secondValueFieldName,
     }),
   );
 
@@ -37,7 +36,9 @@ export function GenericEditableDoubleTextCell({ viewField }: OwnProps) {
   return (
     <EditableCell
       editModeContent={
-        <GenericEditableDoubleTextCellEditMode viewField={viewField} />
+        <GenericEditableDoubleTextCellEditMode
+          columnDefinition={columnDefinition}
+        />
       }
       nonEditModeContent={<TextInputDisplay>{displayName}</TextInputDisplay>}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx

@@ -1,34 +1,35 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDoubleTextMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { DoubleTextCellEdit } from './DoubleTextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDoubleTextMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDoubleTextMetadata>;
 };
 
-export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableDoubleTextCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [firstValue, setFirstValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.firstValueFieldName,
+      fieldName: columnDefinition.metadata.firstValueFieldName,
     }),
   );
 
   const [secondValue, setSecondValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.secondValueFieldName,
+      fieldName: columnDefinition.metadata.secondValueFieldName,
     }),
   );
 
@@ -41,7 +42,7 @@ export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) {
     setSecondValue(newSecondValue);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, {
+      updateField(currentRowEntityId, columnDefinition, {
         firstValue: newFirstValue,
         secondValue: newSecondValue,
       });
@@ -50,8 +51,8 @@ export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) {
 
   return (
     <DoubleTextCellEdit
-      firstValuePlaceholder={viewField.metadata.firstValuePlaceholder}
-      secondValuePlaceholder={viewField.metadata.secondValuePlaceholder}
+      firstValuePlaceholder={columnDefinition.metadata.firstValuePlaceholder}
+      secondValuePlaceholder={columnDefinition.metadata.secondValuePlaceholder}
       firstValue={firstValue ?? ''}
       secondValue={secondValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCell.tsx

@@ -1,26 +1,31 @@
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextChipMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableDoubleTextChipCellDisplayMode } from './GenericEditableDoubleTextChipCellDisplayMode';
 import { GenericEditableDoubleTextChipCellEditMode } from './GenericEditableDoubleTextChipCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDoubleTextChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
 };
 
-export function GenericEditableDoubleTextChipCell({ viewField }: OwnProps) {
+export function GenericEditableDoubleTextChipCell({
+  columnDefinition,
+}: OwnProps) {
   return (
     <EditableCell
       editHotkeyScope={{ scope: TableHotkeyScope.CellDoubleTextInput }}
       editModeContent={
-        <GenericEditableDoubleTextChipCellEditMode viewField={viewField} />
+        <GenericEditableDoubleTextChipCellEditMode
+          columnDefinition={columnDefinition}
+        />
       }
       nonEditModeContent={
-        <GenericEditableDoubleTextChipCellDisplayMode viewField={viewField} />
+        <GenericEditableDoubleTextChipCellDisplayMode
+          columnDefinition={columnDefinition}
+        />
       }
     ></EditableCell>
   );

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx

@@ -2,48 +2,47 @@ import { useRecoilState } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
 import { PersonChip } from '@/people/components/PersonChip';
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextChipMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDoubleTextChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
 };
 
 export function GenericEditableDoubleTextChipCellDisplayMode({
-  viewField,
+  columnDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const [firstValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.firstValueFieldName,
+      fieldName: columnDefinition.metadata.firstValueFieldName,
     }),
   );
 
   const [secondValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.secondValueFieldName,
+      fieldName: columnDefinition.metadata.secondValueFieldName,
     }),
   );
 
   const [avatarUrlValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.avatarUrlFieldName,
+      fieldName: columnDefinition.metadata.avatarUrlFieldName,
     }),
   );
 
   const displayName =
     firstValue || secondValue ? `${firstValue} ${secondValue}` : ' ';
 
-  switch (viewField.metadata.entityType) {
+  switch (columnDefinition.metadata.entityType) {
     case Entity.Company: {
       return <CompanyChip id={currentRowEntityId ?? ''} name={displayName} />;
     }
@@ -58,7 +57,7 @@ export function GenericEditableDoubleTextChipCellDisplayMode({
     }
     default:
       console.warn(
-        `Unknown relation type: "${viewField.metadata.entityType}" in GenericEditableDoubleTextChipCellDisplayMode`,
+        `Unknown relation type: "${columnDefinition.metadata.entityType}" in GenericEditableDoubleTextChipCellDisplayMode`,
       );
       return <> </>;
   }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx

@@ -1,21 +1,20 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextChipMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { DoubleTextCellEdit } from './DoubleTextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldDoubleTextChipMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
 };
 
 export function GenericEditableDoubleTextChipCellEditMode({
-  viewField,
+  columnDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
@@ -23,14 +22,14 @@ export function GenericEditableDoubleTextChipCellEditMode({
   const [firstValue, setFirstValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.firstValueFieldName,
+      fieldName: columnDefinition.metadata.firstValueFieldName,
     }),
   );
 
   const [secondValue, setSecondValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.secondValueFieldName,
+      fieldName: columnDefinition.metadata.secondValueFieldName,
     }),
   );
 
@@ -53,7 +52,7 @@ export function GenericEditableDoubleTextChipCellEditMode({
       updateField &&
       (firstValueChanged || secondValueChanged)
     ) {
-      updateField(currentRowEntityId, viewField, {
+      updateField(currentRowEntityId, columnDefinition, {
         firstValue: firstValueChanged ? newFirstValue : firstValue,
         secondValue: secondValueChanged ? newSecondValue : secondValue,
       });
@@ -62,8 +61,8 @@ export function GenericEditableDoubleTextChipCellEditMode({
 
   return (
     <DoubleTextCellEdit
-      firstValuePlaceholder={viewField.metadata.firstValuePlaceholder}
-      secondValuePlaceholder={viewField.metadata.secondValuePlaceholder}
+      firstValuePlaceholder={columnDefinition.metadata.firstValuePlaceholder}
+      secondValuePlaceholder={columnDefinition.metadata.secondValuePlaceholder}
       firstValue={firstValue ?? ''}
       secondValue={secondValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCell.tsx

@@ -1,23 +1,22 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldEmailMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldEmailMetadata } from '@/ui/editable-field/types/ViewField';
 import { EmailInputDisplay } from '@/ui/input/email/components/EmailInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableEmailCellEditMode } from './GenericEditableEmailCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldEmailMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldEmailMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditableEmailCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -25,7 +24,7 @@ export function GenericEditableEmailCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,7 +32,7 @@ export function GenericEditableEmailCell({
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableEmailCellEditMode viewField={viewField} />
+        <GenericEditableEmailCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={<EmailInputDisplay value={fieldValue} />}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx

@@ -1,27 +1,28 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldEmailMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldEmailMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldEmailMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldEmailMetadata>;
 };
 
-export function GenericEditableEmailCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableEmailCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,13 +34,13 @@ export function GenericEditableEmailCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newEmail);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, newEmail);
+      updateField(currentRowEntityId, columnDefinition, newEmail);
     }
   }
 
   return (
     <TextCellEdit
-      placeholder={viewField.metadata.placeHolder ?? ''}
+      placeholder={columnDefinition.metadata.placeHolder ?? ''}
       autoFocus
       value={fieldValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCell.tsx

@@ -1,17 +1,16 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMoneyMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldMoneyMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableMoneyCellEditMode } from './GenericEditableMoneyCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldMoneyMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldMoneyMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
@@ -21,7 +20,7 @@ function formatNumber(value: number) {
 }
 
 export function GenericEditableMoneyCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -29,7 +28,7 @@ export function GenericEditableMoneyCell({
   const fieldValue = useRecoilValue<number>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -37,7 +36,7 @@ export function GenericEditableMoneyCell({
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableMoneyCellEditMode viewField={viewField} />
+        <GenericEditableMoneyCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={
         <>{fieldValue ? `$${formatNumber(fieldValue)}` : ''}</>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx

@@ -1,26 +1,27 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMoneyMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldMoneyMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldMoneyMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldMoneyMetadata>;
 };
 
-export function GenericEditableMoneyCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableMoneyCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -43,7 +44,7 @@ export function GenericEditableMoneyCellEditMode({ viewField }: OwnProps) {
       setFieldValue(numberValue.toString());
 
       if (currentRowEntityId && updateField) {
-        updateField(currentRowEntityId, viewField, numberValue);
+        updateField(currentRowEntityId, columnDefinition, numberValue);
       }
     } catch (error) {
       console.warn(

front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx

@@ -1,22 +1,21 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableNumberCellEditMode } from './GenericEditableNumberCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldNumberMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditableNumberCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -24,7 +23,7 @@ export function GenericEditableNumberCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -32,7 +31,9 @@ export function GenericEditableNumberCell({
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableNumberCellEditMode viewField={viewField} />
+        <GenericEditableNumberCellEditMode
+          columnDefinition={columnDefinition}
+        />
       }
       nonEditModeContent={<>{fieldValue}</>}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx

@@ -1,9 +1,6 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
@@ -12,20 +9,24 @@ import {
   castAsPositiveIntegerOrNull,
 } from '~/utils/cast-as-positive-integer-or-null';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldNumberMetadata>;
 };
 
-export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableNumberCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -41,7 +42,7 @@ export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) {
         throw new Error('Not a number');
       }
 
-      if (viewField.metadata.isPositive) {
+      if (columnDefinition.metadata.isPositive) {
         if (!canBeCastAsPositiveIntegerOrNull(newText)) {
           return;
         }
@@ -64,7 +65,7 @@ export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) {
       setFieldValue(numberValue.toString());
 
       if (currentRowEntityId && updateField) {
-        updateField(currentRowEntityId, viewField, numberValue);
+        updateField(currentRowEntityId, columnDefinition, numberValue);
       }
     } catch (error) {
       console.warn(

front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx

@@ -1,23 +1,22 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldPhoneMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldPhoneMetadata } from '@/ui/editable-field/types/ViewField';
 import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditablePhoneCellEditMode } from './GenericEditablePhoneCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldPhoneMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldPhoneMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditablePhoneCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -25,7 +24,7 @@ export function GenericEditablePhoneCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -34,7 +33,7 @@ export function GenericEditablePhoneCell({
       useEditButton
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditablePhoneCellEditMode viewField={viewField} />
+        <GenericEditablePhoneCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={<PhoneInputDisplay value={fieldValue} />}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx

@@ -1,27 +1,28 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldPhoneMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldPhoneMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { PhoneCellEdit } from './PhoneCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldPhoneMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldPhoneMetadata>;
 };
 
-export function GenericEditablePhoneCellEditMode({ viewField }: OwnProps) {
+export function GenericEditablePhoneCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,13 +34,13 @@ export function GenericEditablePhoneCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newText);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, newText);
+      updateField(currentRowEntityId, columnDefinition, newText);
     }
   }
 
   return (
     <PhoneCellEdit
-      placeholder={viewField.metadata.placeHolder ?? ''}
+      placeholder={columnDefinition.metadata.placeHolder ?? ''}
       autoFocus
       value={fieldValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx

@@ -1,21 +1,20 @@
-import {
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableRelationCellDisplayMode } from './GenericEditableRelationCellDisplayMode';
 import { GenericEditableRelationCellEditMode } from './GenericEditableRelationCellEditMode';
 
 type OwnProps = {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldRelationMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableRelationCell({
-  fieldDefinition,
+  columnDefinition,
   editModeHorizontalAlign,
   placeholder,
 }: OwnProps) {
@@ -25,11 +24,13 @@ export function GenericEditableRelationCell({
       editModeHorizontalAlign={editModeHorizontalAlign}
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
-        <GenericEditableRelationCellEditMode viewField={fieldDefinition} />
+        <GenericEditableRelationCellEditMode
+          columnDefinition={columnDefinition}
+        />
       }
       nonEditModeContent={
         <GenericEditableRelationCellDisplayMode
-          fieldDefinition={fieldDefinition}
+          columnDefinition={columnDefinition}
           editModeHorizontalAlign={editModeHorizontalAlign}
           placeholder={placeholder}
         />

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx

@@ -1,24 +1,23 @@
 import { useRecoilValue } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
-import {
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 import { UserChip } from '@/users/components/UserChip';
 import { getLogoUrlFromDomainName } from '~/utils';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 type OwnProps = {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldRelationMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableRelationCellDisplayMode({
-  fieldDefinition,
+  columnDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
@@ -26,11 +25,11 @@ export function GenericEditableRelationCellDisplayMode({
   const fieldValue = useRecoilValue<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: fieldDefinition.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
-  switch (fieldDefinition.metadata.relationType) {
+  switch (columnDefinition.metadata.relationType) {
     case Entity.Company: {
       return (
         <CompanyChip
@@ -51,7 +50,7 @@ export function GenericEditableRelationCellDisplayMode({
     }
     default:
       console.warn(
-        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`,
+        `Unknown relation type: "${columnDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`,
       );
       return <> </>;
   }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx

@@ -4,10 +4,7 @@ import {
   CompanyPickerCell,
   CompanyPickerSelectedCompany,
 } from '@/companies/components/CompanyPickerCell';
-import {
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
@@ -16,11 +13,15 @@ import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 import { UserPicker } from '@/users/components/UserPicker';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldRelationMetadata>;
 };
 
-export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableRelationCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const { closeEditableCell } = useEditableCell();
@@ -28,7 +29,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
   const [fieldValueEntity, setFieldValueEntity] = useRecoilState<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
   const updateEntityField = useUpdateEntityField();
@@ -71,7 +72,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
       updateCachedCompanyField(newFieldEntity);
       updateEntityField<ViewFieldRelationMetadata, EntityForSelect>(
         currentRowEntityId,
-        viewField,
+        columnDefinition,
         newFieldEntity,
       );
     }
@@ -86,7 +87,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
       updateEntityField
     ) {
       updateCachedPersonField(newFieldEntity);
-      updateEntityField(currentRowEntityId, viewField, newFieldEntity);
+      updateEntityField(currentRowEntityId, columnDefinition, newFieldEntity);
     }
 
     closeEditableCell();
@@ -96,14 +97,14 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
     closeEditableCell();
   }
 
-  switch (viewField.metadata.relationType) {
+  switch (columnDefinition.metadata.relationType) {
     case Entity.Company: {
       return (
         <CompanyPickerCell
           companyId={fieldValueEntity?.id ?? null}
           onSubmit={handleCompanySubmit}
           onCancel={handleCancel}
-          width={viewField.columnSize}
+          width={columnDefinition.size}
           createModeEnabled
         />
       );
@@ -114,13 +115,13 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           userId={fieldValueEntity?.id ?? null}
           onSubmit={handlePersonSubmit}
           onCancel={handleCancel}
-          width={viewField.columnSize}
+          width={columnDefinition.size}
         />
       );
     }
     default:
       console.warn(
-        `Unknown relation type: "${viewField.metadata.relationType}" in GenericEditableRelationCellEditMode`,
+        `Unknown relation type: "${columnDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`,
       );
       return <></>;
   }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx

@@ -1,23 +1,22 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldTextMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldTextMetadata } from '@/ui/editable-field/types/ViewField';
 import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldTextMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldTextMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditableTextCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -25,7 +24,7 @@ export function GenericEditableTextCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,7 +32,7 @@ export function GenericEditableTextCell({
     <EditableCell
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <GenericEditableTextCellEditMode viewField={viewField} />
+        <GenericEditableTextCellEditMode columnDefinition={columnDefinition} />
       }
       nonEditModeContent={<TextInputDisplay>{fieldValue}</TextInputDisplay>}
     ></EditableCell>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx

@@ -1,27 +1,28 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldTextMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldTextMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldTextMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldTextMetadata>;
 };
 
-export function GenericEditableTextCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableTextCellEditMode({
+  columnDefinition,
+}: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -33,13 +34,13 @@ export function GenericEditableTextCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newText);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, newText);
+      updateField(currentRowEntityId, columnDefinition, newText);
     }
   }
 
   return (
     <TextCellEdit
-      placeholder={viewField.metadata.placeHolder ?? ''}
+      placeholder={columnDefinition.metadata.placeHolder ?? ''}
       autoFocus
       value={fieldValue ?? ''}
       onSubmit={handleSubmit}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx

@@ -1,24 +1,23 @@
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldURLMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldURLMetadata } from '@/ui/editable-field/types/ViewField';
 import { InplaceInputURLDisplayMode } from '@/ui/input/url/components/URLTextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 import { sanitizeURL } from '~/utils';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { GenericEditableURLCellEditMode } from './GenericEditableURLCellEditMode';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldURLMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldURLMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
 export function GenericEditableURLCell({
-  viewField,
+  columnDefinition,
   editModeHorizontalAlign,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
@@ -26,7 +25,7 @@ export function GenericEditableURLCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -34,7 +33,9 @@ export function GenericEditableURLCell({
     <EditableCell
       useEditButton
       editModeHorizontalAlign={editModeHorizontalAlign}
-      editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
+      editModeContent={
+        <GenericEditableURLCellEditMode columnDefinition={columnDefinition} />
+      }
       nonEditModeContent={
         <InplaceInputURLDisplayMode value={sanitizeURL(fieldValue)} />
       }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx

@@ -1,28 +1,27 @@
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldURLMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import type { ViewFieldURLMetadata } from '@/ui/editable-field/types/ViewField';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
 import { isURL } from '~/utils/is-url';
 
+import type { ColumnDefinition } from '../../../types/ColumnDefinition';
+
 import { TextCellEdit } from './TextCellEdit';
 
 type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldURLMetadata>;
+  columnDefinition: ColumnDefinition<ViewFieldURLMetadata>;
 };
 
-export function GenericEditableURLCellEditMode({ viewField }: OwnProps) {
+export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: columnDefinition.metadata.fieldName,
     }),
   );
 
@@ -36,13 +35,13 @@ export function GenericEditableURLCellEditMode({ viewField }: OwnProps) {
     setFieldValue(newText);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, viewField, newText);
+      updateField(currentRowEntityId, columnDefinition, newText);
     }
   }
 
   return (
     <TextCellEdit
-      placeholder={viewField.metadata.placeHolder ?? ''}
+      placeholder={columnDefinition.metadata.placeHolder ?? ''}
       autoFocus
       value={fieldValue ?? ''}
       onSubmit={handleSubmit}