Update options.meta
The meta never updates / rerenders when using the table.setOptions function
header: ({ table, column }) => {
const loadUnit = table.options.meta?.loadUnit;
return (
<div className="flex items-center gap-2">
<pre>{JSON.stringify(table.options.meta)}</pre>
<DataTableColumnHeader column={column} title={`Load (${loadUnit})`} />
<Select
value={undefined}
onValueChange={(value) => {
table.setOptions((prev) => ({
...prev,
meta: {
...prev.meta,
loadUnit: value as 'lb' | 'kg',
},
}));
}}
>
<SelectTrigger className="w-[100px]">
<SelectValue placeholder="Select unit" />
</SelectTrigger>
<SelectContent align="start">
{LOAD_UNIT_ENUM.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
},
header: ({ table, column }) => {
const loadUnit = table.options.meta?.loadUnit;
return (
<div className="flex items-center gap-2">
<pre>{JSON.stringify(table.options.meta)}</pre>
<DataTableColumnHeader column={column} title={`Load (${loadUnit})`} />
<Select
value={undefined}
onValueChange={(value) => {
table.setOptions((prev) => ({
...prev,
meta: {
...prev.meta,
loadUnit: value as 'lb' | 'kg',
},
}));
}}
>
<SelectTrigger className="w-[100px]">
<SelectValue placeholder="Select unit" />
</SelectTrigger>
<SelectContent align="start">
{LOAD_UNIT_ENUM.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
},
1 Reply
exotic-emeraldOP•3mo ago
is the better option to pass a state variable/setter to meta and update there? I thought table.options.meta is reactive?