From 349b88ccd1cf1cf8ca097249c72ddde57d5ea41b Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Tue, 30 Jun 2026 11:37:49 +0545 Subject: [PATCH 1/3] feat(table): add min max limit for number range filter --- packages/ui/src/Table/TableRangeFilter.tsx | 5 +++++ packages/ui/src/Table/types.ts | 2 ++ 2 files changed, 7 insertions(+) diff --git a/packages/ui/src/Table/TableRangeFilter.tsx b/packages/ui/src/Table/TableRangeFilter.tsx index bf2d0246f..2e3b411f9 100644 --- a/packages/ui/src/Table/TableRangeFilter.tsx +++ b/packages/ui/src/Table/TableRangeFilter.tsx @@ -35,6 +35,7 @@ export const TableRangeFilter = ({ const filterValue = column.getFilterValue() as (number | undefined)[]; const key = column.id || String(column.columnDef.accessorKey); + const meta = column.columnDef.meta; return (
@@ -45,6 +46,8 @@ export const TableRangeFilter = ({ ? filterValue[0] : "" } + max={meta?.rangeFilterMax} + min={meta?.rangeFilterMin} name={`range-start-${key}`} onInputChange={(value) => updateRangeFilter(column, 0, value)} placeholder={ @@ -60,6 +63,8 @@ export const TableRangeFilter = ({ ? filterValue[1] : "" } + max={meta?.rangeFilterMax} + min={meta?.rangeFilterMin} name={`range-end-${key}`} onInputChange={(value) => updateRangeFilter(column, 1, value)} placeholder={ diff --git a/packages/ui/src/Table/types.ts b/packages/ui/src/Table/types.ts index 19e42d4fb..c267f0d04 100644 --- a/packages/ui/src/Table/types.ts +++ b/packages/ui/src/Table/types.ts @@ -46,6 +46,8 @@ declare module "@tanstack/react-table" { interface ColumnMeta { filterOptions?: FilterOption[]; filterVariant?: TFilterVariant; + rangeFilterMax?: number; + rangeFilterMin?: number; serverFilterFn?: TFilterFn; } } From 720198df04e533d5f9bb83854569581caa3134d0 Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Tue, 30 Jun 2026 15:01:35 +0545 Subject: [PATCH 2/3] feat(table): implement range filtering with min/max constraints in TableRangeFilter --- .../src/Views/Ui/components/Table/Table.tsx | 4 ++ .../src/FormWidgets/DebouncedInput/index.tsx | 10 +++- packages/ui/src/Table/TableRangeFilter.tsx | 52 ++++++++++++++++++- 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx index 073406d91..a5846179f 100644 --- a/apps/demo/src/Views/Ui/components/Table/Table.tsx +++ b/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", diff --git a/packages/ui/src/FormWidgets/DebouncedInput/index.tsx b/packages/ui/src/FormWidgets/DebouncedInput/index.tsx index b30325119..f497e0545 100644 --- a/packages/ui/src/FormWidgets/DebouncedInput/index.tsx +++ b/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) => { - setInputValue(event.target.value); + let rawValue = event.target.value; + + if (sanitizeValue) { + rawValue = sanitizeValue(rawValue); + } + + setInputValue(rawValue); }; return ( diff --git a/packages/ui/src/Table/TableRangeFilter.tsx b/packages/ui/src/Table/TableRangeFilter.tsx index 2e3b411f9..f8da9e29c 100644 --- a/packages/ui/src/Table/TableRangeFilter.tsx +++ b/packages/ui/src/Table/TableRangeFilter.tsx @@ -24,7 +24,24 @@ export const TableRangeFilter = ({ ? [...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 = ({ 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 (
({ column.columnDef.filterPlaceholder?.split(",")[0] ?? column.columnDef.filterPlaceholder } + sanitizeValue={clampRangeValue} type="number" /> ({ column.columnDef.filterPlaceholder?.split(",")[1] ?? column.columnDef.filterPlaceholder } + sanitizeValue={clampRangeValue} type="number" />
From 5c2ecb7aa7498efb6952bbbad894527bac70c117 Mon Sep 17 00:00:00 2001 From: kabin thakuri Date: Tue, 30 Jun 2026 15:15:53 +0545 Subject: [PATCH 3/3] feat(table): update age range filter maximum limit to 100 --- apps/demo/src/Views/Ui/components/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx index a5846179f..f3a97403b 100644 --- a/apps/demo/src/Views/Ui/components/Table/Table.tsx +++ b/apps/demo/src/Views/Ui/components/Table/Table.tsx @@ -56,7 +56,7 @@ export const TableDemo = () => { filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, header: "Age", meta: { - rangeFilterMax: 20, + rangeFilterMax: 100, rangeFilterMin: 1, }, },