T
TanStack•7mo ago
modern-teal

Access header context in cell rendering

I have the table components below, and I want the user to able to switch between normal table layout and vertical table. in vertical table layout every row becomes its own table, I want to access the header context in the cell rendering cycle to prevent any errors:
3 Replies
modern-teal
modern-tealOP•7mo ago
The code
modern-teal
modern-tealOP•7mo ago
modern-teal
modern-tealOP•7mo ago
This code in particular 
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-8 gap-x-4">
                            {table.getCoreRowModel().rows.map((row) => (
                                <$Table key={row.id} withTableBorder>
                                    <TableTbody>
                                        {row.getVisibleCells().map((cell) => (
                                            <TableTr key={cell.id}>
                                                <TableTh>
                                                    {flexRender(cell.column.columnDef.header, {})}
                                                </TableTh>
                                                <TableTd key={cell.id}>
                                                    {flexRender(
                                                        cell.column.columnDef.cell,
                                                        cell.getContext(),
                                                    )}
                                                </TableTd>
                                            </TableTr>
                                        ))}
                                    </TableTbody>
                                </$Table>
                            ))}
                        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-8 gap-x-4">
                            {table.getCoreRowModel().rows.map((row) => (
                                <$Table key={row.id} withTableBorder>
                                    <TableTbody>
                                        {row.getVisibleCells().map((cell) => (
                                            <TableTr key={cell.id}>
                                                <TableTh>
                                                    {flexRender(cell.column.columnDef.header, {})}
                                                </TableTh>
                                                <TableTd key={cell.id}>
                                                    {flexRender(
                                                        cell.column.columnDef.cell,
                                                        cell.getContext(),
                                                    )}
                                                </TableTd>
                                            </TableTr>
                                        ))}
                                    </TableTbody>
                                </$Table>
                            ))}
                        </div>

Did you find this page helpful?