kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/dataTable/DataTable.tsx

@@ -1,62 +1,20 @@
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useIsMobile } from "../_core/hooks/useIsMobile";
+import { Card } from "../card/Card";
 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;
@@ -65,20 +23,28 @@ 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;
+  actionsColumnWidth?: number;
+  actions?: dataTableActionsInterface<T>[];
+  footerAction?: (props: {
+    close: () => void;
+    selectedRows: T[];
+  }) => JSX.Element;
+  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;
+  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 {
@@ -88,169 +54,82 @@ export function DataTable<T>(props: DataTableProps<T>) {
     children,
     element,
     data = [],
+    actionsColumnWidth = 200,
     actions = [],
+    footerAction,
     columns = [],
     loading,
     onRowClick,
     onColumnClick,
     onLoadMore,
-    onEditColumnByOverlay,
     emptyMessage,
     hasMore,
     onSelectionChange,
-    onFiltersChange,
-    onSortChange,
+    autoFocusFirstEditable = false,
     hideToggleAll = false,
     limitSelect = undefined,
     getRowId,
+    onRowStyle,
+    onRowClassName,
+    rowStyle,
+    rowClassName,
+    mobileCardView = false,
   } = 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 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>>(
+    new Set(),
   );
 
-  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" };
-        }
+  const focusEditableElement = useCallback((element: HTMLElement | null) => {
+    if (!element) {
+      return;
+    }
 
-        return null;
-      });
-    },
-    [getFilterKey],
-  );
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
 
-  const updateFilterValue = useCallback((key: string, value: string) => {
-    setCurrentFilters((prev) => {
-      if (!value) {
-        if (!(key in prev)) {
-          return prev;
-        }
-        const { [key]: _removed, ...rest } = prev;
-        return rest;
-      }
+    requestAnimationFrame(() => {
+      element.focus();
 
-      if (prev[key] === value) {
-        return prev;
+      if (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement
+      ) {
+        element.select();
       }
-
-      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 isInteractiveClick = useCallback((target: EventTarget | null) => {
+    const element =
+      target instanceof Element
+        ? target
+        : target instanceof Node
+          ? target.parentElement
+          : null;
 
-  const onFiltersChangeRef = useRef(onFiltersChange);
-  const deferredFilters = useDeferredValue(currentFilters);
-  useEffect(() => {
-    onFiltersChangeRef.current = onFiltersChange;
-  }, [onFiltersChange]);
-
-  useEffect(() => {
-    if (onFiltersChangeRef.current) {
-      onFiltersChangeRef.current(deferredFilters);
+    if (!element) {
+      return false;
     }
-  }, [deferredFilters]);
-  const onSortChangeRef = useRef(onSortChange);
-  useEffect(() => {
-    onSortChangeRef.current = onSortChange;
-  }, [onSortChange]);
 
-  useEffect(() => {
-    if (onSortChangeRef.current) {
-      onSortChangeRef.current(currentSort);
-    }
-  }, [currentSort]);
+    return Boolean(
+      element.closest(
+        "input,button,a,select,textarea,label,option,[role='button'],[role='checkbox'],[role='option'],[contenteditable='true'],[data-stop-row-click='true']",
+      ),
+    );
+  }, []);
 
-  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),
@@ -262,6 +141,7 @@ 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)),
@@ -270,14 +150,175 @@ 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);
       }
     },
-    [onRowClick],
+    [isInteractiveClick, onRowClick],
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
@@ -296,6 +337,7 @@ 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)),
       );
@@ -303,388 +345,238 @@ 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 (!onLoadMore || !hasMore) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          onLoadMore();
-        }
-      },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 1.0,
-      },
-    );
-
-    if (loaderRef.current) {
-      observer.observe(loaderRef.current);
+    if (loading || !autoFocusFirstEditable || data.length === 0) {
+      hasAutoFocusedRef.current = false;
+      return;
     }
 
-    return () => {
-      if (loaderRef.current) {
-        observer.unobserve(loaderRef.current);
-      }
-    };
-  }, [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;
+    if (hasAutoFocusedRef.current) {
+      return;
     }
 
-    const sortedColumn = flatColumns.find(
-      (column) => getFilterKey(column) === currentSort.key,
+    const firstEditableColumnIndex = columns.findIndex(
+      (column) =>
+        column.editable &&
+        column.enterToNextColumn &&
+        column.type !== "select" &&
+        column.type !== "image",
     );
 
-    if (!sortedColumn) {
-      return data;
+    if (firstEditableColumnIndex === -1) {
+      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();
-      }
-
-      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;
-      }
+    const table =
+      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
+    const firstCell = table?.querySelector(
+      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+    );
 
-      if (left == null) {
-        return 1;
-      }
+    if (!(firstCell instanceof HTMLElement)) {
+      return;
+    }
 
-      if (right == null) {
-        return -1;
-      }
+    const firstInput = firstCell.querySelector<HTMLElement>(
+      'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]',
+    );
 
-      if (typeof left === "number" && typeof right === "number") {
-        return left - right;
-      }
+    if (!firstInput) {
+      return;
+    }
 
-      if (typeof left === "boolean" && typeof right === "boolean") {
-        return Number(left) - Number(right);
-      }
+    hasAutoFocusedRef.current = true;
+    focusEditableElement(firstInput);
+  }, [
+    autoFocusFirstEditable,
+    columns,
+    data.length,
+    focusEditableElement,
+    id,
+    loading,
+  ]);
+  useEffect(() => {
+    if (!showFooterAction) {
+      setFooterActionOffset(0);
+      return;
+    }
 
-      if (isDateColumn) {
-        const leftDate = normalizeDate(left);
-        const rightDate = normalizeDate(right);
+    const footerActionElement = footerActionRef.current;
 
-        if (leftDate !== null && rightDate !== null) {
-          return leftDate - rightDate;
-        }
-      }
+    if (!footerActionElement) {
+      return;
+    }
 
-      return String(left).localeCompare(String(right), undefined, {
-        numeric: true,
-        sensitivity: "base",
-      });
+    const updateFooterActionOffset = () => {
+      const { height } = footerActionElement.getBoundingClientRect();
+      setFooterActionOffset(Math.ceil(height) + 16);
     };
 
-    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;
+    updateFooterActionOffset();
 
-  const hasVisibleFilterInputs = visibleFilterColumns.size > 0;
-  const headerStickyTop = hasVisibleFilterInputs ? filterRowHeight : 0;
-  const groupedHeaderStickyTop = headerStickyTop + headerRowHeight;
-
-  useLayoutEffect(() => {
-    if (!hasVisibleFilterInputs) {
-      setFilterRowHeight(DEFAULT_FILTER_ROW_STICKY_HEIGHT);
+    if (typeof ResizeObserver === "undefined") {
       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();
+    const resizeObserver = new ResizeObserver(() => {
+      updateFooterActionOffset();
+    });
 
-    if (typeof ResizeObserver !== "undefined" && filterRowRef.current) {
-      const resizeObserver = new ResizeObserver(updateFilterRowHeight);
-      resizeObserver.observe(filterRowRef.current);
-      return () => resizeObserver.disconnect();
-    }
+    resizeObserver.observe(footerActionElement);
 
-    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,
-      );
+      resizeObserver.disconnect();
     };
+  }, [showFooterAction]);
+  useEffect(() => {
+    if (!onLoadMore || !hasMore) return;
 
-    updateHeaderRowHeight();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1.0,
+      },
+    );
 
-    if (typeof ResizeObserver !== "undefined" && headerRowRef.current) {
-      const resizeObserver = new ResizeObserver(updateHeaderRowHeight);
-      resizeObserver.observe(headerRowRef.current);
-      return () => resizeObserver.disconnect();
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
     }
 
-    window.addEventListener("resize", updateHeaderRowHeight);
     return () => {
-      window.removeEventListener("resize", updateHeaderRowHeight);
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
     };
-  }, [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,
-    ],
-  );
+  }, [onLoadMore, hasMore]);
   return (
-    <div className="data-table-container">
+    <div
+      className={`data-table-container ${showFooterAction ? "data-table-container--with-footer-action" : ""}`}
+      style={
+        showFooterAction
+          ? { paddingBottom: `${footerActionOffset}px` }
+          : undefined
+      }
+    >
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      {currentFilters && (
-        <DataTableFilters
-          currentFilters={currentFilters}
-          setCurrentFilters={setCurrentFilters}
-        />
+      {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>
       )}
-      <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>
+      <table
+        className={`data-table ${className ? className : ""}`}
+        id={id}
+        style={showMobileCardView ? { display: "none" } : undefined}
+      >
         <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}`}
@@ -697,186 +589,151 @@ 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: `${actionsWidth}px`,
-                  top: headerStickyTop,
+                  width: `${actionsColumnWidth}px`,
+                  minWidth: `${actionsColumnWidth}px`,
                 }}
                 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)}
-              >
-                {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(
+            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(
                           getRowId ? getRowId(row) : ((row as any).id ?? row),
-                        )
-                      }
-                      checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : ((row as any).id ?? row),
-                      )}
-                      onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
+                        )}
+                        onChange={(e) => toggleRow(e, row)}
+                      />
+                    </td>
+                  )}
+                  {columns.map((column, idx) => (
+                    <DataTableRow
+                      column={column}
+                      idx={idx}
+                      row={row}
+                      rowIndex={rowIndex}
+                      key={idx}
+                      onEnterNextColumn={focusNextColumn}
                     />
-                  </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>
-            ))}
+                  ))}
+                  {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}
+            />
+          )}
         </tbody>
       </table>
 
-      {loading && (
-        <div className="data-table-empty-state-content mt-3">
-          <Loader display={true} />
-        </div>
-      )}
-
-      {!loading && data.length === 0 && (
-        <DataTableLoading emptyMessage={emptyMessage} />
-      )}
+      {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,
+        )}
 
       {children}
       {hasMore && (