// Client component to display data
export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: { pageSize: 10 },
columnVisibility: {
abbreviation: false,
familyRank: false,
},
},
});
return (
<div className="flex flex-col gap-4">
<Toolbar table={table} />
<div className="overflow-hidden rounded-lg border ">
<Table>
</Table>
</div>
<Pagination table={table} />
</div>
);
}
// Client component to display data
export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: { pageSize: 10 },
columnVisibility: {
abbreviation: false,
familyRank: false,
},
},
});
return (
<div className="flex flex-col gap-4">
<Toolbar table={table} />
<div className="overflow-hidden rounded-lg border ">
<Table>
</Table>
</div>
<Pagination table={table} />
</div>
);
}