updates to tables and expanded them to full
This commit is contained in:
parent
e8fbe76f2e
commit
065d3943f6
6 changed files with 118 additions and 198 deletions
|
|
@ -4,7 +4,6 @@ import {
|
|||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getSortedRowModel,
|
||||
SortingState,
|
||||
useReactTable,
|
||||
|
|
@ -24,28 +23,23 @@ interface DataTableProps<T> {
|
|||
export function DataTable<T>({
|
||||
data,
|
||||
columns,
|
||||
height = 500,
|
||||
height,
|
||||
loading = false,
|
||||
onRowClick,
|
||||
className = '',
|
||||
}: DataTableProps<T>) {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
state: {
|
||||
sorting,
|
||||
globalFilter,
|
||||
},
|
||||
onSortingChange: setSorting,
|
||||
onGlobalFilterChange: setGlobalFilter,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
enableSorting: true,
|
||||
enableGlobalFilter: true,
|
||||
});
|
||||
|
||||
const { rows } = table.getRowModel();
|
||||
|
|
@ -59,22 +53,9 @@ export function DataTable<T>({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={cn('bg-background text-text-primary', className)}>
|
||||
{/* Search */}
|
||||
<div className="p-4 border-b border-border">
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilter}
|
||||
onChange={e => setGlobalFilter(e.target.value)}
|
||||
placeholder="Search..."
|
||||
className="w-full max-w-md bg-surface border border-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Virtualized Table */}
|
||||
<TableVirtuoso
|
||||
style={{ height: `${height}px` }}
|
||||
className="border border-border rounded-lg"
|
||||
style={height ? { height: `${height}px` } : { height: '100%' }}
|
||||
className={cn('border border-border rounded-lg', className)}
|
||||
totalCount={rows.length}
|
||||
components={{
|
||||
Table: ({ style, ...props }) => (
|
||||
|
|
@ -154,14 +135,5 @@ export function DataTable<T>({
|
|||
))
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between mt-2 px-2 text-sm text-text-secondary">
|
||||
<span>
|
||||
Showing {rows.length} of {data.length} rows
|
||||
</span>
|
||||
{globalFilter && <span>Filtered by: "{globalFilter}"</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,19 @@ import { DashboardStats, DashboardActivity, PortfolioTable } from './components'
|
|||
|
||||
export function DashboardPage() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col h-full space-y-6">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
|
||||
<p className="text-text-secondary mb-6 text-sm">
|
||||
Monitor your trading performance, manage portfolios, and analyze market data.
|
||||
</p>
|
||||
|
||||
<DashboardStats />
|
||||
<DashboardActivity />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
<PortfolioTable />
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -632,20 +632,11 @@ export function PortfolioTable() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<h3 className="text-lg font-bold text-text-primary mb-2">Portfolio Holdings</h3>
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
Performance test: 100,000 rows × {columns.length} columns ={' '}
|
||||
{(100000 * columns.length).toLocaleString()} cells
|
||||
</p>
|
||||
<div className="flex-grow w-full border border-border rounded-lg overflow-hidden">
|
||||
<DataTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
onRowClick={row => console.log('Clicked:', row.symbol)}
|
||||
className="w-full h-full"
|
||||
className="border border-border rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@ export function ExchangesPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col h-full space-y-6">
|
||||
<div className="flex items-center justify-between flex-shrink-0">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-text-primary mb-2">Exchange Management</h1>
|
||||
<p className="text-text-secondary text-sm">
|
||||
|
|
@ -68,7 +68,7 @@ export function ExchangesPage() {
|
|||
</div>
|
||||
|
||||
{syncing && (
|
||||
<div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
|
||||
<div className="bg-primary-50 border border-primary-200 rounded-lg p-4 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowPathIcon className="h-4 w-4 text-primary-500 animate-spin" />
|
||||
<span className="text-primary-700 text-sm">
|
||||
|
|
@ -110,7 +110,9 @@ export function ExchangesPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
<ExchangesTable />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,17 +252,7 @@ export function ExchangesTable() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-text-primary">Exchanges Management</h2>
|
||||
<p className="text-sm text-text-secondary">
|
||||
Manage exchange configurations and source mappings
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">{exchanges?.length || 0} exchanges loaded</div>
|
||||
</div>
|
||||
|
||||
<>
|
||||
<DataTable
|
||||
data={exchanges || []}
|
||||
columns={columns}
|
||||
|
|
@ -270,11 +260,6 @@ export function ExchangesTable() {
|
|||
className="rounded-lg border border-border"
|
||||
/>
|
||||
|
||||
<div className="mt-2 text-xs text-text-muted">
|
||||
Debug: Data length: {exchanges?.length || 0}, Loading: {loading.toString()}, Error:{' '}
|
||||
{error || 'none'}
|
||||
</div>
|
||||
|
||||
{addSourceDialog && (
|
||||
<AddSourceDialog
|
||||
isOpen={true}
|
||||
|
|
@ -293,6 +278,6 @@ export function ExchangesTable() {
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,73 +50,39 @@
|
|||
}
|
||||
|
||||
@layer components {
|
||||
/* Global sleek dark-themed scrollbars for all elements */
|
||||
/* Global dark-themed scrollbars with better contrast */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(74 74 74) rgb(26 26 26);
|
||||
scrollbar-color: rgb(115 115 115) rgb(40 40 40);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: rgb(26 26 26);
|
||||
border-radius: 4px;
|
||||
background: rgb(40 40 40);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(74 74 74);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgb(42 42 42);
|
||||
background-color: rgb(115 115 115);
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgb(40 40 40);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(90 90 90);
|
||||
background-color: rgb(140 140 140);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgb(106 106 106);
|
||||
background-color: rgb(160 160 160);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background: rgb(26 26 26);
|
||||
}
|
||||
/* Global scrollbar for the entire app */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(26 26 26) transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: rgb(0 0 0);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(26 26 26);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgb(0 0 0);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(42 42 42);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgb(60 60 60);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background: rgb(0 0 0);
|
||||
background: rgb(40 40 40);
|
||||
}
|
||||
|
||||
/* Trading specific styles */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue