shadcn-ui
DataTable cell formatting with conditional classname does not work as expected.
Hello, I have a DataTable Component with a custom column definition. The cells of one of the columns called "event status" should have a different background color based on the value of the cell (a string). Here's a snippet of the columns definition file:
...
{
accessorKey: "event_status",
header: "Event Status",
cell: ({ row }) => {
const value: string = row.getValue("event_status");
const color = getStatusColor(value);
return (
<div className={cn("rounded-full px-2 text-white", color)}>{value}</div>
);
},
},
...
The getStatusColor function just returns a string based on the value being passed:
export function getStatusColor(status: string) {
if (status === "FINISHED") {
return "bg-green-600";
} else if (status === "REFUSED") {
return "bg-red-500";
} else if (status === "WAITING") {
return "bg-yellow-500";
} else {
return "bg-blue-500";
}
Unfortunately it seems to work only with the first getStatusColor call, for example if the first value being passed to the function is "FINISHED", it successfully updates the background to green, but if I encounter a different value ( ex. "REFUSED"), it won't update the background, and I'm sure that "bg-red-500" is being returned (I logged the return values). Here a screenshot (the last record's event status value is "REFUSED", is not visible because I have used "text-white" in the classname.
I hope I was clear in my explanation, it is one of the first issues I write, thank you in advance.
Antonino.
Hi @gepp4! Have you found any solutions or workarounds? I'm currently experiencing a similar issue.
@NotNetohog I solved the problem by moving the function that returns the colors inside the same file in which I define my columns.
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
