fix

packages/frontend/src/components/grid/MkDataRow.vue

@@ -1,5 +1,5 @@
 <template>
-<tr :class="$style.row">
+<tr :class="[$style.row]">
 	<MkNumberCell
 		:content="(row.index + 1).toString()"
 		:row="row"

packages/frontend/src/components/grid/MkGrid.vue

@@ -124,7 +124,6 @@ function onKeyDown(ev: KeyboardEvent) {
 
 	switch (state.value) {
 		case 'normal': {
-			// normalの時は自前で制御したい
 			ev.preventDefault();
 
 			if (ev.ctrlKey) {
@@ -418,6 +417,7 @@ function onMouseMove(ev: MouseEvent) {
 
 			unSelectionOutOfRange(leftTop, rightBottom);
 			expandRange(leftTop, rightBottom);
+
 			previousCellAddress.value = targetCellAddress;
 
 			break;
@@ -692,7 +692,6 @@ function refreshData() {
 	const _data: DataSource[] = data.value;
 	const _rows: GridRow[] = _data.map((_, index) => ({
 		index,
-
 	}));
 	const _columns: GridColumn[] = columnSettings.value.map((setting, index) => ({
 		index,

packages/frontend/src/components/grid/MkNumberCell.vue

@@ -1,6 +1,12 @@
 <template>
-<th :class="[$style.num, [top ? {} : $style.border]]">
-	{{ content }}
+<th :class="[$style.cell, [top ? {} : $style.border]]">
+	<div
+		:class="[
+			$style.root,
+		]"
+	>
+		{{ content }}
+	</div>
 </th>
 </template>
 
@@ -16,10 +22,33 @@ defineProps<{
 </script>
 
 <style module lang="scss">
-.num {
+$cellHeight: 28px;
+$cellWidth: 34px;
+
+.cell {
+	overflow: hidden;
+	white-space: nowrap;
+	height: $cellHeight;
+	max-height: $cellHeight;
+	min-height: $cellHeight;
+	min-width: $cellWidth;
+	width: $cellWidth;
+	cursor: pointer;
+}
+
+.root {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
 	padding: 0 8px;
-	min-width: 30px;
-	width: 30px;
+	height: 100%;
+	border: solid 0.5px transparent;
+
+	&.selected {
+		background-color: var(--accentedBg);
+	}
 }
 
 .border {

packages/frontend/src/components/grid/grid.ts

@@ -33,6 +33,7 @@ export type GridColumn = {
 
 export type GridRow = {
 	index: number;
+	selected: boolean;
 }
 
 export type CellValueChangedEvent = {