kelt-ui-kit-react 2.0.1 → 2.0.3

package/src/dataTable/DataTable.tsx

@@ -1,20 +1,62 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { useIsMobile } from "../_core/hooks/useIsMobile";
-import { Card } from "../card/Card";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
-import { Icon } from "../icon/Icon";
 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;
@@ -23,28 +65,20 @@ export type DataTableProps<T> = {
   element?: JSX.Element;
   data: T[];
   emptyMessage?: string;
-  actionsColumnWidth?: number;
-  actions?: dataTableActionsInterface<T>[];
-  footerAction?: (props: {
-    close: () => void;
-    selectedRows: T[];
-  }) => JSX.Element;
-  columns: dataTableColumnsInterface<T>[];
+  actions?: DataTableActionsInterface<T>[];
+  columns: DataTableColumnsInterface<T>[];
+  onFiltersChange?: (next: DataTableFilterState) => void;
+  onSortChange?: (next: DataTableSortState | null) => void;
   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;
-  autoFocusFirstEditable?: boolean;
   hideToggleAll?: boolean;
   limitSelect?: number;
   getRowId?: (row: T) => string | number;
-  onRowStyle?: (row: T) => React.CSSProperties | undefined;
-  onRowClassName?: (row: T) => string | undefined;
-  rowStyle?: (row: T) => React.CSSProperties | undefined;
-  rowClassName?: (row: T) => string | undefined;
-  mobileCardView?: boolean;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -54,82 +88,169 @@ export function DataTable<T>(props: DataTableProps<T>) {
     children,
     element,
     data = [],
-    actionsColumnWidth = 200,
     actions = [],
-    footerAction,
     columns = [],
     loading,
     onRowClick,
     onColumnClick,
     onLoadMore,
+    onEditColumnByOverlay,
     emptyMessage,
     hasMore,
     onSelectionChange,
-    autoFocusFirstEditable = false,
+    onFiltersChange,
+    onSortChange,
     hideToggleAll = false,
     limitSelect = undefined,
     getRowId,
-    onRowStyle,
-    onRowClassName,
-    rowStyle,
-    rowClassName,
-    mobileCardView = false,
   } = props;
-
-  const isMobile = useIsMobile();
-  const showMobileCardView = mobileCardView && isMobile;
-  const loaderRef = useRef<HTMLDivElement | null>(null);
-  const footerActionRef = useRef<HTMLDivElement | null>(null);
-  const hasAutoFocusedRef = useRef(false);
-  const [isFooterActionVisible, setIsFooterActionVisible] = useState(false);
-  const [footerActionOffset, setFooterActionOffset] = useState(0);
-  const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
+  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 focusEditableElement = useCallback((element: HTMLElement | null) => {
-    if (!element) {
-      return;
-    }
+  const getFilterKey = useCallback(
+    (column: DataTableColumnsInterface<T>) => column.name ?? column.id,
+    [],
+  );
 
-    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+  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" };
+        }
 
-    requestAnimationFrame(() => {
-      element.focus();
+        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 (
-        element instanceof HTMLInputElement ||
-        element instanceof HTMLTextAreaElement
-      ) {
-        element.select();
+      if (prev[key] === value) {
+        return prev;
       }
+
+      return { ...prev, [key]: value };
     });
   }, []);
 
-  const isInteractiveClick = useCallback((target: EventTarget | null) => {
-    const element =
-      target instanceof Element
-        ? target
-        : target instanceof Node
-          ? target.parentElement
-          : null;
+  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,
+          },
+        };
+      });
+    },
+    [],
+  );
 
-    if (!element) {
-      return false;
+  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]);
 
-    return Boolean(
-      element.closest(
-        "input,button,a,select,textarea,label,option,[role='button'],[role='checkbox'],[role='option'],[contenteditable='true'],[data-stop-row-click='true']",
-      ),
-    );
-  }, []);
+  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(),
+  );
+  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?.([]);
-      setIsFooterActionVisible(false);
     } else {
       let allIds = data.map((d) =>
         getRowId ? getRowId(d) : ((d as any).id ?? d),
@@ -141,7 +262,6 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       const newSelection = new Set(allIds);
       setSelectedRowIds(newSelection);
-      setIsFooterActionVisible(true);
       onSelectionChange?.(
         data.filter((d) =>
           newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
@@ -150,175 +270,14 @@ export function DataTable<T>(props: DataTableProps<T>) {
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
 
-  const focusNextColumn = useCallback(
-    (columnIndex: number, rowIndex: number) => {
-      if (typeof document === "undefined") {
-        return;
-      }
-
-      const table =
-        document.getElementById(`${id}-mobile`) ??
-        document.getElementById(id);
-      const eligibleColumnIndexes = columns.reduce<number[]>(
-        (indexes, column, idx) => {
-          if (
-            column.editable &&
-            column.enterToNextColumn &&
-            column.type !== "select" &&
-            column.type !== "image"
-          ) {
-            indexes.push(idx);
-          }
-
-          return indexes;
-        },
-        [],
-      );
-
-      if (!table || eligibleColumnIndexes.length === 0) {
-        return;
-      }
-
-      const currentEligibleIndex = eligibleColumnIndexes.indexOf(columnIndex);
-
-      if (currentEligibleIndex === -1) {
-        return;
-      }
-
-      const editableCells = data.flatMap((_, currentRowIndex) =>
-        eligibleColumnIndexes.map((currentColumnIndex) => ({
-          rowIndex: currentRowIndex,
-          columnIndex: currentColumnIndex,
-        })),
-      );
-
-      const currentCellIndex = editableCells.findIndex(
-        (cell) =>
-          cell.rowIndex === rowIndex && cell.columnIndex === columnIndex,
-      );
-
-      if (currentCellIndex === -1) {
-        return;
-      }
-
-      const focusableSelector =
-        'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]';
-      let nextInput: HTMLElement | null = null;
-
-      for (let offset = 1; offset <= editableCells.length; offset += 1) {
-        const nextCell =
-          editableCells[(currentCellIndex + offset) % editableCells.length];
-        const cell = table.querySelector(
-          `tbody td[data-row-index="${nextCell.rowIndex}"][data-column-index="${nextCell.columnIndex}"]`,
-        );
-
-        if (!(cell instanceof HTMLElement)) {
-          continue;
-        }
-
-        const focusableElement =
-          cell.querySelector<HTMLElement>(focusableSelector);
-
-        if (focusableElement) {
-          nextInput = focusableElement;
-          break;
-        }
-      }
-
-      if (!nextInput) {
-        return;
-      }
-
-      focusEditableElement(nextInput);
-    },
-    [columns, data, focusEditableElement, id],
-  );
-
-  const focusNextRow = useCallback(
-    (rowIndex: number) => {
-      if (typeof document === "undefined") {
-        return;
-      }
-
-      const table =
-        document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
-      if (!table) {
-        return;
-      }
-
-      const eligibleColumnIndexes = columns.reduce<number[]>(
-        (indexes, column, idx) => {
-          if (
-            column.editable &&
-            column.type !== "select" &&
-            column.type !== "image"
-          ) {
-            indexes.push(idx);
-          }
-
-          return indexes;
-        },
-        [],
-      );
-
-      if (eligibleColumnIndexes.length === 0) {
-        return;
-      }
-
-      const firstEligibleColumnIndex = eligibleColumnIndexes[0];
-      const focusableSelector =
-        'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]';
-      let nextInput: HTMLElement | null = null;
-
-      for (let offset = 1; offset <= data.length; offset += 1) {
-        const nextRowIndex = (rowIndex + offset) % data.length;
-        const cell = table.querySelector(
-          `[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
-        );
-
-        if (!(cell instanceof HTMLElement)) {
-          continue;
-        }
-
-        const focusableElement =
-          cell.querySelector<HTMLElement>(focusableSelector);
-
-        if (focusableElement) {
-          nextInput = focusableElement;
-          break;
-        }
-      }
-
-      if (!nextInput) {
-        return;
-      }
-
-      focusEditableElement(nextInput);
-    },
-    [columns, data.length, focusEditableElement, id],
-  );
-
   const handleClickRow = useCallback(
     (e: React.MouseEvent, row: T) => {
       e.stopPropagation();
-
-      if (isInteractiveClick(e.target)) {
-        return;
-      }
-
-      const selectedText =
-        typeof window !== "undefined"
-          ? window.getSelection?.()?.toString().trim()
-          : "";
-      if (selectedText) {
-        return;
-      }
-
       if (onRowClick) {
         onRowClick?.(row);
       }
     },
-    [isInteractiveClick, onRowClick],
+    [onRowClick],
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
@@ -337,7 +296,6 @@ export function DataTable<T>(props: DataTableProps<T>) {
       }
 
       setSelectedRowIds(newSelection);
-      setIsFooterActionVisible(newSelection.size > 0);
       const selectedItems = data.filter((d) =>
         newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
       );
@@ -345,238 +303,388 @@ export function DataTable<T>(props: DataTableProps<T>) {
     },
     [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
   );
-  const showFooterAction = Boolean(footerAction && isFooterActionVisible);
-  const closeFooterAction = useCallback(() => {
-    setIsFooterActionVisible(false);
-  }, []);
-  const selectedRows = data.filter((d) =>
-    selectedRowIds.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-  );
   useEffect(() => {
-    if (loading || !autoFocusFirstEditable || data.length === 0) {
-      hasAutoFocusedRef.current = false;
-      return;
-    }
-
-    if (hasAutoFocusedRef.current) {
-      return;
-    }
+    if (!onLoadMore || !hasMore) return;
 
-    const firstEditableColumnIndex = columns.findIndex(
-      (column) =>
-        column.editable &&
-        column.enterToNextColumn &&
-        column.type !== "select" &&
-        column.type !== "image",
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1.0,
+      },
     );
 
-    if (firstEditableColumnIndex === -1) {
-      return;
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
     }
 
-    const table =
-      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
-    const firstCell = table?.querySelector(
-      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
-    );
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [onLoadMore, hasMore]);
+  const hasNestedColumns = columns.some((col) => col.children?.length);
 
-    if (!(firstCell instanceof HTMLElement)) {
-      return;
+  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 firstInput = firstCell.querySelector<HTMLElement>(
-      'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]',
+    const sortedColumn = flatColumns.find(
+      (column) => getFilterKey(column) === currentSort.key,
     );
 
-    if (!firstInput) {
-      return;
+    if (!sortedColumn) {
+      return data;
     }
 
-    hasAutoFocusedRef.current = true;
-    focusEditableElement(firstInput);
-  }, [
-    autoFocusFirstEditable,
-    columns,
-    data.length,
-    focusEditableElement,
-    id,
-    loading,
-  ]);
-  useEffect(() => {
-    if (!showFooterAction) {
-      setFooterActionOffset(0);
-      return;
-    }
+    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();
+      }
 
-    const footerActionElement = footerActionRef.current;
+      if (typeof value === "string" || typeof value === "number") {
+        const timestamp = new Date(value).getTime();
+        return Number.isNaN(timestamp) ? null : timestamp;
+      }
 
-    if (!footerActionElement) {
-      return;
-    }
+      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;
+      }
 
-    const updateFooterActionOffset = () => {
-      const { height } = footerActionElement.getBoundingClientRect();
-      setFooterActionOffset(Math.ceil(height) + 16);
+      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",
+      });
     };
 
-    updateFooterActionOffset();
+    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]);
+
+  // Largeur de la colonne des actions : somme des largeurs déclarées, 200px par défaut
+  const actionsWidth = actions.some((action) => action.width !== undefined)
+    ? actions.reduce((total, action) => total + (action.width ?? 0), 0)
+    : 200;
 
-    if (typeof ResizeObserver === "undefined") {
+  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 resizeObserver = new ResizeObserver(() => {
-      updateFooterActionOffset();
-    });
+    const updateFilterRowHeight = () => {
+      const measuredHeight =
+        filterRowRef.current?.getBoundingClientRect().height ??
+        DEFAULT_FILTER_ROW_STICKY_HEIGHT;
+      setFilterRowHeight((prev) =>
+        Math.abs(prev - measuredHeight) < 0.1 ? prev : measuredHeight,
+      );
+    };
 
-    resizeObserver.observe(footerActionElement);
+    updateFilterRowHeight();
 
+    if (typeof ResizeObserver !== "undefined" && filterRowRef.current) {
+      const resizeObserver = new ResizeObserver(updateFilterRowHeight);
+      resizeObserver.observe(filterRowRef.current);
+      return () => resizeObserver.disconnect();
+    }
+
+    window.addEventListener("resize", updateFilterRowHeight);
     return () => {
-      resizeObserver.disconnect();
+      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,
+      );
     };
-  }, [showFooterAction]);
-  useEffect(() => {
-    if (!onLoadMore || !hasMore) return;
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          onLoadMore();
-        }
-      },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 1.0,
-      },
-    );
+    updateHeaderRowHeight();
 
-    if (loaderRef.current) {
-      observer.observe(loaderRef.current);
+    if (typeof ResizeObserver !== "undefined" && headerRowRef.current) {
+      const resizeObserver = new ResizeObserver(updateHeaderRowHeight);
+      resizeObserver.observe(headerRowRef.current);
+      return () => resizeObserver.disconnect();
     }
 
+    window.addEventListener("resize", updateHeaderRowHeight);
     return () => {
-      if (loaderRef.current) {
-        observer.unobserve(loaderRef.current);
-      }
+      window.removeEventListener("resize", updateHeaderRowHeight);
     };
-  }, [onLoadMore, hasMore]);
+  }, [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 ${showFooterAction ? "data-table-container--with-footer-action" : ""}`}
-      style={
-        showFooterAction
-          ? { paddingBottom: `${footerActionOffset}px` }
-          : undefined
-      }
-    >
+    <div className="data-table-container">
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      {showMobileCardView && (
-        <div
-          id={`${id}-mobile`}
-          className={`data-table-mobile-cards ${className ? className : ""}`}
-        >
-          {loading && <Loader display={loading} />}
-          {!loading &&
-            data.map((row, rowIndex) => {
-              const customStyle = (onRowStyle ?? rowStyle)?.(row);
-              const customClass =
-                (onRowClassName ?? rowClassName)?.(row) ?? "";
-              const rowId = getRowId
-                ? getRowId(row)
-                : ((row as any).id ?? row);
-
-              return (
-                <Card
-                  key={rowId as React.Key}
-                  item={{ title: "" }}
-                  className={`data-table-mobile-card ${customClass}`.trim()}
-                  handleClick={onRowClick ? () => onRowClick(row) : undefined}
-                >
-                  <div
-                    className="data-table-mobile-card__content"
-                    style={customStyle}
-                    data-row-index={rowIndex}
-                    onMouseDown={(event) => {
-                      if (isInteractiveClick(event.target)) {
-                        event.stopPropagation();
-                      }
-                    }}
-                  >
-                    {onSelectionChange && (
-                      <div className="data-table-mobile-card__field data-table-mobile-card__selection">
-                        <span className="data-table-mobile-card__label">
-                          Sélection
-                        </span>
-                        <Input
-                          id={`select-card-${rowIndex}`}
-                          name={`select-card-${rowIndex}`}
-                          type={TypeInputEnum.CHECKBOX}
-                          disabled={
-                            limitSelect !== undefined &&
-                            selectedRowIds.size >= limitSelect &&
-                            !selectedRowIds.has(rowId)
-                          }
-                          checked={selectedRowIds.has(rowId)}
-                          onChange={(event) => toggleRow(event, row)}
-                        />
-                      </div>
-                    )}
-                    {columns.map((column, columnIndex) => (
-                      <div
-                        className="data-table-mobile-card__field"
-                        key={column.id}
-                      >
-                        <span className="data-table-mobile-card__label">
-                          {column.label}
-                        </span>
-                        <DataTableRow
-                          container="card"
-                          column={column}
-                          idx={columnIndex}
-                          row={row}
-                          rowIndex={rowIndex}
-                          onEnterNextColumn={focusNextColumn}
-                        />
-                      </div>
-                    ))}
-                    {actions.length > 0 && (
-                      <div className="data-table-mobile-card__actions card-actions">
-                        {actions.map((action, actionIndex) => (
-                          <DataTableAction
-                            key={action.id}
-                            action={action}
-                            row={row}
-                            rowIndex={rowIndex}
-                            index={actionIndex}
-                            onFocusNextRow={focusNextRow}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </Card>
-              );
-            })}
-          {!loading && data.length === 0 && (
-            <div className="data-table-mobile-cards__empty">
-              {emptyMessage ?? "Aucune donnée"}
-            </div>
-          )}
-        </div>
+      {currentFilters && (
+        <DataTableFilters
+          currentFilters={currentFilters}
+          setCurrentFilters={setCurrentFilters}
+        />
       )}
-      <table
-        className={`data-table ${className ? className : ""}`}
-        id={id}
-        style={showMobileCardView ? { display: "none" } : undefined}
-      >
+      <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: actionsWidth }} />}
+        </colgroup>
         <thead>
-          <tr>
+          {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}>
             {onSelectionChange && (
               <th
-                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
-                style={{ width: "20px", textAlign: "center" }}
+                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",
+                      }
+                    : {}),
+                }}
               >
                 <Input
                   id={`select-th-${id}`}
@@ -589,151 +697,186 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 />
               </th>
             )}
+
             {columns.map((column, idx) => (
-              <DataTableColumn
+              <DataTableColumn<T>
                 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: `${actionsColumnWidth}px`,
-                  minWidth: `${actionsColumnWidth}px`,
+                  width: `${actionsWidth}px`,
+                  top: headerStickyTop,
                 }}
                 align="right"
                 key={"actions"}
+                rowSpan={hasNestedColumns ? 2 : 1}
               ></th>
             )}
           </tr>
-        </thead>
-        <tbody>
-          {loading ? (
+          {hasNestedColumns && (
             <tr>
-              <td
-                align="center"
-                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-              >
-                <div className="mt-3">
-                  <Loader display={loading} />
-                </div>
-              </td>
+              {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>
+                    ),
+                  ) ?? [],
+              )}
             </tr>
-          ) : (
-            <></>
           )}
+        </thead>
+        <tbody>
           {!loading &&
-            data.map((row, rowIndex) => {
-              const customStyle = (onRowStyle ?? rowStyle)?.(row);
-              const customClass = (onRowClassName ?? rowClassName)?.(row) ?? "";
-
-              return (
-                <tr
-                  key={rowIndex}
-                  className={`${rowIndex % 2 === 0 ? "even" : "odd"} ${customClass}`.trim()}
-                  style={customStyle}
-                  data-row-index={rowIndex}
-                  onClick={(e) => handleClickRow?.(e, row)}
-                >
-                  {onSelectionChange && (
-                    <td
-                      className="select-cell"
-                      style={{ textAlign: "center" }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setIsFooterActionVisible(true);
-                      }}
-                    >
-                      <Input
-                        id={`select-row-${rowIndex}`}
-                        name={`select-row-${rowIndex}`}
-                        type={TypeInputEnum.CHECKBOX}
-                        disabled={
-                          limitSelect !== undefined &&
-                          selectedRowIds.size >= limitSelect &&
-                          !selectedRowIds.has(
-                            getRowId ? getRowId(row) : ((row as any).id ?? row),
-                          )
-                        }
-                        checked={selectedRowIds.has(
+            sortedData.map((row, rowIndex) => (
+              <tr
+                key={getRowId ? getRowId(row) : ((row as any).id ?? 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",
+                          }
+                        : {}),
+                    }}
+                  >
+                    <Input
+                      id={`select-row-${rowIndex}`}
+                      name={`select-row-${rowIndex}`}
+                      type={TypeInputEnum.CHECKBOX}
+                      disabled={
+                        limitSelect !== undefined &&
+                        selectedRowIds.size >= limitSelect &&
+                        !selectedRowIds.has(
                           getRowId ? getRowId(row) : ((row as any).id ?? row),
-                        )}
-                        onChange={(e) => toggleRow(e, row)}
-                      />
-                    </td>
-                  )}
-                  {columns.map((column, idx) => (
-                    <DataTableRow
-                      column={column}
-                      idx={idx}
-                      row={row}
-                      rowIndex={rowIndex}
-                      key={idx}
-                      onEnterNextColumn={focusNextColumn}
+                        )
+                      }
+                      checked={selectedRowIds.has(
+                        getRowId ? getRowId(row) : ((row as any).id ?? row),
+                      )}
+                      onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
                     />
-                  ))}
-                  {actions.length > 0 && (
-                    <td
-                      style={{
-                        width: `${actionsColumnWidth}px`,
-                        minWidth: `${actionsColumnWidth}px`,
-                      }}
-                      align="right"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <div className="d-flex align-items-center justify-content-end">
-                        {actions.map((action, index) => (
-                          <DataTableAction
-                            key={index}
-                            action={action}
-                            row={row}
-                            rowIndex={rowIndex}
-                            index={index}
-                            onFocusNextRow={focusNextRow}
-                          />
-                        ))}
-                      </div>
-                    </td>
-                  )}
-                </tr>
-              );
-            })}
-          {!loading && data.length === 0 && (
-            <DataTableLoading
-              columns={columns}
-              actions={actions}
-              emptyMessage={emptyMessage}
-            />
-          )}
+                  </td>
+                )}
+                {flatColumns.map((column, idx) => (
+                  <DataTableRow
+                    onEditColumnByOverlay={onEditColumnByOverlay}
+                    column={column}
+                    idx={idx}
+                    row={row}
+                    key={idx}
+                    stickyLeft={stickyColumnsLeftByKey.get(
+                      getFilterKey(column),
+                    )}
+                  />
+                ))}
+                {actions.length > 0 && (
+                  <td align="right">
+                    <div className="d-flex align-items-center justify-content-end">
+                      {actions.map((action, index) => (
+                        <DataTableAction
+                          key={index}
+                          action={action}
+                          row={row}
+                          index={index}
+                        />
+                      ))}
+                    </div>
+                  </td>
+                )}
+              </tr>
+            ))}
         </tbody>
       </table>
 
-      {showFooterAction &&
-        typeof document !== "undefined" &&
-        createPortal(
-          <div
-            ref={footerActionRef}
-            className="data-table-footer-action"
-            data-footer-action="true"
-          >
-            <div className="data-table-footer-action__content">
-              <div
-                className="data-table-footer-action__close"
-                aria-label="Fermer les actions"
-                onClick={closeFooterAction}
-              >
-                <Icon classIcon={"bi-x"} />
-              </div>
-              {footerAction?.({
-                close: closeFooterAction,
-                selectedRows,
-              })}
-            </div>
-          </div>,
-          document.body,
-        )}
+      {loading && (
+        <div className="data-table-empty-state-content mt-3">
+          <Loader display={true} />
+        </div>
+      )}
+
+      {!loading && data.length === 0 && (
+        <DataTableLoading emptyMessage={emptyMessage} />
+      )}
 
       {children}
       {hasMore && (