Add horizontal scrolling to AgentTable with frozen columns and better layout

src/components/AgentTable.vue

@@ -1,8 +1,8 @@
 <template>
-  <DataTable :value="rows" :rows="10" :rowsPerPageOptions="[10,25,50]" paginator scrollable scrollHeight="flex" :loading="loading" :sortMode="'multiple'" :multiSortMeta="multiSortMeta" v-model:expandedRows="expandedRows" :dataKey="'key'" @sort="onSort" @rowToggle="onRowToggle" @rowExpand="onRowExpand" :selection="selection" @update:selection="onSelectionUpdate">
-    <Column v-if="selectable" selectionMode="multiple" style="width: 3rem" />
-    <Column expander style="width: 3rem" />
-    <Column field="agent_name" header="Agent & Model & Strategy">
+  <DataTable :value="rows" :rows="10" :rowsPerPageOptions="[10,25,50]" paginator scrollable scrollHeight="flex" :loading="loading" :sortMode="'multiple'" :multiSortMeta="multiSortMeta" v-model:expandedRows="expandedRows" :dataKey="'key'" @sort="onSort" @rowToggle="onRowToggle" @rowExpand="onRowExpand" :selection="selection" @update:selection="onSelectionUpdate" class="agent-table-scroll">
+    <Column v-if="selectable" selectionMode="multiple" :style="{ width: '50px', minWidth: '50px' }" frozen />
+    <Column expander :style="{ width: '50px', minWidth: '50px' }" frozen />
+    <Column field="agent_name" header="Agent & Model" :style="{ minWidth: '200px' }" frozen>
       <template #body="{ data }">
         <div>
           <div style="display: flex; align-items: center; gap: 0.5rem;">
@@ -15,7 +15,7 @@
       </template>
     </Column>
     <!-- <Column field="asset" header="Asset"/> -->
-    <Column field="ret_with_fees" header="Return" sortable>
+    <Column field="ret_with_fees" header="Return" sortable :style="{ minWidth: '180px' }">
       <template #body="{ data }">
         <div>
             <div :style="pctStyle(data.ret_with_fees)">{{ fmtSignedPct(data.ret_with_fees) }}</div>
@@ -24,19 +24,19 @@
       </template>
     </Column>
 
-    <Column field="vs_bh_with_fees" header="Vs Buy & Hold" sortable>
+    <Column field="vs_bh_with_fees" header="Vs Buy & Hold" sortable :style="{ minWidth: '140px' }">
       <template #body="{ data }">
         <span :style="pctStyle(data.vs_bh_with_fees)">{{ fmtSignedPct(data.vs_bh_with_fees) }}</span>
       </template>
     </Column>
 
-    <Column field="sharpe" header="Sharpe Ratio" sortable>
+    <Column field="sharpe" header="Sharpe Ratio" sortable :style="{ minWidth: '120px' }">
       <template #body="{ data }">
         {{ fmtNum(data.sharpe) }}
       </template>
     </Column>
 
-    <Column field="win_rate" header="Win Rate" sortable>
+    <Column field="win_rate" header="Win Rate" sortable :style="{ minWidth: '110px' }">
       <template #body="{ data }">
         {{ fmtPctNeutral(data.win_rate) }}
       </template>
@@ -151,6 +151,43 @@ export default {
 </script>
 
 <style scoped>
+/* Enable horizontal scrolling */
+:deep(.agent-table-scroll .p-datatable-wrapper) {
+  overflow-x: auto;
+}
+
+:deep(.agent-table-scroll .p-datatable-table) {
+  min-width: 800px;
+}
+
+/* Frozen column styles */
+:deep(.agent-table-scroll .p-frozen-column) {
+  background: #ffffff;
+  z-index: 1;
+}
+
+:deep(.agent-table-scroll .p-datatable-thead > tr > th.p-frozen-column) {
+  background: #F6F8FB;
+}
+
+/* Better scrollbar */
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar {
+  height: 8px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
 </style>