108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
"use client";
|
|
import {
|
|
ColumnDef,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
useReactTable,
|
|
getPaginationRowModel,
|
|
SortingState,
|
|
ColumnFiltersState,
|
|
getFilteredRowModel,
|
|
} from "@tanstack/react-table"
|
|
import { useState } from "react";
|
|
|
|
interface DataTableProps<TData, TValue> {
|
|
columns: ColumnDef<TData, TValue>[]
|
|
data: TData[]
|
|
}
|
|
|
|
export default function Table<TData, TValue>({
|
|
columns,
|
|
data,
|
|
}: DataTableProps<TData, TValue>) {
|
|
const [rowSelection, setRowSelection] = useState({})
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
|
|
[]
|
|
)
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
|
|
state: {
|
|
rowSelection,
|
|
columnFilters,
|
|
},
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
onRowSelectionChange: setRowSelection,
|
|
onColumnFiltersChange: setColumnFilters,
|
|
})
|
|
|
|
|
|
function clsx(arg0: string, arg1: { 'bg-gray-300': boolean; }): string | undefined {
|
|
throw new Error("Function not implemented.");
|
|
}
|
|
|
|
return(
|
|
<div>
|
|
<div className="rounded-md border">
|
|
<table>
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return(
|
|
<th key={header.id}>
|
|
{flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</th>
|
|
)
|
|
})}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody>
|
|
{table.getRowModel().rows.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<tr key={row.id} className={clsx('hover:bg-gray-300', { 'bg-gray-300': row.getIsSelected()})}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
)
|
|
: (
|
|
<tr>
|
|
<td>
|
|
Aucun résultats
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end space-x-2 py-4">
|
|
<button
|
|
className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black"
|
|
onClick={() => table.previousPage()}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
Précédent
|
|
</button>
|
|
<button
|
|
onClick={() => table.nextPage()}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
Suivant
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |