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:
Erik 2026-04-09 10:12:01 +02:00
parent faff102e09
commit 8943133ae3
2 changed files with 68 additions and 25 deletions

View file

@ -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>