feat(fe): support explicit relative flex ratios per grid column

This commit is contained in:
2026-08-15 21:30:13 +09:00
parent f9f05a2318
commit a239e6ab64
3 changed files with 10 additions and 9 deletions
@@ -79,13 +79,13 @@ const filteredJobs = computed(() => {
})
const shadowRunColumns: UiGridColumn[] = [
{ field: 'jobId', header: 'Job ID', width: 90, formatter: value => `#${value}` },
{ field: 'modelName', header: 'Model Name', minWidth: 160 },
{ field: 'windowStart', header: 'Window Period', minWidth: 180, formatter: (val, row) => `${val} ~ ${(row as any)?.windowEnd ?? ''}` },
{ field: 'tradingDays', header: 'Days', width: 80, formatter: val => `${val}d` },
{ field: 'status', header: 'Status', width: 110, formatter: val => String(val).toUpperCase() },
{ field: 'progress', header: 'Progress', width: 100, formatter: val => `${val}%` },
{ field: 'startedAt', header: 'Started At', minWidth: 160, formatter: val => val ? formatAsOf(String(val)) : '—' },
{ field: 'jobId', header: 'Job ID', minWidth: 90, flex: 1, formatter: value => `#${value}` },
{ field: 'modelName', header: 'Model Name', minWidth: 200, flex: 3 },
{ field: 'windowStart', header: 'Window Period', minWidth: 220, flex: 3, formatter: (val, row) => `${val} ~ ${(row as any)?.windowEnd ?? ''}` },
{ field: 'tradingDays', header: 'Days', minWidth: 70, flex: 1, formatter: val => `${val}d` },
{ field: 'status', header: 'Status', minWidth: 100, flex: 1, formatter: val => String(val).toUpperCase() },
{ field: 'progress', header: 'Progress', minWidth: 90, flex: 1, formatter: val => `${val}%` },
{ field: 'startedAt', header: 'Started At', minWidth: 160, flex: 2, formatter: val => val ? formatAsOf(String(val)) : '—' },
]
const handleRetry = () => {
@@ -50,6 +50,7 @@ export interface UiGridColumn {
header: string
width?: number
minWidth?: number
flex?: number
sortable?: boolean
filterable?: boolean
sensitive?: boolean
@@ -12,8 +12,8 @@ const columnDefs = computed<ColDef[]>(() => props.columns.map(column => ({
field: column.field,
headerName: column.header,
width: column.width,
minWidth: column.minWidth ?? 100,
flex: column.width ? undefined : 1,
minWidth: column.minWidth ?? 80,
flex: column.flex ?? (column.width ? undefined : 1),
sortable: column.sortable ?? true,
filter: column.filterable ?? true,
valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined