boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

improved datatable

Browse source
This commit is contained in:
Boki 2025-06-18 07:54:42 -04:00
parent 344478c577
commit 7f4a70309c
2 changed files with 137 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

181
apps/web-app/src/components/ui/DataTable/DataTable.tsx
View file

@ -4,29 +4,30 @@ import {
ColumnDef,
flexRender,
getCoreRowModel,
getExpandedRowModel,
getSortedRowModel,
Row,
SortingState,
useReactTable,
} from '@tanstack/react-table';
import { useState } from 'react';
import { TableVirtuoso } from 'react-virtuoso';
import { Fragment, useState } from 'react';
interface DataTableProps<T> {
data: T[];
columns: ColumnDef<T>[];
height?: number;
loading?: boolean;
onRowClick?: (row: T) => void;
className?: string;
getRowCanExpand?: (row: Row<T>) => boolean;
renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
}
export function DataTable<T>({
data,
columns,
height,
loading = false,
onRowClick,
className = '',
getRowCanExpand,
renderSubComponent,
}: DataTableProps<T>) {
const [sorting, setSorting] = useState<SortingState>([]);
@ -39,11 +40,12 @@ export function DataTable<T>({
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
enableSorting: true,
getExpandedRowModel: getExpandedRowModel(),
getRowCanExpand,
enableColumnResizing: true,
columnResizeMode: 'onChange',
});
const { rows } = table.getRowModel();
if (loading) {
return (
<div className="flex items-center justify-center h-64 bg-background border border-border rounded-lg">
@ -53,87 +55,88 @@ export function DataTable<T>({
}
return (
<TableVirtuoso
style={height ? { height: `${height}px` } : { height: '100%' }}
className={cn('border border-border rounded-lg', className)}
totalCount={rows.length}
components={{
Table: ({ style, ...props }) => (
<table
{...props}
{...{
style: {
...style,
width: table.getCenterTotalSize(),
minWidth: '100%',
},
}}
className="bg-background"
/>
),
TableRow: props => {
const index = props['data-index'] as number;
const row = rows[index];
return (
<tr
{...props}
className="hover:bg-surface cursor-pointer border-b border-border"
onClick={() => onRowClick?.(row.original)}
>
{row.getVisibleCells().map(cell => (
<td
key={cell.id}
className="px-3 py-2 text-sm text-text-primary border-r border-border"
style={{ width: cell.column.getSize() }}
<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() }}
>
<div className="truncate">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</td>
))}
</tr>
);
},
}}
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(
'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
header.column.getCanSort() &&
'cursor-pointer select-none hover:bg-surface-secondary'
)}
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" />
{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>
)}
</div>
)}
</th>
))}
</tr>
))
}
/>
{/* 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>
))}
</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())}
</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>
);
}
}

131
apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
View file

@ -13,20 +13,17 @@ export function ExchangesTable() {
error,
updateExchange,
fetchExchangeDetails,
fetchProviderMappings,
updateProviderMapping,
createProviderMapping,
refetch
} = useExchanges();
console.log('ExchangesTable render:', { exchanges, loading, error });
const [editingCell, setEditingCell] = useState<{ id: string; field: string } | null>(null);
const [editValue, setEditValue] = useState('');
const [addProviderDialog, setAddProviderDialog] = useState<{
exchangeId: string;
exchangeName: string;
} | null>(null);
const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
const [expandedRowData, setExpandedRowData] = useState<Record<string, ProviderMapping[]>>({});
const handleCellEdit = useCallback(
@ -61,59 +58,50 @@ export function ExchangesTable() {
[updateProviderMapping, refetch]
);
const handleToggleExpandRow = useCallback(async (rowId: string) => {
setExpandedRows(prev => {
const next = new Set(prev);
if (next.has(rowId)) {
next.delete(rowId);
} else {
next.add(rowId);
// Load provider mappings for this exchange
if (!expandedRowData[rowId]) {
fetchExchangeDetails(rowId).then(details => {
if (details) {
setExpandedRowData(prev => ({
...prev,
[rowId]: details.provider_mappings
}));
}
});
const handleRowExpand = useCallback(
async (row: any) => {
const exchangeId = row.original.id;
if (!expandedRowData[exchangeId]) {
const details = await fetchExchangeDetails(exchangeId);
if (details) {
setExpandedRowData(prev => ({
...prev,
[exchangeId]: details.provider_mappings
}));
}
}
return next;
});
}, [fetchExchangeDetails, expandedRowData]);
},
[fetchExchangeDetails]
);
const columns = useMemo<ColumnDef<Exchange>[]>(() => {
return [
{
id: 'expand',
id: 'expander',
header: '',
size: 30,
enableResizing: false,
cell: ({ row }) => {
const isExpanded = expandedRows.has(row.original.id);
return (
return row.getCanExpand() ? (
<button
onClick={() => handleToggleExpandRow(row.original.id)}
className="text-text-secondary hover:text-text-primary transition-colors"
onClick={() => {
row.getToggleExpandedHandler()();
handleRowExpand(row);
}}
className="text-text-secondary hover:text-text-primary transition-colors w-6 h-6 flex items-center justify-center"
>
{isExpanded ? '▼' : '▶'}
{row.getIsExpanded() ? '▼' : '▶'}
</button>
);
) : null;
},
size: 40,
enableResizing: false,
},
{
id: 'id',
header: 'ID',
accessorKey: 'id',
size: 50,
enableResizing: false,
cell: ({ getValue, cell }) => (
<span
className="font-mono text-primary-400 text-xs"
style={{ width: cell.column.getSize() }}
>
size: 80,
cell: ({ getValue }) => (
<span className="font-mono text-primary-400 text-xs">
{getValue() as string}
</span>
),
@ -122,13 +110,9 @@ export function ExchangesTable() {
id: 'code',
header: 'Code',
accessorKey: 'code',
size: 80,
enableResizing: false,
cell: ({ getValue, cell }) => (
<span
className="font-mono text-text-primary text-sm font-medium"
style={{ width: cell.column.getSize() }}
>
size: 100,
cell: ({ getValue }) => (
<span className="font-mono text-text-primary text-sm font-medium">
{getValue() as string}
</span>
),
@ -137,9 +121,7 @@ export function ExchangesTable() {
id: 'name',
header: 'Name',
accessorKey: 'name',
size: 200,
maxSize: 300,
enableResizing: true,
size: 250,
cell: ({ getValue, row, cell }) => {
const isEditing =
editingCell?.id === row.original.id && editingCell?.field === 'name';
@ -184,7 +166,6 @@ export function ExchangesTable() {
header: 'Country',
accessorKey: 'country',
size: 80,
maxSize: 80,
cell: ({ getValue }) => (
<span className="text-text-secondary text-sm">{getValue() as string}</span>
),
@ -193,7 +174,7 @@ export function ExchangesTable() {
id: 'currency',
header: 'Currency',
accessorKey: 'currency',
size: 70,
size: 80,
cell: ({ getValue, cell }) => (
<span
className="font-mono text-text-secondary text-sm"
@ -208,7 +189,6 @@ export function ExchangesTable() {
header: 'Active',
accessorKey: 'active',
size: 80,
maxSize: 80,
cell: ({ getValue, row, cell }) => {
const isActive = getValue() as boolean;
return (
@ -231,7 +211,7 @@ export function ExchangesTable() {
id: 'provider_mappings',
header: 'Provider Mappings',
accessorKey: 'provider_mapping_count',
size: 150,
size: 180,
cell: ({ getValue, row }) => {
const totalMappings = parseInt(getValue() as string) || 0;
const activeMappings = parseInt(row.original.active_mapping_count) || 0;
@ -265,7 +245,7 @@ export function ExchangesTable() {
{
id: 'actions',
header: 'Actions',
size: 100,
size: 120,
cell: ({ row }) => (
<button
onClick={() => handleAddProviderMapping(row.original.id, row.original.name)}
@ -282,7 +262,6 @@ export function ExchangesTable() {
header: 'Last Updated',
accessorKey: 'updated_at',
size: 120,
maxSize: 120,
cell: ({ getValue }) => (
<span className="text-xs text-text-muted">
{new Date(getValue() as string).toLocaleDateString()}
@ -293,11 +272,10 @@ export function ExchangesTable() {
}, [
editingCell,
editValue,
expandedRows,
handleCellEdit,
handleToggleActive,
handleAddProviderMapping,
handleToggleExpandRow,
handleRowExpand,
]);
if (error) {
@ -312,7 +290,8 @@ export function ExchangesTable() {
);
}
const renderExpandedRow = (exchange: Exchange) => {
const renderSubComponent = ({ row }: { row: any }) => {
const exchange = row.original as Exchange;
const mappings = expandedRowData[exchange.id] || [];
if (mappings.length === 0) {
@ -383,36 +362,16 @@ export function ExchangesTable() {
);
};
console.log('About to render DataTable with:', {
dataLength: (exchanges || []).length,
columnsLength: columns.length,
loading,
error
});
return (
<>
<div className="space-y-0">
<DataTable
data={exchanges || []}
columns={columns}
loading={loading}
height={600}
className="rounded-lg border border-border"
/>
{/* Expanded rows */}
{Array.from(expandedRows).map(exchangeId => {
const exchange = exchanges?.find(e => e.id === exchangeId);
if (!exchange) return null;
return (
<div key={`expanded-${exchangeId}`} className="border-l border-r border-b border-border rounded-b-lg -mt-1">
{renderExpandedRow(exchange)}
</div>
);
})}
</div>
<DataTable
data={exchanges || []}
columns={columns}
loading={loading}
className="max-h-[calc(100vh-300px)]"
getRowCanExpand={() => true}
renderSubComponent={renderSubComponent}
/>
{addProviderDialog && (
<AddProviderMappingDialog