getFacetedMinMaxValues
does not work correctly
#5542
Answered
by
devmoatassem
BigSillyTiger
asked this question in
Q&A
-
Hi, I was working with faceted header filter, but why my const RangeFilter = <T extends object>({ column, values }: Tprops<T>) => {
const { t } = useTranslation();
// the column.getFacetedMinMaxValues can not asure the return value is fo the order [min, max]
// so I get the min and max value from the return value muanlly
const newPairV = column.getFacetedMinMaxValues()?.flat() ?? [];
const facetedMin = Math.min(...newPairV.map(Number));
const facetedMax = Math.max(...newPairV.map(Number));
return (
<div>
<div className="flex flex-col gap-y-2 w-full">
<div className="flex flex-row justify-center items-center gap-x-1">
<span className="text-gray-500">
{t("placeholder.min")}
</span>
<DebouncedInput
type="number"
min={facetedMin}
max={facetedMax}
value={(values as [number, number])?.[0] ?? ""}
onChange={(value) =>
column.setFilterValue((old: [number, number]) => [
value,
old?.[1],
])
}
placeholder={`${facetedMin}`}
className="w-full"
/>
</div>
<div className="flex flex-row justify-center items-center gap-x-1">
<span className="text-gray-500">
{t("placeholder.max")}
</span>
<DebouncedInput
type="number"
min={facetedMin}
max={facetedMax}
value={(values as [number, number])?.[1] ?? ""}
onChange={(value) =>
column.setFilterValue((old: [number, number]) => [
old?.[0],
value,
])
}
placeholder={`${facetedMax}`}
className="w-full"
/>
</div>
</div>
<div className="h-1" />
</div>
);
}; |
Beta Was this translation helpful? Give feedback.
Answered by
devmoatassem
Jul 16, 2024
Replies: 1 comment 3 replies
-
@BigSillyTiger Facing same issue |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have made a workaround, I am sure getFacetedMinMaxValues is also doing same but poorly
Sharing the snippet maybe if it's helpful to you
You may handle these values with the help of useEffect and useState depending on your use-case