키보드
셀을 클릭하거나 Tab으로 그리드에 들어간 뒤 다음 키를 쓸 수 있습니다.
실행 예제키보드 이동
방향키, Tab, Home/End, PageUp/Down만으로 마우스 없이 셀을 오갑니다.
이 데모의 코드
import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { text, tr, type DemoContext } from '../ui';
export default function mount(ctx: DemoContext) {
const { lang } = ctx;
const grid = createGrid(ctx.host, { columns: demoColumns(lang, 10), data: makeRows(10_000, 10), rowSelection: 'multiple', locale: lang });
grid.on('focusChange', e => ctx.log(`focusChange → row ${e.rowIndex + 1}, ${e.colId}`));
grid.on('cellDoubleClick', e => ctx.log(`cellDoubleClick → ${e.colId}: ${String(e.value)}`));
text(ctx, tr(lang, {
en: 'Click a cell, then use ← ↑ → ↓, Tab, Home/End, Ctrl+Home/End, PageUp/PageDown and Space.',
ko: '셀을 클릭한 뒤 ← ↑ → ↓, Tab, Home/End, Ctrl+Home/End, PageUp/PageDown, Space를 눌러 보세요.',
}));
return grid;
}셀을 클릭하거나 Tab으로 그리드에 들어간 뒤 다음 키를 쓸 수 있습니다.
| 키 | 동작 |
|---|---|
← ↑ → ↓ | 포커스 셀 이동. |
Tab / Shift+Tab | 다음/이전 셀. 줄 끝에서 다음 줄로, 처음·끝에서는 그리드 밖으로. |
Home / End | 첫/마지막 컬럼. |
Ctrl+Home / Ctrl+End | 첫/마지막 셀. |
PageUp / PageDown | 한 화면 위/아래. |
Shift + ← ↑ → ↓ / Home / End / Page | 셀 범위 확장. |
Ctrl+A | 모든 셀 선택. |
Ctrl+C / Ctrl+V | 엑셀로 복사 / 엑셀에서 붙여넣기(TSV). |
Ctrl+F | 그리드에서 찾기. |
Shift+F10 / ContextMenu | 우클릭 메뉴 열기. |
Enter / F2 / typing | 편집 가능한 셀 편집 시작. |
Enter / Tab / Esc (editing) | 저장 후 아래로 / 저장 후 오른쪽으로 / 취소. |
Delete | 편집 가능한 셀 비우기. |
Ctrl+Z / Ctrl+Y | 실행 취소 / 다시 실행. |
Space | 포커스 행 선택 토글. |
Esc | 컬럼 메뉴나 선택 창 닫기. |