Add sortable columns and inline search filter

- Implemented sortable table headers with visual indicators (▲▼)
- Click any column to sort ascending/descending
- Sort state persists during auto-refresh
- Added compact inline search filter in toolbar
- Unified search across all columns (Sim Source, Artifacts, Date, Uploaded By)
- Positioned search on right side of toolbar for cleaner layout
- Real-time filtering as you type
- Combined filtering and sorting work seamlessly together

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-15 08:45:31 -05:00
parent 4bc8310070
commit 4d9d235111
3 changed files with 186 additions and 7 deletions

View File

@@ -99,6 +99,52 @@ header h1 {
align-items: center;
}
.filter-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #0f172a;
border-radius: 6px;
border: 1px solid #334155;
min-width: 250px;
}
.filter-inline input {
flex: 1;
padding: 4px 8px;
background: transparent;
border: none;
color: #e2e8f0;
font-size: 14px;
}
.filter-inline input:focus {
outline: none;
}
.filter-inline input::placeholder {
color: #64748b;
}
.btn-clear {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 4px;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.btn-clear:hover {
background: #334155;
color: #e2e8f0;
}
.btn {
padding: 10px 20px;
border: none;
@@ -189,6 +235,33 @@ th {
letter-spacing: 0.5px;
}
th.sortable {
cursor: pointer;
user-select: none;
transition: color 0.3s;
}
th.sortable:hover {
color: #60a5fa;
}
.sort-indicator {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #64748b;
}
th.sort-asc .sort-indicator::after {
content: '▲';
color: #60a5fa;
}
th.sort-desc .sort-indicator::after {
content: '▼';
color: #60a5fa;
}
td {
padding: 16px 12px;
border-bottom: 1px solid #1e293b;
@@ -469,4 +542,8 @@ code {
th, td {
padding: 8px 6px;
}
.toolbar {
flex-wrap: wrap;
}
}