Refactor/remove react table (#642)

* Refactored tables without tan stack
* Fixed checkbox behavior with multiple handlers on click
* Fixed hotkeys scope
* Fix debounce in editable cells
* Lowered coverage

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/comments/hooks/useOpenTimelineRightDrawer.ts

@@ -8,6 +8,7 @@ import { useOpenRightDrawer } from '../../ui/layout/right-drawer/hooks/useOpenRi
 import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
 import { CommentableEntity } from '../types/CommentableEntity';
 
+// TODO: refactor with recoil callback to avoid rerender
 export function useOpenTimelineRightDrawer() {
   const openRightDrawer = useOpenRightDrawer();
   const [, setCommentableEntityArray] = useRecoilState(

front/src/modules/companies/components/CompanyAccountOwnerCell.tsx

@@ -1,18 +1,22 @@
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { PersonChip } from '@/people/components/PersonChip';
 import { EditableCell } from '@/ui/components/editable-cell/EditableCell';
 import { Company, User } from '~/generated/graphql';
 
 import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
 
+export type CompanyAccountOnwer = Pick<Company, 'id'> & {
+  accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+};
+
 export type OwnProps = {
-  company: Pick<Company, 'id'> & {
-    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
-  };
+  company: CompanyAccountOnwer;
 };
 
 export function CompanyAccountOwnerCell({ company }: OwnProps) {
   return (
     <EditableCell
+      editHotkeysScope={{ scope: InternalHotkeysScope.RelationPicker }}
       editModeContent={<CompanyAccountOwnerPicker company={company} />}
       nonEditModeContent={
         company.accountOwner?.displayName ? (

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -13,7 +13,7 @@ import { CompanyChip } from './CompanyChip';
 type OwnProps = {
   company: Pick<
     GetCompaniesQuery['companies'][0],
-    'id' | 'name' | 'domainName' | '_commentThreadCount' | 'accountOwner'
+    'id' | 'name' | 'domainName' | '_commentThreadCount'
   >;
 };
 
@@ -35,16 +35,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
 
   return (
     <EditableCellChip
-      value={company.name || ''}
+      value={company.name ?? ''}
       placeholder="Name"
       picture={getLogoUrlFromDomainName(company.domainName)}
       id={company.id}
       changeHandler={(value: string) => {
         updateCompany({
           variables: {
-            ...company,
+            id: company.id,
             name: value,
-            accountOwnerId: company.accountOwner?.id,
           },
         });
       }}

front/src/modules/companies/states/companyAccountOwnerFamilyState.ts

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { CompanyAccountOnwer } from '../components/CompanyAccountOwnerCell';
+
+export const companyAccountOwnerFamilyState = atomFamily<
+  CompanyAccountOnwer['accountOwner'] | null,
+  string
+>({
+  key: 'companyAccountOwnerFamilyState',
+  default: null,
+});

front/src/modules/companies/states/companyAddressFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const companyAddressFamilyState = atomFamily<string | null, string>({
+  key: 'companyAddressFamilyState',
+  default: null,
+});

front/src/modules/companies/states/companyCommentCountFamilyState.ts

@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+export const companyCommentCountFamilyState = atomFamily<number | null, string>(
+  {
+    key: 'companyCommentCountFamilyState',
+    default: null,
+  },
+);

front/src/modules/companies/states/companyCreatedAtFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const companyCreatedAtFamilyState = atomFamily<string | null, string>({
+  key: 'companyCreatedAtFamilyState',
+  default: null,
+});

front/src/modules/companies/states/companyDomainNameFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const companyDomainNameFamilyState = atomFamily<string | null, string>({
+  key: 'companyDomainNameFamilyState',
+  default: null,
+});

front/src/modules/companies/states/companyEmployeesFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const companyEmployeesFamilyState = atomFamily<string | null, string>({
+  key: 'companyEmployeesFamilyState',
+  default: null,
+});

front/src/modules/companies/states/companyNameFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const companyNameFamilyState = atomFamily<string | null, string>({
+  key: 'companyNameFamilyState',
+  default: null,
+});

front/src/modules/companies/table/components/CompanyEntityTableData.tsx

@@ -0,0 +1,50 @@
+import { useRecoilState } from 'recoil';
+
+import { defaultOrderBy } from '@/companies/services';
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+import {
+  PersonOrderByWithRelationInput,
+  useGetCompaniesQuery,
+} from '~/generated/graphql';
+
+import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
+
+export function CompanyEntityTableData({
+  orderBy = defaultOrderBy,
+  whereFilters,
+}: {
+  orderBy?: PersonOrderByWithRelationInput[];
+  whereFilters?: any;
+}) {
+  const [, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const [, setIsFetchingEntityTableData] = useRecoilState(
+    isFetchingEntityTableDataState,
+  );
+
+  const setCompanyEntityTable = useSetCompanyEntityTable();
+
+  useGetCompaniesQuery({
+    variables: { orderBy, where: whereFilters },
+    onCompleted: (data) => {
+      const companies = data.companies ?? [];
+
+      const companyIds = companies.map((company) => company.id);
+
+      setTableRowIds((currentRowIds) => {
+        if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
+          return companyIds;
+        }
+
+        return currentRowIds;
+      });
+
+      setCompanyEntityTable(companies);
+
+      setIsFetchingEntityTableData(false);
+    },
+  });
+
+  return <></>;
+}

front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx

@@ -0,0 +1,25 @@
+import { useRecoilValue } from 'recoil';
+
+import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
+import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditableCompanyAccountOwnerCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const accountOwner = useRecoilValue(
+    companyAccountOwnerFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <CompanyAccountOwnerCell
+      company={{
+        id: currentRowEntityId ?? '',
+        accountOwner: {
+          displayName: accountOwner?.displayName ?? '',
+          id: accountOwner?.id ?? '',
+        },
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyAddressCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const address = useRecoilValue(
+    companyAddressFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={address ?? ''}
+      onChange={async (newAddress: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            address: newAddress,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx

@@ -0,0 +1,33 @@
+import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
+
+import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
+import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyCreatedAtCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const createdAt = useRecoilValue(
+    companyCreatedAtFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  return (
+    <EditableCellDate
+      onChange={async (newDate: Date) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            createdAt: newDate.toISOString(),
+          },
+        });
+      }}
+      value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyDomainNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const name = useRecoilValue(
+    companyDomainNameFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={name ?? ''}
+      onChange={async (domainName: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            domainName: domainName,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx

@@ -0,0 +1,33 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyEmployeesCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const employees = useRecoilValue(
+    companyEmployeesFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    // TODO: Create an EditableCellNumber component
+    <EditableCellText
+      value={employees ?? ''}
+      onChange={async (newEmployees: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            employees: parseInt(newEmployees),
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyNameCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
+import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
+import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
+import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditableCompanyNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const name = useRecoilValue(companyNameFamilyState(currentRowEntityId ?? ''));
+
+  const domainName = useRecoilValue(
+    companyDomainNameFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const commentCount = useRecoilValue(
+    companyCommentCountFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <CompanyEditableNameChipCell
+      company={{
+        id: currentRowEntityId ?? '',
+        name: name ?? '',
+        domainName: domainName ?? '',
+        _commentThreadCount: commentCount ?? 0,
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/companyColumns.tsx

@@ -0,0 +1,61 @@
+import { TableColumn } from '@/people/table/components/peopleColumns';
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconLink,
+  IconMap,
+  IconUser,
+  IconUsers,
+} from '@/ui/icons/index';
+
+import { EditableCompanyAccountOwnerCell } from './EditableCompanyAccountOwnerCell';
+import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
+import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
+import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
+import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
+import { EditableCompanyNameCell } from './EditableCompanyNameCell';
+
+export const companyColumns: TableColumn[] = [
+  {
+    id: 'name',
+    title: 'Name',
+    icon: <IconBuildingSkyscraper size={16} />,
+    size: 180,
+    cellComponent: <EditableCompanyNameCell />,
+  },
+  {
+    id: 'domainName',
+    title: 'URL',
+    icon: <IconLink size={16} />,
+    size: 100,
+    cellComponent: <EditableCompanyDomainNameCell />,
+  },
+  {
+    id: 'employees',
+    title: 'Employees',
+    icon: <IconUsers size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyEmployeesCell />,
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    icon: <IconMap size={16} />,
+    size: 170,
+    cellComponent: <EditableCompanyAddressCell />,
+  },
+  {
+    id: 'createdAt',
+    title: 'Creation',
+    icon: <IconCalendarEvent size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyCreatedAtCell />,
+  },
+  {
+    id: 'accountOwner',
+    title: 'Account owner',
+    icon: <IconUser size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyAccountOwnerCell />,
+  },
+];

front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts

@@ -0,0 +1,88 @@
+import { useRecoilCallback } from 'recoil';
+
+import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
+import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
+import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
+import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
+import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
+import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
+import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
+import { GetCompaniesQuery } from '~/generated/graphql';
+
+export function useSetCompanyEntityTable() {
+  return useRecoilCallback(
+    ({ set, snapshot }) =>
+      (newCompanyArray: GetCompaniesQuery['companies']) => {
+        for (const company of newCompanyArray) {
+          const currentName = snapshot
+            .getLoadable(companyNameFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentName !== company.name) {
+            set(companyNameFamilyState(company.id), company.name);
+          }
+
+          const currentDomainName = snapshot
+            .getLoadable(companyDomainNameFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentDomainName !== company.domainName) {
+            set(companyDomainNameFamilyState(company.id), company.domainName);
+          }
+
+          const currentEmployees = snapshot
+            .getLoadable(companyEmployeesFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentEmployees !== company.employees) {
+            set(
+              companyEmployeesFamilyState(company.id),
+              company.employees?.toString() ?? '',
+            );
+          }
+
+          const currentAddress = snapshot
+            .getLoadable(companyAddressFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentAddress !== company.address) {
+            set(companyAddressFamilyState(company.id), company.address);
+          }
+
+          const currentCommentCount = snapshot
+            .getLoadable(companyCommentCountFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentCommentCount !== company._commentThreadCount) {
+            set(
+              companyCommentCountFamilyState(company.id),
+              company._commentThreadCount,
+            );
+          }
+
+          const currentAccountOwner = snapshot
+            .getLoadable(companyAccountOwnerFamilyState(company.id))
+            .valueOrThrow();
+
+          if (
+            JSON.stringify(currentAccountOwner) !==
+            JSON.stringify(company.accountOwner)
+          ) {
+            set(
+              companyAccountOwnerFamilyState(company.id),
+              company.accountOwner,
+            );
+          }
+
+          const currentCreatedAt = snapshot
+            .getLoadable(companyCreatedAtFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentCreatedAt !== company.createdAt) {
+            set(companyCreatedAtFamilyState(company.id), company.createdAt);
+          }
+        }
+      },
+    [],
+  );
+}

front/src/modules/lib/filters-and-sorts/helpers.ts

@@ -16,8 +16,8 @@ export const reduceSortsToOrderBy = <OrderByTemplate>(
   sorts: Array<SelectedSortType<OrderByTemplate>>,
 ): OrderByTemplate[] => {
   const mappedSorts = sorts.map((sort) => {
-    if (sort._type === 'custom_sort') {
-      return sort.orderByTemplates.map((orderByTemplate) =>
+    if (sort.orderByTemplates) {
+      return sort.orderByTemplates?.map((orderByTemplate) =>
         orderByTemplate(mapOrderToOrder_By(sort.order)),
       );
     }

front/src/modules/lib/filters-and-sorts/interfaces/sorts/interface.ts

@@ -2,20 +2,12 @@ import { ReactNode } from 'react';
 
 import { SortOrder as Order_By } from '~/generated/graphql';
 
-export type SortType<OrderByTemplate> =
-  | {
-      _type: 'default_sort';
-      label: string;
-      key: keyof OrderByTemplate & string;
-      icon?: ReactNode;
-    }
-  | {
-      _type: 'custom_sort';
-      label: string;
-      key: string;
-      icon?: ReactNode;
-      orderByTemplates: Array<(order: Order_By) => OrderByTemplate>;
-    };
+export type SortType<OrderByTemplate> = {
+  label: string;
+  key: string;
+  icon?: ReactNode;
+  orderByTemplates?: Array<(order: Order_By) => OrderByTemplate>;
+};
 
 export type SelectedSortType<OrderByTemplate> = SortType<OrderByTemplate> & {
   order: 'asc' | 'desc';

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/table/CellCommentChip';
@@ -9,7 +8,12 @@ import { CommentableType, Person } from '~/generated/graphql';
 import { PersonChip } from './PersonChip';
 
 type OwnProps = {
-  person: Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>;
+  person:
+    | Partial<
+        Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>
+      >
+    | null
+    | undefined;
   onChange: (firstName: string, lastName: string) => void;
 };
 
@@ -25,17 +29,12 @@ const RightContainer = styled.div`
 `;
 
 export function EditablePeopleFullName({ person, onChange }: OwnProps) {
-  const [firstNameValue, setFirstNameValue] = useState(person.firstName ?? '');
-  const [lastNameValue, setLastNameValue] = useState(person.lastName ?? '');
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
 
   function handleDoubleTextChange(
     firstValue: string,
     secondValue: string,
   ): void {
-    setFirstNameValue(firstValue);
-    setLastNameValue(secondValue);
-
     onChange(firstValue, secondValue);
   }
 
@@ -43,30 +42,34 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
     event.preventDefault();
     event.stopPropagation();
 
+    if (!person) {
+      return;
+    }
+
     openCommentRightDrawer([
       {
         type: CommentableType.Person,
-        id: person.id,
+        id: person.id ?? '',
       },
     ]);
   }
 
   return (
     <EditableCellDoubleText
-      firstValue={firstNameValue}
-      secondValue={lastNameValue}
+      firstValue={person?.firstName ?? ''}
+      secondValue={person?.lastName ?? ''}
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
       nonEditModeContent={
         <NoEditModeContainer>
           <PersonChip
-            name={person.firstName + ' ' + person.lastName}
-            id={person.id}
+            name={person?.firstName + ' ' + person?.lastName}
+            id={person?.id ?? ''}
           />
           <RightContainer>
             <CellCommentChip
-              count={person._commentThreadCount ?? 0}
+              count={person?._commentThreadCount ?? 0}
               onClick={handleCommentClick}
             />
           </RightContainer>

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -9,6 +9,10 @@ import { Company, Person } from '~/generated/graphql';
 import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
 import { PeopleCompanyPicker } from './PeopleCompanyPicker';
 
+export type PeopleWithCompany = Pick<Person, 'id'> & {
+  company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+};
+
 export type OwnProps = {
   people: Pick<Person, 'id'> & {
     company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;

front/src/modules/people/components/PeopleEntityTableData.tsx

@@ -0,0 +1,50 @@
+import { useRecoilState } from 'recoil';
+
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+import {
+  PersonOrderByWithRelationInput,
+  useGetPeopleQuery,
+} from '~/generated/graphql';
+
+import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable';
+import { defaultOrderBy } from '../services';
+
+export function PeopleEntityTableData({
+  orderBy = defaultOrderBy,
+  whereFilters,
+}: {
+  orderBy?: PersonOrderByWithRelationInput[];
+  whereFilters?: any;
+}) {
+  const [, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const [, setIsFetchingEntityTableData] = useRecoilState(
+    isFetchingEntityTableDataState,
+  );
+
+  const setPeopleEntityTable = useSetPeopleEntityTable();
+
+  useGetPeopleQuery({
+    variables: { orderBy, where: whereFilters },
+    onCompleted: (data) => {
+      const people = data.people ?? [];
+
+      const peopleIds = people.map((person) => person.id);
+
+      setTableRowIds((currentRowIds) => {
+        if (JSON.stringify(currentRowIds) !== JSON.stringify(peopleIds)) {
+          return peopleIds;
+        }
+
+        return currentRowIds;
+      });
+
+      setPeopleEntityTable(people);
+
+      setIsFetchingEntityTableData(false);
+    },
+  });
+
+  return <></>;
+}

front/src/modules/people/components/PersonChip.tsx

@@ -50,6 +50,7 @@ const StyledName = styled.span`
 
 export function PersonChip({ id, name, picture }: PersonChipPropsType) {
   const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
+
   return (
     <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
       <Avatar

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -0,0 +1,78 @@
+import { useRecoilCallback } from 'recoil';
+
+import { GetPeopleQuery } from '~/generated/graphql';
+
+import { peopleCityFamilyState } from '../states/peopleCityFamilyState';
+import { peopleCompanyFamilyState } from '../states/peopleCompanyFamilyState';
+import { peopleCreatedAtFamilyState } from '../states/peopleCreatedAtFamilyState';
+import { peopleEmailFamilyState } from '../states/peopleEmailFamilyState';
+import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
+import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
+
+export function useSetPeopleEntityTable() {
+  return useRecoilCallback(
+    ({ set, snapshot }) =>
+      (newPeopleArray: GetPeopleQuery['people']) => {
+        for (const person of newPeopleArray) {
+          const currentEmail = snapshot
+            .getLoadable(peopleEmailFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentEmail !== person.email) {
+            set(peopleEmailFamilyState(person.id), person.email);
+          }
+
+          const currentCity = snapshot
+            .getLoadable(peopleCityFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentCity !== person.city) {
+            set(peopleCityFamilyState(person.id), person.city);
+          }
+
+          const currentCompany = snapshot
+            .getLoadable(peopleCompanyFamilyState(person.id))
+            .valueOrThrow();
+
+          if (
+            JSON.stringify(currentCompany) !== JSON.stringify(person.company)
+          ) {
+            set(peopleCompanyFamilyState(person.id), person.company);
+          }
+
+          const currentPhone = snapshot
+            .getLoadable(peoplePhoneFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentPhone !== person.phone) {
+            set(peoplePhoneFamilyState(person.id), person.phone);
+          }
+
+          const currentCreatedAt = snapshot
+            .getLoadable(peopleCreatedAtFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentCreatedAt !== person.createdAt) {
+            set(peopleCreatedAtFamilyState(person.id), person.createdAt);
+          }
+
+          const currentNameCell = snapshot
+            .getLoadable(peopleNameCellFamilyState(person.id))
+            .valueOrThrow();
+
+          if (
+            currentNameCell.firstName !== person.firstName ||
+            currentNameCell.lastName !== person.lastName ||
+            currentNameCell.commentCount !== person._commentThreadCount
+          ) {
+            set(peopleNameCellFamilyState(person.id), {
+              firstName: person.firstName,
+              lastName: person.lastName,
+              commentCount: person._commentThreadCount,
+            });
+          }
+        }
+      },
+    [],
+  );
+}

front/src/modules/people/services/select.ts

@@ -48,3 +48,72 @@ export const defaultOrderBy: People_Order_By[] = [
     createdAt: SortOrder.Desc,
   },
 ];
+
+export const GET_PERSON_PHONE = gql`
+  query GetPersonPhoneById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      phone
+    }
+  }
+`;
+
+export const GET_PERSON_EMAIL = gql`
+  query GetPersonEmailById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      email
+    }
+  }
+`;
+
+export const GET_PERSON_NAMES_AND_COMMENT_COUNT = gql`
+  query GetPersonNamesAndCommentCountById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      firstName
+      lastName
+      _commentThreadCount
+    }
+  }
+`;
+
+export const GET_PERSON_COMPANY = gql`
+  query GetPersonCompanyById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      company {
+        id
+        name
+        domainName
+      }
+    }
+  }
+`;
+
+export const GET_PERSON_COMMENT_COUNT = gql`
+  query GetPersonCommentCountById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      _commentThreadCount
+    }
+  }
+`;
+
+export const GET_PERSON_CREATED_AT = gql`
+  query GetPersonCreatedAtById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      createdAt
+    }
+  }
+`;
+
+export const GET_PERSON_CITY = gql`
+  query GetPersonCityById($id: String!) {
+    person: findUniquePerson(id: $id) {
+      id
+      city
+    }
+  }
+`;

front/src/modules/people/services/show.ts

@@ -9,7 +9,12 @@ export const GET_PERSON = gql`
       firstName
       lastName
       displayName
+      email
       createdAt
+      _commentThreadCount
+      company {
+        id
+      }
     }
   }
 `;

front/src/modules/people/states/peopleCityFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peopleCityFamilyState = atomFamily<string | null, string>({
+  key: 'peopleCityFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleCompanyFamilyState.ts

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { GetPeopleQuery } from '~/generated/graphql';
+
+export const peopleCompanyFamilyState = atomFamily<
+  GetPeopleQuery['people'][0]['company'] | null,
+  string
+>({
+  key: 'peopleCompanyFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleCreatedAtFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peopleCreatedAtFamilyState = atomFamily<string | null, string>({
+  key: 'peopleCreatedAtFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleEmailFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peopleEmailFamilyState = atomFamily<string | null, string>({
+  key: 'peopleEmailFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleEntityTableFamilyState.ts

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { GetPeopleQuery } from '~/generated/graphql';
+
+export const peopleEntityTableFamilyState = atomFamily<
+  GetPeopleQuery['people'][0] | null,
+  string
+>({
+  key: 'peopleEntityTableFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleNamesFamilyState.ts

@@ -0,0 +1,17 @@
+import { atomFamily } from 'recoil';
+
+export const peopleNameCellFamilyState = atomFamily<
+  {
+    firstName: string | null;
+    lastName: string | null;
+    commentCount: number | null;
+  },
+  string
+>({
+  key: 'peopleNameCellFamilyState',
+  default: {
+    firstName: null,
+    lastName: null,
+    commentCount: null,
+  },
+});

front/src/modules/people/states/peoplePhoneFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peoplePhoneFamilyState = atomFamily<string | null, string>({
+  key: 'peoplePhoneFamilyState',
+  default: null,
+});

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -0,0 +1,30 @@
+import { useRecoilValue } from 'recoil';
+
+import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
+import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleCityCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
+
+  return (
+    <EditableCellPhone
+      value={city ?? ''}
+      onChange={async (newCity: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            city: newCity,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx

@@ -0,0 +1,26 @@
+import { useRecoilValue } from 'recoil';
+
+import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
+import { peopleCompanyFamilyState } from '@/people/states/peopleCompanyFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditablePeopleCompanyCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const company = useRecoilValue(
+    peopleCompanyFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <PeopleCompanyCell
+      people={{
+        id: currentRowEntityId ?? '',
+        company: {
+          domainName: company?.domainName ?? '',
+          name: company?.name ?? '',
+          id: company?.id ?? '',
+        },
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx

@@ -0,0 +1,33 @@
+import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
+
+import { peopleCreatedAtFamilyState } from '@/people/states/peopleCreatedAtFamilyState';
+import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleCreatedAtCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const createdAt = useRecoilValue(
+    peopleCreatedAtFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  return (
+    <EditableCellDate
+      onChange={async (newDate: Date) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            createdAt: newDate.toISOString(),
+          },
+        });
+      }}
+      value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleEmailCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleEmailCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const email = useRecoilValue(
+    peopleEmailFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={email ?? ''}
+      onChange={async (newEmail: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            email: newEmail,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -0,0 +1,38 @@
+import { useRecoilValue } from 'recoil';
+
+import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
+import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleFullNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const { commentCount, firstName, lastName } = useRecoilValue(
+    peopleNameCellFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditablePeopleFullName
+      person={{
+        id: currentRowEntityId ?? undefined,
+        _commentThreadCount: commentCount ?? undefined,
+        firstName: firstName ?? undefined,
+        lastName: lastName ?? undefined,
+      }}
+      onChange={async (firstName: string, lastName: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            firstName,
+            lastName,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx

@@ -0,0 +1,31 @@
+import { useRecoilValue } from 'recoil';
+
+import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
+import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeoplePhoneCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const phone = useRecoilValue(
+    peoplePhoneFamilyState(currentRowEntityId ?? ''),
+  );
+  return (
+    <EditableCellPhone
+      value={phone ?? ''}
+      onChange={async (newPhone: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            phone: newPhone,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/peopleColumns.tsx

@@ -0,0 +1,68 @@
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconMail,
+  IconMap,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
+
+import { EditablePeopleCityCell } from './EditablePeopleCityCell';
+import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell';
+import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell';
+import { EditablePeopleEmailCell } from './EditablePeopleEmailCell';
+import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell';
+import { EditablePeoplePhoneCell } from './EditablePeoplePhoneCell';
+
+export type TableColumn = {
+  id: string;
+  title: string;
+  icon: JSX.Element;
+  size: number;
+  cellComponent: JSX.Element;
+};
+
+export const peopleColumns: TableColumn[] = [
+  {
+    id: 'fullName',
+    title: 'People',
+    icon: <IconUser size={16} />,
+    size: 210,
+    cellComponent: <EditablePeopleFullNameCell />,
+  },
+  {
+    id: 'email',
+    title: 'Email',
+    icon: <IconMail size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleEmailCell />,
+  },
+  {
+    id: 'company',
+    title: 'Company',
+    icon: <IconBuildingSkyscraper size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCompanyCell />,
+  },
+  {
+    id: 'phone',
+    title: 'Phone',
+    icon: <IconPhone size={16} />,
+    size: 150,
+    cellComponent: <EditablePeoplePhoneCell />,
+  },
+  {
+    id: 'createdAt',
+    title: 'Creation',
+    icon: <IconCalendarEvent size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCreatedAtCell />,
+  },
+  {
+    id: 'city',
+    title: 'City',
+    icon: <IconMap size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCityCell />,
+  },
+];

front/src/modules/ui/components/editable-cell/CellSkeleton.tsx

@@ -0,0 +1,9 @@
+import Skeleton from 'react-loading-skeleton';
+
+export function CellSkeleton() {
+  return (
+    <div style={{ width: '100%', alignItems: 'center' }}>
+      <Skeleton />
+    </div>
+  );
+}

front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 
+import { CellSkeleton } from '../CellSkeleton';
 import { EditableCell } from '../EditableCell';
 
 import { EditableCellDoubleTextEditMode } from './EditableCellDoubleTextEditMode';
@@ -13,6 +14,7 @@ type OwnProps = {
   secondValuePlaceholder: string;
   nonEditModeContent: ReactElement;
   onChange: (firstValue: string, secondValue: string) => void;
+  loading?: boolean;
 };
 
 export function EditableCellDoubleText({
@@ -22,20 +24,30 @@ export function EditableCellDoubleText({
   secondValuePlaceholder,
   onChange,
   nonEditModeContent,
+  loading,
 }: OwnProps) {
+  const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
+  const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
+
+  function handleOnChange(firstValue: string, secondValue: string): void {
+    setFirstInternalValue(firstValue);
+    setSecondInternalValue(secondValue);
+    onChange(firstValue, secondValue);
+  }
+
   return (
     <EditableCell
       editHotkeysScope={{ scope: InternalHotkeysScope.CellDoubleTextInput }}
       editModeContent={
         <EditableCellDoubleTextEditMode
-          firstValue={firstValue}
-          secondValue={secondValue}
+          firstValue={firstInternalValue}
+          secondValue={secondInternalValue}
           firstValuePlaceholder={firstValuePlaceholder}
           secondValuePlaceholder={secondValuePlaceholder}
-          onChange={onChange}
+          onChange={handleOnChange}
         />
       }
-      nonEditModeContent={nonEditModeContent}
+      nonEditModeContent={loading ? <CellSkeleton /> : nonEditModeContent}
     ></EditableCell>
   );
 }

front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 
 import { InplaceInputPhoneDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputPhoneDisplayMode';
 import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
@@ -8,17 +8,17 @@ import { EditableCell } from '../EditableCell';
 type OwnProps = {
   placeholder?: string;
   value: string;
-  changeHandler: (updated: string) => void;
+  onChange: (updated: string) => void;
 };
 
-export function EditableCellPhone({
-  value,
-  placeholder,
-  changeHandler,
-}: OwnProps) {
+export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   return (
     <EditableCell
       editModeContent={
@@ -29,7 +29,7 @@ export function EditableCellPhone({
           value={inputValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setInputValue(event.target.value);
-            changeHandler(event.target.value);
+            onChange(event.target.value);
           }}
         />
       }

front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx

@@ -1,9 +1,9 @@
-import { ChangeEvent, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
 import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
-import { debounce } from '@/utils/debounce';
 
+import { CellSkeleton } from '../CellSkeleton';
 import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
@@ -11,6 +11,7 @@ type OwnProps = {
   value: string;
   onChange: (newValue: string) => void;
   editModeHorizontalAlign?: 'left' | 'right';
+  loading?: boolean;
 };
 
 export function EditableCellText({
@@ -18,12 +19,13 @@ export function EditableCellText({
   placeholder,
   onChange,
   editModeHorizontalAlign,
+  loading,
 }: OwnProps) {
   const [internalValue, setInternalValue] = useState(value);
 
-  const debouncedOnChange = useMemo(() => {
-    return debounce(onChange, 200);
-  }, [onChange]);
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
 
   return (
     <EditableCell
@@ -35,14 +37,18 @@ export function EditableCellText({
           value={internalValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setInternalValue(event.target.value);
-            debouncedOnChange(event.target.value);
+            onChange(event.target.value);
           }}
         />
       }
       nonEditModeContent={
-        <InplaceInputTextDisplayMode>
-          {internalValue}
-        </InplaceInputTextDisplayMode>
+        loading ? (
+          <CellSkeleton />
+        ) : (
+          <InplaceInputTextDisplayMode>
+            {internalValue}
+          </InplaceInputTextDisplayMode>
+        )
       }
     ></EditableCell>
   );

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -1,4 +1,11 @@
-import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  ComponentType,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
@@ -55,6 +62,10 @@ export function EditableCellChip({
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const handleRightEndContentClick = (
     event: React.MouseEvent<HTMLDivElement>,
   ) => {

front/src/modules/ui/components/form/Checkbox.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  name?: string;
-  id?: string;
-  checked?: boolean;
+  checked: boolean;
   indeterminate?: boolean;
   onChange?: (newCheckedValue: boolean) => void;
 };
@@ -41,13 +39,7 @@ const StyledContainer = styled.div`
   }
 `;
 
-export function Checkbox({
-  name,
-  id,
-  checked,
-  onChange,
-  indeterminate,
-}: OwnProps) {
+export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
   const ref = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
@@ -57,10 +49,8 @@ export function Checkbox({
     }
   }, [ref, indeterminate, checked]);
 
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-    if (onChange) {
-      onChange(event.target.checked);
-    }
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    onChange?.(event.target.checked);
   }
 
   return (
@@ -69,10 +59,8 @@ export function Checkbox({
         ref={ref}
         type="checkbox"
         data-testid="input-checkbox"
-        id={id}
-        name={name}
         checked={checked}
-        onChange={handleInputChange}
+        onChange={handleChange}
       />
     </StyledContainer>
   );

front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx

@@ -35,7 +35,6 @@ const StyledChildrenContainer = styled.div`
 export function DropdownMenuCheckableItem({
   checked,
   onChange,
-  id,
   children,
 }: React.PropsWithChildren<Props>) {
   function handleClick() {
@@ -45,7 +44,7 @@ export function DropdownMenuCheckableItem({
   return (
     <DropdownMenuCheckableItemContainer onClick={handleClick}>
       <StyledLeftContainer>
-        <Checkbox id={id} name={id} checked={checked} />
+        <Checkbox checked={checked} />
         <StyledChildrenContainer>{children}</StyledChildrenContainer>
       </StyledLeftContainer>
     </DropdownMenuCheckableItemContainer>

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -2,18 +2,11 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 
+import { useCurrentRowSelected } from '@/ui/tables/hooks/useCurrentRowSelected';
 import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
 
 import { Checkbox } from '../form/Checkbox';
 
-type OwnProps = {
-  name: string;
-  id: string;
-  checked?: boolean;
-  indeterminate?: boolean;
-  onChange?: (newCheckedValue: boolean) => void;
-};
-
 const StyledContainer = styled.div`
   align-items: center;
 
@@ -24,31 +17,19 @@ const StyledContainer = styled.div`
   justify-content: center;
 `;
 
-export function CheckboxCell({
-  name,
-  id,
-  checked,
-  onChange,
-  indeterminate,
-}: OwnProps) {
-  const [internalChecked, setInternalChecked] = React.useState(checked);
+export function CheckboxCell() {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
 
+  const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected();
+
   function handleContainerClick() {
-    handleCheckboxChange(!internalChecked);
+    handleCheckboxChange(!currentRowSelected);
   }
 
-  React.useEffect(() => {
-    setInternalChecked(checked);
-  }, [checked]);
-
   function handleCheckboxChange(newCheckedValue: boolean) {
-    setInternalChecked(newCheckedValue);
-    setContextMenuPosition({ x: null, y: null });
+    setCurrentRowSelected(newCheckedValue);
 
-    if (onChange) {
-      onChange(newCheckedValue);
-    }
+    setContextMenuPosition({ x: null, y: null });
   }
 
   return (
@@ -56,13 +37,7 @@ export function CheckboxCell({
       onClick={handleContainerClick}
       data-testid="input-checkbox-cell-container"
     >
-      <Checkbox
-        id={id}
-        name={name}
-        checked={internalChecked}
-        onChange={handleCheckboxChange}
-        indeterminate={indeterminate}
-      />
+      <Checkbox checked={currentRowSelected} />
     </StyledContainer>
   );
 }

front/src/modules/ui/components/table/EntityTable.tsx

@@ -1,36 +1,17 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import { useRecoilState } from 'recoil';
 
 import {
   SelectedSortType,
   SortType,
 } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
-import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { TableColumn } from '@/people/table/components/peopleColumns';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 import { useLeaveTableFocus } from '@/ui/tables/hooks/useLeaveTableFocus';
-import { RowContext } from '@/ui/tables/states/RowContext';
-
-import { currentRowSelectionState } from '../../tables/states/rowSelectionState';
 
 import { TableHeader } from './table-header/TableHeader';
-import { EntityTableRow } from './EntityTableRow';
-
-type OwnProps<TData extends { id: string }, SortField> = {
-  data: Array<TData>;
-  columns: Array<ColumnDef<TData, any>>;
-  viewName: string;
-  viewIcon?: React.ReactNode;
-  availableSorts?: Array<SortType<SortField>>;
-  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
-  onRowSelectionChange?: (rowSelection: string[]) => void;
-};
+import { EntityTableBody } from './EntityTableBody';
+import { EntityTableHeader } from './EntityTableHeader';
 
 const StyledTable = styled.table`
   border-collapse: collapse;
@@ -91,32 +72,24 @@ const StyledTableWithHeader = styled.div`
   width: 100%;
 `;
 
-export function EntityTable<TData extends { id: string }, SortField>({
-  data,
+type OwnProps<SortField> = {
+  columns: Array<TableColumn>;
+  viewName: string;
+  viewIcon?: React.ReactNode;
+  availableSorts?: Array<SortType<SortField>>;
+  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  onRowSelectionChange?: (rowSelection: string[]) => void;
+};
+
+export function EntityTable<SortField>({
   columns,
   viewName,
   viewIcon,
   availableSorts,
   onSortsUpdate,
-}: OwnProps<TData, SortField>) {
+}: OwnProps<SortField>) {
   const tableBodyRef = React.useRef<HTMLDivElement>(null);
 
-  const [currentRowSelection, setCurrentRowSelection] = useRecoilState(
-    currentRowSelectionState,
-  );
-
-  const table = useReactTable<TData>({
-    data,
-    columns,
-    state: {
-      rowSelection: currentRowSelection,
-    },
-    getCoreRowModel: getCoreRowModel(),
-    enableRowSelection: true,
-    onRowSelectionChange: setCurrentRowSelection,
-    getRowId: (row) => row.id,
-  });
-
   const leaveTableFocus = useLeaveTableFocus();
 
   useListenClickOutsideArrayOfRef([tableBodyRef], () => {
@@ -133,37 +106,8 @@ export function EntityTable<TData extends { id: string }, SortField>({
       />
       <div ref={tableBodyRef}>
         <StyledTable>
-          <thead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    style={{
-                      width: header.column.getSize(),
-                      minWidth: header.column.getSize(),
-                      maxWidth: header.column.getSize(),
-                    }}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </th>
-                ))}
-                <th></th>
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.map((row, index) => (
-              <RecoilScope SpecificContext={RowContext} key={row.id}>
-                <EntityTableRow row={row} index={index} />
-              </RecoilScope>
-            ))}
-          </tbody>
+          <EntityTableHeader columns={columns} />
+          <EntityTableBody columns={columns} />
         </StyledTable>
       </div>
     </StyledTableWithHeader>

front/src/modules/ui/components/table/EntityTableBody.tsx

@@ -0,0 +1,33 @@
+import { useRecoilValue } from 'recoil';
+
+import { TableColumn } from '@/people/table/components/peopleColumns';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+
+import { EntityTableRow } from './EntityTableRow';
+
+export function EntityTableBody({ columns }: { columns: Array<TableColumn> }) {
+  const rowIds = useRecoilValue(tableRowIdsState);
+
+  const isFetchingEntityTableData = useRecoilValue(
+    isFetchingEntityTableDataState,
+  );
+
+  return (
+    <tbody>
+      {!isFetchingEntityTableData ? (
+        rowIds.map((rowId, index) => (
+          <RecoilScope SpecificContext={RowContext} key={rowId}>
+            <EntityTableRow columns={columns} rowId={rowId} index={index} />
+          </RecoilScope>
+        ))
+      ) : (
+        <tr>
+          <td>loading...</td>
+        </tr>
+      )}
+    </tbody>
+  );
+}

front/src/modules/ui/components/table/EntityTableCell.tsx

@@ -1,6 +1,4 @@
 import { useEffect } from 'react';
-import { flexRender } from '@tanstack/react-table';
-import { Cell, Row } from '@tanstack/table-core';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
@@ -9,14 +7,16 @@ import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPosition
 import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
 import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
 
-export function EntityTableCell<TData extends { id: string }>({
-  row,
-  cell,
+export function EntityTableCell({
+  rowId,
   cellIndex,
+  children,
+  size,
 }: {
-  row: Row<TData>;
-  cell: Cell<TData, unknown>;
+  size: number;
+  rowId: string;
   cellIndex: number;
+  children: React.ReactNode;
 }) {
   const [, setCurrentRowSelection] = useRecoilState(currentRowSelectionState);
 
@@ -43,14 +43,14 @@ export function EntityTableCell<TData extends { id: string }>({
 
   return (
     <td
-      onContextMenu={(event) => handleContextMenu(event, row.original.id)}
+      onContextMenu={(event) => handleContextMenu(event, rowId)}
       style={{
-        width: cell.column.getSize(),
-        minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        width: size,
+        minWidth: size,
+        maxWidth: size,
       }}
     >
-      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+      {children}
     </td>
   );
 }

front/src/modules/ui/components/table/EntityTableHeader.tsx

@@ -0,0 +1,39 @@
+import { TableColumn } from '@/people/table/components/peopleColumns';
+
+import { ColumnHead } from './ColumnHead';
+import { SelectAllCheckbox } from './SelectAllCheckbox';
+
+export function EntityTableHeader({
+  columns,
+}: {
+  columns: Array<TableColumn>;
+}) {
+  return (
+    <thead>
+      <tr>
+        <th
+          style={{
+            width: 30,
+            minWidth: 30,
+            maxWidth: 30,
+          }}
+        >
+          <SelectAllCheckbox />
+        </th>
+        {columns.map((column) => (
+          <th
+            key={column.id.toString()}
+            style={{
+              width: column.size,
+              minWidth: column.size,
+              maxWidth: column.size,
+            }}
+          >
+            <ColumnHead viewName={column.title} viewIcon={column.icon} />
+          </th>
+        ))}
+        <th></th>
+      </tr>
+    </thead>
+  );
+}

front/src/modules/ui/components/table/EntityTableRow.tsx

@@ -1,15 +1,17 @@
 import { useEffect } from 'react';
 import styled from '@emotion/styled';
-import { Row } from '@tanstack/table-core';
 import { useRecoilState } from 'recoil';
 
+import { TableColumn } from '@/people/table/components/peopleColumns';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentRowEntityIdScopedState } from '@/ui/tables/states/currentRowEntityIdScopedState';
 import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
 import { RowContext } from '@/ui/tables/states/RowContext';
 import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
 
+import { CheckboxCell } from './CheckboxCell';
 import { EntityTableCell } from './EntityTableCell';
 
 const StyledRow = styled.tr<{ selected: boolean }>`
@@ -17,42 +19,56 @@ const StyledRow = styled.tr<{ selected: boolean }>`
     props.selected ? props.theme.background.secondary : 'none'};
 `;
 
-export function EntityTableRow<TData extends { id: string }>({
-  row,
+export function EntityTableRow({
+  columns,
+  rowId,
   index,
 }: {
-  row: Row<TData>;
+  columns: TableColumn[];
+  rowId: string;
   index: number;
 }) {
   const [currentRowSelection] = useRecoilState(currentRowSelectionState);
+  const [currentRowEntityId, setCurrentRowEntityId] = useRecoilScopedState(
+    currentRowEntityIdScopedState,
+    RowContext,
+  );
 
   const [, setCurrentRowNumber] = useRecoilScopedState(
     currentRowNumberScopedState,
     RowContext,
   );
 
+  useEffect(() => {
+    if (currentRowEntityId !== rowId) {
+      setCurrentRowEntityId(rowId);
+    }
+  }, [rowId, setCurrentRowEntityId, currentRowEntityId]);
+
   useEffect(() => {
     setCurrentRowNumber(index);
   }, [index, setCurrentRowNumber]);
 
   return (
     <StyledRow
-      key={row.id}
-      data-testid={`row-id-${row.index}`}
-      selected={!!currentRowSelection[row.id]}
+      key={rowId}
+      data-testid={`row-id-${rowId}`}
+      selected={!!currentRowSelection[rowId]}
     >
-      {row.getVisibleCells().map((cell, cellIndex) => {
+      <td>
+        <CheckboxCell />
+      </td>
+      {columns.map((column, columnIndex) => {
         return (
-          <RecoilScope
-            SpecificContext={CellContext}
-            key={cell.id + row.original.id}
-          >
+          <RecoilScope SpecificContext={CellContext} key={column.id.toString()}>
             <RecoilScope>
-              <EntityTableCell<TData>
-                row={row}
-                cell={cell}
-                cellIndex={cellIndex}
-              />
+              <EntityTableCell
+                rowId={rowId}
+                size={column.size}
+                cellIndex={columnIndex}
+              >
+                {column.cellComponent}
+              </EntityTableCell>
             </RecoilScope>
           </RecoilScope>
         );

front/src/modules/ui/components/table/HooksEntityTable.tsx

@@ -5,22 +5,19 @@ import { useMapKeyboardToSoftFocus } from '@/ui/tables/hooks/useMapKeyboardToSof
 
 export function HooksEntityTable({
   numberOfColumns,
-  numberOfRows,
-  availableTableFilters,
+  availableFilters,
 }: {
   numberOfColumns: number;
-  numberOfRows: number;
-  availableTableFilters: FilterDefinition[];
+  availableFilters: FilterDefinition[];
 }) {
   useMapKeyboardToSoftFocus();
 
   useInitializeEntityTable({
     numberOfColumns,
-    numberOfRows,
   });
 
   useInitializeEntityTableFilters({
-    availableTableFilters,
+    availableFilters,
   });
 
   return <></>;

front/src/modules/ui/components/table/SelectAllCheckbox.tsx

@@ -1,18 +1,36 @@
-import { CheckboxCell } from './CheckboxCell';
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { useSelectAllRows } from '@/ui/tables/hooks/useSelectAllRows';
+
+import { Checkbox } from '../form/Checkbox';
+
+const StyledContainer = styled.div`
+  align-items: center;
+
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+
+  justify-content: center;
+`;
+
+export const SelectAllCheckbox = () => {
+  const { selectAllRows, allRowsSelectedStatus } = useSelectAllRows();
+
+  function handleContainerClick() {
+    selectAllRows();
+  }
+
+  const checked = allRowsSelectedStatus === 'all';
+  const indeterminate = allRowsSelectedStatus === 'some';
 
-export const SelectAllCheckbox = ({
-  indeterminate,
-  onChange,
-}: {
-  indeterminate?: boolean;
-  onChange?: (newCheckedValue: boolean) => void;
-} & React.HTMLProps<HTMLInputElement>) => {
   return (
-    <CheckboxCell
-      name="select-all-checkbox"
-      id="select-all-checkbox"
-      indeterminate={indeterminate}
-      onChange={onChange}
-    />
+    <StyledContainer
+      onClick={handleContainerClick}
+      data-testid="input-checkbox-cell-container"
+    >
+      <Checkbox checked={checked} indeterminate={indeterminate} />
+    </StyledContainer>
   );
 };

front/src/modules/ui/tables/constants/index.ts

@@ -1 +0,0 @@
-export const TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN = 1;

front/src/modules/ui/tables/hooks/useCurrentEntityId.ts

@@ -0,0 +1,18 @@
+import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
+
+import { currentRowEntityIdScopedState } from '../states/currentRowEntityIdScopedState';
+import { RowContext } from '../states/RowContext';
+
+export type TableDimensions = {
+  numberOfColumns: number;
+  numberOfRows: number;
+};
+
+export function useCurrentRowEntityId() {
+  const currentRowEntityIdScoped = useRecoilScopedValue(
+    currentRowEntityIdScopedState,
+    RowContext,
+  );
+
+  return currentRowEntityIdScoped;
+}

front/src/modules/ui/tables/hooks/useCurrentRowSelected.ts

@@ -0,0 +1,43 @@
+import { useRecoilCallback, useRecoilState } from 'recoil';
+
+import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
+import { numberOfSelectedRowState } from '../states/numberOfSelectedRowState';
+
+import { useCurrentRowEntityId } from './useCurrentEntityId';
+
+export function useCurrentRowSelected() {
+  const currentRowId = useCurrentRowEntityId();
+
+  const [isRowSelected] = useRecoilState(
+    isRowSelectedFamilyState(currentRowId ?? ''),
+  );
+
+  const setCurrentRowSelected = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (newSelectedState: boolean) => {
+        if (!currentRowId) return;
+
+        const isRowSelected = snapshot
+          .getLoadable(isRowSelectedFamilyState(currentRowId))
+          .valueOrThrow();
+
+        const numberOfSelectedRow = snapshot
+          .getLoadable(numberOfSelectedRowState)
+          .valueOrThrow();
+
+        if (newSelectedState && !isRowSelected) {
+          set(numberOfSelectedRowState, numberOfSelectedRow + 1);
+          set(isRowSelectedFamilyState(currentRowId), true);
+        } else if (!newSelectedState && isRowSelected) {
+          set(numberOfSelectedRowState, numberOfSelectedRow - 1);
+          set(isRowSelectedFamilyState(currentRowId), false);
+        }
+      },
+    [currentRowId],
+  );
+
+  return {
+    currentRowSelected: isRowSelected,
+    setCurrentRowSelected,
+  };
+}

front/src/modules/ui/tables/hooks/useInitializeEntityTable.ts

@@ -1,21 +1,25 @@
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
+import { tableRowIdsState } from '../states/tableRowIdsState';
 
 import { useResetTableRowSelection } from './useResetTableRowSelection';
 
 export type TableDimensions = {
-  numberOfRows: number;
   numberOfColumns: number;
+  numberOfRows: number;
 };
 
 export function useInitializeEntityTable({
-  numberOfRows,
   numberOfColumns,
-}: TableDimensions) {
+}: {
+  numberOfColumns: number;
+}) {
   const resetTableRowSelection = useResetTableRowSelection();
 
+  const tableRowIds = useRecoilValue(tableRowIdsState);
+
   useEffect(() => {
     resetTableRowSelection();
   }, [resetTableRowSelection]);
@@ -25,7 +29,7 @@ export function useInitializeEntityTable({
   useEffect(() => {
     setTableDimensions({
       numberOfColumns,
-      numberOfRows,
+      numberOfRows: tableRowIds?.length,
     });
-  }, [numberOfRows, numberOfColumns, setTableDimensions]);
+  }, [tableRowIds, numberOfColumns, setTableDimensions]);
 }

front/src/modules/ui/tables/hooks/useInitializeEntityTableFilters.ts

@@ -7,16 +7,16 @@ import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'
 import { TableContext } from '../states/TableContext';
 
 export function useInitializeEntityTableFilters({
-  availableTableFilters,
+  availableFilters,
 }: {
-  availableTableFilters: FilterDefinition[];
+  availableFilters: FilterDefinition[];
 }) {
-  const [, setAvailableTableFilters] = useRecoilScopedState(
+  const [, setAvailableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
     TableContext,
   );
 
   useEffect(() => {
-    setAvailableTableFilters(availableTableFilters);
-  }, [setAvailableTableFilters, availableTableFilters]);
+    setAvailableFilters(availableFilters);
+  }, [setAvailableFilters, availableFilters]);
 }

front/src/modules/ui/tables/hooks/useMoveSoftFocus.ts

@@ -1,6 +1,5 @@
 import { useRecoilCallback } from 'recoil';
 
-import { TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN } from '../constants';
 import { numberOfTableColumnsSelectorState } from '../states/numberOfTableColumnsSelectorState';
 import { numberOfTableRowsSelectorState } from '../states/numberOfTableRowsSelectorState';
 import { softFocusPositionState } from '../states/softFocusPositionState';
@@ -98,7 +97,7 @@ export function useMoveSoftFocus() {
         } else if (isLastColumnButNotLastRow) {
           setSoftFocusPosition({
             row: currentRowNumber + 1,
-            column: TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN,
+            column: 0,
           });
         }
       },
@@ -120,18 +119,12 @@ export function useMoveSoftFocus() {
         const currentRowNumber = softFocusPosition.row;
 
         const isFirstRowAndFirstColumn =
-          currentColumnNumber ===
-            TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN &&
-          currentRowNumber === 0;
+          currentColumnNumber === 0 && currentRowNumber === 0;
 
         const isFirstColumnButNotFirstRow =
-          currentColumnNumber ===
-            TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN &&
-          currentRowNumber > 0;
+          currentColumnNumber === 0 && currentRowNumber > 0;
 
-        const isNotFirstColumn =
-          currentColumnNumber >
-          TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN;
+        const isNotFirstColumn = currentColumnNumber > 0;
 
         if (isFirstRowAndFirstColumn) {
           return;
@@ -149,7 +142,7 @@ export function useMoveSoftFocus() {
           });
         }
       },
-    [setSoftFocusPosition, TABLE_MIN_COLUMN_NUMBER_BECAUSE_OF_CHECKBOX_COLUMN],
+    [setSoftFocusPosition],
   );
 
   return {

front/src/modules/ui/tables/hooks/useSelectAllRows.ts

@@ -0,0 +1,48 @@
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+
+import { allRowsSelectedStatusSelector } from '../states/allRowsSelectedStatusSelector';
+import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
+import { numberOfSelectedRowState } from '../states/numberOfSelectedRowState';
+import { numberOfTableRowsSelectorState } from '../states/numberOfTableRowsSelectorState';
+import { tableRowIdsState } from '../states/tableRowIdsState';
+
+export function useSelectAllRows() {
+  const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
+
+  const selectAllRows = useRecoilCallback(
+    ({ set, snapshot }) =>
+      () => {
+        const allRowsSelectedStatus = snapshot
+          .getLoadable(allRowsSelectedStatusSelector)
+          .valueOrThrow();
+
+        const numberOfRows = snapshot
+          .getLoadable(numberOfTableRowsSelectorState)
+          .valueOrThrow();
+
+        const tableRowIds = snapshot
+          .getLoadable(tableRowIdsState)
+          .valueOrThrow();
+
+        if (allRowsSelectedStatus === 'none') {
+          set(numberOfSelectedRowState, numberOfRows);
+
+          for (const rowId of tableRowIds) {
+            set(isRowSelectedFamilyState(rowId), true);
+          }
+        } else {
+          set(numberOfSelectedRowState, 0);
+
+          for (const rowId of tableRowIds) {
+            set(isRowSelectedFamilyState(rowId), false);
+          }
+        }
+      },
+    [],
+  );
+
+  return {
+    allRowsSelectedStatus,
+    selectAllRows,
+  };
+}

front/src/modules/ui/tables/states/allRowsSelectedStatusSelector.ts

@@ -0,0 +1,24 @@
+import { selector } from 'recoil';
+
+import { AllRowsSelectedStatus } from '../types/AllRowSelectedStatus';
+
+import { numberOfSelectedRowState } from './numberOfSelectedRowState';
+import { numberOfTableRowsSelectorState } from './numberOfTableRowsSelectorState';
+
+export const allRowsSelectedStatusSelector = selector<AllRowsSelectedStatus>({
+  key: 'allRowsSelectedStatusSelector',
+  get: ({ get }) => {
+    const numberOfRows = get(numberOfTableRowsSelectorState);
+
+    const numberOfSelectedRows = get(numberOfSelectedRowState);
+
+    const allRowsSelectedStatus =
+      numberOfSelectedRows === 0
+        ? 'none'
+        : numberOfRows === numberOfSelectedRows
+        ? 'all'
+        : 'some';
+
+    return allRowsSelectedStatus;
+  },
+});

front/src/modules/ui/tables/states/currentRowEntityIdScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const currentRowEntityIdScopedState = atomFamily<string | null, string>({
+  key: 'currentRowEntityIdScopedState',
+  default: null,
+});

front/src/modules/ui/tables/states/isFetchingEntityTableDataState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isFetchingEntityTableDataState = atom<boolean>({
+  key: 'isFetchingEntityTableDataState',
+  default: true,
+});

front/src/modules/ui/tables/states/isRowSelectedFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isRowSelectedFamilyState = atomFamily<boolean, string>({
+  key: 'isRowSelectedFamilyState',
+  default: false,
+});

front/src/modules/ui/tables/states/numberOfSelectedRowState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const numberOfSelectedRowState = atom<number>({
+  key: 'numberOfSelectedRowState',
+  default: 0,
+});

front/src/modules/ui/tables/states/tableRowIdsState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const tableRowIdsState = atom<string[]>({
+  key: 'tableRowIdsState',
+  default: [],
+});

front/src/modules/ui/tables/types/AllRowSelectedStatus.ts

@@ -0,0 +1 @@
+export type AllRowsSelectedStatus = 'none' | 'some' | 'all';

front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx

@@ -1,27 +0,0 @@
-import { CellContext } from '@tanstack/react-table';
-
-import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
-import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
-
-export function getCheckBoxColumn() {
-  return {
-    id: 'select',
-    header: ({ table }: any) => (
-      <SelectAllCheckbox
-        checked={table.getIsAllRowsSelected()}
-        indeterminate={table.getIsSomeRowsSelected()}
-        onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
-      />
-    ),
-    cell: (props: CellContext<any, string>) => (
-      <CheckboxCell
-        id={`checkbox-selected-${props.row.original.id}`}
-        name={`checkbox-selected-${props.row.original.id}`}
-        checked={props.row.getIsSelected()}
-        onChange={(newValue) => props.row.toggleSelected(newValue)}
-      />
-    ),
-    size: 32,
-    maxSize: 32,
-  };
-}