131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
import {
|
|
ColumnDef,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getSortedRowModel,
|
|
Row,
|
|
SortingState,
|
|
useReactTable,
|
|
} from '@tanstack/react-table'
|
|
import classNames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import VaultExpanded from 'components/Earn/Farm/VaultExpanded'
|
|
import { VaultRow } from 'components/Earn/Farm/VaultRow'
|
|
import { SortAsc, SortDesc, SortNone } from 'components/Icons'
|
|
|
|
import Text from '../Text'
|
|
|
|
interface Props {
|
|
columns: ColumnDef<any>[]
|
|
data: unknown[]
|
|
initialSorting: SortingState
|
|
}
|
|
|
|
export default function Table(props: Props) {
|
|
const [sorting, setSorting] = React.useState<SortingState>(props.initialSorting)
|
|
|
|
const table = useReactTable({
|
|
data: props.data,
|
|
columns: props.columns,
|
|
state: {
|
|
sorting,
|
|
},
|
|
onSortingChange: setSorting,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
})
|
|
|
|
return (
|
|
<table className='w-full'>
|
|
<thead className='bg-black/20'>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<th
|
|
key={header.id}
|
|
onClick={header.column.getToggleSortingHandler()}
|
|
className={classNames(
|
|
'px-4 py-3',
|
|
header.column.getCanSort() && 'hover:cursor-pointer',
|
|
header.id === 'symbol' ? 'text-left' : 'text-right',
|
|
)}
|
|
>
|
|
<div
|
|
className={classNames(
|
|
'flex',
|
|
header.id === 'name' ? 'justify-start' : 'justify-end',
|
|
'align-center',
|
|
)}
|
|
>
|
|
<span className='w-6 h-6 text-white'>
|
|
{header.column.getCanSort()
|
|
? {
|
|
asc: <SortAsc />,
|
|
desc: <SortDesc />,
|
|
false: <SortNone />,
|
|
}[header.column.getIsSorted() as string] ?? null
|
|
: null}
|
|
</span>
|
|
<Text
|
|
tag='span'
|
|
size='xs'
|
|
className='flex items-center font-normal text-white/40'
|
|
>
|
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
|
</Text>
|
|
</div>
|
|
</th>
|
|
)
|
|
})}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody>
|
|
{table.getRowModel().rows.map((row) => {
|
|
if (row.getIsExpanded()) {
|
|
return (
|
|
<React.Fragment key={`${row.id}_subrow`}>
|
|
{getExpandedRowModel('farm', row, table.resetExpanded)}
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
|
|
return getRowModel('farm', row, table.resetExpanded)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
|
|
function getExpandedRowModel(
|
|
type: 'farm',
|
|
row: unknown,
|
|
resetExpanded: (defaultState?: boolean | undefined) => void,
|
|
) {
|
|
switch (type) {
|
|
case 'farm':
|
|
return (
|
|
<>
|
|
<VaultRow row={row as Row<Vault>} resetExpanded={resetExpanded} />
|
|
<VaultExpanded row={row as Row<Vault>} resetExpanded={resetExpanded} />
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
function getRowModel(
|
|
type: 'farm',
|
|
row: Row<unknown>,
|
|
resetExpanded: (defaultState?: boolean | undefined) => void,
|
|
) {
|
|
return (
|
|
<VaultRow
|
|
key={(row as Row<Vault>).original.address}
|
|
row={row as Row<Vault>}
|
|
resetExpanded={resetExpanded}
|
|
/>
|
|
)
|
|
}
|