@bigbinary/neeto-atoms 1.0.35 → 1.0.37

package/dist/cjs/{DataTable-Dg0pX7Ng.js → DataTable-DRGW8JVP.js}

@@ -3,15 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var primitives_Table = require('./primitives/Table.js');
-var utils = require('./utils-CTr7wn5d.js');
+var utils = require('./utils-BhM0B89p.js');
 var reactI18next = require('react-i18next');
 var primitives_Checkbox = require('./primitives/Checkbox.js');
 var primitives_Spinner = require('./primitives/Spinner.js');
 var createLucideIcon = require('./createLucideIcon-D0tRgV6l.js');
 var primitives_Button = require('./primitives/Button.js');
 var primitives_Pagination = require('./primitives/Pagination.js');
-var Button = require('./Button-BniJ4TT_.js');
 var primitives_DropdownMenu = require('./primitives/DropdownMenu.js');
+var Button = require('./Button-BlNtYr1w.js');
 var ellipsis = require('./ellipsis-4aubOI2n.js');
 var check = require('./check-BQgcDXys.js');
 
@@ -3166,684 +3166,1076 @@ function useReactTable(options) {
 
 const DEFAULT_PAGE_SIZE = 30;
 const URL_SORT_PARAMS = {
-    SORT_BY: "sort_by",
-    ORDER_BY: "order_by",
+  SORT_BY: "sort_by",
+  ORDER_BY: "order_by"
 };
 const URL_PAGE_PARAM = "page";
 const SORT_DIRECTIONS = {
-    ASC: "asc",
-    DESC: "desc",
+  ASC: "asc",
+  DESC: "desc"
 };
 const STORAGE_KEY_PREFIX = "NEETOUI";
 const STORAGE_KEY_SUFFIX = "FIXED_COLUMNS";
 
 const getSearchParams = () => new URLSearchParams(window.location.search);
 const readSortFromURL = () => {
-    const params = getSearchParams();
-    const sortBy = params.get(URL_SORT_PARAMS.SORT_BY);
-    const orderBy = params.get(URL_SORT_PARAMS.ORDER_BY);
-    if (!sortBy)
-        return [];
-    return [{ id: sortBy, desc: orderBy === SORT_DIRECTIONS.DESC }];
+  const params = getSearchParams();
+  const sortBy = params.get(URL_SORT_PARAMS.SORT_BY);
+  const orderBy = params.get(URL_SORT_PARAMS.ORDER_BY);
+  if (!sortBy) return [];
+  return [{ id: sortBy, desc: orderBy === SORT_DIRECTIONS.DESC }];
 };
 const writeSortToURL = (sorting) => {
-    const url = new URL(window.location.href);
-    if (sorting.length === 0) {
-        url.searchParams.delete(URL_SORT_PARAMS.SORT_BY);
-        url.searchParams.delete(URL_SORT_PARAMS.ORDER_BY);
-    }
-    else {
-        const { id, desc } = sorting[0];
-        url.searchParams.set(URL_SORT_PARAMS.SORT_BY, id);
-        url.searchParams.set(URL_SORT_PARAMS.ORDER_BY, desc ? SORT_DIRECTIONS.DESC : SORT_DIRECTIONS.ASC);
-    }
-    window.history.pushState({}, "", url.toString());
+  const url = new URL(window.location.href);
+  if (sorting.length === 0) {
+    url.searchParams.delete(URL_SORT_PARAMS.SORT_BY);
+    url.searchParams.delete(URL_SORT_PARAMS.ORDER_BY);
+  } else {
+    const { id, desc } = sorting[0];
+    url.searchParams.set(URL_SORT_PARAMS.SORT_BY, id);
+    url.searchParams.set(
+      URL_SORT_PARAMS.ORDER_BY,
+      desc ? SORT_DIRECTIONS.DESC : SORT_DIRECTIONS.ASC
+    );
+  }
+  window.history.pushState({}, "", url.toString());
 };
 const readPageFromURL = () => {
-    const params = new URLSearchParams(window.location.search);
-    const page = params.get(URL_PAGE_PARAM);
-    return page ? Math.max(1, parseInt(page, 10)) : 1;
+  const params = new URLSearchParams(window.location.search);
+  const page = params.get(URL_PAGE_PARAM);
+  return page ? Math.max(1, parseInt(page, 10)) : 1;
 };
 const writePageToURL = (page) => {
-    const url = new URL(window.location.href);
-    if (page <= 1) {
-        url.searchParams.delete(URL_PAGE_PARAM);
-    }
-    else {
-        url.searchParams.set(URL_PAGE_PARAM, String(page));
-    }
-    window.history.pushState({}, "", url.toString());
+  const url = new URL(window.location.href);
+  if (page <= 1) {
+    url.searchParams.delete(URL_PAGE_PARAM);
+  } else {
+    url.searchParams.set(URL_PAGE_PARAM, String(page));
+  }
+  window.history.pushState({}, "", url.toString());
 };
-const keysToRowSelection = (keys) => Object.fromEntries(keys.map(key => [key, true]));
-const rowSelectionToKeys = (selection) => Object.keys(selection).filter(key => selection[key]);
+const keysToRowSelection = (keys) => Object.fromEntries(keys.map((key) => [key, true]));
+const rowSelectionToKeys = (selection) => Object.keys(selection).filter((key) => selection[key]);
 const hashPathname = () => {
-    const pathname = decodeURIComponent(window.location.pathname).replace(/^\//, "");
-    let hash = 0;
-    for (let i = 0; i < pathname.length; i++) {
-        const char = pathname.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-        hash = hash & hash;
-    }
-    return Math.abs(hash).toString(16).toUpperCase();
+  const pathname = decodeURIComponent(window.location.pathname).replace(
+    /^\//,
+    ""
+  );
+  let hash = 0;
+  for (let i = 0; i < pathname.length; i++) {
+    const char = pathname.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(16).toUpperCase();
 };
 const getStorageKey = (prefix) => {
-    const resolvedPrefix = prefix || hashPathname();
-    return `${STORAGE_KEY_PREFIX}-${resolvedPrefix}-${STORAGE_KEY_SUFFIX}`;
+  const resolvedPrefix = prefix || hashPathname();
+  return `${STORAGE_KEY_PREFIX}-${resolvedPrefix}-${STORAGE_KEY_SUFFIX}`;
 };
 const readFromLocalStorage = (key) => {
-    try {
-        const stored = localStorage.getItem(key);
-        return stored ? JSON.parse(stored) : [];
-    }
-    catch {
-        return [];
-    }
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
 };
 const writeToLocalStorage = (key, value) => {
-    try {
-        localStorage.setItem(key, JSON.stringify(value));
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+};
+const getPageNumbers = (current, total) => {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [1];
+  if (current > 3) pages.push("ellipsis");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) pages.push("ellipsis");
+  pages.push(total);
+  return pages;
+};
+
+const useTableSort = ({
+  sorting: controlledSorting,
+  onSortingChange: controlledOnSortingChange,
+  onSort,
+  enableURLSort = true
+}) => {
+  const isControlled = controlledSorting !== void 0;
+  const [internalSorting, setInternalSorting] = React.useState(
+    () => enableURLSort ? readSortFromURL() : []
+  );
+  const sorting = isControlled ? controlledSorting : internalSorting;
+  const onSortingChange = React.useCallback(
+    (updaterOrValue) => {
+      const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
+      if (!isControlled) {
+        setInternalSorting(newSorting);
+      }
+      controlledOnSortingChange?.(updaterOrValue);
+      if (onSort) {
+        onSort(
+          newSorting.length > 0 ? {
+            field: newSorting[0].id,
+            order: newSorting[0].desc ? "descend" : "ascend"
+          } : null
+        );
+      }
+      if (enableURLSort) {
+        writeSortToURL(newSorting);
+      }
+    },
+    [sorting, isControlled, controlledOnSortingChange, onSort, enableURLSort]
+  );
+  React.useEffect(() => {
+    if (enableURLSort && !isControlled) {
+      const urlSorting = readSortFromURL();
+      setInternalSorting(urlSorting);
     }
-    catch {
-        // Silently fail if storage is full
+  }, [enableURLSort, isControlled]);
+  return { sorting, onSortingChange };
+};
+
+const useTablePagination = ({
+  totalCount = 0,
+  pageSize = DEFAULT_PAGE_SIZE,
+  currentPage: controlledPage,
+  onPageChange: controlledOnPageChange,
+  enableURLPagination = true
+}) => {
+  const isControlled = controlledPage !== void 0;
+  const [internalPage, setInternalPage] = React.useState(
+    () => enableURLPagination ? readPageFromURL() : 1
+  );
+  const currentPage = isControlled ? controlledPage : internalPage;
+  const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
+  const onPageChange = React.useCallback(
+    (page) => {
+      const clampedPage = Math.min(Math.max(1, page), pageCount);
+      if (!isControlled) {
+        setInternalPage(clampedPage);
+      }
+      controlledOnPageChange?.(clampedPage);
+      if (enableURLPagination) {
+        writePageToURL(clampedPage);
+      }
+    },
+    [pageCount, isControlled, controlledOnPageChange, enableURLPagination]
+  );
+  React.useEffect(() => {
+    if (currentPage > pageCount && pageCount > 0) {
+      onPageChange(pageCount);
     }
+  }, [currentPage, pageCount, onPageChange]);
+  const paginationState = React.useMemo(
+    () => ({
+      pageIndex: currentPage - 1,
+      pageSize
+    }),
+    [currentPage, pageSize]
+  );
+  return {
+    currentPage,
+    pageCount,
+    pageSize,
+    paginationState,
+    onPageChange
+  };
 };
-const getPageNumbers = (current, total) => {
-    if (total <= 7) {
-        return Array.from({ length: total }, (_, i) => i + 1);
+
+const SelectionCheckbox = ({
+  checked,
+  onCheckedChange,
+  ariaLabel
+}) => {
+  const { t } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    primitives_Checkbox.Checkbox,
+    {
+      checked,
+      onCheckedChange,
+      "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row")
     }
-    const pages = [1];
-    if (current > 3)
-        pages.push("ellipsis");
-    const start = Math.max(2, current - 1);
-    const end = Math.min(total - 1, current + 1);
-    for (let i = start; i <= end; i++) {
-        pages.push(i);
+  ) });
+};
+
+const useTableSelection = ({
+  enableRowSelection,
+  selectedRowKeys,
+  onRowSelect,
+  data,
+  getRowId
+}) => {
+  const isControlled = selectedRowKeys !== void 0;
+  const isFirstRender = React.useRef(true);
+  const [internalSelection, setInternalSelection] = React.useState(
+    () => isControlled ? keysToRowSelection(selectedRowKeys) : {}
+  );
+  const rowSelection = isControlled ? keysToRowSelection(selectedRowKeys) : internalSelection;
+  React.useEffect(() => {
+    if (isControlled) {
+      setInternalSelection(keysToRowSelection(selectedRowKeys));
     }
-    if (current < total - 2)
-        pages.push("ellipsis");
-    pages.push(total);
-    return pages;
-};
-
-const useTableSort = ({ sorting: controlledSorting, onSortingChange: controlledOnSortingChange, enableURLSort = true, }) => {
-    const isControlled = controlledSorting !== undefined;
-    const [internalSorting, setInternalSorting] = React.useState(() => enableURLSort ? readSortFromURL() : []);
-    const sorting = isControlled ? controlledSorting : internalSorting;
-    const onSortingChange = React.useCallback(updaterOrValue => {
-        const newSorting = typeof updaterOrValue === "function"
-            ? updaterOrValue(sorting)
-            : updaterOrValue;
-        if (!isControlled) {
-            setInternalSorting(newSorting);
-        }
-        controlledOnSortingChange?.(updaterOrValue);
-        if (enableURLSort) {
-            writeSortToURL(newSorting);
-        }
-    }, [sorting, isControlled, controlledOnSortingChange, enableURLSort]);
-    React.useEffect(() => {
-        if (enableURLSort && !isControlled) {
-            const urlSorting = readSortFromURL();
-            setInternalSorting(urlSorting);
-        }
-    }, [enableURLSort, isControlled]);
-    return { sorting, onSortingChange };
-};
-
-const useTablePagination = ({ totalCount = 0, pageSize = DEFAULT_PAGE_SIZE, currentPage: controlledPage, onPageChange: controlledOnPageChange, enableURLPagination = true, }) => {
-    const isControlled = controlledPage !== undefined;
-    const [internalPage, setInternalPage] = React.useState(() => enableURLPagination ? readPageFromURL() : 1);
-    const currentPage = isControlled ? controlledPage : internalPage;
-    const pageCount = Math.max(1, Math.ceil(totalCount / pageSize));
-    const onPageChange = React.useCallback((page) => {
-        const clampedPage = Math.min(Math.max(1, page), pageCount);
-        if (!isControlled) {
-            setInternalPage(clampedPage);
-        }
-        controlledOnPageChange?.(clampedPage);
-        if (enableURLPagination) {
-            writePageToURL(clampedPage);
-        }
-    }, [pageCount, isControlled, controlledOnPageChange, enableURLPagination]);
-    React.useEffect(() => {
-        if (currentPage > pageCount && pageCount > 0) {
-            onPageChange(pageCount);
-        }
-    }, [currentPage, pageCount, onPageChange]);
-    const paginationState = React.useMemo(() => ({
-        pageIndex: currentPage - 1,
-        pageSize,
-    }), [currentPage, pageSize]);
+  }, [isControlled, selectedRowKeys]);
+  const onRowSelectionChange = React.useCallback(
+    (updaterOrValue) => {
+      const newSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
+      if (!isControlled) {
+        setInternalSelection(newSelection);
+      }
+      if (onRowSelect) {
+        const keys = rowSelectionToKeys(newSelection);
+        const selectedRows = data.filter((row) => keys.includes(getRowId(row)));
+        onRowSelect(keys, selectedRows);
+      }
+    },
+    [rowSelection, isControlled, onRowSelect, data, getRowId]
+  );
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+  }, []);
+  const selectionColumn = React.useMemo(() => {
+    if (!enableRowSelection) return null;
     return {
-        currentPage,
-        pageCount,
-        pageSize,
-        paginationState,
-        onPageChange,
-    };
+      id: "_selection",
+      header: ({ table }) => SelectionCheckbox({
+        checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+        onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+        ariaLabel: "Select all"
+      }),
+      cell: ({ row }) => SelectionCheckbox({
+        checked: row.getIsSelected(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        ariaLabel: "Select row"
+      }),
+      size: 56,
+      enableSorting: false,
+      enableResizing: false
+    };
+  }, [enableRowSelection]);
+  return {
+    rowSelection,
+    onRowSelectionChange,
+    selectionColumn,
+    enableRowSelection: typeof enableRowSelection === "function" ? enableRowSelection : !!enableRowSelection
+  };
 };
 
-const SelectionCheckbox = ({ checked, onCheckedChange, ariaLabel, }) => {
-    const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(primitives_Checkbox.Checkbox, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row") }) }));
+const useColumnPinning = ({
+  enabled = true,
+  columnPinning: controlledPinning,
+  onColumnPinningChange: controlledOnChange,
+  localStorageKeyPrefix,
+  initialPinnedColumns = []
+}) => {
+  const isControlled = controlledPinning !== void 0;
+  const storageKey = getStorageKey(localStorageKeyPrefix);
+  const [internalPinning, setInternalPinning] = React.useState(
+    () => {
+      if (!enabled) return { left: [], right: [] };
+      const stored = readFromLocalStorage(storageKey);
+      const left = stored.length > 0 ? stored : initialPinnedColumns;
+      return { left, right: [] };
+    }
+  );
+  const pinning = isControlled ? controlledPinning : internalPinning;
+  const onColumnPinningChange = React.useCallback(
+    (updaterOrValue) => {
+      const newPinning = typeof updaterOrValue === "function" ? updaterOrValue(pinning) : updaterOrValue;
+      if (!isControlled) {
+        setInternalPinning(newPinning);
+      }
+      controlledOnChange?.(updaterOrValue);
+      if (enabled) {
+        writeToLocalStorage(storageKey, newPinning.left ?? []);
+      }
+    },
+    [pinning, isControlled, controlledOnChange, enabled, storageKey]
+  );
+  const toggleColumnPin = React.useCallback(
+    (columnId) => {
+      onColumnPinningChange((old) => {
+        const leftPins = old.left ?? [];
+        const isPinned = leftPins.includes(columnId);
+        const newLeft = isPinned ? leftPins.filter((id) => id !== columnId) : [...leftPins, columnId];
+        return { ...old, left: newLeft };
+      });
+    },
+    [onColumnPinningChange]
+  );
+  const isColumnPinned = React.useCallback(
+    (columnId) => {
+      return (pinning.left ?? []).includes(columnId);
+    },
+    [pinning]
+  );
+  React.useEffect(() => {
+    if (!enabled || isControlled) return;
+    const stored = readFromLocalStorage(storageKey);
+    if (stored.length > 0) {
+      setInternalPinning({ left: stored, right: [] });
+    }
+  }, [enabled, isControlled, storageKey]);
+  return {
+    columnPinning: enabled ? pinning : { left: [], right: [] },
+    onColumnPinningChange,
+    toggleColumnPin,
+    isColumnPinned
+  };
 };
 
-const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, data, getRowId, }) => {
-    const isControlled = selectedRowKeys !== undefined;
-    const isFirstRender = React.useRef(true);
-    const [internalSelection, setInternalSelection] = React.useState(() => (isControlled ? keysToRowSelection(selectedRowKeys) : {}));
-    const rowSelection = isControlled
-        ? keysToRowSelection(selectedRowKeys)
-        : internalSelection;
-    React.useEffect(() => {
-        if (isControlled) {
-            setInternalSelection(keysToRowSelection(selectedRowKeys));
-        }
-    }, [isControlled, selectedRowKeys]);
-    const onRowSelectionChange = React.useCallback((updaterOrValue) => {
-        const newSelection = typeof updaterOrValue === "function"
-            ? updaterOrValue(rowSelection)
-            : updaterOrValue;
-        if (!isControlled) {
-            setInternalSelection(newSelection);
-        }
-        if (onRowSelect) {
-            const keys = rowSelectionToKeys(newSelection);
-            const selectedRows = data.filter(row => keys.includes(getRowId(row)));
-            onRowSelect(keys, selectedRows);
-        }
-    }, [rowSelection, isControlled, onRowSelect, data, getRowId]);
-    React.useEffect(() => {
-        if (isFirstRender.current) {
-            isFirstRender.current = false;
-            return;
-        }
-    }, []);
-    const selectionColumn = React.useMemo(() => {
-        if (!enableRowSelection)
-            return null;
-        return {
-            id: "_selection",
-            header: ({ table }) => SelectionCheckbox({
-                checked: table.getIsAllPageRowsSelected() ||
-                    (table.getIsSomePageRowsSelected() && "indeterminate"),
-                onCheckedChange: value => table.toggleAllPageRowsSelected(!!value),
-                ariaLabel: "Select all",
-            }),
-            cell: ({ row }) => SelectionCheckbox({
-                checked: row.getIsSelected(),
-                onCheckedChange: value => row.toggleSelected(!!value),
-                ariaLabel: "Select row",
-            }),
-            size: 56,
-            enableSorting: false,
-            enableResizing: false,
-        };
-    }, [enableRowSelection]);
-    return {
-        rowSelection,
-        onRowSelectionChange,
-        selectionColumn,
-        enableRowSelection: typeof enableRowSelection === "function"
-            ? enableRowSelection
-            : !!enableRowSelection,
-    };
-};
-
-const useColumnPinning = ({ enabled = true, columnPinning: controlledPinning, onColumnPinningChange: controlledOnChange, localStorageKeyPrefix, initialPinnedColumns = [], }) => {
-    const isControlled = controlledPinning !== undefined;
-    const storageKey = getStorageKey(localStorageKeyPrefix);
-    const [internalPinning, setInternalPinning] = React.useState(() => {
-        if (!enabled)
-            return { left: [], right: [] };
-        const stored = readFromLocalStorage(storageKey);
-        const left = stored.length > 0 ? stored : initialPinnedColumns;
-        return { left, right: [] };
-    });
-    const pinning = isControlled ? controlledPinning : internalPinning;
-    const onColumnPinningChange = React.useCallback(updaterOrValue => {
-        const newPinning = typeof updaterOrValue === "function"
-            ? updaterOrValue(pinning)
-            : updaterOrValue;
-        if (!isControlled) {
-            setInternalPinning(newPinning);
-        }
-        controlledOnChange?.(updaterOrValue);
-        if (enabled) {
-            writeToLocalStorage(storageKey, newPinning.left ?? []);
-        }
-    }, [pinning, isControlled, controlledOnChange, enabled, storageKey]);
-    const toggleColumnPin = React.useCallback((columnId) => {
-        onColumnPinningChange(old => {
-            const leftPins = old.left ?? [];
-            const isPinned = leftPins.includes(columnId);
-            const newLeft = isPinned
-                ? leftPins.filter(id => id !== columnId)
-                : [...leftPins, columnId];
-            return { ...old, left: newLeft };
-        });
-    }, [onColumnPinningChange]);
-    const isColumnPinned = React.useCallback((columnId) => {
-        return (pinning.left ?? []).includes(columnId);
-    }, [pinning]);
-    React.useEffect(() => {
-        if (!enabled || isControlled)
-            return;
-        const stored = readFromLocalStorage(storageKey);
-        if (stored.length > 0) {
-            setInternalPinning({ left: stored, right: [] });
-        }
-    }, [enabled, isControlled, storageKey]);
-    return {
-        columnPinning: enabled ? pinning : { left: [], right: [] },
-        onColumnPinningChange,
-        toggleColumnPin,
-        isColumnPinned,
-    };
-};
-
-const useColumnVisibility = ({ columnVisibility: controlledVisibility, onColumnVisibilityChange: controlledOnChange, onColumnHide, }) => {
-    const isControlled = controlledVisibility !== undefined;
-    const [internalVisibility, setInternalVisibility] = React.useState({});
-    const visibility = isControlled ? controlledVisibility : internalVisibility;
-    const onColumnVisibilityChange = React.useCallback(updaterOrValue => {
-        const newVisibility = typeof updaterOrValue === "function"
-            ? updaterOrValue(visibility)
-            : updaterOrValue;
-        if (!isControlled) {
-            setInternalVisibility(newVisibility);
-        }
-        controlledOnChange?.(updaterOrValue);
-    }, [visibility, isControlled, controlledOnChange]);
-    const hideColumn = React.useCallback((columnId) => {
-        if (onColumnHide) {
-            onColumnHide(columnId);
-        }
-        else {
-            onColumnVisibilityChange(old => ({ ...old, [columnId]: false }));
-        }
-    }, [onColumnVisibilityChange, onColumnHide]);
-    const showColumn = React.useCallback((columnId) => {
-        onColumnVisibilityChange(old => ({ ...old, [columnId]: true }));
-    }, [onColumnVisibilityChange]);
-    const toggleColumnVisibility = React.useCallback((columnId) => {
-        const isVisible = visibility[columnId] !== false;
-        if (isVisible) {
-            hideColumn(columnId);
-        }
-        else {
-            showColumn(columnId);
-        }
-    }, [visibility, hideColumn, showColumn]);
-    return {
-        columnVisibility: visibility,
-        onColumnVisibilityChange,
-        hideColumn,
-        showColumn,
-        toggleColumnVisibility,
-    };
-};
-
-const useColumnOrdering = ({ enabled = false, columnOrder: controlledOrder, onColumnOrderChange: controlledOnChange, }) => {
-    const isControlled = controlledOrder !== undefined;
-    const [internalOrder, setInternalOrder] = React.useState([]);
-    const columnOrder = isControlled ? controlledOrder : internalOrder;
-    const onColumnOrderChange = React.useCallback(updaterOrValue => {
-        const newOrder = typeof updaterOrValue === "function"
-            ? updaterOrValue(columnOrder)
-            : updaterOrValue;
-        if (!isControlled) {
-            setInternalOrder(newOrder);
-        }
-        controlledOnChange?.(updaterOrValue);
-    }, [columnOrder, isControlled, controlledOnChange]);
-    const moveColumn = React.useCallback((columnId, direction) => {
-        onColumnOrderChange(oldOrder => {
-            const order = [...oldOrder];
-            const currentIndex = order.indexOf(columnId);
-            if (currentIndex === -1)
-                return oldOrder;
-            const newIndex = currentIndex + direction;
-            if (newIndex < 0 || newIndex >= order.length)
-                return oldOrder;
-            order.splice(currentIndex, 1);
-            order.splice(newIndex, 0, columnId);
-            return order;
-        });
-    }, [onColumnOrderChange]);
-    const reorderColumn = React.useCallback((fromId, toId) => {
-        onColumnOrderChange(oldOrder => {
-            const order = [...oldOrder];
-            const fromIndex = order.indexOf(fromId);
-            const toIndex = order.indexOf(toId);
-            if (fromIndex === -1 || toIndex === -1)
-                return oldOrder;
-            order.splice(fromIndex, 1);
-            order.splice(toIndex, 0, fromId);
-            return order;
-        });
-    }, [onColumnOrderChange]);
-    return {
-        columnOrder: enabled ? columnOrder : [],
-        onColumnOrderChange: enabled
-            ? onColumnOrderChange
-            : (() => { }),
-        moveColumn,
-        reorderColumn,
-    };
+const useColumnVisibility = ({
+  columnVisibility: controlledVisibility,
+  onColumnVisibilityChange: controlledOnChange,
+  onColumnHide
+}) => {
+  const isControlled = controlledVisibility !== void 0;
+  const [internalVisibility, setInternalVisibility] = React.useState(
+    {}
+  );
+  const visibility = isControlled ? controlledVisibility : internalVisibility;
+  const onColumnVisibilityChange = React.useCallback(
+    (updaterOrValue) => {
+      const newVisibility = typeof updaterOrValue === "function" ? updaterOrValue(visibility) : updaterOrValue;
+      if (!isControlled) {
+        setInternalVisibility(newVisibility);
+      }
+      controlledOnChange?.(updaterOrValue);
+    },
+    [visibility, isControlled, controlledOnChange]
+  );
+  const hideColumn = React.useCallback(
+    (columnId) => {
+      if (onColumnHide) {
+        onColumnHide(columnId);
+      } else {
+        onColumnVisibilityChange((old) => ({ ...old, [columnId]: false }));
+      }
+    },
+    [onColumnVisibilityChange, onColumnHide]
+  );
+  const showColumn = React.useCallback(
+    (columnId) => {
+      onColumnVisibilityChange((old) => ({ ...old, [columnId]: true }));
+    },
+    [onColumnVisibilityChange]
+  );
+  const toggleColumnVisibility = React.useCallback(
+    (columnId) => {
+      const isVisible = visibility[columnId] !== false;
+      if (isVisible) {
+        hideColumn(columnId);
+      } else {
+        showColumn(columnId);
+      }
+    },
+    [visibility, hideColumn, showColumn]
+  );
+  return {
+    columnVisibility: visibility,
+    onColumnVisibilityChange,
+    hideColumn,
+    showColumn,
+    toggleColumnVisibility
+  };
 };
 
-const LoadingOverlay = () => (jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/50", children: jsxRuntime.jsx(primitives_Spinner.Spinner, { className: "size-6" }) }));
+const useColumnOrdering = ({
+  enabled = false,
+  columnOrder: controlledOrder,
+  onColumnOrderChange: controlledOnChange
+}) => {
+  const isControlled = controlledOrder !== void 0;
+  const [internalOrder, setInternalOrder] = React.useState([]);
+  const columnOrder = isControlled ? controlledOrder : internalOrder;
+  const onColumnOrderChange = React.useCallback(
+    (updaterOrValue) => {
+      const newOrder = typeof updaterOrValue === "function" ? updaterOrValue(columnOrder) : updaterOrValue;
+      if (!isControlled) {
+        setInternalOrder(newOrder);
+      }
+      controlledOnChange?.(updaterOrValue);
+    },
+    [columnOrder, isControlled, controlledOnChange]
+  );
+  const moveColumn = React.useCallback(
+    (columnId, direction) => {
+      onColumnOrderChange((previousOrder) => {
+        const order = [...previousOrder];
+        const currentIndex = order.indexOf(columnId);
+        if (currentIndex === -1) return previousOrder;
+        const newIndex = currentIndex + direction;
+        if (newIndex < 0 || newIndex >= order.length) return previousOrder;
+        order.splice(currentIndex, 1);
+        order.splice(newIndex, 0, columnId);
+        return order;
+      });
+    },
+    [onColumnOrderChange]
+  );
+  const reorderColumn = React.useCallback(
+    (fromId, toId) => {
+      onColumnOrderChange((previousOrder) => {
+        const order = [...previousOrder];
+        const fromIndex = order.indexOf(fromId);
+        const toIndex = order.indexOf(toId);
+        if (fromIndex === -1 || toIndex === -1) return previousOrder;
+        order.splice(fromIndex, 1);
+        order.splice(toIndex, 0, fromId);
+        return order;
+      });
+    },
+    [onColumnOrderChange]
+  );
+  return {
+    columnOrder: enabled ? columnOrder : [],
+    onColumnOrderChange: enabled ? onColumnOrderChange : (() => {
+    }),
+    moveColumn,
+    reorderColumn
+  };
+};
+
+const LoadingOverlay = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/50", children: /* @__PURE__ */ jsxRuntime.jsx(primitives_Spinner.Spinner, { className: "size-6" }) });
 
 const EmptyState = ({ colSpan, message }) => {
-    const { t } = reactI18next.useTranslation();
-    const resolvedMessage = message ?? t("neetoatoms.dataTable.noResults", "No results.");
-    return (jsxRuntime.jsx(primitives_Table.TableRow, { children: jsxRuntime.jsx(primitives_Table.TableCell, { colSpan: colSpan, className: "min-h-24 text-center text-muted-foreground", children: resolvedMessage }) }));
+  const { t } = reactI18next.useTranslation();
+  const resolvedMessage = message ?? t("neetoatoms.dataTable.noResults", "No results.");
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives_Table.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    primitives_Table.TableCell,
+    {
+      colSpan,
+      className: "min-h-24 text-center text-muted-foreground",
+      children: resolvedMessage
+    }
+  ) });
 };
 
-const SortIndicator = ({ column, }) => {
-    if (!column.getCanSort())
-        return null;
-    const sorted = column.getIsSorted();
-    if (sorted === "asc")
-        return jsxRuntime.jsx(ArrowUp, { className: "ml-1 inline size-4" });
-    if (sorted === "desc")
-        return jsxRuntime.jsx(ArrowDown, { className: "ml-1 inline size-4" });
-    return null;
+const SortIndicator = ({
+  column
+}) => {
+  if (!column.getCanSort()) return null;
+  const sorted = column.getIsSorted();
+  if (sorted === "asc") return /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { className: "ml-1 inline size-4" });
+  if (sorted === "desc")
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { className: "ml-1 inline size-4" });
+  return null;
 };
 
 const ResizeHandle = ({ header }) => {
-    if (!header.column.getCanResize())
-        return null;
-    return (jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onDoubleClick: () => header.column.resetSize(), className: utils.cn("absolute top-0 end-0 h-full w-1 cursor-col-resize select-none touch-none", header.column.getIsResizing()
-            ? "bg-primary"
-            : "bg-border opacity-0 group-hover/head:opacity-100") }));
-};
-
-const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, onBulkSelectAll, onClearBulkSelection, }) => {
-    if (!isAllPageRowsSelected && !isBulkAllSelected)
-        return null;
-    const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
-    return (jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-sm bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })] })) }));
-};
-
-const DataTablePagination = ({ currentPage, pageCount, onPageChange, }) => {
-    if (pageCount <= 1)
-        return null;
-    const pages = getPageNumbers(currentPage, pageCount);
-    return (jsxRuntime.jsx("div", { className: "flex items-center justify-end py-4", children: jsxRuntime.jsx(primitives_Pagination.Pagination, { className: "mx-0 w-auto justify-end", children: jsxRuntime.jsxs(primitives_Pagination.PaginationContent, { children: [jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: jsxRuntime.jsx(primitives_Pagination.PaginationPrevious, { onClick: e => {
-                                e.preventDefault();
-                                if (currentPage > 1)
-                                    onPageChange(currentPage - 1);
-                            }, className: currentPage <= 1
-                                ? "pointer-events-none opacity-50"
-                                : "cursor-pointer" }) }), pages.map((page, index) => page === "ellipsis" ? (jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: jsxRuntime.jsx(primitives_Pagination.PaginationEllipsis, {}) }, `ellipsis-${index}`)) : (jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: jsxRuntime.jsx(primitives_Pagination.PaginationLink, { isActive: page === currentPage, onClick: e => {
-                                e.preventDefault();
-                                onPageChange(page);
-                            }, className: "cursor-pointer", children: page }) }, page))), jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: jsxRuntime.jsx(primitives_Pagination.PaginationNext, { onClick: e => {
-                                e.preventDefault();
-                                if (currentPage < pageCount)
-                                    onPageChange(currentPage + 1);
-                            }, className: currentPage >= pageCount
-                                ? "pointer-events-none opacity-50"
-                                : "cursor-pointer" }) })] }) }) }));
-};
-
-const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnPinned, canMoveLeft, canMoveRight, onSort, onHideColumn, onTogglePin, onAddColumn, onDeleteColumn, onMoveColumn, onMoreActionClick, columnIndex, }) => {
-    const meta = column.columnDef.meta;
-    const isSortable = column.getCanSort();
-    const isHidable = column.getCanHide();
-    const isDeletable = meta?.isDeletable === true;
-    const moreActions = meta?.moreActions ?? [];
-    const currentSort = column.getIsSorted();
-    const hasAnyAction = isSortable ||
-        isHidable ||
-        enableAddColumn ||
-        enableColumnFreeze ||
-        isDeletable ||
-        canMoveLeft ||
-        canMoveRight ||
-        moreActions.length > 0;
-    if (!hasAnyAction)
-        return null;
-    return (jsxRuntime.jsx("div", { onClick: e => e.stopPropagation(), children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(primitives_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "icon", icon: ellipsis.Ellipsis, "data-testid": "column-menu-button" }) }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuContent, { align: "start", className: "w-48", children: [isSortable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "ascending-column-menu-button", onClick: () => onSort?.(column.id, false), children: [jsxRuntime.jsx(ArrowUp, { className: "mr-2 size-4" }), "Ascending", currentSort === "asc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "descending-column-menu-button", onClick: () => onSort?.(column.id, true), children: [jsxRuntime.jsx(ArrowDown, { className: "mr-2 size-4" }), "Descending", currentSort === "desc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] })] })), enableAddColumn && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-right-column-menu-button", onClick: () => onAddColumn?.(columnIndex + 1), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column right"] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-left-column-menu-button", onClick: () => onAddColumn?.(columnIndex), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column left"] })] })), isHidable && onHideColumn && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "hide-column-menu-button", onClick: () => onHideColumn(column.id), children: [jsxRuntime.jsx(EyeOff, { className: "mr-2 size-4" }), "Hide column"] }) })), isDeletable && onDeleteColumn && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "delete-column-menu-button", onClick: () => onDeleteColumn(column.id), children: [jsxRuntime.jsx(Trash2, { className: "mr-2 size-4" }), "Delete column"] })), enableColumnFreeze && onTogglePin && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "freeze-unfreeze-column-menu-button", onClick: () => onTogglePin(column.id), children: [jsxRuntime.jsx(Pin, { className: "mr-2 size-4" }), isColumnPinned ? "Unfreeze column" : "Freeze column"] }) })), onMoveColumn && (canMoveLeft || canMoveRight) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canMoveLeft && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-left-menu-button", onClick: () => onMoveColumn(column.id, -1), children: [jsxRuntime.jsx(MoveLeft, { className: "mr-2 size-4" }), "Move column left"] })), canMoveRight && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-right-menu-button", onClick: () => onMoveColumn(column.id, 1), children: [jsxRuntime.jsx(MoveRight, { className: "mr-2 size-4" }), "Move column right"] }))] })), moreActions.length > 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: moreActions.map(action => {
-                                const ActionIcon = action.icon;
-                                return (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": `${action.type}-column-menu-button`, onClick: () => onMoreActionClick?.(action.type, column.id), children: [ActionIcon && jsxRuntime.jsx(ActionIcon, { className: "mr-2 size-4" }), action.label] }, action.type));
-                            }) }))] })] }) }));
-};
-
-const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = false, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
-    const getRowId = React.useMemo(() => getRowIdProp ??
-        ((row) => row.id), [getRowIdProp]);
-    const { sorting, onSortingChange } = useTableSort({
-        sorting: sortingProp,
-        onSortingChange: onSortingChangeProp,
-        enableURLSort,
-    });
-    const { currentPage, pageCount, paginationState, onPageChange } = useTablePagination({
-        totalCount,
-        pageSize,
-        currentPage: currentPageProp,
-        onPageChange: onPageChangeProp,
-        enableURLPagination,
-    });
-    const { rowSelection, onRowSelectionChange: originalOnRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
-        enableRowSelection: enableRowSelectionProp,
-        selectedRowKeys,
-        onRowSelect,
-        data,
-        getRowId,
-    });
-    // Wrap selection change to detect manual deselection while in bulk mode
-    const onRowSelectionChange = React.useCallback((updaterOrValue) => {
-        if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
-            setBulkSelectedAllRowsInternal(false);
-            bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+  if (!header.column.getCanResize()) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      onDoubleClick: () => header.column.resetSize(),
+      className: utils.cn(
+        "absolute top-0 end-0 h-full w-1 cursor-col-resize select-none touch-none",
+        header.column.getIsResizing() ? "bg-primary" : "bg-border opacity-0 group-hover/head:opacity-100"
+      )
+    }
+  );
+};
+
+const BulkSelectCallout = ({
+  bulkSelectAllRowsProps,
+  isAllPageRowsSelected,
+  isBulkAllSelected,
+  onBulkSelectAll,
+  onClearBulkSelection
+}) => {
+  if (!isAllPageRowsSelected && !isBulkAllSelected) return null;
+  const {
+    selectAllRowMessage,
+    selectAllRowButtonLabel,
+    allRowsSelectedMessage,
+    clearSelectionButtonLabel
+  } = bulkSelectAllRowsProps;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-sm bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectAllRowMessage }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })
+  ] }) });
+};
+
+const DataTablePagination = ({
+  currentPage,
+  pageCount,
+  onPageChange
+}) => {
+  if (pageCount <= 1) return null;
+  const pages = getPageNumbers(currentPage, pageCount);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end py-4", children: /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(primitives_Pagination.PaginationContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      primitives_Pagination.PaginationPrevious,
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          if (currentPage > 1) onPageChange(currentPage - 1);
+        },
+        className: currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
+      }
+    ) }),
+    pages.map(
+      (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Pagination.PaginationLink,
+        {
+          isActive: page === currentPage,
+          onClick: (e) => {
+            e.preventDefault();
+            onPageChange(page);
+          },
+          className: "cursor-pointer",
+          children: page
         }
-        originalOnRowSelectionChange(updaterOrValue);
-    }, [originalOnRowSelectionChange, bulkSelectAllRowsProps]);
-    const { columnPinning, onColumnPinningChange, toggleColumnPin, isColumnPinned, } = useColumnPinning({
-        enabled: enableColumnFreeze,
-        columnPinning: columnPinningProp,
-        onColumnPinningChange: onColumnPinningChangeProp,
-        localStorageKeyPrefix,
-    });
-    const { columnVisibility, onColumnVisibilityChange, hideColumn } = useColumnVisibility({
-        columnVisibility: columnVisibilityProp,
-        onColumnVisibilityChange: onColumnVisibilityChangeProp,
-        onColumnHide: onColumnHideProp,
-    });
-    const { columnOrder, onColumnOrderChange, moveColumn } = useColumnOrdering({
-        enabled: enableColumnReorder,
-        columnOrder: columnOrderProp,
-        onColumnOrderChange: onColumnOrderChangeProp,
-    });
-    const showHeaderMenu = enableHeaderMenu ??
-        (enableColumnFreeze ||
-            enableAddColumn ||
-            !!onColumnHideProp ||
-            !!onColumnDelete ||
-            !!onColumnUpdate ||
-            !!onMoreActionClick);
-    const allColumns = React.useMemo(() => {
-        if (selectionColumn) {
-            return [selectionColumn, ...columns];
+      ) }, page)
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      primitives_Pagination.PaginationNext,
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          if (currentPage < pageCount) onPageChange(currentPage + 1);
+        },
+        className: currentPage >= pageCount ? "pointer-events-none opacity-50" : "cursor-pointer"
+      }
+    ) })
+  ] }) }) });
+};
+
+const HeaderCellMenu = ({
+  column,
+  enableAddColumn,
+  enableColumnFreeze,
+  isColumnPinned,
+  canMoveLeft,
+  canMoveRight,
+  onSort,
+  onHideColumn,
+  onTogglePin,
+  onAddColumn,
+  onDeleteColumn,
+  onMoveColumn,
+  onMoreActionClick,
+  columnIndex
+}) => {
+  const meta = column.columnDef.meta;
+  const isSortable = column.getCanSort();
+  const isHidable = column.getCanHide();
+  const isDeletable = meta?.isDeletable === true;
+  const moreActions = meta?.moreActions ?? [];
+  const currentSort = column.getIsSorted();
+  const hasAnyAction = isSortable || isHidable || enableAddColumn || enableColumnFreeze || isDeletable || canMoveLeft || canMoveRight || moreActions.length > 0;
+  if (!hasAnyAction) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        icon: ellipsis.Ellipsis,
+        "data-testid": "column-menu-button"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuContent, { align: "start", className: "w-48", children: [
+      isSortable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "ascending-column-menu-button",
+            onClick: () => onSort?.(column.id, false),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ArrowUp, { className: "mr-2 size-4" }),
+              "Ascending",
+              currentSort === "asc" && /* @__PURE__ */ jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "descending-column-menu-button",
+            onClick: () => onSort?.(column.id, true),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ArrowDown, { className: "mr-2 size-4" }),
+              "Descending",
+              currentSort === "desc" && /* @__PURE__ */ jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" })
+            ]
+          }
+        )
+      ] }),
+      enableAddColumn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "insert-right-column-menu-button",
+            onClick: () => onAddColumn?.(columnIndex + 1),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }),
+              "Insert column right"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "insert-left-column-menu-button",
+            onClick: () => onAddColumn?.(columnIndex),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }),
+              "Insert column left"
+            ]
+          }
+        )
+      ] }),
+      isHidable && onHideColumn && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        primitives_DropdownMenu.DropdownMenuItem,
+        {
+          "data-testid": "hide-column-menu-button",
+          onClick: () => onHideColumn(column.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(EyeOff, { className: "mr-2 size-4" }),
+            "Hide column"
+          ]
         }
-        return columns;
-    }, [columns, selectionColumn]);
-    const resolvedColumnOrder = React.useMemo(() => {
-        if (columnOrder.length === 0)
-            return [];
-        if (selectionColumn && !columnOrder.includes("_selection")) {
-            return ["_selection", ...columnOrder];
+      ) }),
+      isDeletable && onDeleteColumn && /* @__PURE__ */ jsxRuntime.jsxs(
+        primitives_DropdownMenu.DropdownMenuItem,
+        {
+          "data-testid": "delete-column-menu-button",
+          onClick: () => onDeleteColumn(column.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "mr-2 size-4" }),
+            "Delete column"
+          ]
         }
-        return columnOrder;
-    }, [columnOrder, selectionColumn]);
-    const resolvedColumnPinning = React.useMemo(() => {
-        if (!selectionColumn || !enableColumnFreeze)
-            return columnPinning;
-        const left = columnPinning.left ?? [];
-        if (left.includes("_selection"))
-            return columnPinning;
-        return { ...columnPinning, left: ["_selection", ...left] };
-    }, [columnPinning, selectionColumn, enableColumnFreeze]);
-    const table = useReactTable({
-        data,
-        columns: allColumns,
-        getCoreRowModel: getCoreRowModel(),
-        getRowId,
-        manualSorting: true,
-        enableSorting,
-        state: {
-            sorting,
-            pagination: paginationState,
-            rowSelection,
-            columnPinning: resolvedColumnPinning,
-            columnVisibility,
-            columnOrder: resolvedColumnOrder,
-        },
-        onSortingChange,
-        manualPagination: true,
-        pageCount,
-        onPaginationChange: () => { },
-        enableRowSelection,
-        onRowSelectionChange,
-        enableColumnResizing: enableColumnResize,
-        columnResizeMode: "onChange",
-        onColumnPinningChange,
-        onColumnVisibilityChange,
-        onColumnOrderChange,
-    });
-    const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = React.useState(false);
-    const isAutoSelectingRef = React.useRef(false);
-    const bulkSelectedRef = React.useRef(false);
-    bulkSelectedRef.current = bulkSelectedAllRows;
-    // Auto-select all page rows when in bulk mode (handles page navigation)
-    React.useEffect(() => {
-        if (bulkSelectedAllRows) {
-            isAutoSelectingRef.current = true;
-            table.toggleAllPageRowsSelected(true);
-            // Reset flag after React processes the state update
-            requestAnimationFrame(() => {
-                isAutoSelectingRef.current = false;
-            });
+      ),
+      enableColumnFreeze && onTogglePin && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        primitives_DropdownMenu.DropdownMenuItem,
+        {
+          "data-testid": "freeze-unfreeze-column-menu-button",
+          onClick: () => onTogglePin(column.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Pin, { className: "mr-2 size-4" }),
+            isColumnPinned ? "Unfreeze column" : "Freeze column"
+          ]
         }
-    }, [bulkSelectedAllRows, data]);
-    const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
-    const showSelectAllCallout = !!bulkSelectAllRowsProps &&
-        isAllPageRowsSelected &&
-        pageCount > 1 &&
-        !bulkSelectedAllRows;
-    const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
-    const handleBulkSelectAll = () => {
-        setBulkSelectedAllRowsInternal(true);
-        bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
-    };
-    const handleClearBulkSelection = () => {
+      ) }),
+      onMoveColumn && (canMoveLeft || canMoveRight) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        canMoveLeft && /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "move-column-left-menu-button",
+            onClick: () => onMoveColumn(column.id, -1),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(MoveLeft, { className: "mr-2 size-4" }),
+              "Move column left"
+            ]
+          }
+        ),
+        canMoveRight && /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": "move-column-right-menu-button",
+            onClick: () => onMoveColumn(column.id, 1),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(MoveRight, { className: "mr-2 size-4" }),
+              "Move column right"
+            ]
+          }
+        )
+      ] }),
+      moreActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: moreActions.map((action) => {
+        const ActionIcon = action.icon;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_DropdownMenu.DropdownMenuItem,
+          {
+            "data-testid": `${action.type}-column-menu-button`,
+            onClick: () => onMoreActionClick?.(action.type, column.id),
+            children: [
+              ActionIcon && /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { className: "mr-2 size-4" }),
+              action.label
+            ]
+          },
+          action.type
+        );
+      }) })
+    ] })
+  ] }) });
+};
+
+const DataTable = ({
+  columns,
+  data,
+  getRowId: getRowIdProp,
+  sorting: sortingProp,
+  onSortingChange: onSortingChangeProp,
+  onSort: onSortProp,
+  enableSorting = false,
+  enableURLSort = true,
+  totalCount,
+  pageSize = DEFAULT_PAGE_SIZE,
+  currentPage: currentPageProp,
+  onPageChange: onPageChangeProp,
+  enableURLPagination = true,
+  enableRowSelection: enableRowSelectionProp,
+  selectedRowKeys,
+  onRowSelect,
+  bulkSelectAllRowsProps,
+  enableColumnResize = true,
+  enableColumnFreeze = true,
+  columnPinning: columnPinningProp,
+  onColumnPinningChange: onColumnPinningChangeProp,
+  localStorageKeyPrefix,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange: onColumnVisibilityChangeProp,
+  onColumnHide: onColumnHideProp,
+  enableColumnReorder = false,
+  columnOrder: columnOrderProp,
+  onColumnOrderChange: onColumnOrderChangeProp,
+  enableAddColumn = false,
+  onColumnAdd,
+  onColumnDelete,
+  onColumnUpdate,
+  onMoreActionClick,
+  enableHeaderMenu,
+  loading = false,
+  bordered = true,
+  className,
+  emptyMessage,
+  onRowClick,
+  allowRowClick = true
+}) => {
+  const getRowId = React.useMemo(
+    () => getRowIdProp ?? ((row) => row.id),
+    [getRowIdProp]
+  );
+  const { sorting, onSortingChange } = useTableSort({
+    sorting: sortingProp,
+    onSortingChange: onSortingChangeProp,
+    onSort: onSortProp,
+    enableURLSort
+  });
+  const { currentPage, pageCount, paginationState, onPageChange } = useTablePagination({
+    totalCount,
+    pageSize,
+    currentPage: currentPageProp,
+    onPageChange: onPageChangeProp,
+    enableURLPagination
+  });
+  const {
+    rowSelection,
+    onRowSelectionChange: originalOnRowSelectionChange,
+    selectionColumn,
+    enableRowSelection
+  } = useTableSelection({
+    enableRowSelection: enableRowSelectionProp,
+    selectedRowKeys,
+    onRowSelect,
+    data,
+    getRowId
+  });
+  const onRowSelectionChange = React.useCallback(
+    (updaterOrValue) => {
+      if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
         setBulkSelectedAllRowsInternal(false);
         bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
-        table.toggleAllPageRowsSelected(false);
-        onRowSelect?.([], []);
-    };
-    const scrollContainerRef = React.useRef(null);
-    const [scrollState, setScrollState] = React.useState({
-        scrolledStart: false,
-        scrolledEnd: false,
-    });
-    React.useEffect(() => {
-        const el = scrollContainerRef.current;
-        if (!el)
-            return;
-        const update = () => {
-            const { scrollLeft, scrollWidth, clientWidth } = el;
-            const maxScroll = scrollWidth - clientWidth;
-            setScrollState({
-                scrolledStart: scrollLeft > 0,
-                scrolledEnd: scrollLeft < maxScroll - 1,
-            });
-        };
-        update();
-        el.addEventListener("scroll", update, { passive: true });
-        const resizeObserver = new ResizeObserver(update);
-        resizeObserver.observe(el);
-        return () => {
-            el.removeEventListener("scroll", update);
-            resizeObserver.disconnect();
-        };
-    }, []);
-    const handleSort = (columnId, desc) => {
-        const isSameSort = sorting.length > 0 &&
-            sorting[0].id === columnId &&
-            sorting[0].desc === desc;
-        if (isSameSort) {
-            onSortingChange([]);
-        }
-        else {
-            onSortingChange([{ id: columnId, desc }]);
-        }
+      }
+      originalOnRowSelectionChange(updaterOrValue);
+    },
+    [originalOnRowSelectionChange, bulkSelectAllRowsProps]
+  );
+  const {
+    columnPinning,
+    onColumnPinningChange,
+    toggleColumnPin,
+    isColumnPinned
+  } = useColumnPinning({
+    enabled: enableColumnFreeze,
+    columnPinning: columnPinningProp,
+    onColumnPinningChange: onColumnPinningChangeProp,
+    localStorageKeyPrefix
+  });
+  const { columnVisibility, onColumnVisibilityChange, hideColumn } = useColumnVisibility({
+    columnVisibility: columnVisibilityProp,
+    onColumnVisibilityChange: onColumnVisibilityChangeProp,
+    onColumnHide: onColumnHideProp
+  });
+  const { columnOrder, onColumnOrderChange, moveColumn } = useColumnOrdering({
+    enabled: enableColumnReorder,
+    columnOrder: columnOrderProp,
+    onColumnOrderChange: onColumnOrderChangeProp
+  });
+  const showHeaderMenu = enableHeaderMenu ?? (enableColumnFreeze || enableAddColumn || !!onColumnHideProp || !!onColumnDelete || !!onColumnUpdate || !!onMoreActionClick);
+  const allColumns = React.useMemo(() => {
+    if (selectionColumn) {
+      return [selectionColumn, ...columns];
+    }
+    return columns;
+  }, [columns, selectionColumn]);
+  const resolvedColumnOrder = React.useMemo(() => {
+    if (columnOrder.length === 0) return [];
+    if (selectionColumn && !columnOrder.includes("_selection")) {
+      return ["_selection", ...columnOrder];
+    }
+    return columnOrder;
+  }, [columnOrder, selectionColumn]);
+  const resolvedColumnPinning = React.useMemo(() => {
+    if (!selectionColumn || !enableColumnFreeze) return columnPinning;
+    const left = columnPinning.left ?? [];
+    if (left.includes("_selection")) return columnPinning;
+    return { ...columnPinning, left: ["_selection", ...left] };
+  }, [columnPinning, selectionColumn, enableColumnFreeze]);
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId,
+    manualSorting: true,
+    enableSorting,
+    state: {
+      sorting,
+      pagination: paginationState,
+      rowSelection,
+      columnPinning: resolvedColumnPinning,
+      columnVisibility,
+      columnOrder: resolvedColumnOrder
+    },
+    onSortingChange,
+    manualPagination: true,
+    pageCount,
+    onPaginationChange: () => {
+    },
+    enableRowSelection,
+    onRowSelectionChange,
+    enableColumnResizing: enableColumnResize,
+    columnResizeMode: "onChange",
+    onColumnPinningChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange
+  });
+  const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = React.useState(false);
+  const isAutoSelectingRef = React.useRef(false);
+  const bulkSelectedRef = React.useRef(false);
+  bulkSelectedRef.current = bulkSelectedAllRows;
+  React.useEffect(() => {
+    if (bulkSelectedAllRows) {
+      isAutoSelectingRef.current = true;
+      table.toggleAllPageRowsSelected(true);
+      requestAnimationFrame(() => {
+        isAutoSelectingRef.current = false;
+      });
+    }
+  }, [bulkSelectedAllRows, data]);
+  const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
+  const showSelectAllCallout = !!bulkSelectAllRowsProps && isAllPageRowsSelected && pageCount > 1 && !bulkSelectedAllRows;
+  const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
+  const handleBulkSelectAll = () => {
+    setBulkSelectedAllRowsInternal(true);
+    bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
+  };
+  const handleClearBulkSelection = () => {
+    setBulkSelectedAllRowsInternal(false);
+    bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+    table.toggleAllPageRowsSelected(false);
+    onRowSelect?.([], []);
+  };
+  const scrollContainerRef = React.useRef(null);
+  const [scrollState, setScrollState] = React.useState({
+    scrolledStart: false,
+    scrolledEnd: false
+  });
+  React.useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    const update = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const maxScroll = scrollWidth - clientWidth;
+      setScrollState({
+        scrolledStart: scrollLeft > 0,
+        scrolledEnd: scrollLeft < maxScroll - 1
+      });
     };
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsxRuntime.jsx(LoadingOverlay, {}), (showSelectAllCallout || showAllSelectedCallout) && (jsxRuntime.jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: isAllPageRowsSelected, isBulkAllSelected: bulkSelectedAllRows, onBulkSelectAll: handleBulkSelectAll, onClearBulkSelection: handleClearBulkSelection })), jsxRuntime.jsx("div", { ref: scrollContainerRef, "data-scrolled-start": scrollState.scrolledStart || undefined, "data-scrolled-end": scrollState.scrolledEnd || undefined, className: utils.cn("group/scroll min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxRuntime.jsxs(primitives_Table.Table, { children: [jsxRuntime.jsx(primitives_Table.TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
-                                const dataHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");
-                                const totalDataSize = dataHeaders.reduce((sum, h) => sum + h.getSize(), 0);
-                                return (jsxRuntime.jsx(primitives_Table.TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
-                                        const isPinned = header.column.getIsPinned();
-                                        const isSelectionCol = header.column.id === "_selection";
-                                        const columnIndexInData = dataHeaders.findIndex(h => h.id === header.id);
-                                        return (jsxRuntime.jsxs(primitives_Table.TableHead, { className: utils.cn("group/head relative", header.column.getCanSort() &&
-                                                "cursor-pointer select-none", isSelectionCol && "!pe-2", isPinned && "sticky z-10 bg-muted", isPinned === "left" &&
-                                                "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
-                                                "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
-                                                width: selectionColumn && isSelectionCol
-                                                    ? 0
-                                                    : selectionColumn
-                                                        ? `${(header.getSize() / totalDataSize) * 100}%`
-                                                        : header.getSize(),
-                                                minWidth: enableColumnResize
-                                                    ? header.getSize()
-                                                    : undefined,
-                                                ...(isPinned === "left"
-                                                    ? {
-                                                        left: header.column.getStart("left"),
-                                                    }
-                                                    : {}),
-                                                ...(isPinned === "right"
-                                                    ? {
-                                                        right: header.column.getAfter("right"),
-                                                    }
-                                                    : {}),
-                                            }, onClick: header.column.getCanSort()
-                                                ? header.column.getToggleSortingHandler()
-                                                : undefined, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("div", { className: "flex-1 truncate", children: flexRender(header.column.columnDef.header, header.getContext()) }), jsxRuntime.jsx(SortIndicator, { column: header.column }), showHeaderMenu && !isSelectionCol && (jsxRuntime.jsx(HeaderCellMenu, { column: header.column, columnIndex: columnIndexInData, enableAddColumn: enableAddColumn, enableColumnFreeze: enableColumnFreeze, isColumnPinned: isColumnPinned(header.column.id), canMoveLeft: headerIndex > (selectionColumn ? 1 : 0), canMoveRight: headerIndex < headerGroup.headers.length - 1, onSort: handleSort, onHideColumn: onColumnHideProp ? hideColumn : undefined, onTogglePin: toggleColumnPin, onAddColumn: onColumnAdd, onDeleteColumn: onColumnDelete, onMoveColumn: onColumnUpdate
-                                                                ? (colId, dir) => moveColumn(colId, dir)
-                                                                : undefined, onMoreActionClick: onMoreActionClick }))] })), enableColumnResize && jsxRuntime.jsx(ResizeHandle, { header: header })] }, header.id));
-                                    }) }, headerGroup.id));
-                            }) }), jsxRuntime.jsx(primitives_Table.TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsxRuntime.jsx(primitives_Table.TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: utils.cn("group data-[state=selected]:bg-info", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
-                                    ? event => onRowClick(event, row.original, row.index)
-                                    : undefined, children: row.getVisibleCells().map(cell => {
-                                    const isPinned = cell.column.getIsPinned();
-                                    const isSelCell = cell.column.id === "_selection";
-                                    return (jsxRuntime.jsx(primitives_Table.TableCell, { className: utils.cn(isSelCell && "!pe-2", isPinned &&
-                                            "sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-info", isPinned === "left" &&
-                                            "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
-                                            "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
-                                            width: selectionColumn && isSelCell
-                                                ? 0
-                                                : cell.column.getSize(),
-                                            minWidth: enableColumnResize
-                                                ? cell.column.getSize()
-                                                : undefined,
-                                            ...(isPinned === "left"
-                                                ? {
-                                                    left: cell.column.getStart("left"),
-                                                }
-                                                : {}),
-                                            ...(isPinned === "right"
-                                                ? {
-                                                    right: cell.column.getAfter("right"),
-                                                }
-                                                : {}),
-                                        }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                }) }, row.id)))) : (jsxRuntime.jsx(EmptyState, { colSpan: allColumns.length, message: emptyMessage })) })] }) }), totalCount !== undefined && totalCount > 0 && (jsxRuntime.jsx(DataTablePagination, { currentPage: currentPage, pageCount: pageCount, onPageChange: onPageChange }))] }));
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const handleSort = (columnId, desc) => {
+    const isSameSort = sorting.length > 0 && sorting[0].id === columnId && sorting[0].desc === desc;
+    if (isSameSort) {
+      onSortingChange([]);
+    } else {
+      onSortingChange([{ id: columnId, desc }]);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [
+    loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingOverlay, {}),
+    (showSelectAllCallout || showAllSelectedCallout) && /* @__PURE__ */ jsxRuntime.jsx(
+      BulkSelectCallout,
+      {
+        bulkSelectAllRowsProps,
+        isAllPageRowsSelected,
+        isBulkAllSelected: bulkSelectedAllRows,
+        onBulkSelectAll: handleBulkSelectAll,
+        onClearBulkSelection: handleClearBulkSelection
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollContainerRef,
+        "data-scrolled-start": scrollState.scrolledStart || void 0,
+        "data-scrolled-end": scrollState.scrolledEnd || void 0,
+        className: utils.cn(
+          "group/scroll min-h-0 flex-1 overflow-auto",
+          bordered && "rounded-lg border"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(primitives_Table.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(primitives_Table.TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map((headerGroup) => {
+            const dataHeaders = headerGroup.headers.filter(
+              (header) => header.column.id !== "_selection"
+            );
+            const totalDataSize = dataHeaders.reduce(
+              (sum, header) => sum + header.getSize(),
+              0
+            );
+            return /* @__PURE__ */ jsxRuntime.jsx(primitives_Table.TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
+              const isPinned = header.column.getIsPinned();
+              const isSelectionCol = header.column.id === "_selection";
+              const columnIndexInData = dataHeaders.findIndex(
+                (dataHeader) => dataHeader.id === header.id
+              );
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                primitives_Table.TableHead,
+                {
+                  className: utils.cn(
+                    "group/head relative",
+                    header.column.getCanSort() && "cursor-pointer select-none",
+                    isSelectionCol && "!pe-2",
+                    isPinned && "sticky z-10 bg-muted",
+                    isPinned === "left" && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
+                    isPinned === "right" && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
+                  ),
+                  style: {
+                    width: selectionColumn && isSelectionCol ? 0 : selectionColumn ? `${header.getSize() / totalDataSize * 100}%` : header.getSize(),
+                    minWidth: enableColumnResize ? header.getSize() : void 0,
+                    ...isPinned === "left" ? {
+                      left: header.column.getStart("left")
+                    } : {},
+                    ...isPinned === "right" ? {
+                      right: header.column.getAfter("right")
+                    } : {}
+                  },
+                  onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+                  children: [
+                    header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 truncate", children: flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { column: header.column }),
+                      showHeaderMenu && !isSelectionCol && /* @__PURE__ */ jsxRuntime.jsx(
+                        HeaderCellMenu,
+                        {
+                          column: header.column,
+                          columnIndex: columnIndexInData,
+                          enableAddColumn,
+                          enableColumnFreeze,
+                          isColumnPinned: isColumnPinned(
+                            header.column.id
+                          ),
+                          canMoveLeft: headerIndex > (selectionColumn ? 1 : 0),
+                          canMoveRight: headerIndex < headerGroup.headers.length - 1,
+                          onSort: handleSort,
+                          onHideColumn: onColumnHideProp ? hideColumn : void 0,
+                          onTogglePin: toggleColumnPin,
+                          onAddColumn: onColumnAdd,
+                          onDeleteColumn: onColumnDelete,
+                          onMoveColumn: onColumnUpdate ? (colId, dir) => moveColumn(colId, dir) : void 0,
+                          onMoreActionClick
+                        }
+                      )
+                    ] }),
+                    enableColumnResize && /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { header })
+                  ]
+                },
+                header.id
+              );
+            }) }, headerGroup.id);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(primitives_Table.TableBody, { className: loading ? "opacity-50" : void 0, children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+            primitives_Table.TableRow,
+            {
+              "data-state": row.getIsSelected() ? "selected" : void 0,
+              className: utils.cn(
+                "group data-[state=selected]:bg-info",
+                allowRowClick && onRowClick && "cursor-pointer"
+              ),
+              onClick: allowRowClick && onRowClick ? (event) => onRowClick(event, row.original, row.index) : void 0,
+              children: row.getVisibleCells().map((cell) => {
+                const isPinned = cell.column.getIsPinned();
+                const isSelCell = cell.column.id === "_selection";
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  primitives_Table.TableCell,
+                  {
+                    className: utils.cn(
+                      isSelCell && "!pe-2",
+                      isPinned && "sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-info",
+                      isPinned === "left" && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
+                      isPinned === "right" && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
+                    ),
+                    style: {
+                      width: selectionColumn && isSelCell ? 0 : cell.column.getSize(),
+                      minWidth: enableColumnResize ? cell.column.getSize() : void 0,
+                      ...isPinned === "left" ? {
+                        left: cell.column.getStart("left")
+                      } : {},
+                      ...isPinned === "right" ? {
+                        right: cell.column.getAfter("right")
+                      } : {}
+                    },
+                    children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          )) : /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { colSpan: allColumns.length, message: emptyMessage }) })
+        ] })
+      }
+    ),
+    totalCount !== void 0 && totalCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      DataTablePagination,
+      {
+        currentPage,
+        pageCount,
+        onPageChange
+      }
+    )
+  ] });
 };
 
 exports.DataTable = DataTable;
@@ -3853,4 +4245,4 @@ exports.useColumnVisibility = useColumnVisibility;
 exports.useTablePagination = useTablePagination;
 exports.useTableSelection = useTableSelection;
 exports.useTableSort = useTableSort;
-//# sourceMappingURL=DataTable-Dg0pX7Ng.js.map
+//# sourceMappingURL=DataTable-DRGW8JVP.js.map