kelt-ui-kit-react 1.8.2 → 1.8.3

package/src/dataTable/DataTable.tsx

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