"use client" import { type ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, type ColumnFiltersState, getFilteredRowModel, getSortedRowModel, type SortingState, useReactTable, } from "@tanstack/react-table"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import {Button} from "@/components/ui/button"; import {useState} from "react"; import {Input} from "@/components/ui/input"; interface DataTableProps { columns: ColumnDef[] data: TData[] fieldToFilter: string } export function DataTable({ columns, data, fieldToFilter, }: DataTableProps) { const [sorting, setSorting] = useState([]) const [columnFilters, setColumnFilters] = useState( [] ) const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), onColumnFiltersChange: setColumnFilters, getFilteredRowModel: getFilteredRowModel(), state: { sorting, columnFilters, }, }) return (
table.getColumn(fieldToFilter)?.setFilterValue(event.target.value) } className="max-w-sm" />
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )}
) }