[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
dummyData 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>
3 Replies
sensitive-blueOP•3y ago
The
columns I am passing:
const columns = [
{
header: 'Time',
accesorKey: 'timestamp',
},
{
header: 'ID',
accesorKey: 'id',
},
{
header: 'Status',
accesorKey: 'status',
},
{
header: 'Source',
accesorKey: 'source',
}
]
const columns = [
{
header: 'Time',
accesorKey: 'timestamp',
},
{
header: 'ID',
accesorKey: 'id',
},
{
header: 'Status',
accesorKey: 'status',
},
{
header: 'Source',
accesorKey: 'source',
}
]
sensitive-blueOP•3y ago
What it looks like, it renders the rows, but not the data inside (e.g doesn't show
dummyData), if I pass in a large data chunk, I'd see the amount of rows render, but not the actual values inside)
sensitive-blueOP•3y ago
Not sure what it was specifically, but I just tried to recreate the columns with createColumnHelper and it worked.
const columnHelper = createColumnHelper<Event>();
const columns = [
columnHelper.accessor('timestamp', {
header: () => 'time',
cell: (info) => format(info.getValue(), 'dd/MM/yyyy — HH:mm:ss'),
}),
columnHelper.accessor('id', {
header: () => 'event id',
}),
columnHelper.accessor('status', {
// to be rendered as a badge
// cell: (info) => info.renderValue(),
}),
columnHelper.accessor('source', {
// to be rendered as a badge
// cell: (info) => info.renderValue(),
}),
];
const columnHelper = createColumnHelper<Event>();
const columns = [
columnHelper.accessor('timestamp', {
header: () => 'time',
cell: (info) => format(info.getValue(), 'dd/MM/yyyy — HH:mm:ss'),
}),
columnHelper.accessor('id', {
header: () => 'event id',
}),
columnHelper.accessor('status', {
// to be rendered as a badge
// cell: (info) => info.renderValue(),
}),
columnHelper.accessor('source', {
// to be rendered as a badge
// cell: (info) => info.renderValue(),
}),
];