diff --git a/frontend/src/shared/ui/components/KsDataGrid.vue b/frontend/src/shared/ui/components/KsDataGrid.vue index 01e63321..a80204ca 100644 --- a/frontend/src/shared/ui/components/KsDataGrid.vue +++ b/frontend/src/shared/ui/components/KsDataGrid.vue @@ -46,34 +46,20 @@ const emit = defineEmits<{ rowSelected: [row: unknown]; cellValueChanged: [event const props = withDefaults(defineProps<{ rows: unknown[]; columns: UiGridColumn[]; loading?: boolean; height?: string; rowSelection?: 'single' | 'multiple' | 'none'; showRowNumber?: boolean }>(), { loading: false, height: '32rem', rowSelection: 'single', showRowNumber: true }) const columnDefs = computed(() => { - const mappedCols: ColDef[] = props.columns.map((column, idx) => { - const colDef: ColDef = { - field: column.field, - headerName: column.header, - width: column.width, - minWidth: column.minWidth ?? 80, - maxWidth: column.maxWidth, - flex: column.flex ?? (column.width ? undefined : 1), + const mappedCols: ColDef[] = props.columns.map(column => ({ + field: column.field, + headerName: column.header, + width: column.width, + minWidth: column.minWidth ?? 80, + maxWidth: column.maxWidth, + flex: column.flex ?? (column.width ? undefined : 1), - sortable: column.sortable ?? true, - filter: column.filterable ?? false, - editable: column.editable ?? false, + sortable: column.sortable ?? true, + filter: column.filterable ?? false, + editable: column.editable ?? false, - valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined, - } - - if (column.editable) { - colDef.onCellKeyDown = (event: any) => { - if (event.event.key === 'Enter') { - event.event.preventDefault() - event.api.stopEditing(false) - event.api.tabToNextCell(false) - } - } - } - - return colDef - }) + valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined + })) if (props.showRowNumber) { const rowNumCol: ColDef = { @@ -126,6 +112,14 @@ function onCellValueChanged(event: CellValueChangedEvent): void { } } +function onCellKeyDown(event: any): void { + if (event.event.key === 'Enter' && event.colDef?.editable) { + event.event.preventDefault() + event.api.stopEditing(false) + event.api.tabToNextCell(false) + } +} + function onSortChanged(params: { api: { redrawRows: () => void; refreshCells: (options: { force: boolean }) => void } }): void { params.api.redrawRows() } @@ -190,6 +184,7 @@ defineExpose({ focusRow, redrawRows, gridApi }) @sort-changed="onSortChanged" @row-clicked="onRowClicked" @cell-value-changed="onCellValueChanged" + @cell-key-down="onCellKeyDown" />