Aniruddha7/QueryLens-Text2SQL_DocVQA-V2
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Table Demo</title>7 <style>8 /* Copy the same CSS variables and table styles from the main app */9 :root {10 --primary: #0f62fe;11 --primary-hover: #0353e9;12 --bg-primary: #FAFBFC;13 --bg-secondary: #F4F6F8;14 --bg-tertiary: #E8EDF3;15 --card-bg: #ffffff;16 --text-primary: #1A202C;17 --text-secondary: #4A5568;18 --text-tertiary: #718096;19 --border: #D1D9E0;20 --border-light: #E5EAF0;21 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);22 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);23 --radius-sm: 0.25rem;24 --radius-md: 0.375rem;25 --radius-lg: 0.5rem;26 --radius-xl: 0.75rem;27 --space-1: 0.25rem;28 --space-2: 0.5rem;29 --space-3: 0.75rem;30 --space-4: 1rem;31 --space-6: 1.5rem;32 --space-8: 2rem;33 --space-12: 3rem;34 --transition-normal: all 0.2s ease-in-out;35 }36 37 body {38 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;39 background: var(--bg-secondary);40 color: var(--text-primary);41 margin: 2rem;42 }43 44 .table-wrapper {45 position: relative;46 margin: var(--space-4) 0;47 border-radius: var(--radius-lg);48 box-shadow: var(--shadow-lg);49 background: var(--card-bg);50 border: 1px solid var(--border);51 overflow: hidden;52 }53 54 .table-controls {55 display: flex;56 align-items: center;57 justify-content: space-between;58 padding: var(--space-3) var(--space-4);59 background: var(--bg-tertiary);60 border-bottom: 1px solid var(--border);61 gap: var(--space-3);62 }63 64 .table-controls-left {65 display: flex;66 align-items: center;67 gap: var(--space-3);68 }69 70 .table-controls-right {71 display: flex;72 align-items: center;73 gap: var(--space-2);74 }75 76 .table-info {77 font-size: 0.875rem;78 color: var(--text-secondary);79 font-weight: 500;80 }81 82 .table-resize-controls {83 display: flex;84 align-items: center;85 gap: var(--space-2);86 }87 88 .table-resize-btn {89 padding: var(--space-1) var(--space-2);90 border: 1px solid var(--border);91 border-radius: var(--radius-sm);92 background: var(--bg-primary);93 color: var(--text-secondary);94 font-size: 0.75rem;95 cursor: pointer;96 transition: var(--transition-normal);97 }98 99 .table-resize-btn:hover {100 background: var(--bg-secondary);101 color: var(--text-primary);102 }103 104 .table-resize-btn.active {105 background: var(--primary);106 color: white;107 border-color: var(--primary);108 }109 110 .table-container {111 overflow: auto;112 max-height: 70vh;113 position: relative;114 }115 116 .answer-table {117 width: 100%;118 border-collapse: separate;119 border-spacing: 0;120 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;121 font-size: 0.875rem;122 background: var(--card-bg);123 table-layout: auto;124 min-width: 100%;125 }126 127 .answer-table.compact {128 table-layout: fixed;129 }130 131 .answer-table.comfortable {132 table-layout: auto;133 }134 135 .answer-table.spacious {136 table-layout: auto;137 font-size: 1rem;138 }139 140 .answer-table th,141 .answer-table td {142 padding: var(--space-3) var(--space-4);143 text-align: left;144 border-bottom: 1px solid var(--border-light);145 border-right: 1px solid var(--border-light);146 vertical-align: top;147 position: relative;148 }149 150 .answer-table.compact th,151 .answer-table.compact td {152 padding: var(--space-2) var(--space-3);153 max-width: 120px;154 overflow: hidden;155 text-overflow: ellipsis;156 white-space: nowrap;157 }158 159 .answer-table.comfortable th,160 .answer-table.comfortable td {161 padding: var(--space-3) var(--space-4);162 max-width: 200px;163 word-wrap: break-word;164 white-space: normal;165 }166 167 .answer-table.spacious th,168 .answer-table.spacious td {169 padding: var(--space-4) var(--space-6);170 max-width: none;171 word-wrap: break-word;172 white-space: normal;173 }174 175 .answer-table th {176 background: #F1F5F9;177 font-weight: 600;178 color: #1A202C;179 position: sticky;180 top: 0;181 z-index: 10;182 border-top: none;183 border-bottom: 2px solid #D1D9E0;184 }185 186 .answer-table th:last-child,187 .answer-table td:last-child {188 border-right: none;189 }190 191 .answer-table tbody tr:hover {192 background: #E8F4FD;193 }194 195 .answer-table tbody tr:nth-child(even) {196 background: #F7F9FC;197 }198 199 .answer-table tbody tr:nth-child(even):hover {200 background: #E8F4FD;201 }202 </style>203</head>204<body>205 <h1>Enhanced Table Demo</h1>206 <p>This demonstrates the new resizable table interface:</p>207 208 <div class="table-wrapper">209 <div class="table-controls">210 <div class="table-controls-left">211 <div class="table-info">9 rows × 7 columns</div>212 </div>213 <div class="table-controls-right">214 <div class="table-resize-controls">215 <button class="table-resize-btn" onclick="setTableSize('compact')">Compact</button>216 <button class="table-resize-btn active" onclick="setTableSize('comfortable')">Comfortable</button>217 <button class="table-resize-btn" onclick="setTableSize('spacious')">Spacious</button>218 </div>219 </div>220 </div>221 <div class="table-container">222 <table class="answer-table comfortable">223 <thead>224 <tr>225 <th>dept_name</th>226 <th>avg_salary</th>227 <th>num_employee</th>228 <th>male_salary</th>229 <th>female_salary</th>230 <th>avg_male_salary</th>231 <th>avg_female_salary</th>232 </tr>233 </thead>234 <tbody>235 <tr>236 <td>Sales</td>237 <td>$86,123.43</td>238 <td>130</td>239 <td>$6,181,954</td>240 <td>$5,014,084</td>241 <td>$84,684.37</td>242 <td>$87,966.44</td>243 </tr>244 <tr>245 <td>Marketing</td>246 <td>$81,874.03</td>247 <td>34</td>248 <td>$1,736,164</td>249 <td>$1,047,554</td>250 <td>$82,674.38</td>251 <td>$80,581.15</td>252 </tr>253 <tr>254 <td>Finance</td>255 <td>$76,399.98</td>256 <td>43</td>257 <td>$2,026,534</td>258 <td>$1,258,664</td>259 <td>$75,056.70</td>260 <td>$78,666.75</td>261 </tr>262 <tr>263 <td>Development</td>264 <td>$69,564.44</td>265 <td>203</td>266 <td>$8,159,084</td>267 <td>$5,962,504</td>268 <td>$69,735.73</td>269 <td>$69,331.42</td>270 </tr>271 <tr>272 <td>Research</td>273 <td>$69,147.39</td>274 <td>51</td>275 <td>$2,279,864</td>276 <td>$1,246,654</td>277 <td>$69,086.76</td>278 <td>$69,258.56</td>279 </tr>280 <tr>281 <td>Production</td>282 <td>$68,537.28</td>283 <td>186</td>284 <td>$7,929,244</td>285 <td>$4,818,694</td>286 <td>$68,355.55</td>287 <td>$68,838.43</td>288 </tr>289 <tr>290 <td>Quality Management</td>291 <td>$64,859.40</td>292 <td>48</td>293 <td>$2,112,644</td>294 <td>$1,000,604</td>295 <td>$64,019.61</td>296 <td>$66,706.93</td>297 </tr>298 <tr>299 <td>Customer Service</td>300 <td>$63,643.00</td>301 <td>61</td>302 <td>$1,730,834</td>303 <td>$2,151,394</td>304 <td>$61,815.43</td>305 <td>$65,193.67</td>306 </tr>307 <tr>308 <td>Human Resources</td>309 <td>$63,507.28</td>310 <td>46</td>311 <td>$2,151,834</td>312 <td>$769,499</td>313 <td>$63,289.29</td>314 <td>$64,124.92</td>315 </tr>316 </tbody>317 </table>318 </div>319 </div>320 321 <script>322 function setTableSize(size) {323 const table = document.querySelector('.answer-table');324 const buttons = document.querySelectorAll('.table-resize-btn');325 326 // Remove all size classes327 table.classList.remove('compact', 'comfortable', 'spacious');328 329 // Add selected size class330 table.classList.add(size);331 332 // Update active button333 buttons.forEach(btn => btn.classList.remove('active'));334 event.target.classList.add('active');335 }336 </script>337</body>338</html>