kelt-ui-kit-react 1.8.3 → 1.8.4

package/src/dataTable/DataTable.tsx

@@ -1,62 +1,16 @@
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
 import { Loader } from "../loader/Loader";
-import { Select } from "../select/Select";
 import "./dataTable.css";
 import {
-  DataTableActionsInterface,
-  DataTableColumnsInterface,
+  dataTableActionsInterface,
+  dataTableColumnsInterface,
 } from "./dataTable.interface";
 import { DataTableAction } from "./dataTableActions/DataTableAction";
 import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
-import { DataTableColumnFilter } from "./dataTableColumn/dataTableColumnFilter/DataTableColumnFilter";
-import { DataTableColumnFilterDateRange } from "./dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange";
-import { DataTableColumnSort } from "./dataTableColumn/dataTableColumnSort/DataTableColumnSort";
-import { DataTableFilters } from "./dataTableFilters/DataTableFilters";
 import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
 import { DataTableRow } from "./dataTableRow/DataTableRow";
-export type DataTableDateRangeFilterValue = {
-  startDate: string;
-  endDate: string;
-};
-
-export type FilterValue =
-  | string
-  | number
-  | boolean
-  | string[]
-  | DataTableDateRangeFilterValue
-  | null;
-export type DataTableFilterState = Record<string, FilterValue>;
-export type DataTableSortDirection = "asc" | "desc";
-export type DataTableSortState = {
-  key: string;
-  direction: DataTableSortDirection;
-};
-const DEFAULT_FILTER_COLUMN_WIDTH = 100;
-const SELECTION_COLUMN_WIDTH = 40;
-const DEFAULT_FILTER_ROW_STICKY_HEIGHT = 44;
-
-const isDateRangeFilterValue = (
-  value: FilterValue | undefined,
-): value is DataTableDateRangeFilterValue => {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "startDate" in value &&
-    "endDate" in value
-  );
-};
-
 export type DataTableProps<T> = {
   id: string;
   name?: string;
@@ -65,14 +19,11 @@ export type DataTableProps<T> = {
   element?: JSX.Element;
   data: T[];
   emptyMessage?: string;
-  actions?: DataTableActionsInterface<T>[];
-  columns: DataTableColumnsInterface<T>[];
-  onFiltersChange?: (next: DataTableFilterState) => void;
-  onSortChange?: (next: DataTableSortState | null) => void;
+  actions?: dataTableActionsInterface<T>[];
+  columns: dataTableColumnsInterface<T>[];
   loading?: boolean;
   onRowClick?: (row: any) => void;
   onColumnClick?: (column: any) => void;
-  onEditColumnByOverlay?: (row: T) => void;
   onLoadMore?: () => void;
   hasMore?: boolean; // pour savoir s'il reste des données à charger
   onSelectionChange?: (selectedRows: T[]) => void;
@@ -94,166 +45,25 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onRowClick,
     onColumnClick,
     onLoadMore,
-    onEditColumnByOverlay,
     emptyMessage,
     hasMore,
     onSelectionChange,
-    onFiltersChange,
-    onSortChange,
     hideToggleAll = false,
     limitSelect = undefined,
     getRowId,
   } = props;
-  const [currentFilters, setCurrentFilters] = useState<DataTableFilterState>(
-    {},
-  );
-  const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(
-    new Set(),
-  );
-  const [focusFilterKey, setFocusFilterKey] = useState<string | null>(null);
-  const [currentSort, setCurrentSort] = useState<DataTableSortState | null>(
-    null,
-  );
-
-  const getFilterKey = useCallback(
-    (column: DataTableColumnsInterface<T>) => column.name ?? column.id,
-    [],
-  );
-
-  const toggleColumnFilterVisibility = useCallback(
-    (column: DataTableColumnsInterface<T>) => {
-      if (!column.filterable) return;
-      const key = getFilterKey(column);
-      setVisibleFilterColumns((prev) => {
-        const next = new Set(prev);
-        if (next.has(key)) {
-          next.delete(key);
-          setFocusFilterKey(null);
-        } else {
-          next.add(key);
-          setFocusFilterKey(key);
-        }
-        return next;
-      });
-    },
-    [getFilterKey],
-  );
-
-  const toggleColumnSort = useCallback(
-    (column: DataTableColumnsInterface<T>) => {
-      if (!column.sortable) return;
-      const key = getFilterKey(column);
-
-      setCurrentSort((prev) => {
-        if (!prev || prev.key !== key) {
-          return { key, direction: "asc" };
-        }
-
-        if (prev.direction === "asc") {
-          return { key, direction: "desc" };
-        }
-
-        return null;
-      });
-    },
-    [getFilterKey],
-  );
-
-  const updateFilterValue = useCallback((key: string, value: string) => {
-    setCurrentFilters((prev) => {
-      if (!value) {
-        if (!(key in prev)) {
-          return prev;
-        }
-        const { [key]: _removed, ...rest } = prev;
-        return rest;
-      }
-
-      if (prev[key] === value) {
-        return prev;
-      }
-
-      return { ...prev, [key]: value };
-    });
-  }, []);
-
-  const updateDateRangeFilterValue = useCallback(
-    (key: string, startDate: string, endDate: string) => {
-      setCurrentFilters((prev) => {
-        if (!startDate && !endDate) {
-          if (!(key in prev)) {
-            return prev;
-          }
-          const { [key]: _removed, ...rest } = prev;
-          return rest;
-        }
-
-        const previousValue = prev[key];
-        if (
-          isDateRangeFilterValue(previousValue) &&
-          previousValue.startDate === startDate &&
-          previousValue.endDate === endDate
-        ) {
-          return prev;
-        }
 
-        return {
-          ...prev,
-          [key]: {
-            startDate,
-            endDate,
-          },
-        };
-      });
-    },
-    [],
-  );
-
-  const onFiltersChangeRef = useRef(onFiltersChange);
-  const deferredFilters = useDeferredValue(currentFilters);
-  useEffect(() => {
-    onFiltersChangeRef.current = onFiltersChange;
-  }, [onFiltersChange]);
-
-  useEffect(() => {
-    if (onFiltersChangeRef.current) {
-      onFiltersChangeRef.current(deferredFilters);
-    }
-  }, [deferredFilters]);
-  const onSortChangeRef = useRef(onSortChange);
-  useEffect(() => {
-    onSortChangeRef.current = onSortChange;
-  }, [onSortChange]);
-
-  useEffect(() => {
-    if (onSortChangeRef.current) {
-      onSortChangeRef.current(currentSort);
-    }
-  }, [currentSort]);
-
-  const getColumnValue = useCallback(
-    (row: T, column: DataTableColumnsInterface<T>) => {
-      return (row as any)[column.id];
-    },
-    [],
-  );
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
-    new Set(),
+    new Set()
   );
-  const filterRowRef = useRef<HTMLTableRowElement | null>(null);
-  const headerRowRef = useRef<HTMLTableRowElement | null>(null);
-  const [filterRowHeight, setFilterRowHeight] = useState(
-    DEFAULT_FILTER_ROW_STICKY_HEIGHT,
-  );
-  const [headerRowHeight, setHeaderRowHeight] = useState(0);
   const toggleSelectAll = useCallback(() => {
     if (selectedRowIds.size === data.length) {
       setSelectedRowIds(new Set());
       onSelectionChange?.([]);
     } else {
       let allIds = data.map((d) =>
-        getRowId ? getRowId(d) : ((d as any).id ?? d),
+        getRowId ? getRowId(d) : (d as any).id ?? d
       );
 
       if (limitSelect && allIds.length > limitSelect) {
@@ -264,8 +74,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
       setSelectedRowIds(newSelection);
       onSelectionChange?.(
         data.filter((d) =>
-          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-        ),
+          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        )
       );
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
@@ -277,12 +87,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
         onRowClick?.(row);
       }
     },
-    [onRowClick],
+    [onRowClick]
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
       e.stopPropagation();
-      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
+      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
       const newSelection = new Set(selectedRowIds);
 
       if (newSelection.has(rowId)) {
@@ -297,11 +107,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       setSelectedRowIds(newSelection);
       const selectedItems = data.filter((d) =>
-        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
       );
       onSelectionChange?.(selectedItems);
     },
-    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
   );
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
@@ -316,7 +126,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
         root: null,
         rootMargin: "0px",
         threshold: 1.0,
-      },
+      }
     );
 
     if (loaderRef.current) {
@@ -329,357 +139,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
       }
     };
   }, [onLoadMore, hasMore]);
-  const hasNestedColumns = columns.some((col) => col.children?.length);
-
-  const flatColumns = columns.flatMap((col) =>
-    col.children?.length ? col.children : [col],
-  );
-
-  const stickyColumnsLeftByKey = useMemo(() => {
-    const offsets = new Map<string, number>();
-    const hasSelectionColumn = !!onSelectionChange;
-    let currentLeft = hasSelectionColumn ? SELECTION_COLUMN_WIDTH : 0;
-
-    flatColumns.forEach((column) => {
-      const key = getFilterKey(column);
-      const width =
-        column.width ??
-        column.minWidth ??
-        column.maxWidth ??
-        DEFAULT_FILTER_COLUMN_WIDTH;
-
-      if (column.sticky) {
-        offsets.set(key, currentLeft);
-        currentLeft += width;
-      }
-    });
-
-    return offsets;
-  }, [flatColumns, getFilterKey, onSelectionChange]);
-
-  const hasStickyColumns = stickyColumnsLeftByKey.size > 0;
-
-  const sortedData = useMemo(() => {
-    if (!currentSort) {
-      return data;
-    }
-
-    const sortedColumn = flatColumns.find(
-      (column) => getFilterKey(column) === currentSort.key,
-    );
-
-    if (!sortedColumn) {
-      return data;
-    }
-
-    const factor = currentSort.direction === "asc" ? 1 : -1;
-    const isDateColumn = sortedColumn.type === TypeInputEnum.DATE;
-
-    const normalizeDate = (value: unknown): number | null => {
-      if (value instanceof Date) {
-        return value.getTime();
-      }
-
-      if (typeof value === "string" || typeof value === "number") {
-        const timestamp = new Date(value).getTime();
-        return Number.isNaN(timestamp) ? null : timestamp;
-      }
-
-      return null;
-    };
-
-    const compareValues = (left: unknown, right: unknown): number => {
-      if (left == null && right == null) {
-        return 0;
-      }
-
-      if (left == null) {
-        return 1;
-      }
-
-      if (right == null) {
-        return -1;
-      }
-
-      if (typeof left === "number" && typeof right === "number") {
-        return left - right;
-      }
-
-      if (typeof left === "boolean" && typeof right === "boolean") {
-        return Number(left) - Number(right);
-      }
-
-      if (isDateColumn) {
-        const leftDate = normalizeDate(left);
-        const rightDate = normalizeDate(right);
-
-        if (leftDate !== null && rightDate !== null) {
-          return leftDate - rightDate;
-        }
-      }
-
-      return String(left).localeCompare(String(right), undefined, {
-        numeric: true,
-        sensitivity: "base",
-      });
-    };
-
-    return [...data].sort((leftRow, rightRow) => {
-      const leftValue = getColumnValue(leftRow, sortedColumn);
-      const rightValue = getColumnValue(rightRow, sortedColumn);
-      return factor * compareValues(leftValue, rightValue);
-    });
-  }, [currentSort, data, flatColumns, getColumnValue, getFilterKey]);
-
-  const hasVisibleFilterInputs = visibleFilterColumns.size > 0;
-  const headerStickyTop = hasVisibleFilterInputs ? filterRowHeight : 0;
-  const groupedHeaderStickyTop = headerStickyTop + headerRowHeight;
-
-  useLayoutEffect(() => {
-    if (!hasVisibleFilterInputs) {
-      setFilterRowHeight(DEFAULT_FILTER_ROW_STICKY_HEIGHT);
-      return;
-    }
-
-    const updateFilterRowHeight = () => {
-      const measuredHeight =
-        filterRowRef.current?.getBoundingClientRect().height ??
-        DEFAULT_FILTER_ROW_STICKY_HEIGHT;
-      setFilterRowHeight((prev) =>
-        Math.abs(prev - measuredHeight) < 0.1 ? prev : measuredHeight,
-      );
-    };
-
-    updateFilterRowHeight();
-
-    if (typeof ResizeObserver !== "undefined" && filterRowRef.current) {
-      const resizeObserver = new ResizeObserver(updateFilterRowHeight);
-      resizeObserver.observe(filterRowRef.current);
-      return () => resizeObserver.disconnect();
-    }
-
-    window.addEventListener("resize", updateFilterRowHeight);
-    return () => {
-      window.removeEventListener("resize", updateFilterRowHeight);
-    };
-  }, [hasVisibleFilterInputs]);
-
-  useLayoutEffect(() => {
-    const updateHeaderRowHeight = () => {
-      const measuredHeight =
-        headerRowRef.current?.getBoundingClientRect().height ?? 0;
-      setHeaderRowHeight((prev) =>
-        Math.abs(prev - measuredHeight) < 0.1 ? prev : measuredHeight,
-      );
-    };
-
-    updateHeaderRowHeight();
-
-    if (typeof ResizeObserver !== "undefined" && headerRowRef.current) {
-      const resizeObserver = new ResizeObserver(updateHeaderRowHeight);
-      resizeObserver.observe(headerRowRef.current);
-      return () => resizeObserver.disconnect();
-    }
-
-    window.addEventListener("resize", updateHeaderRowHeight);
-    return () => {
-      window.removeEventListener("resize", updateHeaderRowHeight);
-    };
-  }, [columns.length, hasVisibleFilterInputs]);
-
-  const filterRowCells = useMemo(
-    () =>
-      flatColumns.map((column, idx) => {
-        const key = getFilterKey(column);
-        const isVisible = visibleFilterColumns.has(key);
-        const currentFilterValue = currentFilters[key];
-        const currentValue = isDateRangeFilterValue(currentFilterValue)
-          ? ""
-          : String(currentFilterValue ?? "");
-        const currentDateRangeValue = isDateRangeFilterValue(currentFilterValue)
-          ? currentFilterValue
-          : { startDate: "", endDate: "" };
-        const shouldAutoFocus = focusFilterKey === key && isVisible;
-        const columnWidth = column.width ?? DEFAULT_FILTER_COLUMN_WIDTH;
-        const stickyLeft = stickyColumnsLeftByKey.get(key);
-        const isSticky = stickyLeft !== undefined;
-
-        const onTextDateChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-          updateFilterValue(key, e.target.value);
-
-        const onEnumSelectMultipleChange = (values: string[]) =>
-          updateFilterValue(key, values.join(","));
-
-        return (
-          <th
-            key={`filter-${column.id}-${idx}`}
-            className={`filter-row-cell ${
-              isSticky ? "data-table-sticky-cell" : ""
-            }`.trim()}
-            style={{
-              width: columnWidth,
-              minWidth: columnWidth,
-              maxWidth: columnWidth,
-              position: "sticky",
-              top: 0,
-              zIndex: isSticky ? 14 : 13,
-              backgroundColor: "rgb(249, 251, 252)",
-              ...(isSticky
-                ? {
-                    left: stickyLeft,
-                  }
-                : {}),
-            }}
-          >
-            {isVisible && column.filterable && (
-              <div className="data-table-filter-input-wrapper">
-                {column.filterType === TypeInputEnum.DATE ? (
-                  <Input
-                    id={`${id}-filter-date-${column.id}`}
-                    name={`${id}-filter-date-${column.id}`}
-                    type={TypeInputEnum.DATE}
-                    value={currentValue}
-                    autoFocus={shouldAutoFocus}
-                    disabledDebounce={true}
-                    showClearButton
-                    onChange={onTextDateChange}
-                    onClick={(e) => e.stopPropagation()}
-                    className="data-table-filter-input"
-                  />
-                ) : column.filterType === TypeInputEnum.DATERANGE ? (
-                  <DataTableColumnFilterDateRange
-                    id={`${id}-filter-date-range-${column.id}`}
-                    name={`${id}-filter-date-range-${column.id}`}
-                    currentStartValue={currentDateRangeValue.startDate}
-                    currentEndValue={currentDateRangeValue.endDate}
-                    onChange={(startDate, endDate) =>
-                      updateDateRangeFilterValue(key, startDate, endDate)
-                    }
-                  />
-                ) : column.filterType === TypeInputEnum.RADIO ||
-                  column.filterType === TypeInputEnum.CHECKBOX ? (
-                  <div onClick={(e) => e.stopPropagation()}>
-                    <Select
-                      id={`${id}-filter-${column.id}`}
-                      options={column.filterDataEnum ?? []}
-                      multiple={true}
-                      showOptions={shouldAutoFocus}
-                      value={currentValue.split(",").filter(Boolean)}
-                      onChangeMultiple={onEnumSelectMultipleChange}
-                      placeholder={`Filtrer ${column.label}`}
-                      className="data-table-filter-select"
-                    />
-                  </div>
-                ) : (
-                  <Input
-                    id={`${id}-filter-text-${column.id}`}
-                    name={`${id}-filter-text-${column.id}`}
-                    type={TypeInputEnum.TEXT}
-                    value={currentValue}
-                    showClearButton
-                    autoFocus={shouldAutoFocus}
-                    disabledDebounce={true}
-                    onChange={onTextDateChange}
-                    onClick={(e) => e.stopPropagation()}
-                    className="data-table-filter-input"
-                    placeholder={`Filtrer ${column.label}`}
-                  />
-                )}
-              </div>
-            )}
-          </th>
-        );
-      }),
-    [
-      currentFilters,
-      flatColumns,
-      focusFilterKey,
-      getFilterKey,
-      id,
-      stickyColumnsLeftByKey,
-      updateDateRangeFilterValue,
-      updateFilterValue,
-      visibleFilterColumns,
-    ],
-  );
   return (
     <div className="data-table-container">
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      {currentFilters && (
-        <DataTableFilters
-          currentFilters={currentFilters}
-          setCurrentFilters={setCurrentFilters}
-        />
-      )}
       <table className={`data-table ${className ? className : ""}`} id={id}>
-        <colgroup>
-          {onSelectionChange && <col style={{ width: 20 }} />}
-          {flatColumns.map((column, idx) => (
-            <col
-              key={`col-${column.id}-${idx}`}
-              style={{
-                width: column.width,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-              }}
-            />
-          ))}
-          {actions.length > 0 && <col style={{ width: 200 }} />}
-        </colgroup>
         <thead>
-          {hasVisibleFilterInputs && (
-            <tr className="data-table-filter-row" ref={filterRowRef}>
-              {onSelectionChange && (
-                <th
-                  className={`select-cell ${
-                    hasStickyColumns ? "data-table-sticky-cell" : ""
-                  }`}
-                  style={{
-                    position: "sticky",
-                    top: 0,
-                    zIndex: hasStickyColumns ? 14 : 13,
-                    backgroundColor: "#f9fbfc",
-                    ...(hasStickyColumns
-                      ? {
-                          left: 0,
-                        }
-                      : {}),
-                  }}
-                ></th>
-              )}
-              {filterRowCells}
-              {actions.length > 0 && (
-                <th
-                  style={{
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 13,
-                    backgroundColor: "#f9fbfc",
-                  }}
-                ></th>
-              )}
-            </tr>
-          )}
-          <tr className="data-table-header-row" ref={headerRowRef}>
+          <tr>
             {onSelectionChange && (
               <th
-                className={`select-cell ${hideToggleAll ? "hidden" : ""} ${
-                  hasStickyColumns ? "data-table-sticky-cell" : ""
-                }`.trim()}
-                style={{
-                  width: "20px",
-                  textAlign: "center",
-                  top: headerStickyTop,
-                  ...(hasStickyColumns
-                    ? {
-                        position: "sticky",
-                        left: 0,
-                        zIndex: 6,
-                        backgroundColor: "#fff",
-                      }
-                    : {}),
-                }}
+                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
+                style={{ width: "20px", textAlign: "center" }}
               >
                 <Input
                   id={`select-th-${id}`}
@@ -692,128 +162,45 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 />
               </th>
             )}
-
             {columns.map((column, idx) => (
-              <DataTableColumn<T>
+              <DataTableColumn
                 key={idx}
-                hasNestedColumns={hasNestedColumns}
                 column={column}
                 idx={idx}
                 onColumnClick={onColumnClick}
-                isFilterVisible={visibleFilterColumns.has(getFilterKey(column))}
-                onToggleFilterVisibility={toggleColumnFilterVisibility}
-                currentSortDirection={
-                  currentSort?.key === getFilterKey(column)
-                    ? currentSort.direction
-                    : null
-                }
-                onToggleSort={toggleColumnSort}
-                stickyLeft={stickyColumnsLeftByKey.get(getFilterKey(column))}
-                stickyTop={headerStickyTop}
               />
             ))}
             {actions.length > 0 && (
               <th
                 style={{
                   width: "200px",
-                  top: headerStickyTop,
                 }}
                 align="right"
                 key={"actions"}
-                rowSpan={hasNestedColumns ? 2 : 1}
               ></th>
             )}
           </tr>
-          {hasNestedColumns && (
+        </thead>
+        <tbody>
+          {loading ? (
             <tr>
-              {columns.flatMap(
-                (col, idx) =>
-                  col.children?.map(
-                    (
-                      child: DataTableColumnsInterface<any>,
-                      childIdx: number,
-                    ) => (
-                      <th
-                        key={`${idx}-${childIdx}`}
-                        style={{
-                          minWidth: child.minWidth,
-                          maxWidth: child.maxWidth,
-                          width: child.width,
-                          textAlign: child.align ?? "left",
-                          position: "sticky",
-                          top: groupedHeaderStickyTop,
-                          zIndex: 11,
-                          backgroundColor: "#f9fbfc",
-                          ...(stickyColumnsLeftByKey.has(getFilterKey(child))
-                            ? {
-                                left: stickyColumnsLeftByKey.get(
-                                  getFilterKey(child),
-                                ),
-                                zIndex: 12,
-                              }
-                            : {}),
-                        }}
-                        className={
-                          stickyColumnsLeftByKey.has(getFilterKey(child))
-                            ? "data-table-sticky-cell"
-                            : undefined
-                        }
-                        onClick={() => onColumnClick?.(child)}
-                      >
-                        <div className="d-flex align-items-center">
-                          <div className="flex-1">{child.label}</div>
-                          {child.filterable && (
-                            <DataTableColumnFilter
-                              column={child}
-                              isFilterVisible={visibleFilterColumns.has(
-                                getFilterKey(child),
-                              )}
-                              onToggleVisibility={toggleColumnFilterVisibility}
-                            />
-                          )}
-                          {child.sortable && (
-                            <DataTableColumnSort
-                              column={child}
-                              sortDirection={
-                                currentSort?.key === getFilterKey(child)
-                                  ? currentSort.direction
-                                  : null
-                              }
-                              onToggleSort={toggleColumnSort}
-                            />
-                          )}
-                        </div>
-                      </th>
-                    ),
-                  ) ?? [],
-              )}
+              <td
+                align="center"
+                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
+              >
+                <div className="mt-3">
+                  <Loader display={loading} />
+                </div>
+              </td>
             </tr>
+          ) : (
+            <></>
           )}
-        </thead>
-        <tbody>
           {!loading &&
-            sortedData.map((row, rowIndex) => (
-              <tr
-                key={getRowId ? getRowId(row) : ((row as any).id ?? rowIndex)}
-                onClick={(e) => handleClickRow?.(e, row)}
-              >
+            data.map((row, rowIndex) => (
+              <tr key={rowIndex} onClick={(e) => handleClickRow?.(e, row)}>
                 {onSelectionChange && (
-                  <td
-                    className={`select-cell ${
-                      hasStickyColumns ? "data-table-sticky-cell" : ""
-                    }`.trim()}
-                    style={{
-                      textAlign: "center",
-                      ...(hasStickyColumns
-                        ? {
-                            position: "sticky",
-                            left: 0,
-                            zIndex: 3,
-                            backgroundColor: "#fff",
-                          }
-                        : {}),
-                    }}
-                  >
+                  <td className="select-cell" style={{ textAlign: "center" }}>
                     <Input
                       id={`select-row-${rowIndex}`}
                       name={`select-row-${rowIndex}`}
@@ -822,27 +209,18 @@ export function DataTable<T>(props: DataTableProps<T>) {
                         limitSelect !== undefined &&
                         selectedRowIds.size >= limitSelect &&
                         !selectedRowIds.has(
-                          getRowId ? getRowId(row) : ((row as any).id ?? row),
+                          getRowId ? getRowId(row) : (row as any).id ?? row
                         )
                       }
                       checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : ((row as any).id ?? row),
+                        getRowId ? getRowId(row) : (row as any).id ?? row
                       )}
                       onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
                     />
                   </td>
                 )}
-                {flatColumns.map((column, idx) => (
-                  <DataTableRow
-                    onEditColumnByOverlay={onEditColumnByOverlay}
-                    column={column}
-                    idx={idx}
-                    row={row}
-                    key={idx}
-                    stickyLeft={stickyColumnsLeftByKey.get(
-                      getFilterKey(column),
-                    )}
-                  />
+                {columns.map((column, idx) => (
+                  <DataTableRow column={column} idx={idx} row={row} key={idx} />
                 ))}
                 {actions.length > 0 && (
                   <td align="right">
@@ -860,19 +238,16 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 )}
               </tr>
             ))}
+          {!loading && data.length === 0 && (
+            <DataTableLoading
+              columns={columns}
+              actions={actions}
+              emptyMessage={emptyMessage}
+            />
+          )}
         </tbody>
       </table>
 
-      {loading && (
-        <div className="data-table-empty-state-content mt-3">
-          <Loader display={true} />
-        </div>
-      )}
-
-      {!loading && data.length === 0 && (
-        <DataTableLoading emptyMessage={emptyMessage} />
-      )}
-
       {children}
       {hasMore && (
         <div ref={loaderRef} className="infinite-scroll-loader">