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

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: 20,
+        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,
@@ -37,6 +54,37 @@ export const TableRangeFilter = <TData,>({
   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">
       <DebouncedInput
@@ -54,6 +102,7 @@ export const TableRangeFilter = <TData,>({
           column.columnDef.filterPlaceholder?.split(",")[0] ??
           column.columnDef.filterPlaceholder
         }
+        sanitizeValue={clampRangeValue}
         type="number"
       />
       <DebouncedInput
@@ -71,6 +120,7 @@ export const TableRangeFilter = <TData,>({
           column.columnDef.filterPlaceholder?.split(",")[1] ??
           column.columnDef.filterPlaceholder
         }
+        sanitizeValue={clampRangeValue}
         type="number"
       />
     </div>