@nexgrid/react 0.2.0 → 0.2.1

package/dist/index.js

@@ -20,6 +20,7 @@ import {
   isFilterable,
   isHideable,
   isPageSize,
+  isPinned,
   isSortable,
   primarySort,
   resolveLocale,
@@ -34,7 +35,16 @@ import {
   withSearch,
   withToggledSort,
   withToggledMultiSort,
-  copyToClipboard
+  copyToClipboard,
+  clearGridState,
+  loadGridState,
+  saveGridState,
+  getCellValue as getCellValue2,
+  getCellText as getCellText2,
+  queryClientData,
+  defaultQuery,
+  flattenColumns,
+  buildHeaderRows
 } from "@nexgrid/core";
 
 // src/icons.tsx
@@ -269,7 +279,7 @@ function useDropdown() {
 }
 
 // src/table-x.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function defaultRowId(row) {
   const record = row;
   const id = record === null || record === void 0 ? void 0 : record["id"];
@@ -284,9 +294,11 @@ function TableX(props) {
   const {
     columns,
     data,
-    total,
-    query,
-    onQueryChange,
+    total: totalProp,
+    query: queryProp,
+    onQueryChange: onQueryChangeProp,
+    clientSidePagination,
+    paginationMode,
     caption,
     density: initialDensity = "default",
     isLoading = false,
@@ -321,6 +333,8 @@ function TableX(props) {
     enableColumnReorder = false,
     onColumnOrderChange,
     onCellEdit,
+    storageKey,
+    showFilterPills = true,
     toolbarActions,
     onRowClick,
     getRowId = defaultRowId,
@@ -334,6 +348,22 @@ function TableX(props) {
     onNotify,
     theme = "light"
   } = props;
+  const isClientSide = clientSidePagination === true || paginationMode === "client" || onQueryChangeProp === void 0 && queryProp === void 0;
+  const [internalQuery, setInternalQuery] = React4.useState(() => queryProp ?? defaultQuery());
+  const query = queryProp ?? internalQuery;
+  const onQueryChange = React4.useCallback(
+    (next) => {
+      setInternalQuery(next);
+      onQueryChangeProp?.(next);
+    },
+    [onQueryChangeProp]
+  );
+  const clientPaged = React4.useMemo(() => {
+    if (!isClientSide) return null;
+    return 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 = resolveLocale(localeOverrides);
   const boolLabels = { yes: locale.booleanYes, no: locale.booleanNo };
   const isColumnsVisible = enableColumns && showColumnsButton !== false;
@@ -348,7 +378,7 @@ function TableX(props) {
   }, [columns]);
   const [density, setDensity] = React4.useState(initialDensity);
   const [hiddenCols, setHiddenCols] = React4.useState(
-    () => initialHiddenColumns(columns)
+    () => initialHiddenColumns(flattenColumns(columns))
   );
   const [selectedIds, setSelectedIds] = React4.useState(
     () => /* @__PURE__ */ new Set()
@@ -361,9 +391,82 @@ function TableX(props) {
   const [isExporting, setIsExporting] = React4.useState(false);
   const [openFilterCol, setOpenFilterCol] = React4.useState(null);
   const [colWidths, setColWidths] = React4.useState({});
+  React4.useEffect(() => {
+    if (!storageKey) return;
+    const persisted = 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 = getColumnId2(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) => [getColumnId2(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);
+    saveGridState(storageKey, {
+      density,
+      columnWidths: colWidths,
+      columnOrder: colList.map(getColumnId2).filter(Boolean),
+      hiddenColumns: hiddenList
+    });
+  }, [storageKey, density, hiddenCols, colList, colWidths]);
   const columnsMenu = useDropdown();
   const densityMenu = useDropdown();
   const exportMenu = useDropdown();
+  const handleResetView = React4.useCallback(() => {
+    if (storageKey) {
+      clearGridState(storageKey);
+    }
+    setDensity(initialDensity);
+    setColWidths({});
+    setColList(columns);
+    setHiddenCols(initialHiddenColumns(flattenColumns(columns)));
+    columnsMenu.close();
+  }, [storageKey, initialDensity, columns, columnsMenu]);
+  const leafCols = React4.useMemo(() => flattenColumns(colList), [colList]);
+  const autoFitColumn = React4.useCallback((id) => {
+    const col = leafCols.find((c) => getColumnId2(c) === id);
+    if (!col) return;
+    const meta = col.meta ?? {};
+    let maxContentWidth = 0;
+    const headerTitle = getColumnTitle(col) || id;
+    maxContentWidth = Math.max(maxContentWidth, headerTitle.length * 8.5 + 50);
+    for (const row of rows) {
+      const rawVal = getCellValue2(col, row);
+      const val = getCellText2(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`;
@@ -378,16 +481,20 @@ function TableX(props) {
   const totalPages = totalPagesFor(total, pageSize);
   const range = getRecordRange(currentPage, pageSize, total);
   const sort = primarySort(query);
-  const visible = React4.useMemo(
-    () => visibleColumns(colList, hiddenCols),
+  const headerRows = React4.useMemo(
+    () => buildHeaderRows(colList, hiddenCols),
     [colList, hiddenCols]
   );
-  const hideable = React4.useMemo(() => colList.filter(isHideable), [colList]);
+  const visible = React4.useMemo(
+    () => visibleColumns(leafCols, hiddenCols),
+    [leafCols, hiddenCols]
+  );
+  const hideable = React4.useMemo(() => leafCols.filter(isHideable), [leafCols]);
   const pageItems = React4.useMemo(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
-  const pageRowIds = React4.useMemo(() => data.map((row) => getRowId(row)), [data, getRowId]);
+  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();
@@ -506,7 +613,7 @@ function TableX(props) {
     setIsExporting(true);
     notify("info", "Exporting...");
     try {
-      let exportRows = data;
+      let exportRows = rows;
       if (fetchEndpoint) {
         const full = await fetchAllPages(async (page, size) => {
           const url = buildQueryUrl(fetchEndpoint, {
@@ -519,6 +626,9 @@ function TableX(props) {
           return await response.json();
         });
         exportRows = full.items;
+      } else if (isClientSide) {
+        const full = queryClientData(data, query, { paginate: false });
+        exportRows = full.items;
       }
       const exportColumns = toExportColumns(visible, boolLabels);
       const prefix = exportFileName ?? filePrefixFromCaption(caption);
@@ -570,6 +680,205 @@ function TableX(props) {
     onRowClick?.(row);
   };
   const hasSummary = enableSummaryRow === true || visible.some((col) => col.meta?.aggregation !== void 0);
+  const renderLeafTh = (col, rowSpan = 1, isGroupChild = false) => {
+    const id = getColumnId2(col);
+    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;
+    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__ */ jsxs2(
+      "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) => 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));
+          }
+        } : 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,
+          isPinned(col) === "left" ? "tbx-th--pinned-left" : void 0,
+          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__ */ 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: `Filter by ${title}...`,
+                        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") {
+                            setOpenFilterCol(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,
+              onDoubleClick: () => autoFitColumn(id)
+            }
+          ) : null
+        ]
+      },
+      id
+    );
+  };
   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: [
@@ -638,7 +947,20 @@ function TableX(props) {
                 },
                 id
               );
-            })
+            }),
+            storageKey ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+              /* @__PURE__ */ jsx3("div", { className: "tbx-menu-separator" }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "tbx-menu-item tbx-menu-item--reset",
+                  role: "menuitem",
+                  onClick: handleResetView,
+                  children: /* @__PURE__ */ jsx3("span", { children: "Reset to default view" })
+                }
+              )
+            ] }) : null
           ] }) : null
         ] }) : null,
         isDensityVisible ? /* @__PURE__ */ jsxs2("div", { className: "tbx-menu-wrap", ref: densityMenu.containerRef, children: [
@@ -758,291 +1080,152 @@ function TableX(props) {
         toolbarActions
       ] })
     ] }) : 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: [
-        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",
+    showFilterPills !== false && (Boolean(query.q?.trim()) || Object.keys(query.filter ?? {}).some((k) => query.filter?.[k])) ? /* @__PURE__ */ jsxs2("div", { className: "tbx-filter-pills-bar", children: [
+      /* @__PURE__ */ jsx3("span", { className: "tbx-filter-pills-title", children: "Active filters:" }),
+      query.q?.trim() ? /* @__PURE__ */ jsxs2("div", { className: "tbx-filter-pill", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "tbx-filter-pill-label", children: [
+          searchPlaceholder || locale.searchPlaceholder || "Search",
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "tbx-filter-pill-val", children: [
+          '"',
+          query.q,
+          '"'
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
           {
-            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
+            type: "button",
+            className: "tbx-filter-pill-remove",
+            title: "Clear search",
+            "aria-label": "Clear search",
+            onClick: () => onQueryChange(withSearch(query, "")),
+            children: "\u2715"
           }
-        ) : null,
-        visible.map((col, index) => {
-          const id = getColumnId2(col);
-          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;
-          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(
+        )
+      ] }) : null,
+      Object.entries(query.filter ?? {}).map(([key, val]) => {
+        if (val === void 0 || val === "") return null;
+        const col = leafCols.find((c) => getColumnId2(c) === key);
+        const title = col ? getColumnTitle(col) || key : key;
+        return /* @__PURE__ */ jsxs2("div", { className: "tbx-filter-pill", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "tbx-filter-pill-label", children: [
+            title,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "tbx-filter-pill-val", children: String(val) }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "tbx-filter-pill-remove",
+              title: `Remove ${title} filter`,
+              "aria-label": `Remove filter for ${title}`,
+              onClick: () => onQueryChange(withFilter(query, key, void 0)),
+              children: "\u2715"
+            }
+          )
+        ] }, key);
+      }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "tbx-filter-pill-clear-all",
+          onClick: () => onQueryChange({ ...query, page: 1, q: void 0, filter: {} }),
+          children: "Clear all"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx3("div", { className: "tbx-table-wrap", children: /* @__PURE__ */ jsxs2("table", { className: "tbx-table", "aria-label": caption, children: [
+      /* @__PURE__ */ jsxs2("thead", { children: [
+        /* @__PURE__ */ jsxs2("tr", { children: [
+          renderExpandedRow ? /* @__PURE__ */ jsx3(
             "th",
             {
-              scope: "col",
+              rowSpan: headerRows.hasGroups ? 2 : 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
+                "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: thStyle,
-              "aria-sort": sorted ? sortItem?.dir === "asc" ? "ascending" : "descending" : sortable ? "none" : void 0,
-              "aria-label": title || void 0,
-              tabIndex: sortable ? 0 : 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));
+              style: {
+                width: "40px",
+                left: leftOffsets.get("__expand")
+              },
+              scope: "col"
+            }
+          ) : null,
+          enableSelection ? /* @__PURE__ */ jsx3(
+            "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",
+              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
                 }
-                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, event.shiftKey);
-              } : void 0,
-              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}`
-          );
-        })
-      ] }) }),
+              ) : null
+            }
+          ) : null,
+          showSerialNumber ? /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(
+                "th",
+                {
+                  colSpan: cell.colSpan,
+                  className: "tbx-th tbx-th--group",
+                  scope: "colgroup",
+                  children: /* @__PURE__ */ jsx3("span", { className: "tbx-th-group-title", children: cell.title })
+                },
+                `grp-${cell.id}-${idx}`
+              );
+            }
+            if (cell.leafColumn) {
+              return renderLeafTh(cell.leafColumn, cell.rowSpan, false);
+            }
+            return null;
+          })
+        ] }),
+        headerRows.hasGroups ? /* @__PURE__ */ jsx3("tr", { children: headerRows.bottomRow.map((cell) => {
+          if (cell.leafColumn) {
+            return renderLeafTh(cell.leafColumn, 1, true);
+          }
+          return null;
+        }) }) : null
+      ] }),
       /* @__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" }),
@@ -1051,7 +1234,7 @@ function TableX(props) {
           /* @__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) => {
+      ] }) }) : rows.length === 0 ? /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("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);
@@ -1260,7 +1443,7 @@ function TableX(props) {
         /* @__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) => {
+    ] }) }) : rows.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "tbx-card", children: /* @__PURE__ */ jsx3("div", { className: "tbx-state", children: locale.emptyText }) }) : rows.map((row, index) => {
       const id = pageRowIds[index] ?? String(index);
       const isSelected = selectedIds.has(id);
       return /* @__PURE__ */ jsxs2(
@@ -1419,16 +1602,16 @@ var NexGrid = TableX;
 // src/use-client-table-x.ts
 import { useMemo as useMemo2, useState as useState4 } from "react";
 import {
-  defaultQuery,
-  queryClientData
+  defaultQuery as defaultQuery2,
+  queryClientData as queryClientData2
 } from "@nexgrid/core";
 function useClientTableX(allData, options) {
   const [query, setQuery] = useState4(() => ({
-    ...defaultQuery(),
+    ...defaultQuery2(),
     ...options?.initialQuery
   }));
   const page = useMemo2(
-    () => queryClientData(allData, query, options),
+    () => queryClientData2(allData, query, options),
     [allData, query, options]
   );
   return {
@@ -1446,8 +1629,8 @@ var useClientNexGrid = useClientTableX;
 
 // src/index.ts
 import {
-  queryClientData as queryClientData2,
-  defaultQuery as defaultQuery2,
+  queryClientData as queryClientData3,
+  defaultQuery as defaultQuery3,
   parseQuery,
   serializeQuery,
   buildQueryUrl as buildQueryUrl2,
@@ -1477,12 +1660,12 @@ export {
   TableX,
   buildODataUrl,
   buildQueryUrl2 as buildQueryUrl,
-  defaultQuery2 as defaultQuery,
+  defaultQuery3 as defaultQuery,
   fromODataResponse,
   isPageSize2 as isPageSize,
   parseQuery,
   primarySort2 as primarySort,
-  queryClientData2 as queryClientData,
+  queryClientData3 as queryClientData,
   resolveLocale2 as resolveLocale,
   serializeQuery,
   toODataParams,