Seeing header but not rows
The code below gives me a table with a header row, but no rows below it with data. I've confirmed that the data variable is populated correctly. Can somebody tell me what I'm missing please?
type Subject = {
_id: String
subject: String
what: {
description: String
subtopics: []}
why: {
description: String
subtopics: []}
how: {
description: String
subtopics: []}
}
const columns = [
{
header: 'Subject',
accessorKey: 'subject',
},
]
function Table(data:Subject[]) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
console.log ("mark")
console.log (data)
return (
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr
key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
)
}type Subject = {
_id: String
subject: String
what: {
description: String
subtopics: []}
why: {
description: String
subtopics: []}
how: {
description: String
subtopics: []}
}
const columns = [
{
header: 'Subject',
accessorKey: 'subject',
},
]
function Table(data:Subject[]) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
console.log ("mark")
console.log (data)
return (
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr
key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
)
}
