-
Notifications
You must be signed in to change notification settings - Fork 449
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature]: Allow for BarList
to disable sorting
#1032
Comments
Another possible solutions would be to remove the default value here:
|
Hi @mattiaz9! If you need a quick solution, check out our Raw Version of the component here: https://raw.tremor.so/docs/visualizations/barlist There you have full control over the sorting, happy coding! |
Note: import React from 'react';
type BarListProps<T> = {
data?: T[];
color?: string;
valueFormatter?: (value: number) => string;
showAnimation?: boolean;
onValueChange?: (value: T) => void;
sortOrder?: "ascending" | "descending" | "none";
className?: string;
[key: string]: any;
};
const defaultValueFormatter = (value: number) => value.toString();
function BarListInner<T>(props: BarListProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {
const {
data = [],
color,
valueFormatter = defaultValueFormatter,
showAnimation = false,
onValueChange,
sortOrder = "descending",
className,
...other
} = props;
const Component = onValueChange ? "button" : "div";
const sortedData = React.useMemo(() => {
if (sortOrder === "none") {
return data;
}
return [...data].sort((a, b) => {
return sortOrder === "ascending" ? a.value - b.value : b.value - a.value;
});
}, [data, sortOrder]);
return (
<div ref={ref} className={className} {...other}>
{sortedData.map((item, index) => (
<Component key={index} style={{ color }}>
{valueFormatter(item.value)}
</Component>
))}
</div>
);
}
export default React.forwardRef(BarListInner); |
🎉 This issue has been resolved in version 3.17.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This issue has been resolved in version 3.17.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
What problem does this feature solve?
I need the
BarList
to show elements in a specific order.This is useful for elements that must follow a specific order, for instance energy classification like A+, A, B ...., or grades, or whatever.
The component should not be opinionated about this.
What does the proposed API look like?
Add the option
none
to thesortOrder
prop.The text was updated successfully, but these errors were encountered: