row.getCanExpand() always false on expanding table
Im trying to make a expandable table but when I try customizing the cell for the expandable column, the
This is my comun def
And this is what I am passing to my
row.getCanExpand()row.getCanExpand() always returns false. I find no way to make it return trueThis is my comun def
export type BaseOrderData = {
id?: string | null;
createdAt?: string | null;
status?: string | null;
shippingMethod?: string | null;
address?: string | null;
totalProducts?: number | null;
total?: number | null;
};
export const columns: ColumnDef<BaseOrderData>[] = [
{
accessorKey: "id",
header: "ID",
cell: ({ row }) => {
return (row.getCanExpand() ? (
<button
{...{
onClick: row.getToggleExpandedHandler(),
style: { cursor: 'pointer' },
}}
>
{row.getIsExpanded() ? '👇' : '👉'}
</button>) : 'nope')
}
},
{
accessorKey: "createdAt",
header: "Fecha",
},
{
accessorKey: "status",
header: "Estado",
},
{
accessorKey: "shippingMethod",
header: "Método de envío",
},
{
accessorKey: "address",
header: "Dirección",
},
{
accessorKey: "totalProducts",
header: "Total productos",
},
{
accessorKey: "total",
header: "Total",
},
];export type BaseOrderData = {
id?: string | null;
createdAt?: string | null;
status?: string | null;
shippingMethod?: string | null;
address?: string | null;
totalProducts?: number | null;
total?: number | null;
};
export const columns: ColumnDef<BaseOrderData>[] = [
{
accessorKey: "id",
header: "ID",
cell: ({ row }) => {
return (row.getCanExpand() ? (
<button
{...{
onClick: row.getToggleExpandedHandler(),
style: { cursor: 'pointer' },
}}
>
{row.getIsExpanded() ? '👇' : '👉'}
</button>) : 'nope')
}
},
{
accessorKey: "createdAt",
header: "Fecha",
},
{
accessorKey: "status",
header: "Estado",
},
{
accessorKey: "shippingMethod",
header: "Método de envío",
},
{
accessorKey: "address",
header: "Dirección",
},
{
accessorKey: "totalProducts",
header: "Total productos",
},
{
accessorKey: "total",
header: "Total",
},
];And this is what I am passing to my
useReactTableuseReactTable method const [expanded, setExpanded] = useState<ExpandedState>({});
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: setExpanded,
state: {
expanded,
},
debugTable: true
}); const [expanded, setExpanded] = useState<ExpandedState>({});
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: setExpanded,
state: {
expanded,
},
debugTable: true
});
