@nexgrid/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-// src/nex-grid.tsx
+// src/table-x.tsx
 import * as React4 from "react";
 import {
   DENSITIES,
@@ -16,6 +16,8 @@ import {
   getPageNumbers,
   getRecordRange,
   initialHiddenColumns,
+  isEditable,
+  isFilterable,
   isHideable,
   isPageSize,
   isSortable,
@@ -26,10 +28,13 @@ import {
   toExportColumns,
   totalPagesFor,
   visibleColumns,
+  withFilter,
   withPage,
   withPageSize,
   withSearch,
-  withToggledSort
+  withToggledSort,
+  withToggledMultiSort,
+  copyToClipboard
 } from "@nexgrid/core";
 
 // src/icons.tsx
@@ -70,29 +75,22 @@ function XIcon(props) {
     /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
   ] });
 }
-function SlidersIcon(props) {
+function ColumnsIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx("line", { x1: "21", x2: "14", y1: "4", y2: "4" }),
-    /* @__PURE__ */ jsx("line", { x1: "10", x2: "3", y1: "4", y2: "4" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", x2: "12", y1: "12", y2: "12" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", x2: "3", y1: "12", y2: "12" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", x2: "16", y1: "20", y2: "20" }),
-    /* @__PURE__ */ jsx("line", { x1: "12", x2: "3", y1: "20", y2: "20" }),
-    /* @__PURE__ */ jsx("line", { x1: "14", x2: "14", y1: "2", y2: "6" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "10", y2: "14" }),
-    /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "18", y2: "22" })
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
   ] });
 }
-function FilterIcon(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ 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__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "18", height: "6", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "13.5", width: "18", height: "6", rx: "1.5" })
   ] });
 }
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+}
 function FileSpreadsheetIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
     /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
@@ -141,6 +139,26 @@ function ArrowUpDownIcon(props) {
 function CheckIcon(props) {
   return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
 }
+function RotateCcwIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+  ] });
+}
+function DownloadTrayIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+  ] });
+}
+function DotsVerticalIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.5" })
+  ] });
+}
 
 // src/render.tsx
 import * as React from "react";
@@ -176,9 +194,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 = [];
@@ -250,7 +268,7 @@ function useDropdown() {
   return { isOpen, toggle, close, containerRef, triggerRef };
 }
 
-// src/nex-grid.tsx
+// src/table-x.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function defaultRowId(row) {
   const record = row;
@@ -262,37 +280,72 @@ 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,
+    query,
+    onQueryChange,
+    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,
+    toolbarActions,
+    onRowClick,
+    getRowId = defaultRowId,
+    className,
+    showSerialNumber = true,
+    exportFileName,
+    onExportAll,
+    fetchEndpoint,
+    badgeRules,
+    locale: localeOverrides,
+    onNotify,
+    theme = "light"
+  } = props;
   const locale = 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(
     () => initialHiddenColumns(columns)
@@ -300,7 +353,14 @@ function NexGrid({
   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({});
   const columnsMenu = useDropdown();
   const densityMenu = useDropdown();
   const exportMenu = useDropdown();
@@ -309,6 +369,7 @@ function NexGrid({
   const densityButtonId = `${instanceId}-density`;
   const exportButtonId = `${instanceId}-export`;
   const jumpInputId = `${instanceId}-jump`;
+  const rootRef = React4.useRef(null);
   const notify = (type, message) => {
     onNotify?.({ type, message });
   };
@@ -318,126 +379,185 @@ function NexGrid({
   const range = getRecordRange(currentPage, pageSize, total);
   const sort = primarySort(query);
   const visible = React4.useMemo(
-    () => visibleColumns(columns, hiddenCols),
-    [columns, hiddenCols]
+    () => visibleColumns(colList, hiddenCols),
+    [colList, hiddenCols]
   );
-  const hideable = React4.useMemo(() => columns.filter(isHideable), [columns]);
+  const hideable = React4.useMemo(() => colList.filter(isHideable), [colList]);
   const pageItems = React4.useMemo(
     () => 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 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 = getColumnId2(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 = getColumnId2(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(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(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(withPage(query, page, totalPages));
+    }
   };
-  const toggleSort = (columnId) => {
-    onQueryChange(withToggledSort(query, columnId));
+  const toggleSort = (field, multiSort = false) => {
+    const next = multiSort ? withToggledMultiSort(query, field) : 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", formatMessage(locale.exportFetchingAll, { total: total.toLocaleString() }));
-    try {
-      const result = await fetchAllPages(async (page, size) => {
-        const url = buildQueryUrl(fetchEndpoint, {
-          ...query,
-          page,
-          pageSize: 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 = data;
+      if (fetchEndpoint) {
+        const full = await fetchAllPages(async (page, size) => {
+          const url = buildQueryUrl(fetchEndpoint, {
+            ...query,
+            page,
+            pageSize: 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;
       }
       const exportColumns = toExportColumns(visible, boolLabels);
       const prefix = exportFileName ?? filePrefixFromCaption(caption);
-      if (format === "excel") {
-        const count = downloadExcel({
+      if (format === "clipboard") {
+        const ok = await copyToClipboard(exportRows, exportColumns);
+        if (ok) notify("success", "Copied to clipboard");
+        else notify("error", "Failed to copy to clipboard");
+      } else if (format === "excel") {
+        downloadExcel({
           filename: prefix,
           caption,
-          rows,
+          rows: exportRows,
           columns: exportColumns,
           badgeRules,
           serialHeader: locale.serialHeader
         });
-        notify(
-          "success",
-          formatMessage(locale.exportExcelSuccess, { count: count.toLocaleString() })
-        );
+        notify("success", "Excel downloaded");
       } else {
-        const count = downloadCsv(timestampedFilename(prefix), rows, exportColumns);
-        notify(
-          "success",
-          formatMessage(locale.exportCsvSuccess, { count: count.toLocaleString() })
-        );
+        downloadCsv(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__ */ jsx3("div", { className: rootClassName, "data-density": density, children: /* @__PURE__ */ jsxs2("div", { className: "nxg-state-card", children: [
-      /* @__PURE__ */ jsx3("p", { className: "nxg-state-text", children: locale.errorText }),
-      onRetry ? /* @__PURE__ */ jsx3("button", { type: "button", className: "nxg-btn", onClick: onRetry, children: locale.retryButton }) : null
+    return /* @__PURE__ */ jsx3("div", { className: rootClasses.join(" "), "data-density": density, children: /* @__PURE__ */ jsxs2("div", { className: "tbx-state-card", children: [
+      /* @__PURE__ */ jsx3("p", { className: "tbx-state-text", children: locale.errorText }),
+      onRetry ? /* @__PURE__ */ jsxs2("button", { type: "button", className: "tbx-btn", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx3(RotateCcwIcon, { className: "tbx-icon" }),
+        /* @__PURE__ */ jsx3("span", { children: locale.retryButton })
+      ] }) : null
     ] }) });
   }
   const rowIsClickable = typeof onRowClick === "function";
@@ -449,56 +569,57 @@ function NexGrid({
     event.preventDefault();
     onRowClick?.(row);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: rootClassName, "data-density": density, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "nxg-toolbar", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "nxg-toolbar-group", children: [
-        enableSearch ? /* @__PURE__ */ jsxs2("div", { className: "nxg-search", children: [
-          /* @__PURE__ */ jsx3(SearchIcon, { className: "nxg-search-icon" }),
-          /* @__PURE__ */ jsx3(
-            "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__ */ jsxs2(
-            "button",
-            {
-              type: "button",
-              className: "nxg-search-clear",
-              onClick: () => setSearchText(""),
-              "aria-label": locale.clearSearch,
-              children: [
-                /* @__PURE__ */ jsx3(XIcon, { className: "nxg-icon" }),
-                /* @__PURE__ */ jsx3("span", { className: "nxg-sr-only", children: locale.clearSearch })
-              ]
-            }
-          ) : null
-        ] }) : null,
-        /* @__PURE__ */ jsxs2("div", { className: "nxg-menu-wrap", ref: columnsMenu.containerRef, children: [
+  const hasSummary = enableSummaryRow === true || visible.some((col) => col.meta?.aggregation !== void 0);
+  return /* @__PURE__ */ jsxs2("div", { className: rootClasses.join(" "), "data-density": density, ref: rootRef, children: [
+    showToolbar ? /* @__PURE__ */ jsxs2("div", { className: "tbx-toolbar", children: [
+      /* @__PURE__ */ jsx3("div", { className: "tbx-toolbar-group", children: enableSearch ? /* @__PURE__ */ jsxs2("div", { className: "tbx-search", children: [
+        /* @__PURE__ */ jsx3(SearchIcon, { className: "tbx-search-icon" }),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            className: "tbx-search-clear",
+            onClick: () => setSearchText(""),
+            "aria-label": locale.clearSearch,
+            children: [
+              /* @__PURE__ */ jsx3(XIcon, { className: "tbx-icon" }),
+              /* @__PURE__ */ jsx3("span", { className: "tbx-sr-only", children: locale.clearSearch })
+            ]
+          }
+        ) : null
+      ] }) : null }),
+      /* @__PURE__ */ jsxs2("div", { className: "tbx-toolbar-group tbx-toolbar-group--end", children: [
+        isColumnsVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-wrap", ref: columnsMenu.containerRef, children: [
           /* @__PURE__ */ jsxs2(
             "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__ */ jsx3(SlidersIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ jsx3(ColumnsIcon, { className: "tbx-icon" }),
                 /* @__PURE__ */ jsx3("span", { children: locale.columnsButton })
               ]
             }
           ),
-          columnsMenu.isOpen ? /* @__PURE__ */ jsxs2("div", { className: "nxg-menu", role: "menu", "aria-labelledby": columnsButtonId, children: [
-            /* @__PURE__ */ jsx3("div", { className: "nxg-menu-label", children: locale.toggleColumnsLabel }),
-            /* @__PURE__ */ jsx3("div", { className: "nxg-menu-separator" }),
+          columnsMenu.isOpen ? /* @__PURE__ */ jsxs2("div", { className: "tbx-menu", role: "menu", "aria-labelledby": columnsButtonId, children: [
+            /* @__PURE__ */ jsx3("div", { className: "tbx-menu-label", children: locale.toggleColumnsLabel }),
+            /* @__PURE__ */ jsx3("div", { className: "tbx-menu-separator" }),
             hideable.map((col) => {
               const id = getColumnId2(col);
               const checked = hiddenCols[id] !== true;
@@ -506,12 +627,12 @@ function NexGrid({
                 "button",
                 {
                   type: "button",
-                  className: "nxg-menu-item",
+                  className: "tbx-menu-item",
                   role: "menuitemcheckbox",
                   "aria-checked": checked,
                   onClick: () => toggleColumn(id),
                   children: [
-                    /* @__PURE__ */ jsx3(CheckIcon, { className: "nxg-check" }),
+                    /* @__PURE__ */ jsx3(CheckIcon, { className: "tbx-check" }),
                     /* @__PURE__ */ jsx3("span", { children: getColumnTitle(col) || id })
                   ]
                 },
@@ -519,29 +640,29 @@ function NexGrid({
               );
             })
           ] }) : null
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "nxg-menu-wrap", ref: densityMenu.containerRef, children: [
+        ] }) : null,
+        isDensityVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-wrap", ref: densityMenu.containerRef, children: [
           /* @__PURE__ */ jsxs2(
             "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__ */ jsx3(FilterIcon, { className: "nxg-icon" }),
+                /* @__PURE__ */ jsx3(DensityIcon, { className: "tbx-icon" }),
                 /* @__PURE__ */ jsx3("span", { children: formatMessage(locale.densityButton, { density }) })
               ]
             }
           ),
-          densityMenu.isOpen ? /* @__PURE__ */ jsx3("div", { className: "nxg-menu", role: "menu", "aria-labelledby": densityButtonId, children: DENSITIES.map((option) => /* @__PURE__ */ jsxs2(
+          densityMenu.isOpen ? /* @__PURE__ */ jsx3("div", { className: "tbx-menu", role: "menu", "aria-labelledby": densityButtonId, children: DENSITIES.map((option) => /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: "nxg-menu-item",
+              className: "tbx-menu-item",
               role: "menuitemcheckbox",
               "aria-checked": density === option,
               onClick: () => {
@@ -549,37 +670,36 @@ function NexGrid({
                 densityMenu.close();
               },
               children: [
-                /* @__PURE__ */ jsx3(CheckIcon, { className: "nxg-check" }),
+                /* @__PURE__ */ jsx3(CheckIcon, { className: "tbx-check" }),
                 /* @__PURE__ */ jsx3("span", { children: locale[DENSITY_LABEL_KEY[option]] })
               ]
             },
             option
           )) }) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "nxg-toolbar-group nxg-toolbar-group--end", children: [
-        enableExport ? /* @__PURE__ */ jsxs2("div", { className: "nxg-menu-wrap", ref: exportMenu.containerRef, children: [
+        ] }) : null,
+        isExportVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-wrap", ref: exportMenu.containerRef, children: [
           /* @__PURE__ */ jsxs2(
             "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__ */ jsx3(DownloadIcon, { className: "nxg-icon" }),
-                /* @__PURE__ */ jsx3("span", { children: isExporting ? locale.exportingButton : locale.exportButton })
+                /* @__PURE__ */ jsx3(DownloadTrayIcon, { className: "tbx-icon" }),
+                /* @__PURE__ */ jsx3("span", { children: isExporting ? locale.exportingButton : locale.exportButton }),
+                /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "tbx-icon tbx-chevron" })
               ]
             }
           ),
           exportMenu.isOpen ? /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: "nxg-menu nxg-menu--end",
+              className: "tbx-menu tbx-menu--end",
               role: "menu",
               "aria-labelledby": exportButtonId,
               children: [
@@ -587,12 +707,12 @@ function NexGrid({
                   "button",
                   {
                     type: "button",
-                    className: "nxg-menu-item",
+                    className: "tbx-menu-item",
                     role: "menuitem",
                     onClick: () => void handleExport("excel"),
                     children: [
-                      /* @__PURE__ */ jsx3(FileSpreadsheetIcon, { className: "nxg-icon--excel" }),
-                      /* @__PURE__ */ jsxs2("div", { className: "nxg-menu-item-title", children: [
+                      /* @__PURE__ */ jsx3(FileSpreadsheetIcon, { className: "tbx-icon--excel" }),
+                      /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-item-title", children: [
                         /* @__PURE__ */ jsx3("strong", { children: locale.exportExcelTitle }),
                         /* @__PURE__ */ jsx3("small", { children: locale.exportExcelSubtitle })
                       ] })
@@ -603,17 +723,33 @@ function NexGrid({
                   "button",
                   {
                     type: "button",
-                    className: "nxg-menu-item",
+                    className: "tbx-menu-item",
                     role: "menuitem",
                     onClick: () => void handleExport("csv"),
                     children: [
-                      /* @__PURE__ */ jsx3(FileTextIcon, { className: "nxg-icon--csv" }),
-                      /* @__PURE__ */ jsxs2("div", { className: "nxg-menu-item-title", children: [
+                      /* @__PURE__ */ jsx3(FileTextIcon, { className: "tbx-icon--csv" }),
+                      /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-item-title", children: [
                         /* @__PURE__ */ jsx3("strong", { children: locale.exportCsvTitle }),
                         /* @__PURE__ */ jsx3("small", { children: locale.exportCsvSubtitle })
                       ] })
                     ]
                   }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tbx-menu-item",
+                    role: "menuitem",
+                    onClick: () => void handleExport("clipboard"),
+                    children: [
+                      /* @__PURE__ */ jsx3(FileTextIcon, { className: "tbx-icon--csv" }),
+                      /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-item-title", children: [
+                        /* @__PURE__ */ jsx3("strong", { children: locale.exportClipboardTitle }),
+                        /* @__PURE__ */ jsx3("small", { children: locale.exportClipboardSubtitle })
+                      ] })
+                    ]
+                  }
                 )
               ]
             }
@@ -621,137 +757,539 @@ function NexGrid({
         ] }) : null,
         toolbarActions
       ] })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "nxg-table-wrap", children: /* @__PURE__ */ jsxs2("table", { className: "nxg-table", "aria-label": caption, children: [
+    ] }) : null,
+    /* @__PURE__ */ jsx3("div", { className: "tbx-table-wrap", children: /* @__PURE__ */ jsxs2("table", { className: "tbx-table", "aria-label": caption, children: [
       /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
-        showSerialNumber ? /* @__PURE__ */ jsx3("th", { className: "nxg-th nxg-th--serial", scope: "col", children: locale.serialHeader }) : null,
-        enableSelection ? /* @__PURE__ */ jsx3("th", { className: "nxg-th nxg-th--select", scope: "col", children: /* @__PURE__ */ jsx3(
-          "input",
+        renderExpandedRow ? /* @__PURE__ */ jsx3(
+          "th",
+          {
+            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__ */ jsx3(
+          "th",
+          {
+            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",
+            children: !isSingleSelect ? /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                className: "tbx-checkbox",
+                checked: allPageSelected,
+                ref: (el) => {
+                  if (el) el.indeterminate = somePageSelected;
+                },
+                onChange: toggleSelectAll,
+                "aria-label": locale.selectAllLabel
+              }
+            ) : null
+          }
+        ) : null,
+        showSerialNumber ? /* @__PURE__ */ jsx3(
+          "th",
           {
-            type: "checkbox",
-            className: "nxg-checkbox",
-            checked: allPageSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = somePageSelected;
+            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")
             },
-            onChange: toggleSelectAll,
-            "aria-label": locale.selectAllLabel
+            scope: "col",
+            children: locale.serialHeader
           }
-        ) }) : null,
+        ) : null,
         visible.map((col, index) => {
           const id = getColumnId2(col);
-          const sortable = isSortable(col);
-          const sorted = sortable && id !== "" && sort?.field === id;
+          const sortable = 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 = getColumnTitle(col) || id;
-          return /* @__PURE__ */ jsx3(
+          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);
+          };
+          const isPinnedLeft = leftOffsets.has(id);
+          const isPinnedRight = rightOffsets.has(id);
+          const isLastLeft = lastLeftPinnedId === id;
+          const isFirstRight = firstRightPinnedId === id;
+          return /* @__PURE__ */ jsxs2(
             "th",
             {
               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,
+              className: [
+                "tbx-th",
+                sortable ? "tbx-th--sortable" : void 0,
+                enableColumnReorder ? "tbx-th--draggable" : void 0,
+                isPinnedLeft ? "tbx-th--pinned-left" : void 0,
+                isPinnedRight ? "tbx-th--pinned-right" : void 0,
+                isLastLeft ? "tbx-pinned-border-left" : void 0,
+                isFirstRight ? "tbx-pinned-border-right" : void 0
+              ].filter(Boolean).join(" "),
+              style: thStyle,
+              "aria-sort": sorted ? sortItem?.dir === "asc" ? "ascending" : "descending" : sortable ? "none" : void 0,
               "aria-label": title || void 0,
               tabIndex: sortable ? 0 : void 0,
-              onClick: sortable ? () => toggleSort(id) : void 0,
+              draggable: enableColumnReorder,
+              onDragStart: enableColumnReorder ? (e) => {
+                setDraggedColId(id);
+                e.dataTransfer.setData("text/plain", id);
+              } : void 0,
+              onDragOver: enableColumnReorder ? (e) => {
+                e.preventDefault();
+              } : void 0,
+              onDrop: enableColumnReorder ? (e) => {
+                e.preventDefault();
+                if (!draggedColId || draggedColId === id) return;
+                const fromIdx = colList.findIndex((c) => getColumnId2(c) === draggedColId);
+                const toIdx = colList.findIndex((c) => getColumnId2(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(getColumnId2));
+                }
+                setDraggedColId(null);
+              } : void 0,
+              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);
+                toggleSort(id, event.shiftKey);
               } : void 0,
-              children: /* @__PURE__ */ jsxs2("div", { className: headerInnerClass(col), children: [
-                /* @__PURE__ */ jsx3("span", { children: renderColumnHeader(col) }),
-                sortable ? /* @__PURE__ */ jsx3("span", { children: sorted ? sort?.dir === "asc" ? /* @__PURE__ */ jsx3(ArrowUpIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ jsx3(ArrowDownIcon, { className: "nxg-sort-icon" }) : /* @__PURE__ */ jsx3(ArrowUpDownIcon, { className: "nxg-sort-icon nxg-sort-icon--idle" }) }) : null
-              ] })
+              children: [
+                /* @__PURE__ */ jsxs2("div", { className: headerInnerClass(col), children: [
+                  /* @__PURE__ */ jsx3("span", { children: renderColumnHeader(col) }),
+                  sortable ? /* @__PURE__ */ jsxs2("span", { className: "tbx-sort-icon-wrap", children: [
+                    sorted ? sortItem?.dir === "asc" ? /* @__PURE__ */ jsx3(ArrowUpIcon, { className: "tbx-sort-icon" }) : /* @__PURE__ */ jsx3(ArrowDownIcon, { className: "tbx-sort-icon" }) : /* @__PURE__ */ jsx3(ArrowUpDownIcon, { className: "tbx-sort-icon tbx-sort-icon--idle" }),
+                    query.sort.length > 1 && sortIndex >= 0 ? /* @__PURE__ */ jsx3("span", { className: "tbx-sort-order", children: sortIndex + 1 }) : null
+                  ] }) : null,
+                  isFilterable(col, enableColumnFilters) ? /* @__PURE__ */ jsxs2("div", { className: "tbx-col-filter-wrap", children: [
+                    /* @__PURE__ */ jsx3(
+                      "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__ */ jsx3(DotsVerticalIcon, { className: "tbx-icon" })
+                      }
+                    ),
+                    openFilterCol === id ? /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: "tbx-filter-popover",
+                        onClick: (e) => e.stopPropagation(),
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            "input",
+                            {
+                              autoFocus: true,
+                              type: "text",
+                              className: "tbx-filter-popover-input",
+                              defaultValue: activeFilter ?? "",
+                              placeholder: meta?.filterPlaceholder || formatMessage(locale.filterColumnPlaceholder, { column: title }),
+                              "aria-label": `Filter ${title}`,
+                              onChange: (e) => {
+                                const val = e.currentTarget.value.toLowerCase().trim();
+                                const pop = e.currentTarget.closest(".tbx-filter-popover");
+                                const opts = pop?.querySelectorAll(".tbx-filter-option:not(:first-child)");
+                                opts?.forEach((opt) => {
+                                  const text = opt.textContent?.toLowerCase() ?? "";
+                                  opt.style.display = !val || text.includes(val) ? "" : "none";
+                                });
+                              },
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                  e.preventDefault();
+                                  const val = e.currentTarget.value.trim();
+                                  setOpenFilterCol(null);
+                                  onQueryChange(withFilter(query, id, val || void 0));
+                                } else if (e.key === "Escape") {
+                                  e.preventDefault();
+                                  setOpenFilterCol(null);
+                                }
+                              }
+                            }
+                          ),
+                          meta?.filterOptions && meta.filterOptions.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "tbx-filter-popover-options", children: [
+                            /* @__PURE__ */ jsx3(
+                              "div",
+                              {
+                                className: !activeFilter ? "tbx-filter-option tbx-filter-option--selected" : "tbx-filter-option",
+                                onClick: () => {
+                                  setOpenFilterCol(null);
+                                  onQueryChange(withFilter(query, id, void 0));
+                                },
+                                children: locale.filterAll
+                              }
+                            ),
+                            meta.filterOptions.map((opt) => /* @__PURE__ */ jsx3(
+                              "div",
+                              {
+                                className: activeFilter === opt ? "tbx-filter-option tbx-filter-option--selected" : "tbx-filter-option",
+                                onClick: () => {
+                                  setOpenFilterCol(null);
+                                  onQueryChange(withFilter(query, id, opt));
+                                },
+                                children: opt
+                              },
+                              opt
+                            ))
+                          ] }) : null,
+                          /* @__PURE__ */ jsxs2("div", { className: "tbx-filter-popover-actions", children: [
+                            /* @__PURE__ */ jsxs2(
+                              "button",
+                              {
+                                type: "button",
+                                className: "tbx-filter-popover-btn",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  setOpenFilterCol(null);
+                                  onQueryChange(withFilter(query, id, void 0));
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx3(RotateCcwIcon, { className: "tbx-icon" }),
+                                  /* @__PURE__ */ jsx3("span", { children: locale.clearFilter })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs2(
+                              "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(withFilter(query, id, val || void 0));
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx3(CheckIcon, { className: "tbx-icon" }),
+                                  /* @__PURE__ */ jsx3("span", { children: locale.applyFilter })
+                                ]
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ) : null
+                  ] }) : null
+                ] }),
+                enableColumnResize ? /* @__PURE__ */ jsx3("div", { className: "tbx-resize-handle", onPointerDown: startResize }) : null
+              ]
             },
             id || `col-${index}`
           );
         })
       ] }) }),
-      /* @__PURE__ */ jsx3("tbody", { children: isLoading ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsxs2("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: [
-        /* @__PURE__ */ jsx3("span", { className: "nxg-spinner", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx3("div", { "aria-live": "polite", children: locale.loadingText })
-      ] }) }) : data.length === 0 ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("td", { className: "nxg-state", colSpan: Math.max(1, columnCount), children: locale.emptyText }) }) : data.map((row, index) => {
+      /* @__PURE__ */ jsx3("tbody", { children: isLoading ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsxs2("td", { className: "tbx-state", colSpan: Math.max(1, columnCount), children: [
+        /* @__PURE__ */ jsxs2("div", { className: "tbx-dotted-loader", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+          /* @__PURE__ */ jsx3("span", { className: "tbx-dot" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "tbx-loading-text", "aria-live": "polite", children: locale.loadingText })
+      ] }) }) : data.length === 0 ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("td", { className: "tbx-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__ */ jsxs2(
-          "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__ */ jsx3("td", { className: "nxg-td nxg-td--serial", children: serialNumber(currentPage, pageSize, index) }) : null,
-              enableSelection ? /* @__PURE__ */ jsx3(
-                "td",
-                {
-                  className: "nxg-td nxg-td--select",
-                  onClick: (event) => event.stopPropagation(),
-                  children: /* @__PURE__ */ jsx3(
-                    "input",
+        const isExpanded = expandedRows.has(id);
+        return /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
+          /* @__PURE__ */ jsxs2(
+            "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__ */ jsx3(
+                  "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__ */ jsx3(
+                      "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__ */ jsx3(ChevronRightIcon, { className: "tbx-icon" })
+                      }
+                    )
+                  }
+                ) : null,
+                enableSelection ? /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(
+                      "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": formatMessage(locale.selectRowLabel, { id })
+                      }
+                    )
+                  }
+                ) : null,
+                showSerialNumber ? /* @__PURE__ */ jsx3(
+                  "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: serialNumber(currentPage, pageSize, index)
+                  }
+                ) : null,
+                visible.map((col, colIndex) => {
+                  const colId = getColumnId2(col);
+                  const isPinnedLeft = leftOffsets.has(colId);
+                  const isPinnedRight = rightOffsets.has(colId);
+                  const isLastLeft = lastLeftPinnedId === colId;
+                  const isFirstRight = firstRightPinnedId === colId;
+                  const isCellEditable = 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__ */ jsx3(
+                    "td",
                     {
-                      type: "checkbox",
-                      className: "nxg-checkbox",
-                      checked: isSelected,
-                      onChange: () => toggleSelectRow(id),
-                      onClick: (event) => event.stopPropagation(),
-                      "aria-label": formatMessage(locale.selectRowLabel, { id })
-                    }
-                  )
-                }
-              ) : null,
-              visible.map((col, colIndex) => /* @__PURE__ */ jsx3(
-                "td",
-                {
-                  className: "nxg-td",
-                  style: bodyCellStyle(col),
-                  children: renderCellContent(col, row, boolLabels)
-                },
-                getColumnId2(col) || `col-${colIndex}`
-              ))
-            ]
-          },
-          id || index
-        );
+                      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__ */ jsxs2(
+                        "div",
+                        {
+                          className: "tbx-cell-edit-wrap",
+                          onClick: (e) => e.stopPropagation(),
+                          children: [
+                            col.meta?.editType === "select" && col.meta.editOptions ? /* @__PURE__ */ jsx3(
+                              "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__ */ jsx3("option", { value: opt, children: opt }, opt))
+                              }
+                            ) : /* @__PURE__ */ jsx3(
+                              "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__ */ jsxs2("div", { className: "tbx-cell-edit-actions", children: [
+                              /* @__PURE__ */ jsx3(
+                                "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__ */ jsx3(CheckIcon, { className: "tbx-icon" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx3(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "tbx-cell-edit-btn tbx-cell-edit-btn--cancel",
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setEditingCell(null);
+                                  },
+                                  children: /* @__PURE__ */ jsx3(XIcon, { className: "tbx-icon" })
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      ) : renderCellContent(col, row, boolLabels)
+                    },
+                    colId || `col-${colIndex}`
+                  );
+                })
+              ]
+            }
+          ),
+          isExpanded && renderExpandedRow ? /* @__PURE__ */ jsx3("tr", { className: "tbx-expanded-row", children: /* @__PURE__ */ jsx3("td", { className: "tbx-expanded-cell", colSpan: columnCount, children: /* @__PURE__ */ jsx3("div", { className: "tbx-detail-panel", children: renderExpandedRow(row) }) }) }) : null
+        ] }, id || index);
       }) })
     ] }) }),
-    /* @__PURE__ */ jsx3("div", { className: "nxg-cards", children: isLoading ? /* @__PURE__ */ jsx3("div", { className: "nxg-card", children: /* @__PURE__ */ jsxs2("div", { className: "nxg-state", children: [
-      /* @__PURE__ */ jsx3("span", { className: "nxg-spinner", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx3("div", { "aria-live": "polite", children: locale.loadingText })
-    ] }) }) : data.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "nxg-card", children: /* @__PURE__ */ jsx3("div", { className: "nxg-state", children: locale.emptyText }) }) : data.map((row, index) => {
+    /* @__PURE__ */ jsx3("div", { className: "tbx-cards", children: isLoading ? /* @__PURE__ */ jsx3("div", { className: "tbx-card", children: /* @__PURE__ */ jsxs2("div", { className: "tbx-state", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "tbx-dotted-loader", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ jsx3("span", { className: "tbx-dot" }),
+        /* @__PURE__ */ jsx3("span", { className: "tbx-dot" })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "tbx-loading-text", "aria-live": "polite", children: locale.loadingText })
+    ] }) }) : data.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "tbx-card", children: /* @__PURE__ */ jsx3("div", { className: "tbx-state", children: locale.emptyText }) }) : data.map((row, index) => {
       const id = pageRowIds[index] ?? String(index);
       const isSelected = selectedIds.has(id);
       return /* @__PURE__ */ jsxs2(
         "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__ */ jsxs2("div", { className: "nxg-card-head", children: [
-              showSerialNumber ? /* @__PURE__ */ jsxs2("span", { className: "nxg-card-serial", children: [
+            showSerialNumber || enableSelection ? /* @__PURE__ */ jsxs2("div", { className: "tbx-card-head", children: [
+              showSerialNumber ? /* @__PURE__ */ jsxs2("span", { className: "tbx-card-serial", children: [
                 "#",
                 serialNumber(currentPage, pageSize, index)
               ] }) : null,
               enableSelection ? /* @__PURE__ */ jsx3(
                 "span",
                 {
-                  className: "nxg-card-select",
+                  className: "tbx-card-select",
                   onClick: (event) => event.stopPropagation(),
                   children: /* @__PURE__ */ jsx3(
                     "input",
                     {
                       type: "checkbox",
-                      className: "nxg-checkbox",
+                      className: "tbx-checkbox",
                       checked: isSelected,
                       onChange: () => toggleSelectRow(id),
                       onClick: (event) => event.stopPropagation(),
@@ -761,9 +1299,9 @@ function NexGrid({
                 }
               ) : null
             ] }) : null,
-            /* @__PURE__ */ jsx3("dl", { className: "nxg-card-rows", children: visible.map((col, colIndex) => {
+            /* @__PURE__ */ jsx3("dl", { className: "tbx-card-rows", children: visible.map((col, colIndex) => {
               const colId = getColumnId2(col);
-              return /* @__PURE__ */ jsxs2("div", { className: "nxg-card-row", children: [
+              return /* @__PURE__ */ jsxs2("div", { className: "tbx-card-row", children: [
                 /* @__PURE__ */ jsx3("dt", { children: getColumnTitle(col) || colId }),
                 /* @__PURE__ */ jsx3("dd", { children: renderCellContent(col, row, boolLabels) })
               ] }, colId || `col-${colIndex}`);
@@ -773,52 +1311,55 @@ function NexGrid({
         id || index
       );
     }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "nxg-footer", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "nxg-range", children: [
+    showFooter ? /* @__PURE__ */ jsxs2("div", { className: "tbx-footer", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "tbx-range", children: [
         /* @__PURE__ */ jsx3("span", { children: renderTemplate(locale.showingRange, {
           start: /* @__PURE__ */ jsx3("strong", { children: range.start }),
           end: /* @__PURE__ */ jsx3("strong", { children: range.end }),
-          total: /* @__PURE__ */ jsx3("strong", { className: "nxg-range-total", children: total.toLocaleString() })
+          total: /* @__PURE__ */ jsx3("strong", { className: "tbx-range-total", children: total.toLocaleString() })
         }) }),
-        selectedIds.size > 0 ? /* @__PURE__ */ jsx3("span", { className: "nxg-selected-badge", children: formatMessage(locale.selectedBadge, { count: selectedIds.size }) }) : null
+        selectedIds.size > 0 ? /* @__PURE__ */ jsx3("span", { className: "tbx-selected-badge", children: formatMessage(locale.selectedBadge, { count: selectedIds.size }) }) : null
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "nxg-pagination", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "nxg-rows-per-page", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "tbx-pagination", children: [
+        isRowsPerPageVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-rows-per-page", children: [
           /* @__PURE__ */ jsx3("span", { children: locale.rowsPerPage }),
           /* @__PURE__ */ jsx3(
             "select",
             {
-              className: "nxg-rows-select",
+              className: "tbx-rows-select",
               value: String(pageSize),
               onChange: (event) => {
                 onQueryChange(withPageSize(query, Number.parseInt(event.target.value, 10)));
               },
               "aria-label": locale.rowsPerPage,
-              children: PAGE_SIZES.map((size) => /* @__PURE__ */ jsx3("option", { value: size, children: size }, size))
+              children: PAGE_SIZES.map((size) => /* @__PURE__ */ jsxs2("option", { value: size, children: [
+                size,
+                " rows"
+              ] }, size))
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "nxg-pager", children: [
+        ] }) : null,
+        isPaginationVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-pager", children: [
           /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
-              className: "nxg-page-nav",
+              className: "tbx-page-nav",
               disabled: currentPage <= 1,
               onClick: () => onQueryChange(withPage(query, currentPage - 1, totalPages)),
               "aria-label": locale.previousPage,
               children: [
                 /* @__PURE__ */ jsx3(ChevronLeftIcon, { size: 16 }),
-                /* @__PURE__ */ jsx3("span", { className: "nxg-sr-only", children: locale.previousPage })
+                /* @__PURE__ */ jsx3("span", { className: "tbx-sr-only", children: locale.previousPage })
               ]
             }
           ),
           pageItems.map(
-            (item, index) => item === "..." ? /* @__PURE__ */ jsx3("span", { className: "nxg-page-ellipsis", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ jsx3(
+            (item, index) => item === "..." ? /* @__PURE__ */ jsx3("span", { className: "tbx-page-ellipsis", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ jsx3(
               "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(withPage(query, item, totalPages)),
                 "aria-label": formatMessage(locale.pageLabel, { page: item }),
                 "aria-current": item === currentPage ? "page" : void 0,
@@ -831,46 +1372,57 @@ function NexGrid({
             "button",
             {
               type: "button",
-              className: "nxg-page-nav",
+              className: "tbx-page-nav",
               disabled: currentPage >= totalPages,
               onClick: () => onQueryChange(withPage(query, currentPage + 1, totalPages)),
               "aria-label": locale.nextPage,
               children: [
                 /* @__PURE__ */ jsx3(ChevronRightIcon, { size: 16 }),
-                /* @__PURE__ */ jsx3("span", { className: "nxg-sr-only", children: locale.nextPage })
+                /* @__PURE__ */ jsx3("span", { className: "tbx-sr-only", children: locale.nextPage })
               ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs2("form", { className: "nxg-jump", onSubmit: submitJump, children: [
-          /* @__PURE__ */ jsx3("label", { className: "nxg-jump-label", htmlFor: jumpInputId, children: locale.goToPage }),
-          /* @__PURE__ */ jsx3(
-            "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__ */ jsxs2(
+          "form",
+          {
+            className: "tbx-jump",
+            onSubmit: (event) => {
+              event.preventDefault();
+              submitJump(jumpText);
+            },
+            children: [
+              /* @__PURE__ */ jsx3("label", { className: "tbx-jump-label", htmlFor: jumpInputId, children: locale.goToPage }),
+              /* @__PURE__ */ jsx3(
+                "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
 import { useMemo as useMemo2, useState as useState4 } from "react";
 import {
   defaultQuery,
   queryClientData
 } from "@nexgrid/core";
-function useClientNexGrid(allData, options) {
+function useClientTableX(allData, options) {
   const [query, setQuery] = useState4(() => ({
     ...defaultQuery(),
     ...options?.initialQuery
@@ -890,6 +1442,7 @@ function useClientNexGrid(allData, options) {
     setQuery
   };
 }
+var useClientNexGrid = useClientTableX;
 
 // src/index.ts
 import {
@@ -903,11 +1456,12 @@ import {
   fromODataResponse,
   primarySort as primarySort2,
   withToggledSort as withToggledSort2,
+  withToggledMultiSort as withToggledMultiSort2,
   withSort,
   withSearch as withSearch2,
   withPage as withPage2,
   withPageSize as withPageSize2,
-  withFilter,
+  withFilter as withFilter2,
   totalPagesFor as totalPagesFor2,
   isPageSize as isPageSize2,
   PAGE_SIZES as PAGE_SIZES2,
@@ -920,6 +1474,7 @@ export {
   DEFAULT_PAGE_SIZE,
   NexGrid,
   PAGE_SIZES2 as PAGE_SIZES,
+  TableX,
   buildODataUrl,
   buildQueryUrl2 as buildQueryUrl,
   defaultQuery2 as defaultQuery,
@@ -933,11 +1488,13 @@ export {
   toODataParams,
   totalPagesFor2 as totalPagesFor,
   useClientNexGrid,
-  withFilter,
+  useClientTableX,
+  withFilter2 as withFilter,
   withPage2 as withPage,
   withPageSize2 as withPageSize,
   withSearch2 as withSearch,
   withSort,
+  withToggledMultiSort2 as withToggledMultiSort,
   withToggledSort2 as withToggledSort
 };
 //# sourceMappingURL=index.js.map