feat: move column toggles into table headers
Replace separate checkbox bar with inline × buttons in each column header. Click × to hide a column. Hidden columns appear in a bar above the table with + buttons to restore them. Sort by clicking the column label text. Persisted to localStorage. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
faff102e09
commit
8943133ae3
2 changed files with 68 additions and 25 deletions
|
|
@ -281,6 +281,25 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.results-table th .th-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.results-table th .th-hide {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.results-table th .th-hide:hover {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
/* Resizable column handle */
|
||||
.results-table th .resize-handle {
|
||||
position: absolute;
|
||||
|
|
@ -1138,9 +1157,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#f0f0f0;padding:3px 8px;border:1px solid #ccc;border-bottom:none;font-size:9px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;">
|
||||
<strong style="margin-right:4px;">Columns:</strong>
|
||||
<span id="columnToggles"></span>
|
||||
<div id="hiddenColumnsBar" style="background:#f0f0f0;padding:3px 8px;border:1px solid #ccc;border-bottom:none;font-size:9px;display:none;align-items:center;gap:4px;flex-wrap:wrap;">
|
||||
<strong style="margin-right:4px;">Hidden:</strong>
|
||||
<span id="hiddenColumnsList"></span>
|
||||
</div>
|
||||
<div class="results-container" id="searchResults">
|
||||
<div class="no-results">Enter search criteria above and click "Search Items" to find inventory items.</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue