Expanding same row.
I have a table in React Table defined like so:
And with columns defined like so:
I want to be able to expand the row, so that I can show all the details from the "data" object.
As you can see, I am already using some of the data from the "data" object, for the "real" row.
When I setup the code like above, I am not able to expand the rows, even if I force . (Nothing happens when button is pressed)
Am I missing something, or am I just not able to expand if I don't have an actual sub-row object?
const table = useReactTable({
data: [
{
created_at: "2024-10-13T08:12:10.881855+00:00",
organization_id: "org_id",
id: "id",
data: {
type: "log_type",
company_id: "company_id",
profile_id: "profile_id",
/*
other keys for details of log
*/
},
},
],
columns: columns,
getCoreRowModel: getCoreRowModel(),
manualPagination: true,
getSortedRowModel: getSortedRowModel(),
getExpandedRowModel: getExpandedRowModel(),
rowCount: 1,
getRowCanExpand: () => true,
});
const table = useReactTable({
data: [
{
created_at: "2024-10-13T08:12:10.881855+00:00",
organization_id: "org_id",
id: "id",
data: {
type: "log_type",
company_id: "company_id",
profile_id: "profile_id",
/*
other keys for details of log
*/
},
},
],
columns: columns,
getCoreRowModel: getCoreRowModel(),
manualPagination: true,
getSortedRowModel: getSortedRowModel(),
getExpandedRowModel: getExpandedRowModel(),
rowCount: 1,
getRowCanExpand: () => true,
});
export const columns: ColumnDef<IAuditLog>[] = [
{
accessorKey: "created_at",
header: "Time",
cell: ({ row }) => {
const timezoneTime = fromUTC(new Date(row.original.created_at));
return (
<>
{timezoneTime.date} {timezoneTime.time}
</>
);
},
},
{
accessorKey: "type",
header: "Log Type",
cell: ({ row }) => {
return <>{row.original.data.type}</>;
},
},
{
accessorKey: "children",
header: () => <>Expand</>,
cell: ({ row }) => {
return (
<>
{row.getCanExpand() ? (
<Button onClick={() => row.getToggleExpandedHandler()}>
{row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
</Button>
) : null}
</>
);
},
},
];
export const columns: ColumnDef<IAuditLog>[] = [
{
accessorKey: "created_at",
header: "Time",
cell: ({ row }) => {
const timezoneTime = fromUTC(new Date(row.original.created_at));
return (
<>
{timezoneTime.date} {timezoneTime.time}
</>
);
},
},
{
accessorKey: "type",
header: "Log Type",
cell: ({ row }) => {
return <>{row.original.data.type}</>;
},
},
{
accessorKey: "children",
header: () => <>Expand</>,
cell: ({ row }) => {
return (
<>
{row.getCanExpand() ? (
<Button onClick={() => row.getToggleExpandedHandler()}>
{row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
</Button>
) : null}
</>
);
},
},
];
getRowCanExpand: () => true
getRowCanExpand: () => true
1 Reply
ambitious-aquaOP•11mo ago
I render the row like so:
table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
<TableRow
data-state={row.getIsSelected() && "selected"}
onClick={() => {
if (!onRowClick) return;
onRowClick(row);
}}
className={cn("", { "cursor-pointer": !!onRowClick })}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
))}
</TableRow>
<TableRow>
<TableCell key="expanded">{JSON.stringify(row.original)}</TableCell>
</TableRow>
</Fragment>
))
table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
<TableRow
data-state={row.getIsSelected() && "selected"}
onClick={() => {
if (!onRowClick) return;
onRowClick(row);
}}
className={cn("", { "cursor-pointer": !!onRowClick })}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
))}
</TableRow>
<TableRow>
<TableCell key="expanded">{JSON.stringify(row.original)}</TableCell>
</TableRow>
</Fragment>
))