feat(fe): auto-prepend pinned left No. row-number column in KsDataGrid and harness in AGENTS.md

2026-08-15 21:51:01 +09:00
parent b000cd1704
commit 1d0867d039
3 changed files with 33 additions and 11 deletions
@@ -7,17 +7,38 @@ import type { UiGridColumn } from '../adapter/contracts'
 ModuleRegistry.registerModules([ClientSideRowModelModule, TextFilterModule, RowSelectionModule])

 const emit = defineEmits<{ rowSelected: [row: unknown] }>()
-const props = withDefaults(defineProps<{ rows: unknown[]; columns: UiGridColumn[]; loading?: boolean; height?: string; rowSelection?: 'single' | 'multiple' | 'none' }>(), { loading: false, height: '32rem', rowSelection: 'single' })
-const columnDefs = computed<ColDef[]>(() => props.columns.map(column => ({
-  field: column.field,
-  headerName: column.header,
-  width: column.width,
-  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
-})))
+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<ColDef[]>(() => {
+  const mappedCols: ColDef[] = props.columns.map(column => ({
+    field: column.field,
+    headerName: column.header,
+    width: column.width,
+    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
+  }))
+
+  if (props.showRowNumber) {
+    const rowNumCol: ColDef = {
+      headerName: 'No.',
+      valueGetter: 'node.rowIndex + 1',
+      width: 54,
+      minWidth: 50,
+      maxWidth: 65,
+      pinned: 'left',
+      sortable: false,
+      filter: false,
+      resizable: false,
+      cellStyle: { textAlign: 'center', color: 'var(--ks-color-neutral-600)', fontSize: '11px' },
+      headerClass: 'ks-row-number-header'
+    }
+    return [rowNumCol, ...mappedCols]
+  }
+
+  return mappedCols
+})
 const rowSelectionOptions = computed(() => props.rowSelection === 'none' ? undefined : ({ mode: props.rowSelection === 'multiple' ? 'multiRow' : 'singleRow' } as const))
 function onRowClicked(event: RowClickedEvent): void {
  if (event.data) emit('rowSelected', event.data)