@@ -71,6 +71,34 @@ function getModelDisplayName(dbModel: string): string {
7171 return dbModel ;
7272}
7373
74+ function SortHeader ( {
75+ label,
76+ field,
77+ sortKey,
78+ sortDir,
79+ onSort,
80+ } : {
81+ label : string ;
82+ field : SortKey ;
83+ sortKey : SortKey ;
84+ sortDir : SortDir ;
85+ onSort : ( field : SortKey ) => void ;
86+ } ) {
87+ return (
88+ < th
89+ className = "px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer hover:text-foreground select-none"
90+ onClick = { ( ) => onSort ( field ) }
91+ >
92+ < span className = "flex items-center gap-1" >
93+ { label }
94+ { sortKey === field && (
95+ < span className = "text-foreground" > { sortDir === 'asc' ? '↑' : '↓' } </ span >
96+ ) }
97+ </ span >
98+ </ th >
99+ ) ;
100+ }
101+
74102export default function SubmissionsTable ( { data } : SubmissionsTableProps ) {
75103 const [ sortKey , setSortKey ] = useState < SortKey > ( 'date' ) ;
76104 const [ sortDir , setSortDir ] = useState < SortDir > ( 'desc' ) ;
@@ -147,20 +175,6 @@ export default function SubmissionsTable({ data }: SubmissionsTableProps) {
147175 } ) ;
148176 } , [ ] ) ;
149177
150- const SortHeader = ( { label, field } : { label : string ; field : SortKey } ) => (
151- < th
152- className = "px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer hover:text-foreground select-none"
153- onClick = { ( ) => handleSort ( field ) }
154- >
155- < span className = "flex items-center gap-1" >
156- { label }
157- { sortKey === field && (
158- < span className = "text-foreground" > { sortDir === 'asc' ? '↑' : '↓' } </ span >
159- ) }
160- </ span >
161- </ th >
162- ) ;
163-
164178 return (
165179 < div className = "flex flex-col gap-3" >
166180 < input
@@ -178,13 +192,26 @@ export default function SubmissionsTable({ data }: SubmissionsTableProps) {
178192 < thead className = "bg-muted/50" >
179193 < tr >
180194 < th className = "w-8 px-2" />
181- < SortHeader label = "GPU" field = "hardware" />
182- < SortHeader label = "Model" field = "model" />
183- < SortHeader label = "Precision" field = "precision" />
184- < SortHeader label = "Spec Method" field = "spec_method" />
185- < SortHeader label = "Framework" field = "framework" />
186- < SortHeader label = "Date" field = "date" />
187- < SortHeader label = "Datapoints" field = "total_datapoints" />
195+ { (
196+ [
197+ [ 'GPU' , 'hardware' ] ,
198+ [ 'Model' , 'model' ] ,
199+ [ 'Precision' , 'precision' ] ,
200+ [ 'Spec Method' , 'spec_method' ] ,
201+ [ 'Framework' , 'framework' ] ,
202+ [ 'Date' , 'date' ] ,
203+ [ 'Datapoints' , 'total_datapoints' ] ,
204+ ] as [ string , SortKey ] [ ]
205+ ) . map ( ( [ label , field ] ) => (
206+ < SortHeader
207+ key = { field }
208+ label = { label }
209+ field = { field }
210+ sortKey = { sortKey }
211+ sortDir = { sortDir }
212+ onSort = { handleSort }
213+ />
214+ ) ) }
188215 < th
189216 className = "px-3 py-2 text-left text-xs font-medium text-muted-foreground select-none"
190217 scope = "col"
0 commit comments