kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/dataTable/DataTable.tsx

@@ -1,746 +1,845 @@
-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 "./dataTable.css";
-import {
-  dataTableActionsInterface,
-  dataTableColumnsInterface,
-} from "./dataTable.interface";
-import { DataTableAction } from "./dataTableActions/DataTableAction";
-import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
-import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
-import { DataTableRow } from "./dataTableRow/DataTableRow";
-export type DataTableProps<T> = {
-  id: string;
-  name?: string;
-  className?: string;
-  children?: JSX.Element;
-  element?: JSX.Element;
-  data: T[];
-  emptyMessage?: string;
-  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;
-  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 {
-    id,
-    name,
-    className,
-    children,
-    element,
-    data = [],
-    actionsColumnWidth = 200,
-    actions = [],
-    footerAction,
-    columns = [],
-    loading,
-    onRowClick,
-    onColumnClick,
-    onLoadMore,
-    emptyMessage,
-    hasMore,
-    onSelectionChange,
-    autoFocusFirstEditable = false,
-    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>>(
-    new Set(),
-  );
-
-  const focusEditableElement = useCallback((element: HTMLElement | null) => {
-    if (!element) {
-      return;
-    }
-
-    element.scrollIntoView({ block: "nearest", inline: "nearest" });
-
-    requestAnimationFrame(() => {
-      element.focus();
-
-      if (
-        element instanceof HTMLInputElement ||
-        element instanceof HTMLTextAreaElement
-      ) {
-        element.select();
-      }
-    });
-  }, []);
-
-  const isInteractiveClick = useCallback((target: EventTarget | null) => {
-    const element =
-      target instanceof Element
-        ? target
-        : target instanceof Node
-          ? target.parentElement
-          : null;
-
-    if (!element) {
-      return false;
-    }
-
-    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 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),
-      );
-
-      if (limitSelect && allIds.length > limitSelect) {
-        allIds = allIds.slice(0, limitSelect);
-      }
-
-      const newSelection = new Set(allIds);
-      setSelectedRowIds(newSelection);
-      setIsFooterActionVisible(true);
-      onSelectionChange?.(
-        data.filter((d) =>
-          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-        ),
-      );
-    }
-  }, [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],
-  );
-  const toggleRow = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
-      e.stopPropagation();
-      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
-      const newSelection = new Set(selectedRowIds);
-
-      if (newSelection.has(rowId)) {
-        newSelection.delete(rowId);
-      } else {
-        if (limitSelect && newSelection.size >= limitSelect) {
-          // 🚫 limite atteinte
-          return;
-        }
-        newSelection.add(rowId);
-      }
-
-      setSelectedRowIds(newSelection);
-      setIsFooterActionVisible(newSelection.size > 0);
-      const selectedItems = data.filter((d) =>
-        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-      );
-      onSelectionChange?.(selectedItems);
-    },
-    [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;
-    }
-
-    const firstEditableColumnIndex = columns.findIndex(
-      (column) =>
-        column.editable &&
-        column.enterToNextColumn &&
-        column.type !== "select" &&
-        column.type !== "image",
-    );
-
-    if (firstEditableColumnIndex === -1) {
-      return;
-    }
-
-    const table =
-      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
-    const firstCell = table?.querySelector(
-      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
-    );
-
-    if (!(firstCell instanceof HTMLElement)) {
-      return;
-    }
-
-    const firstInput = firstCell.querySelector<HTMLElement>(
-      'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]',
-    );
-
-    if (!firstInput) {
-      return;
-    }
-
-    hasAutoFocusedRef.current = true;
-    focusEditableElement(firstInput);
-  }, [
-    autoFocusFirstEditable,
-    columns,
-    data.length,
-    focusEditableElement,
-    id,
-    loading,
-  ]);
-  useEffect(() => {
-    if (!showFooterAction) {
-      setFooterActionOffset(0);
-      return;
-    }
-
-    const footerActionElement = footerActionRef.current;
-
-    if (!footerActionElement) {
-      return;
-    }
-
-    const updateFooterActionOffset = () => {
-      const { height } = footerActionElement.getBoundingClientRect();
-      setFooterActionOffset(Math.ceil(height) + 16);
-    };
-
-    updateFooterActionOffset();
-
-    if (typeof ResizeObserver === "undefined") {
-      return;
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      updateFooterActionOffset();
-    });
-
-    resizeObserver.observe(footerActionElement);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [showFooterAction]);
-  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);
-    }
-
-    return () => {
-      if (loaderRef.current) {
-        observer.unobserve(loaderRef.current);
-      }
-    };
-  }, [onLoadMore, hasMore]);
-  return (
-    <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}
-      {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}
-        style={showMobileCardView ? { display: "none" } : undefined}
-      >
-        <thead>
-          <tr>
-            {onSelectionChange && (
-              <th
-                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
-                style={{ width: "20px", textAlign: "center" }}
-              >
-                <Input
-                  id={`select-th-${id}`}
-                  name={`select-th-${id}`}
-                  type={TypeInputEnum.CHECKBOX}
-                  checked={
-                    data.length > 0 && selectedRowIds.size === data.length
-                  }
-                  onChange={toggleSelectAll}
-                />
-              </th>
-            )}
-            {columns.map((column, idx) => (
-              <DataTableColumn
-                key={idx}
-                column={column}
-                idx={idx}
-                onColumnClick={onColumnClick}
-              />
-            ))}
-            {actions.length > 0 && (
-              <th
-                style={{
-                  width: `${actionsColumnWidth}px`,
-                  minWidth: `${actionsColumnWidth}px`,
-                }}
-                align="right"
-                key={"actions"}
-              ></th>
-            )}
-          </tr>
-        </thead>
-        <tbody>
-          {loading ? (
-            <tr>
-              <td
-                align="center"
-                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-              >
-                <div className="mt-3">
-                  <Loader display={loading} />
-                </div>
-              </td>
-            </tr>
-          ) : (
-            <></>
-          )}
-          {!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(
-                          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}
-                    />
-                  ))}
-                  {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>
-
-      {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 && (
-        <div ref={loaderRef} className="infinite-scroll-loader">
-          <Loader display={true} />
-        </div>
-      )}
-    </div>
-  );
-}
+import { useCallback, useEffect, useLayoutEffect, useMemo, 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 "./dataTable.css";
+import {
+  dataTableActionsInterface,
+  dataTableColumnsInterface,
+} from "./dataTable.interface";
+import { DataTableAction } from "./dataTableActions/DataTableAction";
+import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
+import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
+import { DataTableRow } from "./dataTableRow/DataTableRow";
+import { DataTableFilters } from "./dataTableFilters/DataTableFilters";
+import { useDataTableState } from "./useDataTableState";
+import { DataTableFilterState, DataTableSortState, flattenColumns, getActionsWidth } from "./dataTable.utils";
+export type {
+  DataTableDateRangeFilterValue, DataTableFilterState, DataTableSortDirection,
+  DataTableSortState, FilterValue,
+} from "./dataTable.utils";
+const DEFAULT_FILTER_COLUMN_WIDTH = 100;
+
+export type DataTableProps<T> = {
+  id: string;
+  name?: string;
+  className?: string;
+  children?: JSX.Element;
+  element?: JSX.Element;
+  data: T[];
+  emptyMessage?: string;
+  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;
+  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;
+  onFiltersChange?: (next: DataTableFilterState) => void;
+  onSortChange?: (next: DataTableSortState | null) => void;
+  onEditColumnByOverlay?: (row: T) => void;
+};
+export function DataTable<T>(props: DataTableProps<T>) {
+  const {
+    id,
+    name,
+    className,
+    children,
+    element,
+    data: sourceData = [],
+    actionsColumnWidth: explicitActionsWidth,
+    actions = [],
+    footerAction,
+    columns: groupedColumns = [],
+    loading,
+    onRowClick,
+    onColumnClick,
+    onLoadMore,
+    emptyMessage,
+    hasMore,
+    onSelectionChange,
+    autoFocusFirstEditable = false,
+    hideToggleAll = false,
+    limitSelect = undefined,
+    getRowId,
+    onRowStyle,
+    onRowClassName,
+    rowStyle,
+    rowClassName,
+    mobileCardView = false,
+    onFiltersChange,
+    onSortChange,
+    onEditColumnByOverlay,
+  } = props;
+  const tableState = useDataTableState(id, groupedColumns, sourceData, onFiltersChange, onSortChange);
+  const { flatColumns: columns, sortedData: data } = tableState;
+  const actionsColumnWidth = getActionsWidth(actions, explicitActionsWidth);
+  const filterRowRef = useRef<HTMLTableRowElement>(null);
+  const groupRowRef = useRef<HTMLTableRowElement>(null);
+  const [filterHeight, setFilterHeight] = useState(0);
+  const [groupHeight, setGroupHeight] = useState(0);
+  const hasGroups = groupedColumns.some((column) => column.children?.length);
+  const stickyOffsets = useMemo(() => {
+    const offsets = new Map<string, number>();
+    let left = onSelectionChange ? 40 : 0;
+    columns.forEach((column) => {
+      if (!column.sticky) return;
+      offsets.set(column.id, left);
+      const width = column.width ?? column.minWidth ?? column.maxWidth ?? 100;
+      left += typeof width === "number" ? width : Number.parseFloat(width);
+    });
+    return offsets;
+  }, [columns, onSelectionChange]);
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      setFilterHeight(filterRowRef.current?.getBoundingClientRect().height ?? 0);
+      setGroupHeight(groupRowRef.current?.getBoundingClientRect().height ?? 0);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(measure);
+    if (filterRowRef.current) observer.observe(filterRowRef.current);
+    if (groupRowRef.current) observer.observe(groupRowRef.current);
+    return () => observer.disconnect();
+  }, [tableState.visibleFilters.size, hasGroups, groupedColumns]);
+
+  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 focusEditableElement = useCallback((element: HTMLElement | null) => {
+    if (!element) {
+      return;
+    }
+
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+    requestAnimationFrame(() => {
+      element.focus();
+
+      if (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement
+      ) {
+        element.select();
+      }
+    });
+  }, []);
+
+  const isInteractiveClick = useCallback((target: EventTarget | null) => {
+    const element =
+      target instanceof Element
+        ? target
+        : target instanceof Node
+          ? target.parentElement
+          : null;
+
+    if (!element) {
+      return false;
+    }
+
+    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 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),
+      );
+
+      if (limitSelect && allIds.length > limitSelect) {
+        allIds = allIds.slice(0, limitSelect);
+      }
+
+      const newSelection = new Set(allIds);
+      setSelectedRowIds(newSelection);
+      setIsFooterActionVisible(true);
+      onSelectionChange?.(
+        data.filter((d) =>
+          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+        ),
+      );
+    }
+  }, [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],
+  );
+  const toggleRow = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
+      e.stopPropagation();
+      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
+      const newSelection = new Set(selectedRowIds);
+
+      if (newSelection.has(rowId)) {
+        newSelection.delete(rowId);
+      } else {
+        if (limitSelect && newSelection.size >= limitSelect) {
+          // 🚫 limite atteinte
+          return;
+        }
+        newSelection.add(rowId);
+      }
+
+      setSelectedRowIds(newSelection);
+      setIsFooterActionVisible(newSelection.size > 0);
+      const selectedItems = data.filter((d) =>
+        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+      );
+      onSelectionChange?.(selectedItems);
+    },
+    [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;
+    }
+
+    const firstEditableColumnIndex = columns.findIndex(
+      (column) =>
+        column.editable &&
+        column.enterToNextColumn &&
+        column.type !== "select" &&
+        column.type !== "image",
+    );
+
+    if (firstEditableColumnIndex === -1) {
+      return;
+    }
+
+    const table =
+      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
+    const firstCell = table?.querySelector(
+      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+    );
+
+    if (!(firstCell instanceof HTMLElement)) {
+      return;
+    }
+
+    const firstInput = firstCell.querySelector<HTMLElement>(
+      'input:not([disabled]), textarea:not([disabled]), [contenteditable="true"]',
+    );
+
+    if (!firstInput) {
+      return;
+    }
+
+    hasAutoFocusedRef.current = true;
+    focusEditableElement(firstInput);
+  }, [
+    autoFocusFirstEditable,
+    columns,
+    data.length,
+    focusEditableElement,
+    id,
+    loading,
+  ]);
+  useEffect(() => {
+    if (!showFooterAction) {
+      setFooterActionOffset(0);
+      return;
+    }
+
+    const footerActionElement = footerActionRef.current;
+
+    if (!footerActionElement) {
+      return;
+    }
+
+    const updateFooterActionOffset = () => {
+      const { height } = footerActionElement.getBoundingClientRect();
+      setFooterActionOffset(Math.ceil(height) + 16);
+    };
+
+    updateFooterActionOffset();
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateFooterActionOffset();
+    });
+
+    resizeObserver.observe(footerActionElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [showFooterAction]);
+  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);
+    }
+
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [onLoadMore, hasMore]);
+  return (
+    <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}
+      <DataTableFilters currentFilters={tableState.filters} setCurrentFilters={tableState.setFilters} />
+      {showMobileCardView && columns.some((column) => column.filterable || column.sortable) && (
+        <div className="data-table-mobile-controls">
+          {columns.filter((column) => column.filterable || column.sortable).map((column, idx) => (
+            <div key={column.id}>
+              <table><thead><tr><DataTableColumn column={column} idx={idx}
+                isFilterVisible={tableState.visibleFilters.has(column.name ?? column.id)}
+                onToggleFilter={tableState.toggleFilter} onToggleSort={tableState.toggleSort}
+                sortDirection={tableState.sort?.key === (column.name ?? column.id) ? tableState.sort.direction : null}
+              /></tr></thead></table>
+              {tableState.renderFilter(column)}
+            </div>
+          ))}
+        </div>
+      )}
+      {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}
+                          onEditColumnByOverlay={onEditColumnByOverlay}
+                        />
+                      </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}
+        style={showMobileCardView ? { display: "none" } : undefined}
+      >
+        <colgroup>
+          {onSelectionChange && <col style={{ width: 40 }} />}
+          {columns.map((column) => <col key={column.id} style={{ width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth }} />)}
+          {actions.length > 0 && <col style={{ width: actionsColumnWidth }} />}
+        </colgroup>
+        <thead>
+          {tableState.visibleFilters.size > 0 && <tr className="data-table-filter-row" ref={filterRowRef}>
+            {onSelectionChange && <th />}
+            {columns.map((column) => <th className="filter-row-cell" key={column.id}
+              style={{ position: "sticky", top: 0, zIndex: 14, background: "#f9fbfc",
+                width: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
+                minWidth: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
+                maxWidth: column.width ?? DEFAULT_FILTER_COLUMN_WIDTH,
+                ...(column.sticky ? { left: stickyOffsets.get(column.id) } : {}) }}>
+              {tableState.renderFilter(column)}
+            </th>)}
+            {actions.length > 0 && <th />}
+          </tr>}
+          {hasGroups && <tr ref={groupRowRef} className="data-table-group-row">
+            {onSelectionChange && <th />}
+            {groupedColumns.map((column) => <th key={column.id} colSpan={flattenColumns([column]).length}
+              style={{ top: filterHeight }}>{column.children?.length ? column.label : ""}</th>)}
+            {actions.length > 0 && <th />}
+          </tr>}
+          <tr>
+            {onSelectionChange && (
+              <th
+                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
+                style={{ width: "40px", textAlign: "center", top: filterHeight + groupHeight,
+                  ...(stickyOffsets.size > 0 ? { left: 0, zIndex: 12 } : {}) }}
+              >
+                <Input
+                  id={`select-th-${id}`}
+                  name={`select-th-${id}`}
+                  type={TypeInputEnum.CHECKBOX}
+                  checked={
+                    data.length > 0 && selectedRowIds.size === data.length
+                  }
+                  onChange={toggleSelectAll}
+                />
+              </th>
+            )}
+            {columns.map((column, idx) => (
+              <DataTableColumn
+                key={idx}
+                column={column}
+                idx={idx}
+                onColumnClick={onColumnClick}
+                stickyLeft={stickyOffsets.get(column.id)}
+                stickyTop={filterHeight + groupHeight}
+                isFilterVisible={tableState.visibleFilters.has(column.name ?? column.id)}
+                onToggleFilter={tableState.toggleFilter}
+                onToggleSort={tableState.toggleSort}
+                sortDirection={tableState.sort?.key === (column.name ?? column.id) ? tableState.sort.direction : null}
+              />
+            ))}
+            {actions.length > 0 && (
+              <th
+                style={{
+                  width: `${actionsColumnWidth}px`,
+                  minWidth: `${actionsColumnWidth}px`,
+                }}
+                align="right"
+                key={"actions"}
+              ></th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            <tr>
+              <td
+                align="center"
+                colSpan={columns.length + (actions.length > 0 ? 1 : 0) + (onSelectionChange ? 1 : 0)}
+              >
+                <div className="mt-3">
+                  <Loader display={loading} />
+                </div>
+              </td>
+            </tr>
+          ) : (
+            <></>
+          )}
+          {!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(
+                          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}
+                      stickyLeft={stickyOffsets.get(column.id)}
+                      onEditColumnByOverlay={onEditColumnByOverlay}
+                      key={idx}
+                      onEnterNextColumn={focusNextColumn}
+                    />
+                  ))}
+                  {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}
+              hasSelection={Boolean(onSelectionChange)}
+            />
+          )}
+        </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,
+        )}
+
+      {children}
+      {hasMore && (
+        <div ref={loaderRef} className="infinite-scroll-loader">
+          <Loader display={true} />
+        </div>
+      )}
+    </div>
+  );
+}