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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user