...
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>