44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ColumnDef,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
useReactTable
|
|
} from "@tanstack/react-table";
|
|
|
|
export function DataTable<T>({ data, columns }: { data: T[]; columns: ColumnDef<T>[] }) {
|
|
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-lg border border-border bg-surface shadow-soft">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full border-collapse text-left text-sm">
|
|
<thead className="bg-background text-xs uppercase tracking-wide text-text-light">
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th key={header.id} className="px-5 py-4 font-semibold">
|
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr key={row.id} className="hover:bg-background/70">
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td key={cell.id} className="whitespace-nowrap px-5 py-4 text-text">
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|