@smallwebco/tinypivot-react 1.0.34 → 1.0.36

package/dist/index.cjs

@@ -147,10 +147,23 @@ function useExcelGrid(options) {
   const filteredRowCount = table.getFilteredRowModel().rows.length;
   const totalRowCount = data.length;
   const activeFilters = (0, import_react.useMemo)(() => {
-    return columnFilters.map((f) => ({
-      column: f.id,
-      values: f.value
-    }));
+    return columnFilters.map((f) => {
+      const filterValue = f.value;
+      if (filterValue && (0, import_tinypivot_core.isNumericRange)(filterValue)) {
+        return {
+          column: f.id,
+          type: "range",
+          range: filterValue,
+          values: []
+        };
+      }
+      return {
+        column: f.id,
+        type: "values",
+        values: Array.isArray(filterValue) ? filterValue : [],
+        range: null
+      };
+    });
   }, [columnFilters]);
   const hasActiveFilter = (0, import_react.useCallback)(
     (columnId) => {
@@ -2160,13 +2173,24 @@ function PivotSkeleton({
   const filterTooltipDetails = (0, import_react9.useMemo)(() => {
     if (!activeFilters || activeFilters.length === 0) return [];
     return activeFilters.map((f) => {
+      if (f.isRange && f.displayText) {
+        return {
+          column: f.column,
+          displayText: f.displayText,
+          isRange: true,
+          values: [],
+          remaining: 0
+        };
+      }
+      const values = f.values || [];
       const maxDisplay = 5;
-      const displayValues = f.values.slice(0, maxDisplay);
-      const remaining = f.values.length - maxDisplay;
+      const displayValues = values.slice(0, maxDisplay);
+      const remaining = values.length - maxDisplay;
       return {
         column: f.column,
         values: displayValues,
-        remaining: remaining > 0 ? remaining : 0
+        remaining: remaining > 0 ? remaining : 0,
+        isRange: false
       };
     });
   }, [activeFilters]);
@@ -2338,14 +2362,14 @@ function PivotSkeleton({
                     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
                     filterTooltipDetails.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-tooltip-filter", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-tooltip-values", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
                         filter.values.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-tooltip-value", children: val }, idx)),
                         filter.remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " more"
                         ] })
-                      ] })
+                      ] }) })
                     ] }, filter.column)),
                     filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-tooltip-summary", children: [
                       "Showing ",
@@ -2766,11 +2790,25 @@ function DataGrid({
   } = usePivotTable(filteredDataForPivot);
   const activeFilterInfo = (0, import_react10.useMemo)(() => {
     if (activeFilters.length === 0) return null;
-    return activeFilters.map((f) => ({
-      column: f.column,
-      valueCount: f.values?.length || 0,
-      values: f.values || []
-    }));
+    return activeFilters.map((f) => {
+      if (f.type === "range" && f.range) {
+        const parts = [];
+        if (f.range.min !== null) parts.push(`\u2265 ${f.range.min}`);
+        if (f.range.max !== null) parts.push(`\u2264 ${f.range.max}`);
+        return {
+          column: f.column,
+          valueCount: 1,
+          displayText: parts.join(" and "),
+          isRange: true
+        };
+      }
+      return {
+        column: f.column,
+        valueCount: f.values?.length || 0,
+        values: f.values || [],
+        isRange: false
+      };
+    });
   }, [activeFilters]);
   const rows = (0, import_react10.useMemo)(() => table.getFilteredRowModel().rows, [table, columnFilters]);
   const searchFilteredData = (0, import_react10.useMemo)(() => {