76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import {
|
|
useReactTable,
|
|
getCoreRowModel,
|
|
getSortedRowModel,
|
|
ColumnDef,
|
|
SortingState,
|
|
flexRender,
|
|
} from '@tanstack/react-table';
|
|
import { ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
|
|
|
|
export interface SortableTableProps<TData> {
|
|
data: TData[];
|
|
columns: ColumnDef<TData>[];
|
|
}
|
|
|
|
export default function SortableTable<TData>({
|
|
data,
|
|
columns,
|
|
}: SortableTableProps<TData>) {
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
onSortingChange: setSorting,
|
|
state: { sorting },
|
|
});
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="table table-zebra w-full">
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th
|
|
key={header.id}
|
|
onClick={header.column.getToggleSortingHandler()}
|
|
>
|
|
<div className="flex items-center gap-1 cursor-pointer">
|
|
{flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
{header.column.getIsSorted() === 'asc' && (
|
|
<ChevronUp size={16} />
|
|
)}
|
|
{header.column.getIsSorted() === 'desc' && (
|
|
<ChevronDown size={16} />
|
|
)}
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody>
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|