Table variants

[mirkea]

Hi
I have a fairly straight forward scenario: I want a table with some variants. The tables are meant for simple layouts, and some of them have a more fancy design.

My question is, how to best handle that?

Ideally I would set a variant prop to the Table component, but the issue is that all its children would need to inherit it somehow.
I asked an AI model for solution and one of them was adding a context wrapper over the entire table.
The other was using a data- prop on the table.
I went for the second option.

I can set a variant on the table which sets some basics style for it and adds a data-variant prop as well.
I can then use that to style the children, for example

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
	return (
		<thead
			data-slot="table-header"
			className={cn(
				"[&_tr]:border-b",
				"[table[data-variant=cards]_&]:bg-green-500",
				className,
			)}
			{...props}
		/>
	);
}

The issue is that I would like to still be able to override the components using classNames, such as

...
<TableHeader className="bg-yellow-500">
...

As you can imagine though, this does not work since it has lower specificity.

So, what would be the best way to add Table variants while still keeping the flexibility of overriding them via classNames?