fixed up tables to use virtualized
This commit is contained in:
parent
7f4a70309c
commit
587fc0f228
2 changed files with 116 additions and 80 deletions
|
|
@ -11,6 +11,7 @@ import {
|
|||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { TableVirtuoso } from 'react-virtuoso';
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[];
|
||||
|
|
@ -19,6 +20,8 @@ interface DataTableProps<T> {
|
|||
className?: string;
|
||||
getRowCanExpand?: (row: Row<T>) => boolean;
|
||||
renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
|
||||
onRowClick?: (row: T) => void;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export function DataTable<T>({
|
||||
|
|
@ -28,6 +31,8 @@ export function DataTable<T>({
|
|||
className = '',
|
||||
getRowCanExpand,
|
||||
renderSubComponent,
|
||||
onRowClick,
|
||||
height,
|
||||
}: DataTableProps<T>) {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
|
||||
|
|
@ -54,89 +59,121 @@ export function DataTable<T>({
|
|||
);
|
||||
}
|
||||
|
||||
const { rows } = table.getRowModel();
|
||||
|
||||
// For expanded rows, we need to create a flattened list
|
||||
const flatRows = rows.reduce<Array<{ type: 'row' | 'expanded'; row: Row<T> }>>((acc, row) => {
|
||||
acc.push({ type: 'row', row });
|
||||
if (row.getIsExpanded() && renderSubComponent) {
|
||||
acc.push({ type: 'expanded', row });
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={cn('border border-border rounded-lg overflow-auto', className)}>
|
||||
<table className="w-full">
|
||||
<thead className="bg-surface border-b border-border">
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
className="relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left"
|
||||
style={{ width: header.getSize() }}
|
||||
<TableVirtuoso
|
||||
style={{ height: height ? `${height}px` : '100%' }}
|
||||
className={cn('border border-border rounded-lg', className)}
|
||||
totalCount={flatRows.length}
|
||||
components={{
|
||||
Table: ({ style, ...props }) => (
|
||||
<table
|
||||
{...props}
|
||||
style={{
|
||||
...style,
|
||||
width: '100%',
|
||||
}}
|
||||
className="bg-background"
|
||||
/>
|
||||
),
|
||||
TableRow: props => {
|
||||
const index = props['data-index'] as number;
|
||||
const item = flatRows[index];
|
||||
|
||||
if (!item) return null;
|
||||
|
||||
if (item.type === 'expanded') {
|
||||
return (
|
||||
<tr {...props} className="bg-surface-secondary/50">
|
||||
<td colSpan={item.row.getVisibleCells().length} className="p-0">
|
||||
{renderSubComponent?.({ row: item.row })}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr
|
||||
{...props}
|
||||
className="hover:bg-surface border-b border-border cursor-pointer"
|
||||
onClick={() => onRowClick?.(item.row.original)}
|
||||
>
|
||||
{item.row.getVisibleCells().map(cell => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className="px-3 py-2 text-sm text-text-primary"
|
||||
style={{ width: cell.column.getSize() }}
|
||||
>
|
||||
{header.isPlaceholder ? null : (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between',
|
||||
header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
|
||||
)}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
<span className="truncate">
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
{header.column.getCanSort() && (
|
||||
<div className="ml-2 flex-shrink-0">
|
||||
{header.column.getIsSorted() === 'asc' ? (
|
||||
<ChevronUpIcon className="h-4 w-4 text-primary-400" />
|
||||
) : header.column.getIsSorted() === 'desc' ? (
|
||||
<ChevronDownIcon className="h-4 w-4 text-primary-400" />
|
||||
) : (
|
||||
<div className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Column resizer */}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
className={cn(
|
||||
'absolute right-0 top-0 h-full w-1 cursor-col-resize user-select-none touch-none',
|
||||
'hover:bg-primary-500 hover:opacity-100',
|
||||
header.column.getIsResizing() ? 'bg-primary-500 opacity-100' : 'bg-border opacity-0'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</th>
|
||||
<div className="truncate">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map(row => (
|
||||
<Fragment key={row.id}>
|
||||
<tr className="hover:bg-surface border-b border-border">
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className="px-3 py-2 text-sm text-text-primary"
|
||||
style={{ width: cell.column.getSize() }}
|
||||
>
|
||||
<div className="truncate">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
);
|
||||
},
|
||||
}}
|
||||
fixedHeaderContent={() =>
|
||||
table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id} className="bg-surface border-b border-border">
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
className={cn(
|
||||
'relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left',
|
||||
header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
|
||||
)}
|
||||
style={{ width: header.getSize() }}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{header.isPlaceholder ? null : (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="truncate">
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
{header.column.getCanSort() && (
|
||||
<div className="ml-2 flex-shrink-0">
|
||||
{header.column.getIsSorted() === 'asc' ? (
|
||||
<ChevronUpIcon className="h-4 w-4 text-primary-400" />
|
||||
) : header.column.getIsSorted() === 'desc' ? (
|
||||
<ChevronDownIcon className="h-4 w-4 text-primary-400" />
|
||||
) : (
|
||||
<div className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
{row.getIsExpanded() && renderSubComponent && (
|
||||
<tr className="bg-surface-secondary/50">
|
||||
<td colSpan={row.getVisibleCells().length} className="p-0">
|
||||
{renderSubComponent({ row })}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* Column resizer */}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
className={cn(
|
||||
'absolute right-0 top-0 h-full w-1 cursor-col-resize user-select-none touch-none',
|
||||
'hover:bg-primary-500 hover:opacity-100',
|
||||
header.column.getIsResizing() ? 'bg-primary-500 opacity-100' : 'bg-border opacity-0'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -368,7 +368,6 @@ export function ExchangesTable() {
|
|||
data={exchanges || []}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
className="max-h-[calc(100vh-300px)]"
|
||||
getRowCanExpand={() => true}
|
||||
renderSubComponent={renderSubComponent}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue