@nexgrid/react 0.1.0 → 0.2.1

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   DEFAULT_PAGE_SIZE: () => import_core4.DEFAULT_PAGE_SIZE,
   NexGrid: () => NexGrid,
   PAGE_SIZES: () => import_core4.PAGE_SIZES,
+  TableX: () => TableX,
   buildODataUrl: () => import_core4.buildODataUrl,
   buildQueryUrl: () => import_core4.buildQueryUrl,
   defaultQuery: () => import_core4.defaultQuery,
@@ -48,16 +49,18 @@ __export(index_exports, {
   toODataParams: () => import_core4.toODataParams,
   totalPagesFor: () => import_core4.totalPagesFor,
   useClientNexGrid: () => useClientNexGrid,
+  useClientTableX: () => useClientTableX,
   withFilter: () => import_core4.withFilter,
   withPage: () => import_core4.withPage,
   withPageSize: () => import_core4.withPageSize,
   withSearch: () => import_core4.withSearch,
   withSort: () => import_core4.withSort,
+  withToggledMultiSort: () => import_core4.withToggledMultiSort,
   withToggledSort: () => import_core4.withToggledSort
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/nex-grid.tsx
+// src/table-x.tsx
 var React4 = __toESM(require("react"), 1);
 var import_core2 = require("@nexgrid/core");
 
@@ -99,29 +102,22 @@ function XIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
   ] });
 }
-function SlidersIcon(props) {
+function ColumnsIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "14", y1: "4", y2: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", x2: "3", y1: "4", y2: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "12", y1: "12", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", x2: "3", y1: "12", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "16", y1: "20", y2: "20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "3", y1: "20", y2: "20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "14", x2: "14", y1: "2", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", x2: "8", y1: "10", y2: "14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", x2: "16", y1: "18", y2: "22" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3v18" })
   ] });
 }
-function FilterIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) });
-}
-function DownloadIcon(props) {
+function DensityIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4.5", width: "18", height: "6", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "13.5", width: "18", height: "6", rx: "1.5" })
   ] });
 }
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+}
 function FileSpreadsheetIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
@@ -170,6 +166,26 @@ function ArrowUpDownIcon(props) {
 function CheckIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
 }
+function RotateCcwIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3v5h5" })
+  ] });
+}
+function DownloadTrayIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+  ] });
+}
+function DotsVerticalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "5", r: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "19", r: "1.5" })
+  ] });
+}
 
 // src/render.tsx
 var React = __toESM(require("react"), 1);
@@ -201,9 +217,9 @@ function bodyCellStyle(col) {
 }
 function headerInnerClass(col) {
   const align = col.meta?.align;
-  if (align === "center") return "nxg-th-inner nxg-th-inner--center";
-  if (align === "right") return "nxg-th-inner nxg-th-inner--right";
-  return "nxg-th-inner";
+  if (align === "center") return "tbx-th-inner tbx-th-inner--center";
+  if (align === "right") return "tbx-th-inner tbx-th-inner--right";
+  return "tbx-th-inner";
 }
 function renderTemplate(template, values) {
   const parts = [];
@@ -275,7 +291,7 @@ function useDropdown() {
   return { isOpen, toggle, close, containerRef, triggerRef };
 }
 
-// src/nex-grid.tsx
+// src/table-x.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function defaultRowId(row) {
   const record = row;
@@ -287,53 +303,189 @@ var DENSITY_LABEL_KEY = {
   default: "densityDefault",
   comfortable: "densityComfortable"
 };
-function NexGrid({
-  columns,
-  data,
-  total,
-  query,
-  onQueryChange,
-  caption,
-  density: initialDensity = "default",
-  isLoading = false,
-  error = false,
-  onRetry,
-  enableSelection = false,
-  onSelectionChange,
-  enableSearch = true,
-  searchPlaceholder,
-  toolbarActions,
-  onRowClick,
-  getRowId = defaultRowId,
-  className,
-  showSerialNumber = true,
-  enableExport = true,
-  exportFileName,
-  onExportAll,
-  fetchEndpoint,
-  badgeRules,
-  locale: localeOverrides,
-  onNotify,
-  theme = "light"
-}) {
+function TableX(props) {
+  const {
+    columns,
+    data,
+    total: totalProp,
+    query: queryProp,
+    onQueryChange: onQueryChangeProp,
+    clientSidePagination,
+    paginationMode,
+    caption,
+    density: initialDensity = "default",
+    isLoading = false,
+    error = false,
+    onRetry,
+    enableSelection = false,
+    selectionMode = "multi",
+    enableColumnFilters = true,
+    enableColumnResize = true,
+    onSelectionChange,
+    enableSearch = true,
+    searchPlaceholder,
+    enableColumns = true,
+    showColumnsButton,
+    enableDensity = true,
+    showDensityButton,
+    enableExport = true,
+    showExportButton,
+    enableSorting = true,
+    enablePagination = true,
+    showPagination,
+    enableRowsPerPage = true,
+    showRowsPerPage,
+    enableJumpToPage = true,
+    showJumpToPage,
+    showToolbar = true,
+    showFooter = true,
+    renderExpandedRow,
+    enableBulkActions = true,
+    bulkActions,
+    enableSummaryRow,
+    enableColumnReorder = false,
+    onColumnOrderChange,
+    onCellEdit,
+    storageKey,
+    showFilterPills = true,
+    toolbarActions,
+    onRowClick,
+    getRowId = defaultRowId,
+    className,
+    showSerialNumber = true,
+    exportFileName,
+    onExportAll,
+    fetchEndpoint,
+    badgeRules,
+    locale: localeOverrides,
+    onNotify,
+    theme = "light"
+  } = props;
+  const isClientSide = clientSidePagination === true || paginationMode === "client" || onQueryChangeProp === void 0 && queryProp === void 0;
+  const [internalQuery, setInternalQuery] = React4.useState(() => queryProp ?? (0, import_core2.defaultQuery)());
+  const query = queryProp ?? internalQuery;
+  const onQueryChange = React4.useCallback(
+    (next) => {
+      setInternalQuery(next);
+      onQueryChangeProp?.(next);
+    },
+    [onQueryChangeProp]
+  );
+  const clientPaged = React4.useMemo(() => {
+    if (!isClientSide) return null;
+    return (0, import_core2.queryClientData)(data, query);
+  }, [isClientSide, data, query]);
+  const rows = isClientSide ? clientPaged?.items ?? data : data;
+  const total = isClientSide ? clientPaged?.total ?? data.length : totalProp ?? data.length;
   const locale = (0, import_core2.resolveLocale)(localeOverrides);
   const boolLabels = { yes: locale.booleanYes, no: locale.booleanNo };
+  const isColumnsVisible = enableColumns && showColumnsButton !== false;
+  const isDensityVisible = enableDensity && showDensityButton !== false;
+  const isExportVisible = enableExport && showExportButton !== false;
+  const isPaginationVisible = enablePagination && showPagination !== false;
+  const isRowsPerPageVisible = enableRowsPerPage && showRowsPerPage !== false;
+  const isJumpToPageVisible = enableJumpToPage && showJumpToPage !== false;
+  const [colList, setColList] = React4.useState(columns);
+  React4.useEffect(() => {
+    setColList(columns);
+  }, [columns]);
   const [density, setDensity] = React4.useState(initialDensity);
   const [hiddenCols, setHiddenCols] = React4.useState(
-    () => (0, import_core2.initialHiddenColumns)(columns)
+    () => (0, import_core2.initialHiddenColumns)((0, import_core2.flattenColumns)(columns))
   );
   const [selectedIds, setSelectedIds] = React4.useState(
     () => /* @__PURE__ */ new Set()
   );
+  const [expandedRows, setExpandedRows] = React4.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [editingCell, setEditingCell] = React4.useState(null);
+  const [draggedColId, setDraggedColId] = React4.useState(null);
   const [isExporting, setIsExporting] = React4.useState(false);
+  const [openFilterCol, setOpenFilterCol] = React4.useState(null);
+  const [colWidths, setColWidths] = React4.useState({});
+  React4.useEffect(() => {
+    if (!storageKey) return;
+    const persisted = (0, import_core2.loadGridState)(storageKey);
+    if (persisted) {
+      if (persisted.density) setDensity(persisted.density);
+      if (persisted.columnWidths) setColWidths(persisted.columnWidths);
+      if (persisted.hiddenColumns && Array.isArray(persisted.hiddenColumns)) {
+        const hiddenMap = {};
+        for (const col of columns) {
+          const id = (0, import_core2.getColumnId)(col);
+          if (id) hiddenMap[id] = persisted.hiddenColumns.includes(id);
+        }
+        setHiddenCols(hiddenMap);
+      }
+      if (persisted.columnOrder && Array.isArray(persisted.columnOrder)) {
+        const colMap = new Map(columns.map((c) => [(0, import_core2.getColumnId)(c), c]));
+        const reordered = [];
+        for (const id of persisted.columnOrder) {
+          const col = colMap.get(id);
+          if (col) {
+            reordered.push(col);
+            colMap.delete(id);
+          }
+        }
+        for (const remaining of colMap.values()) {
+          reordered.push(remaining);
+        }
+        if (reordered.length === columns.length) {
+          setColList(reordered);
+        }
+      }
+    }
+  }, [storageKey, columns]);
+  React4.useEffect(() => {
+    if (!storageKey) return;
+    const hiddenList = Object.entries(hiddenCols).filter(([_, isHidden]) => isHidden).map(([id]) => id);
+    (0, import_core2.saveGridState)(storageKey, {
+      density,
+      columnWidths: colWidths,
+      columnOrder: colList.map(import_core2.getColumnId).filter(Boolean),
+      hiddenColumns: hiddenList
+    });
+  }, [storageKey, density, hiddenCols, colList, colWidths]);
   const columnsMenu = useDropdown();
   const densityMenu = useDropdown();
   const exportMenu = useDropdown();
+  const handleResetView = React4.useCallback(() => {
+    if (storageKey) {
+      (0, import_core2.clearGridState)(storageKey);
+    }
+    setDensity(initialDensity);
+    setColWidths({});
+    setColList(columns);
+    setHiddenCols((0, import_core2.initialHiddenColumns)((0, import_core2.flattenColumns)(columns)));
+    columnsMenu.close();
+  }, [storageKey, initialDensity, columns, columnsMenu]);
+  const leafCols = React4.useMemo(() => (0, import_core2.flattenColumns)(colList), [colList]);
+  const autoFitColumn = React4.useCallback((id) => {
+    const col = leafCols.find((c) => (0, import_core2.getColumnId)(c) === id);
+    if (!col) return;
+    const meta = col.meta ?? {};
+    let maxContentWidth = 0;
+    const headerTitle = (0, import_core2.getColumnTitle)(col) || id;
+    maxContentWidth = Math.max(maxContentWidth, headerTitle.length * 8.5 + 50);
+    for (const row of rows) {
+      const rawVal = (0, import_core2.getCellValue)(col, row);
+      const val = (0, import_core2.getCellText)(rawVal);
+      if (val) {
+        maxContentWidth = Math.max(maxContentWidth, String(val).length * 8 + 26);
+      }
+    }
+    const minW = meta.minWidth ?? 60;
+    const maxW = 550;
+    const finalWidth = Math.min(maxW, Math.max(minW, Math.round(maxContentWidth)));
+    setColWidths((prev) => ({ ...prev, [id]: finalWidth }));
+  }, [leafCols, rows]);
   const instanceId = React4.useId();
   const columnsButtonId = `${instanceId}-columns`;
   const densityButtonId = `${instanceId}-density`;
   const exportButtonId = `${instanceId}-export`;
   const jumpInputId = `${instanceId}-jump`;
+  const rootRef = React4.useRef(null);
   const notify = (type, message) => {
     onNotify?.({ type, message });
   };
@@ -342,127 +494,193 @@ function NexGrid({
   const totalPages = (0, import_core2.totalPagesFor)(total, pageSize);
   const range = (0, import_core2.getRecordRange)(currentPage, pageSize, total);
   const sort = (0, import_core2.primarySort)(query);
+  const headerRows = React4.useMemo(
+    () => (0, import_core2.buildHeaderRows)(colList, hiddenCols),
+    [colList, hiddenCols]
+  );
   const visible = React4.useMemo(
-    () => (0, import_core2.visibleColumns)(columns, hiddenCols),
-    [columns, hiddenCols]
+    () => (0, import_core2.visibleColumns)(leafCols, hiddenCols),
+    [leafCols, hiddenCols]
   );
-  const hideable = React4.useMemo(() => columns.filter(import_core2.isHideable), [columns]);
+  const hideable = React4.useMemo(() => leafCols.filter(import_core2.isHideable), [leafCols]);
   const pageItems = React4.useMemo(
     () => (0, import_core2.getPageNumbers)(currentPage, totalPages),
     [currentPage, totalPages]
   );
-  const pageRowIds = React4.useMemo(() => data.map((row) => getRowId(row)), [data, getRowId]);
-  const columnCount = visible.length + (showSerialNumber ? 1 : 0) + (enableSelection ? 1 : 0);
+  const pageRowIds = React4.useMemo(() => rows.map((row) => getRowId(row)), [rows, getRowId]);
+  const columnCount = visible.length + (renderExpandedRow ? 1 : 0) + (showSerialNumber ? 1 : 0) + (enableSelection ? 1 : 0);
+  const getPinnedOffsets = (visibleCols) => {
+    const leftOffsets2 = /* @__PURE__ */ new Map();
+    const rightOffsets2 = /* @__PURE__ */ new Map();
+    let currentLeft = 0;
+    let lastLeftPinnedId2 = null;
+    if (renderExpandedRow) {
+      leftOffsets2.set("__expand", currentLeft);
+      currentLeft += 40;
+      lastLeftPinnedId2 = "__expand";
+    }
+    if (enableSelection) {
+      leftOffsets2.set("__select", currentLeft);
+      currentLeft += 44;
+      lastLeftPinnedId2 = "__select";
+    }
+    if (showSerialNumber) {
+      leftOffsets2.set("__serial", currentLeft);
+      currentLeft += 56;
+      lastLeftPinnedId2 = "__serial";
+    }
+    for (const col of visibleCols) {
+      const id = (0, import_core2.getColumnId)(col);
+      const pin = col.meta?.pinned;
+      const width = colWidths[id] ?? col.meta?.width ?? 140;
+      if (pin === "left") {
+        leftOffsets2.set(id, currentLeft);
+        currentLeft += width;
+        lastLeftPinnedId2 = id;
+      }
+    }
+    let currentRight = 0;
+    let firstRightPinnedId2 = null;
+    for (let i = visibleCols.length - 1; i >= 0; i--) {
+      const col = visibleCols[i];
+      if (!col) continue;
+      const id = (0, import_core2.getColumnId)(col);
+      const pin = col.meta?.pinned;
+      const width = colWidths[id] ?? col.meta?.width ?? 140;
+      if (pin === "right") {
+        rightOffsets2.set(id, currentRight);
+        currentRight += width;
+        firstRightPinnedId2 = id;
+      }
+    }
+    return { leftOffsets: leftOffsets2, rightOffsets: rightOffsets2, lastLeftPinnedId: lastLeftPinnedId2, firstRightPinnedId: firstRightPinnedId2 };
+  };
+  const { leftOffsets, rightOffsets, lastLeftPinnedId, firstRightPinnedId } = getPinnedOffsets(visible);
   const [searchText, setSearchText] = useDebouncedSearch(query.q ?? "", (text) => {
     onQueryChange((0, import_core2.withSearch)(query, text));
   });
   const [jumpText, setJumpText] = React4.useState(() => String(currentPage));
   React4.useEffect(() => setJumpText(String(currentPage)), [currentPage]);
-  const submitJump = (event) => {
-    event?.preventDefault();
-    const parsed = Number.parseInt(jumpText, 10);
-    if (Number.isFinite(parsed) && parsed >= 1 && parsed <= totalPages) {
-      setJumpText(String(parsed));
-      if (parsed !== currentPage) onQueryChange((0, import_core2.withPage)(query, parsed, totalPages));
+  const submitJump = (raw) => {
+    const page = Number.parseInt(raw, 10);
+    if (Number.isNaN(page) || page < 1 || page > totalPages) {
+      setJumpText(String(currentPage));
       return;
     }
-    setJumpText(String(currentPage));
+    if (page !== currentPage) {
+      onQueryChange((0, import_core2.withPage)(query, page, totalPages));
+    }
   };
-  const toggleSort = (columnId) => {
-    onQueryChange((0, import_core2.withToggledSort)(query, columnId));
+  const toggleSort = (field, multiSort = false) => {
+    const next = multiSort ? (0, import_core2.withToggledMultiSort)(query, field) : (0, import_core2.withToggledSort)(query, field);
+    onQueryChange(next);
   };
-  const selectedOnPage = pageRowIds.filter((id) => selectedIds.has(id)).length;
-  const allPageSelected = pageRowIds.length > 0 && selectedOnPage === pageRowIds.length;
-  const somePageSelected = selectedOnPage > 0 && !allPageSelected;
-  const commitSelection = (next) => {
+  const isSingleSelect = selectionMode === "single";
+  const allPageSelected = pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
+  const somePageSelected = !allPageSelected && pageRowIds.some((id) => selectedIds.has(id));
+  const toggleSelectAll = () => {
+    if (isSingleSelect) return;
+    const next = new Set(selectedIds);
+    if (allPageSelected) {
+      for (const id of pageRowIds) next.delete(id);
+    } else {
+      for (const id of pageRowIds) next.add(id);
+    }
     setSelectedIds(next);
     onSelectionChange?.(Array.from(next), false);
   };
-  const toggleSelectAll = () => {
-    const next = new Set(selectedIds);
-    for (const id of pageRowIds) {
-      if (allPageSelected) next.delete(id);
+  const toggleSelectRow = (id) => {
+    const next = isSingleSelect ? selectedIds.has(id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id]) : new Set(selectedIds);
+    if (!isSingleSelect) {
+      if (next.has(id)) next.delete(id);
       else next.add(id);
     }
-    commitSelection(next);
+    setSelectedIds(next);
+    onSelectionChange?.(Array.from(next), false);
   };
-  const toggleSelectRow = (id) => {
-    const next = new Set(selectedIds);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    commitSelection(next);
+  const deselectAll = () => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+    onSelectionChange?.([], false);
+  };
+  const toggleExpandRow = (id) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
   };
   const toggleColumn = (columnId) => {
     setHiddenCols((prev) => ({ ...prev, [columnId]: prev[columnId] !== true }));
   };
-  const collectExportRows = async () => {
-    if (data.length >= total || !fetchEndpoint) return data;
-    notify("info", (0, import_core2.formatMessage)(locale.exportFetchingAll, { total: total.toLocaleString() }));
-    try {
-      const result = await (0, import_core2.fetchAllPages)(async (page, size) => {
-        const url = (0, import_core2.buildQueryUrl)(fetchEndpoint, {
-          ...query,
-          page,
-          pageSize: (0, import_core2.isPageSize)(size) ? size : query.pageSize
-        });
-        const response = await fetch(url, { cache: "no-store" });
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        return await response.json();
-      });
-      return result.items;
-    } catch {
-      notify("error", locale.exportFetchFailed);
-      return data;
-    }
-  };
   const handleExport = async (format) => {
     exportMenu.close();
     if (onExportAll) {
-      void onExportAll();
+      try {
+        await onExportAll();
+      } catch (err) {
+        notify("error", err instanceof Error ? err.message : "Export failed");
+      }
       return;
     }
     setIsExporting(true);
+    notify("info", "Exporting...");
     try {
-      const rows = await collectExportRows();
-      if (rows.length === 0) {
-        notify("error", locale.exportNoData);
-        return;
+      let exportRows = rows;
+      if (fetchEndpoint) {
+        const full = await (0, import_core2.fetchAllPages)(async (page, size) => {
+          const url = (0, import_core2.buildQueryUrl)(fetchEndpoint, {
+            ...query,
+            page,
+            pageSize: (0, import_core2.isPageSize)(size) ? size : query.pageSize
+          });
+          const response = await fetch(url, { cache: "no-store" });
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          return await response.json();
+        });
+        exportRows = full.items;
+      } else if (isClientSide) {
+        const full = (0, import_core2.queryClientData)(data, query, { paginate: false });
+        exportRows = full.items;
       }
       const exportColumns = (0, import_core2.toExportColumns)(visible, boolLabels);
       const prefix = exportFileName ?? (0, import_core2.filePrefixFromCaption)(caption);
-      if (format === "excel") {
-        const count = (0, import_core2.downloadExcel)({
+      if (format === "clipboard") {
+        const ok = await (0, import_core2.copyToClipboard)(exportRows, exportColumns);
+        if (ok) notify("success", "Copied to clipboard");
+        else notify("error", "Failed to copy to clipboard");
+      } else if (format === "excel") {
+        (0, import_core2.downloadExcel)({
           filename: prefix,
           caption,
-          rows,
+          rows: exportRows,
           columns: exportColumns,
           badgeRules,
           serialHeader: locale.serialHeader
         });
-        notify(
-          "success",
-          (0, import_core2.formatMessage)(locale.exportExcelSuccess, { count: count.toLocaleString() })
-        );
+        notify("success", "Excel downloaded");
       } else {
-        const count = (0, import_core2.downloadCsv)((0, import_core2.timestampedFilename)(prefix), rows, exportColumns);
-        notify(
-          "success",
-          (0, import_core2.formatMessage)(locale.exportCsvSuccess, { count: count.toLocaleString() })
-        );
+        (0, import_core2.downloadCsv)((0, import_core2.timestampedFilename)(prefix), exportRows, exportColumns);
+        notify("success", "CSV downloaded");
       }
+    } catch {
+      notify("error", "Export failed");
     } finally {
       setIsExporting(false);
     }
   };
-  const rootClassName = [
-    "nxg-root",
-    theme === "dark" ? "nxg-dark" : theme === "auto" ? "nxg-auto" : void 0,
+  const rootClasses = [
+    "tbx-root",
+    theme === "dark" ? "tbx-dark" : theme === "auto" ? "tbx-auto" : void 0,
     className
-  ].filter((part) => Boolean(part)).join(" ");
+  ].filter(Boolean);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: rootClassName, "data-density": density, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-state-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "nxg-state-text", children: locale.errorText }),
-      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "nxg-btn", onClick: onRetry, children: locale.retryButton }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: rootClasses.join(" "), "data-density": density, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-state-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "tbx-state-text", children: locale.errorText }),
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type: "button", className: "tbx-btn", onClick: onRetry, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RotateCcwIcon, { className: "tbx-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.retryButton })
+      ] }) : null
     ] }) });
   }
   const rowIsClickable = typeof onRowClick === "function";
@@ -474,56 +692,256 @@ function NexGrid({
     event.preventDefault();
     onRowClick?.(row);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: rootClassName, "data-density": density, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar-group", children: [
-        enableSearch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-search", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchIcon, { className: "nxg-search-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
-            {
-              type: "search",
-              className: "nxg-search-input",
-              value: searchText,
-              onChange: (event) => setSearchText(event.target.value),
-              placeholder: searchPlaceholder ?? locale.searchPlaceholder,
-              "aria-label": `Search ${caption}`
-            }
-          ),
-          searchText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
+  const hasSummary = enableSummaryRow === true || visible.some((col) => col.meta?.aggregation !== void 0);
+  const renderLeafTh = (col, rowSpan = 1, isGroupChild = false) => {
+    const id = (0, import_core2.getColumnId)(col);
+    const sortable = (0, import_core2.isSortable)(col) && enableSorting !== false;
+    const sortIndex = query.sort.findIndex((s) => s.field === id);
+    const sortItem = sortIndex >= 0 ? query.sort[sortIndex] : void 0;
+    const sorted = sortable && sortItem !== void 0;
+    const title = (0, import_core2.getColumnTitle)(col) || id;
+    const meta = col.meta;
+    const activeFilter = query.filter?.[id];
+    const isFilterActive = activeFilter !== void 0 && activeFilter !== "";
+    const customWidth = colWidths[id];
+    const baseStyle = headerCellStyle(col);
+    const thStyle = {
+      ...baseStyle,
+      ...customWidth !== void 0 ? { width: `${customWidth}px` } : {},
+      ...leftOffsets.has(id) ? { left: leftOffsets.get(id) } : {},
+      ...rightOffsets.has(id) ? { right: rightOffsets.get(id) } : {}
+    };
+    const startResize = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const targetTh = e.currentTarget.parentElement || null;
+      const startWidth = targetTh ? targetTh.getBoundingClientRect().width : customWidth ?? meta?.width ?? 120;
+      const onMove = (moveEvent) => {
+        const nextW = Math.max(meta?.minWidth ?? 60, Math.round(startWidth + (moveEvent.clientX - startX)));
+        setColWidths((prev) => ({ ...prev, [id]: nextW }));
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        document.body?.classList.remove("tbx-resizing");
+      };
+      document.body?.classList.add("tbx-resizing");
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "th",
+      {
+        scope: "col",
+        rowSpan: rowSpan > 1 ? rowSpan : void 0,
+        "aria-sort": !sortable ? void 0 : sorted ? sortItem?.dir === "asc" ? "ascending" : "descending" : "none",
+        tabIndex: sortable ? 0 : void 0,
+        "data-column-id": id,
+        "data-tbx-focus": sortable ? `sort:${id}` : void 0,
+        draggable: enableColumnReorder && !isGroupChild,
+        onDragStart: enableColumnReorder && !isGroupChild ? (e) => {
+          setDraggedColId(id);
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", id);
+        } : void 0,
+        onDragOver: enableColumnReorder && !isGroupChild ? (e) => {
+          e.preventDefault();
+        } : void 0,
+        onDrop: enableColumnReorder && !isGroupChild ? (e) => {
+          e.preventDefault();
+          if (!draggedColId || draggedColId === id) return;
+          const fromIdx = colList.findIndex((c) => (0, import_core2.getColumnId)(c) === draggedColId);
+          const toIdx = colList.findIndex((c) => (0, import_core2.getColumnId)(c) === id);
+          if (fromIdx >= 0 && toIdx >= 0) {
+            const nextCols = [...colList];
+            const moved = nextCols[fromIdx];
+            if (!moved) return;
+            nextCols.splice(fromIdx, 1);
+            nextCols.splice(toIdx, 0, moved);
+            setColList(nextCols);
+            onColumnOrderChange?.(nextCols.map(import_core2.getColumnId));
+          }
+        } : void 0,
+        onDragEnd: enableColumnReorder && !isGroupChild ? () => {
+          setDraggedColId(null);
+        } : void 0,
+        className: [
+          "tbx-th",
+          sortable ? "tbx-th--sortable" : void 0,
+          isGroupChild ? "tbx-th--grouped-child" : void 0,
+          enableColumnReorder && !isGroupChild ? "tbx-th--draggable" : void 0,
+          draggedColId === id ? "tbx-th--dragging" : void 0,
+          (0, import_core2.isPinned)(col) === "left" ? "tbx-th--pinned-left" : void 0,
+          (0, import_core2.isPinned)(col) === "right" ? "tbx-th--pinned-right" : void 0,
+          lastLeftPinnedId === id ? "tbx-pinned-border-left" : void 0,
+          firstRightPinnedId === id ? "tbx-pinned-border-right" : void 0
+        ].filter(Boolean).join(" "),
+        style: thStyle,
+        onClick: sortable ? (event) => {
+          const t = event.target;
+          if (t?.closest(".tbx-col-filter-wrap") || t?.closest(".tbx-resize-handle")) return;
+          toggleSort(id, event.shiftKey);
+        } : void 0,
+        onKeyDown: sortable ? (event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          const t = event.target;
+          if (t?.closest(".tbx-col-filter-wrap")) return;
+          event.preventDefault();
+          toggleSort(id, event.shiftKey);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: headerInnerClass(col), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderColumnHeader(col) }),
+            sortable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "tbx-sort-icon-wrap", children: [
+              sorted ? sortItem?.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpIcon, { className: "tbx-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowDownIcon, { className: "tbx-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpDownIcon, { className: "tbx-sort-icon tbx-sort-icon--idle" }),
+              query.sort.length > 1 && sortIndex >= 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-sort-order", children: sortIndex + 1 }) : null
+            ] }) : null,
+            (0, import_core2.isFilterable)(col, enableColumnFilters) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-col-filter-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: isFilterActive ? "tbx-col-filter-btn tbx-col-filter-btn--active" : "tbx-col-filter-btn",
+                  "aria-label": `Filter ${title}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOpenFilterCol(openFilterCol === id ? null : id);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DotsVerticalIcon, { className: "tbx-icon" })
+                }
+              ),
+              openFilterCol === id ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  className: "tbx-filter-popover",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "input",
+                      {
+                        autoFocus: true,
+                        type: "text",
+                        className: "tbx-filter-popover-input",
+                        defaultValue: activeFilter ?? "",
+                        placeholder: `Filter by ${title}...`,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            const val = e.currentTarget.value.trim();
+                            setOpenFilterCol(null);
+                            onQueryChange((0, import_core2.withFilter)(query, id, val || void 0));
+                          } else if (e.key === "Escape") {
+                            setOpenFilterCol(null);
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-filter-popover-actions", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          className: "tbx-filter-popover-btn",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setOpenFilterCol(null);
+                            onQueryChange((0, import_core2.withFilter)(query, id, void 0));
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RotateCcwIcon, { className: "tbx-icon" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.clearFilter })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          className: "tbx-filter-popover-btn tbx-filter-popover-btn--primary",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            const parent = e.currentTarget.closest(".tbx-filter-popover");
+                            const inputEl = parent?.querySelector("input");
+                            const val = inputEl?.value.trim();
+                            setOpenFilterCol(null);
+                            onQueryChange((0, import_core2.withFilter)(query, id, val || void 0));
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "tbx-icon" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.applyFilter })
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          enableColumnResize ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
             {
-              type: "button",
-              className: "nxg-search-clear",
-              onClick: () => setSearchText(""),
-              "aria-label": locale.clearSearch,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon, { className: "nxg-icon" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.clearSearch })
-              ]
+              className: "tbx-resize-handle",
+              onPointerDown: startResize,
+              onDoubleClick: () => autoFitColumn(id)
             }
           ) : null
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: columnsMenu.containerRef, children: [
+        ]
+      },
+      id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: rootClasses.join(" "), "data-density": density, ref: rootRef, children: [
+    showToolbar ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-toolbar-group", children: enableSearch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-search", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchIcon, { className: "tbx-search-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "search",
+            className: "tbx-search-input",
+            value: searchText,
+            onChange: (event) => setSearchText(event.target.value),
+            placeholder: searchPlaceholder ?? locale.searchPlaceholder,
+            "aria-label": `Search ${caption}`
+          }
+        ),
+        searchText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "tbx-search-clear",
+            onClick: () => setSearchText(""),
+            "aria-label": locale.clearSearch,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon, { className: "tbx-icon" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-sr-only", children: locale.clearSearch })
+            ]
+          }
+        ) : null
+      ] }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-toolbar-group tbx-toolbar-group--end", children: [
+        isColumnsVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-wrap", ref: columnsMenu.containerRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               type: "button",
               id: columnsButtonId,
-              className: "nxg-btn",
+              className: "tbx-btn",
               ref: columnsMenu.triggerRef,
               "aria-haspopup": "menu",
               "aria-expanded": columnsMenu.isOpen,
               onClick: columnsMenu.toggle,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SlidersIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ColumnsIcon, { className: "tbx-icon" }),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.columnsButton })
               ]
             }
           ),
-          columnsMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu", role: "menu", "aria-labelledby": columnsButtonId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu-label", children: locale.toggleColumnsLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu-separator" }),
+          columnsMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu", role: "menu", "aria-labelledby": columnsButtonId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-menu-label", children: locale.toggleColumnsLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-menu-separator" }),
             hideable.map((col) => {
               const id = (0, import_core2.getColumnId)(col);
               const checked = hiddenCols[id] !== true;
@@ -531,42 +949,55 @@ function NexGrid({
                 "button",
                 {
                   type: "button",
-                  className: "nxg-menu-item",
+                  className: "tbx-menu-item",
                   role: "menuitemcheckbox",
                   "aria-checked": checked,
                   onClick: () => toggleColumn(id),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "nxg-check" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "tbx-check" }),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: (0, import_core2.getColumnTitle)(col) || id })
                   ]
                 },
                 id
               );
-            })
+            }),
+            storageKey ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-menu-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "tbx-menu-item tbx-menu-item--reset",
+                  role: "menuitem",
+                  onClick: handleResetView,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Reset to default view" })
+                }
+              )
+            ] }) : null
           ] }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: densityMenu.containerRef, children: [
+        ] }) : null,
+        isDensityVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-wrap", ref: densityMenu.containerRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               type: "button",
               id: densityButtonId,
-              className: "nxg-btn nxg-capitalize",
+              className: "tbx-btn tbx-capitalize",
               ref: densityMenu.triggerRef,
               "aria-haspopup": "menu",
               "aria-expanded": densityMenu.isOpen,
               onClick: densityMenu.toggle,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DensityIcon, { className: "tbx-icon" }),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: (0, import_core2.formatMessage)(locale.densityButton, { density }) })
               ]
             }
           ),
-          densityMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-menu", role: "menu", "aria-labelledby": densityButtonId, children: import_core2.DENSITIES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          densityMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-menu", role: "menu", "aria-labelledby": densityButtonId, children: import_core2.DENSITIES.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               type: "button",
-              className: "nxg-menu-item",
+              className: "tbx-menu-item",
               role: "menuitemcheckbox",
               "aria-checked": density === option,
               onClick: () => {
@@ -574,37 +1005,36 @@ function NexGrid({
                 densityMenu.close();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "nxg-check" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "tbx-check" }),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale[DENSITY_LABEL_KEY[option]] })
               ]
             },
             option
           )) }) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-toolbar-group nxg-toolbar-group--end", children: [
-        enableExport ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-wrap", ref: exportMenu.containerRef, children: [
+        ] }) : null,
+        isExportVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-wrap", ref: exportMenu.containerRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               type: "button",
               id: exportButtonId,
-              className: "nxg-btn nxg-btn--export",
+              className: "tbx-btn tbx-btn--export",
               ref: exportMenu.triggerRef,
               disabled: isExporting,
               "aria-haspopup": "menu",
               "aria-expanded": exportMenu.isOpen,
               onClick: exportMenu.toggle,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadIcon, { className: "nxg-icon" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isExporting ? locale.exportingButton : locale.exportButton })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadTrayIcon, { className: "tbx-icon" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isExporting ? locale.exportingButton : locale.exportButton }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDownIcon, { className: "tbx-icon tbx-chevron" })
               ]
             }
           ),
           exportMenu.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
-              className: "nxg-menu nxg-menu--end",
+              className: "tbx-menu tbx-menu--end",
               role: "menu",
               "aria-labelledby": exportButtonId,
               children: [
@@ -612,12 +1042,12 @@ function NexGrid({
                   "button",
                   {
                     type: "button",
-                    className: "nxg-menu-item",
+                    className: "tbx-menu-item",
                     role: "menuitem",
                     onClick: () => void handleExport("excel"),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileSpreadsheetIcon, { className: "nxg-icon--excel" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-item-title", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileSpreadsheetIcon, { className: "tbx-icon--excel" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-item-title", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: locale.exportExcelTitle }),
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: locale.exportExcelSubtitle })
                       ] })
@@ -628,17 +1058,33 @@ function NexGrid({
                   "button",
                   {
                     type: "button",
-                    className: "nxg-menu-item",
+                    className: "tbx-menu-item",
                     role: "menuitem",
                     onClick: () => void handleExport("csv"),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileTextIcon, { className: "nxg-icon--csv" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-menu-item-title", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileTextIcon, { className: "tbx-icon--csv" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-item-title", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: locale.exportCsvTitle }),
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: locale.exportCsvSubtitle })
                       ] })
                     ]
                   }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tbx-menu-item",
+                    role: "menuitem",
+                    onClick: () => void handleExport("clipboard"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FileTextIcon, { className: "tbx-icon--csv" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-menu-item-title", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: locale.exportClipboardTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: locale.exportClipboardSubtitle })
+                      ] })
+                    ]
+                  }
                 )
               ]
             }
@@ -646,137 +1092,400 @@ function NexGrid({
         ] }) : null,
         toolbarActions
       ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "nxg-table", "aria-label": caption, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-        showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "nxg-th nxg-th--serial", scope: "col", children: locale.serialHeader }) : null,
-        enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "nxg-th nxg-th--select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
+    ] }) : null,
+    showFilterPills !== false && (Boolean(query.q?.trim()) || Object.keys(query.filter ?? {}).some((k) => query.filter?.[k])) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-filter-pills-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-filter-pills-title", children: "Active filters:" }),
+      query.q?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-filter-pill", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "tbx-filter-pill-label", children: [
+          searchPlaceholder || locale.searchPlaceholder || "Search",
+          ":"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "tbx-filter-pill-val", children: [
+          '"',
+          query.q,
+          '"'
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
           {
-            type: "checkbox",
-            className: "nxg-checkbox",
-            checked: allPageSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = somePageSelected;
-            },
-            onChange: toggleSelectAll,
-            "aria-label": locale.selectAllLabel
+            type: "button",
+            className: "tbx-filter-pill-remove",
+            title: "Clear search",
+            "aria-label": "Clear search",
+            onClick: () => onQueryChange((0, import_core2.withSearch)(query, "")),
+            children: "\u2715"
           }
-        ) }) : null,
-        visible.map((col, index) => {
-          const id = (0, import_core2.getColumnId)(col);
-          const sortable = (0, import_core2.isSortable)(col);
-          const sorted = sortable && id !== "" && sort?.field === id;
-          const title = (0, import_core2.getColumnTitle)(col) || id;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        )
+      ] }) : null,
+      Object.entries(query.filter ?? {}).map(([key, val]) => {
+        if (val === void 0 || val === "") return null;
+        const col = leafCols.find((c) => (0, import_core2.getColumnId)(c) === key);
+        const title = col ? (0, import_core2.getColumnTitle)(col) || key : key;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-filter-pill", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "tbx-filter-pill-label", children: [
+            title,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-filter-pill-val", children: String(val) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "tbx-filter-pill-remove",
+              title: `Remove ${title} filter`,
+              "aria-label": `Remove filter for ${title}`,
+              onClick: () => onQueryChange((0, import_core2.withFilter)(query, key, void 0)),
+              children: "\u2715"
+            }
+          )
+        ] }, key);
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "tbx-filter-pill-clear-all",
+          onClick: () => onQueryChange({ ...query, page: 1, q: void 0, filter: {} }),
+          children: "Clear all"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "tbx-table", "aria-label": caption, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("thead", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+          renderExpandedRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "th",
+            {
+              rowSpan: headerRows.hasGroups ? 2 : void 0,
+              className: [
+                "tbx-th tbx-th--expand",
+                leftOffsets.has("__expand") ? "tbx-th--pinned-left" : void 0,
+                lastLeftPinnedId === "__expand" ? "tbx-pinned-border-left" : void 0
+              ].filter(Boolean).join(" "),
+              style: {
+                width: "40px",
+                left: leftOffsets.get("__expand")
+              },
+              scope: "col"
+            }
+          ) : null,
+          enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "th",
             {
+              rowSpan: headerRows.hasGroups ? 2 : void 0,
+              className: [
+                "tbx-th tbx-th--select",
+                leftOffsets.has("__select") ? "tbx-th--pinned-left" : void 0,
+                lastLeftPinnedId === "__select" ? "tbx-pinned-border-left" : void 0
+              ].filter(Boolean).join(" "),
+              style: {
+                left: leftOffsets.get("__select")
+              },
               scope: "col",
-              className: sortable ? "nxg-th nxg-th--sortable" : "nxg-th",
-              style: headerCellStyle(col),
-              "aria-sort": sorted ? sort?.dir === "asc" ? "ascending" : "descending" : sortable ? "none" : void 0,
-              "aria-label": title || void 0,
-              tabIndex: sortable ? 0 : void 0,
-              onClick: sortable ? () => toggleSort(id) : void 0,
-              onKeyDown: sortable ? (event) => {
-                if (event.key !== "Enter" && event.key !== " ") return;
-                event.preventDefault();
-                toggleSort(id);
-              } : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: headerInnerClass(col), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderColumnHeader(col) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: sorted ? sort?.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowDownIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpDownIcon, { className: "nxg-sort-icon nxg-sort-icon--idle" }) }) : null
-              ] })
-            },
-            id || `col-${index}`
-          );
-        })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-spinner", "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-live": "polite", children: locale.loadingText })
-      ] }) }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: locale.emptyText }) }) : data.map((row, index) => {
-        const id = pageRowIds[index] ?? String(index);
-        const isSelected = selectedIds.has(id);
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "tr",
-          {
-            className: [
-              "nxg-row",
-              isSelected ? "nxg-row--selected" : void 0,
-              rowIsClickable ? "nxg-row--clickable" : void 0
-            ].filter(Boolean).join(" "),
-            onClick: rowIsClickable ? activateRow(row) : void 0,
-            onKeyDown: rowIsClickable ? rowKeyDown(row) : void 0,
-            tabIndex: rowIsClickable ? 0 : void 0,
-            children: [
-              showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "nxg-td nxg-td--serial", children: (0, import_core2.serialNumber)(currentPage, pageSize, index) }) : null,
-              enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "td",
+              children: !isSingleSelect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
                 {
-                  className: "nxg-td nxg-td--select",
-                  onClick: (event) => event.stopPropagation(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "input",
-                    {
-                      type: "checkbox",
-                      className: "nxg-checkbox",
-                      checked: isSelected,
-                      onChange: () => toggleSelectRow(id),
-                      onClick: (event) => event.stopPropagation(),
-                      "aria-label": (0, import_core2.formatMessage)(locale.selectRowLabel, { id })
-                    }
-                  )
+                  type: "checkbox",
+                  className: "tbx-checkbox",
+                  checked: allPageSelected,
+                  ref: (el) => {
+                    if (el) el.indeterminate = somePageSelected;
+                  },
+                  onChange: toggleSelectAll,
+                  "aria-label": locale.selectAllLabel
                 }
-              ) : null,
-              visible.map((col, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "td",
+              ) : null
+            }
+          ) : null,
+          showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "th",
+            {
+              rowSpan: headerRows.hasGroups ? 2 : void 0,
+              className: [
+                "tbx-th tbx-th--serial",
+                leftOffsets.has("__serial") ? "tbx-th--pinned-left" : void 0,
+                lastLeftPinnedId === "__serial" ? "tbx-pinned-border-left" : void 0
+              ].filter(Boolean).join(" "),
+              style: {
+                left: leftOffsets.get("__serial")
+              },
+              scope: "col",
+              children: locale.serialHeader
+            }
+          ) : null,
+          !headerRows.hasGroups ? visible.map((col) => renderLeafTh(col, 1, false)) : headerRows.topRow.map((cell, idx) => {
+            if (cell.isGroup) {
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "th",
                 {
-                  className: "nxg-td",
-                  style: bodyCellStyle(col),
-                  children: renderCellContent(col, row, boolLabels)
+                  colSpan: cell.colSpan,
+                  className: "tbx-th tbx-th--group",
+                  scope: "colgroup",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-th-group-title", children: cell.title })
                 },
-                (0, import_core2.getColumnId)(col) || `col-${colIndex}`
-              ))
-            ]
-          },
-          id || index
-        );
+                `grp-${cell.id}-${idx}`
+              );
+            }
+            if (cell.leafColumn) {
+              return renderLeafTh(cell.leafColumn, cell.rowSpan, false);
+            }
+            return null;
+          })
+        ] }),
+        headerRows.hasGroups ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: headerRows.bottomRow.map((cell) => {
+          if (cell.leafColumn) {
+            return renderLeafTh(cell.leafColumn, 1, true);
+          }
+          return null;
+        }) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { className: "tbx-state", colSpan: Math.max(1, columnCount), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-dotted-loader", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-loading-text", "aria-live": "polite", children: locale.loadingText })
+      ] }) }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "tbx-state", colSpan: Math.max(1, columnCount), children: locale.emptyText }) }) : rows.map((row, index) => {
+        const id = pageRowIds[index] ?? String(index);
+        const isSelected = selectedIds.has(id);
+        const isExpanded = expandedRows.has(id);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "tr",
+            {
+              className: [
+                "tbx-row",
+                isSelected ? "tbx-row--selected" : void 0,
+                isExpanded ? "tbx-row--expanded" : void 0,
+                rowIsClickable ? "tbx-row--clickable" : void 0
+              ].filter(Boolean).join(" "),
+              onClick: rowIsClickable ? activateRow(row) : void 0,
+              onKeyDown: rowIsClickable ? rowKeyDown(row) : void 0,
+              tabIndex: rowIsClickable ? 0 : void 0,
+              children: [
+                renderExpandedRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "td",
+                  {
+                    className: [
+                      "tbx-td tbx-td--expand",
+                      leftOffsets.has("__expand") ? "tbx-td--pinned-left" : void 0,
+                      lastLeftPinnedId === "__expand" ? "tbx-pinned-border-left" : void 0
+                    ].filter(Boolean).join(" "),
+                    style: {
+                      width: "40px",
+                      left: leftOffsets.get("__expand")
+                    },
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: isExpanded ? "tbx-expand-btn tbx-expand-btn--open" : "tbx-expand-btn",
+                        "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleExpandRow(id);
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, { className: "tbx-icon" })
+                      }
+                    )
+                  }
+                ) : null,
+                enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "td",
+                  {
+                    className: [
+                      "tbx-td tbx-td--select",
+                      leftOffsets.has("__select") ? "tbx-td--pinned-left" : void 0,
+                      lastLeftPinnedId === "__select" ? "tbx-pinned-border-left" : void 0
+                    ].filter(Boolean).join(" "),
+                    style: {
+                      left: leftOffsets.get("__select")
+                    },
+                    onClick: (event) => event.stopPropagation(),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "input",
+                      {
+                        type: isSingleSelect ? "radio" : "checkbox",
+                        name: isSingleSelect ? `${instanceId}-select` : void 0,
+                        className: "tbx-checkbox",
+                        checked: isSelected,
+                        onChange: () => toggleSelectRow(id),
+                        onClick: (event) => event.stopPropagation(),
+                        "aria-label": (0, import_core2.formatMessage)(locale.selectRowLabel, { id })
+                      }
+                    )
+                  }
+                ) : null,
+                showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "td",
+                  {
+                    className: [
+                      "tbx-td tbx-td--serial",
+                      leftOffsets.has("__serial") ? "tbx-td--pinned-left" : void 0,
+                      lastLeftPinnedId === "__serial" ? "tbx-pinned-border-left" : void 0
+                    ].filter(Boolean).join(" "),
+                    style: {
+                      left: leftOffsets.get("__serial")
+                    },
+                    children: (0, import_core2.serialNumber)(currentPage, pageSize, index)
+                  }
+                ) : null,
+                visible.map((col, colIndex) => {
+                  const colId = (0, import_core2.getColumnId)(col);
+                  const isPinnedLeft = leftOffsets.has(colId);
+                  const isPinnedRight = rightOffsets.has(colId);
+                  const isLastLeft = lastLeftPinnedId === colId;
+                  const isFirstRight = firstRightPinnedId === colId;
+                  const isCellEditable = (0, import_core2.isEditable)(col);
+                  const isCurrentlyEditing = editingCell?.rowId === id && editingCell?.columnId === colId;
+                  const tdStyle = {
+                    ...bodyCellStyle(col),
+                    ...isPinnedLeft ? { left: leftOffsets.get(colId) } : {},
+                    ...isPinnedRight ? { right: rightOffsets.get(colId) } : {}
+                  };
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "td",
+                    {
+                      className: [
+                        "tbx-td",
+                        isCellEditable ? "tbx-cell--editable" : void 0,
+                        isPinnedLeft ? "tbx-td--pinned-left" : void 0,
+                        isPinnedRight ? "tbx-td--pinned-right" : void 0,
+                        isLastLeft ? "tbx-pinned-border-left" : void 0,
+                        isFirstRight ? "tbx-pinned-border-right" : void 0
+                      ].filter(Boolean).join(" "),
+                      style: tdStyle,
+                      onDoubleClick: isCellEditable ? (e) => {
+                        e.stopPropagation();
+                        setEditingCell({ rowId: id, columnId: colId });
+                      } : void 0,
+                      children: isCurrentlyEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "div",
+                        {
+                          className: "tbx-cell-edit-wrap",
+                          onClick: (e) => e.stopPropagation(),
+                          children: [
+                            col.meta?.editType === "select" && col.meta.editOptions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              "select",
+                              {
+                                autoFocus: true,
+                                className: "tbx-cell-edit-select tbx-cell-edit-input",
+                                defaultValue: String(row[colId] ?? ""),
+                                id: `${instanceId}-edit-${id}-${colId}`,
+                                children: col.meta.editOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt, children: opt }, opt))
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              "input",
+                              {
+                                autoFocus: true,
+                                type: col.meta?.editType === "number" ? "number" : "text",
+                                className: "tbx-cell-edit-input",
+                                defaultValue: String(row[colId] ?? ""),
+                                id: `${instanceId}-edit-${id}-${colId}`,
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    const el = e.currentTarget;
+                                    const val = col.meta?.editType === "number" ? Number(el.value) : el.value;
+                                    const oldVal = row[colId];
+                                    row[colId] = val;
+                                    onCellEdit?.({ row, columnId: colId, oldValue: oldVal, newValue: val });
+                                    setEditingCell(null);
+                                  } else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    setEditingCell(null);
+                                  }
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-cell-edit-actions", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "tbx-cell-edit-btn tbx-cell-edit-btn--save",
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    const el = document.getElementById(`${instanceId}-edit-${id}-${colId}`);
+                                    if (el) {
+                                      const val = col.meta?.editType === "number" ? Number(el.value) : el.value;
+                                      const oldVal = row[colId];
+                                      row[colId] = val;
+                                      onCellEdit?.({ row, columnId: colId, oldValue: oldVal, newValue: val });
+                                    }
+                                    setEditingCell(null);
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "tbx-icon" })
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "tbx-cell-edit-btn tbx-cell-edit-btn--cancel",
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setEditingCell(null);
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon, { className: "tbx-icon" })
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      ) : renderCellContent(col, row, boolLabels)
+                    },
+                    colId || `col-${colIndex}`
+                  );
+                })
+              ]
+            }
+          ),
+          isExpanded && renderExpandedRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: "tbx-expanded-row", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "tbx-expanded-cell", colSpan: columnCount, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-detail-panel", children: renderExpandedRow(row) }) }) }) : null
+        ] }, id || index);
       }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-cards", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-state", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-spinner", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-live": "polite", children: locale.loadingText })
-    ] }) }) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "nxg-state", children: locale.emptyText }) }) : data.map((row, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-cards", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-state", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-dotted-loader", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-dot" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-loading-text", "aria-live": "polite", children: locale.loadingText })
+    ] }) }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tbx-state", children: locale.emptyText }) }) : rows.map((row, index) => {
       const id = pageRowIds[index] ?? String(index);
       const isSelected = selectedIds.has(id);
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           className: [
-            "nxg-card",
-            isSelected ? "nxg-card--selected" : void 0,
-            rowIsClickable ? "nxg-card--clickable" : void 0
+            "tbx-card",
+            isSelected ? "tbx-card--selected" : void 0,
+            rowIsClickable ? "tbx-card--clickable" : void 0
           ].filter(Boolean).join(" "),
           onClick: rowIsClickable ? activateRow(row) : void 0,
           onKeyDown: rowIsClickable ? rowKeyDown(row) : void 0,
           tabIndex: rowIsClickable ? 0 : void 0,
           children: [
-            showSerialNumber || enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-card-head", children: [
-              showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "nxg-card-serial", children: [
+            showSerialNumber || enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-card-head", children: [
+              showSerialNumber ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "tbx-card-serial", children: [
                 "#",
                 (0, import_core2.serialNumber)(currentPage, pageSize, index)
               ] }) : null,
               enableSelection ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "span",
                 {
-                  className: "nxg-card-select",
+                  className: "tbx-card-select",
                   onClick: (event) => event.stopPropagation(),
                   children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "input",
                     {
                       type: "checkbox",
-                      className: "nxg-checkbox",
+                      className: "tbx-checkbox",
                       checked: isSelected,
                       onChange: () => toggleSelectRow(id),
                       onClick: (event) => event.stopPropagation(),
@@ -786,9 +1495,9 @@ function NexGrid({
                 }
               ) : null
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dl", { className: "nxg-card-rows", children: visible.map((col, colIndex) => {
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dl", { className: "tbx-card-rows", children: visible.map((col, colIndex) => {
               const colId = (0, import_core2.getColumnId)(col);
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-card-row", children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-card-row", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { children: (0, import_core2.getColumnTitle)(col) || colId }),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: renderCellContent(col, row, boolLabels) })
               ] }, colId || `col-${colIndex}`);
@@ -798,52 +1507,55 @@ function NexGrid({
         id || index
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-footer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-range", children: [
+    showFooter ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-range", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: renderTemplate(locale.showingRange, {
           start: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: range.start }),
           end: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: range.end }),
-          total: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className: "nxg-range-total", children: total.toLocaleString() })
+          total: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className: "tbx-range-total", children: total.toLocaleString() })
         }) }),
-        selectedIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-selected-badge", children: (0, import_core2.formatMessage)(locale.selectedBadge, { count: selectedIds.size }) }) : null
+        selectedIds.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-selected-badge", children: (0, import_core2.formatMessage)(locale.selectedBadge, { count: selectedIds.size }) }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-pagination", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-rows-per-page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-pagination", children: [
+        isRowsPerPageVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-rows-per-page", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: locale.rowsPerPage }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "select",
             {
-              className: "nxg-rows-select",
+              className: "tbx-rows-select",
               value: String(pageSize),
               onChange: (event) => {
                 onQueryChange((0, import_core2.withPageSize)(query, Number.parseInt(event.target.value, 10)));
               },
               "aria-label": locale.rowsPerPage,
-              children: import_core2.PAGE_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: size, children: size }, size))
+              children: import_core2.PAGE_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("option", { value: size, children: [
+                size,
+                " rows"
+              ] }, size))
             }
           )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nxg-pager", children: [
+        ] }) : null,
+        isPaginationVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tbx-pager", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "button",
             {
               type: "button",
-              className: "nxg-page-nav",
+              className: "tbx-page-nav",
               disabled: currentPage <= 1,
               onClick: () => onQueryChange((0, import_core2.withPage)(query, currentPage - 1, totalPages)),
               "aria-label": locale.previousPage,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronLeftIcon, { size: 16 }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.previousPage })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-sr-only", children: locale.previousPage })
               ]
             }
           ),
           pageItems.map(
-            (item, index) => item === "..." ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-page-ellipsis", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            (item, index) => item === "..." ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-page-ellipsis", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
-                className: item === currentPage ? "nxg-page-btn nxg-page-btn--current" : "nxg-page-btn",
+                className: item === currentPage ? "tbx-page-btn tbx-page-btn--current" : "tbx-page-btn",
                 onClick: () => onQueryChange((0, import_core2.withPage)(query, item, totalPages)),
                 "aria-label": (0, import_core2.formatMessage)(locale.pageLabel, { page: item }),
                 "aria-current": item === currentPage ? "page" : void 0,
@@ -856,43 +1568,54 @@ function NexGrid({
             "button",
             {
               type: "button",
-              className: "nxg-page-nav",
+              className: "tbx-page-nav",
               disabled: currentPage >= totalPages,
               onClick: () => onQueryChange((0, import_core2.withPage)(query, currentPage + 1, totalPages)),
               "aria-label": locale.nextPage,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, { size: 16 }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nxg-sr-only", children: locale.nextPage })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tbx-sr-only", children: locale.nextPage })
               ]
             }
           )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { className: "nxg-jump", onSubmit: submitJump, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "nxg-jump-label", htmlFor: jumpInputId, children: locale.goToPage }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
-            {
-              id: jumpInputId,
-              type: "number",
-              className: "nxg-jump-input",
-              min: 1,
-              max: totalPages,
-              value: jumpText,
-              onChange: (event) => setJumpText(event.target.value),
-              onBlur: () => submitJump(),
-              "aria-label": locale.goToPageOf
-            }
-          )
-        ] })
+        ] }) : null,
+        isJumpToPageVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "form",
+          {
+            className: "tbx-jump",
+            onSubmit: (event) => {
+              event.preventDefault();
+              submitJump(jumpText);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "tbx-jump-label", htmlFor: jumpInputId, children: locale.goToPage }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  id: jumpInputId,
+                  type: "number",
+                  className: "tbx-jump-input",
+                  min: 1,
+                  max: totalPages,
+                  value: jumpText,
+                  onChange: (event) => setJumpText(event.target.value),
+                  onBlur: () => submitJump(jumpText),
+                  "aria-label": locale.goToPageOf
+                }
+              )
+            ]
+          }
+        ) : null
       ] })
-    ] })
+    ] }) : null
   ] });
 }
+var NexGrid = TableX;
 
-// src/use-client-nex-grid.ts
+// src/use-client-table-x.ts
 var import_react = require("react");
 var import_core3 = require("@nexgrid/core");
-function useClientNexGrid(allData, options) {
+function useClientTableX(allData, options) {
   const [query, setQuery] = (0, import_react.useState)(() => ({
     ...(0, import_core3.defaultQuery)(),
     ...options?.initialQuery
@@ -912,6 +1635,7 @@ function useClientNexGrid(allData, options) {
     setQuery
   };
 }
+var useClientNexGrid = useClientTableX;
 
 // src/index.ts
 var import_core4 = require("@nexgrid/core");
@@ -921,6 +1645,7 @@ var import_core4 = require("@nexgrid/core");
   DEFAULT_PAGE_SIZE,
   NexGrid,
   PAGE_SIZES,
+  TableX,
   buildODataUrl,
   buildQueryUrl,
   defaultQuery,
@@ -934,11 +1659,13 @@ var import_core4 = require("@nexgrid/core");
   toODataParams,
   totalPagesFor,
   useClientNexGrid,
+  useClientTableX,
   withFilter,
   withPage,
   withPageSize,
   withSearch,
   withSort,
+  withToggledMultiSort,
   withToggledSort
 });
 //# sourceMappingURL=index.cjs.map