@smallwebco/tinypivot-react 1.0.35 → 1.0.36

package/dist/index.d.cts

@@ -96,7 +96,9 @@ declare function PivotConfig({ availableFields, rowFields, columnFields, valueFi
 interface ActiveFilter {
     column: string;
     valueCount: number;
-    values: string[];
+    values?: string[];
+    displayText?: string;
+    isRange?: boolean;
 }
 interface PivotSkeletonProps {
     rowFields: string[];
@@ -144,10 +146,17 @@ declare function useExcelGrid<T extends Record<string, unknown>>(options: ExcelG
     setGlobalFilter: react.Dispatch<react.SetStateAction<string>>;
     filteredRowCount: number;
     totalRowCount: number;
-    activeFilters: {
+    activeFilters: ({
         column: string;
+        type: "range";
+        range: NumericRange;
         values: string[];
-    }[];
+    } | {
+        column: string;
+        type: "values";
+        values: string[];
+        range: NumericRange | null;
+    })[];
     getColumnStats: (columnKey: string) => ColumnStats;
     clearStatsCache: () => void;
     hasActiveFilter: (columnId: string) => boolean;

package/dist/index.d.ts

@@ -96,7 +96,9 @@ declare function PivotConfig({ availableFields, rowFields, columnFields, valueFi
 interface ActiveFilter {
     column: string;
     valueCount: number;
-    values: string[];
+    values?: string[];
+    displayText?: string;
+    isRange?: boolean;
 }
 interface PivotSkeletonProps {
     rowFields: string[];
@@ -144,10 +146,17 @@ declare function useExcelGrid<T extends Record<string, unknown>>(options: ExcelG
     setGlobalFilter: react.Dispatch<react.SetStateAction<string>>;
     filteredRowCount: number;
     totalRowCount: number;
-    activeFilters: {
+    activeFilters: ({
         column: string;
+        type: "range";
+        range: NumericRange;
         values: string[];
-    }[];
+    } | {
+        column: string;
+        type: "values";
+        values: string[];
+        range: NumericRange | null;
+    })[];
     getColumnStats: (columnKey: string) => ColumnStats;
     clearStatsCache: () => void;
     hasActiveFilter: (columnId: string) => boolean;

package/dist/index.js

@@ -106,10 +106,23 @@ function useExcelGrid(options) {
   const filteredRowCount = table.getFilteredRowModel().rows.length;
   const totalRowCount = data.length;
   const activeFilters = useMemo(() => {
-    return columnFilters.map((f) => ({
-      column: f.id,
-      values: f.value
-    }));
+    return columnFilters.map((f) => {
+      const filterValue = f.value;
+      if (filterValue && 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 = useCallback(
     (columnId) => {
@@ -2145,13 +2158,24 @@ function PivotSkeleton({
   const filterTooltipDetails = useMemo9(() => {
     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]);
@@ -2323,14 +2347,14 @@ function PivotSkeleton({
                     /* @__PURE__ */ jsx5("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
                     filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-filter", children: [
                       /* @__PURE__ */ jsx5("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-values", children: [
+                      /* @__PURE__ */ jsx5("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ jsx5("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
                         filter.values.map((val, idx) => /* @__PURE__ */ jsx5("span", { className: "vpg-tooltip-value", children: val }, idx)),
                         filter.remaining > 0 && /* @__PURE__ */ jsxs5("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " more"
                         ] })
-                      ] })
+                      ] }) })
                     ] }, filter.column)),
                     filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-summary", children: [
                       "Showing ",
@@ -2751,11 +2775,25 @@ function DataGrid({
   } = usePivotTable(filteredDataForPivot);
   const activeFilterInfo = useMemo10(() => {
     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 = useMemo10(() => table.getFilteredRowModel().rows, [table, columnFilters]);
   const searchFilteredData = useMemo10(() => {