[Newbie] Table Rows won't render, header does
Hey, I'm new to using React Table and need help figuring out what's wrong with my code.
The TH rows render properly, yet the actual rows don't. Here I am trying to pass in
The TH rows render properly, yet the actual rows don't. Here I am trying to pass in
dummyDatadummyData to it to no avail ...
const Table = ({ data, columns }) => {
const dummyData = useMemo(
() => [
{
timestamp: 242342345151,
id: '1234567890',
status: 14,
source: 'test',
},
],
[]
);
const table = useReactTable({
data: dummyData,
columns,
getCoreRowModel: getCoreRowModel(),
debugTable: true,
});
return (
<>
<div className="overflow-x-auto">
<table className="table-auto w-full border-separate border-spacing-y-2.5">
<thead className="text-[#0052CD]">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className="border-b-[#CCDCF5] border-b-2 uppercase text-sm">
{headerGroup.headers.map((header) => (
<th key={header.id}>
{flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
<tr className="bg-[#CCDCF5] h-[3px]">
<th />
<th />
<th />
<th />
</tr>
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-gray-200 bg-white p-4 shadow-sm rounded-xl">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-2">
{/* !! Specficially down here */}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>...
const Table = ({ data, columns }) => {
const dummyData = useMemo(
() => [
{
timestamp: 242342345151,
id: '1234567890',
status: 14,
source: 'test',
},
],
[]
);
const table = useReactTable({
data: dummyData,
columns,
getCoreRowModel: getCoreRowModel(),
debugTable: true,
});
return (
<>
<div className="overflow-x-auto">
<table className="table-auto w-full border-separate border-spacing-y-2.5">
<thead className="text-[#0052CD]">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className="border-b-[#CCDCF5] border-b-2 uppercase text-sm">
{headerGroup.headers.map((header) => (
<th key={header.id}>
{flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
<tr className="bg-[#CCDCF5] h-[3px]">
<th />
<th />
<th />
<th />
</tr>
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-gray-200 bg-white p-4 shadow-sm rounded-xl">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-2">
{/* !! Specficially down here */}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
