Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Table Demo</title> | |
| <style> | |
| /* Copy the same CSS variables and table styles from the main app */ | |
| :root { | |
| --primary: #0f62fe; | |
| --primary-hover: #0353e9; | |
| --bg-primary: #FAFBFC; | |
| --bg-secondary: #F4F6F8; | |
| --bg-tertiary: #E8EDF3; | |
| --card-bg: #ffffff; | |
| --text-primary: #1A202C; | |
| --text-secondary: #4A5568; | |
| --text-tertiary: #718096; | |
| --border: #D1D9E0; | |
| --border-light: #E5EAF0; | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --radius-sm: 0.25rem; | |
| --radius-md: 0.375rem; | |
| --radius-lg: 0.5rem; | |
| --radius-xl: 0.75rem; | |
| --space-1: 0.25rem; | |
| --space-2: 0.5rem; | |
| --space-3: 0.75rem; | |
| --space-4: 1rem; | |
| --space-6: 1.5rem; | |
| --space-8: 2rem; | |
| --space-12: 3rem; | |
| --transition-normal: all 0.2s ease-in-out; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| margin: 2rem; | |
| } | |
| .table-wrapper { | |
| position: relative; | |
| margin: var(--space-4) 0; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .table-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--bg-tertiary); | |
| border-bottom: 1px solid var(--border); | |
| gap: var(--space-3); | |
| } | |
| .table-controls-left { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .table-controls-right { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .table-info { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .table-resize-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .table-resize-btn { | |
| padding: var(--space-1) var(--space-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-primary); | |
| color: var(--text-secondary); | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| transition: var(--transition-normal); | |
| } | |
| .table-resize-btn:hover { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| } | |
| .table-resize-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .table-container { | |
| overflow: auto; | |
| max-height: 70vh; | |
| position: relative; | |
| } | |
| .answer-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-size: 0.875rem; | |
| background: var(--card-bg); | |
| table-layout: auto; | |
| min-width: 100%; | |
| } | |
| .answer-table.compact { | |
| table-layout: fixed; | |
| } | |
| .answer-table.comfortable { | |
| table-layout: auto; | |
| } | |
| .answer-table.spacious { | |
| table-layout: auto; | |
| font-size: 1rem; | |
| } | |
| .answer-table th, | |
| .answer-table td { | |
| padding: var(--space-3) var(--space-4); | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-light); | |
| border-right: 1px solid var(--border-light); | |
| vertical-align: top; | |
| position: relative; | |
| } | |
| .answer-table.compact th, | |
| .answer-table.compact td { | |
| padding: var(--space-2) var(--space-3); | |
| max-width: 120px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .answer-table.comfortable th, | |
| .answer-table.comfortable td { | |
| padding: var(--space-3) var(--space-4); | |
| max-width: 200px; | |
| word-wrap: break-word; | |
| white-space: normal; | |
| } | |
| .answer-table.spacious th, | |
| .answer-table.spacious td { | |
| padding: var(--space-4) var(--space-6); | |
| max-width: none; | |
| word-wrap: break-word; | |
| white-space: normal; | |
| } | |
| .answer-table th { | |
| background: #F1F5F9; | |
| font-weight: 600; | |
| color: #1A202C; | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| border-top: none; | |
| border-bottom: 2px solid #D1D9E0; | |
| } | |
| .answer-table th:last-child, | |
| .answer-table td:last-child { | |
| border-right: none; | |
| } | |
| .answer-table tbody tr:hover { | |
| background: #E8F4FD; | |
| } | |
| .answer-table tbody tr:nth-child(even) { | |
| background: #F7F9FC; | |
| } | |
| .answer-table tbody tr:nth-child(even):hover { | |
| background: #E8F4FD; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Enhanced Table Demo</h1> | |
| <p>This demonstrates the new resizable table interface:</p> | |
| <div class="table-wrapper"> | |
| <div class="table-controls"> | |
| <div class="table-controls-left"> | |
| <div class="table-info">9 rows × 7 columns</div> | |
| </div> | |
| <div class="table-controls-right"> | |
| <div class="table-resize-controls"> | |
| <button class="table-resize-btn" onclick="setTableSize('compact')">Compact</button> | |
| <button class="table-resize-btn active" onclick="setTableSize('comfortable')">Comfortable</button> | |
| <button class="table-resize-btn" onclick="setTableSize('spacious')">Spacious</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="table-container"> | |
| <table class="answer-table comfortable"> | |
| <thead> | |
| <tr> | |
| <th>dept_name</th> | |
| <th>avg_salary</th> | |
| <th>num_employee</th> | |
| <th>male_salary</th> | |
| <th>female_salary</th> | |
| <th>avg_male_salary</th> | |
| <th>avg_female_salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Sales</td> | |
| <td>$86,123.43</td> | |
| <td>130</td> | |
| <td>$6,181,954</td> | |
| <td>$5,014,084</td> | |
| <td>$84,684.37</td> | |
| <td>$87,966.44</td> | |
| </tr> | |
| <tr> | |
| <td>Marketing</td> | |
| <td>$81,874.03</td> | |
| <td>34</td> | |
| <td>$1,736,164</td> | |
| <td>$1,047,554</td> | |
| <td>$82,674.38</td> | |
| <td>$80,581.15</td> | |
| </tr> | |
| <tr> | |
| <td>Finance</td> | |
| <td>$76,399.98</td> | |
| <td>43</td> | |
| <td>$2,026,534</td> | |
| <td>$1,258,664</td> | |
| <td>$75,056.70</td> | |
| <td>$78,666.75</td> | |
| </tr> | |
| <tr> | |
| <td>Development</td> | |
| <td>$69,564.44</td> | |
| <td>203</td> | |
| <td>$8,159,084</td> | |
| <td>$5,962,504</td> | |
| <td>$69,735.73</td> | |
| <td>$69,331.42</td> | |
| </tr> | |
| <tr> | |
| <td>Research</td> | |
| <td>$69,147.39</td> | |
| <td>51</td> | |
| <td>$2,279,864</td> | |
| <td>$1,246,654</td> | |
| <td>$69,086.76</td> | |
| <td>$69,258.56</td> | |
| </tr> | |
| <tr> | |
| <td>Production</td> | |
| <td>$68,537.28</td> | |
| <td>186</td> | |
| <td>$7,929,244</td> | |
| <td>$4,818,694</td> | |
| <td>$68,355.55</td> | |
| <td>$68,838.43</td> | |
| </tr> | |
| <tr> | |
| <td>Quality Management</td> | |
| <td>$64,859.40</td> | |
| <td>48</td> | |
| <td>$2,112,644</td> | |
| <td>$1,000,604</td> | |
| <td>$64,019.61</td> | |
| <td>$66,706.93</td> | |
| </tr> | |
| <tr> | |
| <td>Customer Service</td> | |
| <td>$63,643.00</td> | |
| <td>61</td> | |
| <td>$1,730,834</td> | |
| <td>$2,151,394</td> | |
| <td>$61,815.43</td> | |
| <td>$65,193.67</td> | |
| </tr> | |
| <tr> | |
| <td>Human Resources</td> | |
| <td>$63,507.28</td> | |
| <td>46</td> | |
| <td>$2,151,834</td> | |
| <td>$769,499</td> | |
| <td>$63,289.29</td> | |
| <td>$64,124.92</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script> | |
| function setTableSize(size) { | |
| const table = document.querySelector('.answer-table'); | |
| const buttons = document.querySelectorAll('.table-resize-btn'); | |
| // Remove all size classes | |
| table.classList.remove('compact', 'comfortable', 'spacious'); | |
| // Add selected size class | |
| table.classList.add(size); | |
| // Update active button | |
| buttons.forEach(btn => btn.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> |