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/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,
-  };
-}