Feat(table): add min max limit for number range filter (#1725)

* feat(table): add min max limit for number range  filter

* feat(table): implement range filtering with min/max constraints in TableRangeFilter

* feat(table): update age range filter maximum limit to 100

Author: KabinKhandThakuri

apps/demo/src/Views/Ui/components/Table/Table.tsx

@@ -55,6 +55,10 @@ export const TableDemo = () => {
       enableSorting: true,
       filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
       header: "Age",
+      meta: {
+        rangeFilterMax: 100,
+        rangeFilterMin: 1,
+      },
     },
     {
       accessorKey: "city",

packages/ui/src/FormWidgets/DebouncedInput/index.tsx

@@ -12,6 +12,7 @@ import { IInputProperties, Input } from "../Input";
 export interface DebouncedInputProperties extends IInputProperties {
   debounceTime?: number;
   onInputChange: (value: number | readonly string[] | string) => void;
+  sanitizeValue?: (value: string) => string;
 }
 
 export const DebouncedInput = forwardRef<
@@ -24,6 +25,7 @@ export const DebouncedInput = forwardRef<
       debounceTime = 500,
       defaultValue = "",
       onInputChange,
+      sanitizeValue,
       type = "text",
       ...inputProperties
     },
@@ -50,7 +52,13 @@ export const DebouncedInput = forwardRef<
     }, [debouncedValue]);
 
     const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-      setInputValue(event.target.value);
+      let rawValue = event.target.value;
+
+      if (sanitizeValue) {
+        rawValue = sanitizeValue(rawValue);
+      }
+
+      setInputValue(rawValue);
     };
 
     return (

packages/ui/src/Table/TableRangeFilter.tsx

@@ -24,7 +24,24 @@ export const TableRangeFilter = <TData,>({
       ? [...filterValue]
       : [undefined, undefined];
 
-    currentFilter[index] = value !== "" ? Number(value) : undefined;
+    const numericValue = value !== "" ? Number(value) : undefined;
+
+    if (numericValue !== undefined) {
+      const { rangeFilterMax, rangeFilterMin } = column.columnDef.meta ?? {};
+
+      if (rangeFilterMin !== undefined && numericValue < rangeFilterMin) {
+        currentFilter[index] = rangeFilterMin;
+      } else if (
+        rangeFilterMax !== undefined &&
+        numericValue > rangeFilterMax
+      ) {
+        currentFilter[index] = rangeFilterMax;
+      } else {
+        currentFilter[index] = numericValue;
+      }
+    } else {
+      currentFilter[index] = undefined;
+    }
 
     const isFilterActive = currentFilter.some(
       (filterInput) => filterInput !== undefined,
@@ -35,6 +52,38 @@ export const TableRangeFilter = <TData,>({
 
   const filterValue = column.getFilterValue() as (number | undefined)[];
   const key = column.id || String(column.columnDef.accessorKey);
+  const meta = column.columnDef.meta;
+
+  const clampRangeValue = (value: string): string => {
+    if (
+      meta?.rangeFilterMin === undefined &&
+      meta?.rangeFilterMax === undefined
+    ) {
+      return value;
+    }
+
+    const numericValue = Number(value);
+
+    if (Number.isNaN(numericValue)) {
+      return value;
+    }
+
+    if (
+      meta.rangeFilterMin !== undefined &&
+      numericValue < meta.rangeFilterMin
+    ) {
+      return String(meta.rangeFilterMin);
+    }
+
+    if (
+      meta.rangeFilterMax !== undefined &&
+      numericValue > meta.rangeFilterMax
+    ) {
+      return String(meta.rangeFilterMax);
+    }
+
+    return value;
+  };
 
   return (
     <div className="number-range-filter">
@@ -45,12 +94,15 @@ export const TableRangeFilter = <TData,>({
             ? filterValue[0]
             : ""
         }
+        max={meta?.rangeFilterMax}
+        min={meta?.rangeFilterMin}
         name={`range-start-${key}`}
         onInputChange={(value) => updateRangeFilter(column, 0, value)}
         placeholder={
           column.columnDef.filterPlaceholder?.split(",")[0] ??
           column.columnDef.filterPlaceholder
         }
+        sanitizeValue={clampRangeValue}
         type="number"
       />
       <DebouncedInput
@@ -60,12 +112,15 @@ export const TableRangeFilter = <TData,>({
             ? filterValue[1]
             : ""
         }
+        max={meta?.rangeFilterMax}
+        min={meta?.rangeFilterMin}
         name={`range-end-${key}`}
         onInputChange={(value) => updateRangeFilter(column, 1, value)}
         placeholder={
           column.columnDef.filterPlaceholder?.split(",")[1] ??
           column.columnDef.filterPlaceholder
         }
+        sanitizeValue={clampRangeValue}
         type="number"
       />
     </div>

packages/ui/src/Table/types.ts

@@ -46,6 +46,8 @@ declare module "@tanstack/react-table" {
   interface ColumnMeta<TData extends RowData, TValue> {
     filterOptions?: FilterOption[];
     filterVariant?: TFilterVariant;
+    rangeFilterMax?: number;
+    rangeFilterMin?: number;
     serverFilterFn?: TFilterFn;
   }
 }