120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
import type { VisibilityState, SortingState, ColumnDef, FilterFn, ColumnFiltersState } from '@tanstack/react-table'
|
|
import {
|
|
useReactTable,
|
|
getCoreRowModel,
|
|
getFilteredRowModel,
|
|
getSortedRowModel,
|
|
getFacetedRowModel,
|
|
getFacetedUniqueValues,
|
|
flexRender
|
|
} from '@tanstack/react-table'
|
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
|
import { useState } from 'react'
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
|
import { ReloadIcon } from '@radix-ui/react-icons'
|
|
import DataTableToolbar from './data-table-toolbar'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
|
// Rank the item
|
|
const itemRank = rankItem(row.getValue(columnId), value)
|
|
|
|
// Store the itemRank info
|
|
addMeta({
|
|
itemRank
|
|
})
|
|
|
|
// Return if the item should be filtered in/out
|
|
return itemRank.passed
|
|
}
|
|
|
|
interface DataTableProps<TData, TValue> {
|
|
columns: ColumnDef<TData, TValue>[]
|
|
data: TData[]
|
|
isLoading: boolean
|
|
}
|
|
|
|
const DataTable = <TData, TValue>({ columns, data, isLoading }: DataTableProps<TData, TValue>) => {
|
|
const [rowSelection, setRowSelection] = useState({})
|
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
|
|
const [sorting, setSorting] = useState<SortingState>([
|
|
{
|
|
id: 'type',
|
|
desc: false
|
|
}
|
|
])
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
filterFns: {
|
|
fuzzy: fuzzyFilter
|
|
},
|
|
state: {
|
|
sorting,
|
|
columnVisibility,
|
|
rowSelection,
|
|
columnFilters
|
|
},
|
|
globalFilterFn: fuzzyFilter,
|
|
enableRowSelection: true,
|
|
onRowSelectionChange: setRowSelection,
|
|
onSortingChange: setSorting,
|
|
onColumnFiltersChange: setColumnFilters,
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
getFacetedRowModel: getFacetedRowModel(),
|
|
getFacetedUniqueValues: getFacetedUniqueValues()
|
|
})
|
|
return (
|
|
<div className="space-y-4">
|
|
<DataTableToolbar table={table} />
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map(headerGroup => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map(header => {
|
|
return (
|
|
<TableHead key={header.id} colSpan={header.colSpan}>
|
|
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
)
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map(row => (
|
|
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
|
|
{row.getVisibleCells().map(cell => (
|
|
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : isLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="flex h-24 space-x-5 text-center">
|
|
<span>Loading...</span>
|
|
<ReloadIcon className="h-5 w-5 animate-spin" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
No results.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DataTable
|