mast/mast-react-vite/src/components/ui/data-table.tsx
2025-02-19 23:17:05 -08:00

114 lines
3 KiB
TypeScript

"use client"
import { useState } from "react"
import {
ColumnDef,
ColumnSizingState,
RowSelectionState,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
data: TData[]
rowSelection: {}
setRowSelection: (value: {}) => void
}
export function DataTable<TData, TValue>({
columns,
data,
rowSelection,
setNewText,
newText,
setRowSelection,
}: DataTableProps<TData, TValue>) {
const [colSizing, setColSizing] = useState<ColumnSizingState>({});
const table = useReactTable({
data,
columns,
enableColumnResizing: true,
columnResizeMode: "onChange",
getCoreRowModel: getCoreRowModel(),
onColumnSizingChange: setColSizing,
onRowSelectionChange: setRowSelection,
state: {
columnSizing: colSizing,
rowSelection: rowSelection,
},
meta: {
setNewText,
newText,
}
})
return (
<div className="w-full overflow-x-auto">
<Table className="min-w-full table-fixed md:table-auto">
<TableHeader className="bg-accent flex flex-row md:table-header-group">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="flex flex-row flex-wrap md:table-row">
{headerGroup.headers.map((header) => (
<TableHead
key={header.id}
className="relative text-foreground flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
style={{
width: header.getSize(),
}}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody className="flex flex-col md:table-row-group">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="flex flex-row flex-wrap md:table-row"
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
className="flex-1 min-w-[20px] flex items-center px-4 py-2 md:table-cell"
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)
}