virtual-excel-table 2.2.0

package/README.md

@@ -0,0 +1,410 @@
+# VirtualExcelTable
+
+레거시 Spring MVC/JSP의 일반 HTML `<table>`에 엑셀처럼 범위 선택, 붙여넣기, 삭제, 되돌리기/다시 실행을 추가하는 의존성 없는 JavaScript입니다. ES5 문법으로 작성되어 jQuery가 필요하지 않습니다.
+
+## npm 설치
+
+```bash
+npm install virtual-excel-table
+```
+
+CommonJS:
+
+```javascript
+var VirtualExcelTable = require('virtual-excel-table');
+```
+
+브라우저 번들 또는 정적 리소스 복사 시 진입 파일:
+
+```text
+node_modules/virtual-excel-table/src/main/webapp/resources/js/virtual-excel-table.js
+```
+
+## 설치
+
+JavaScript 파일을 웹 리소스 경로에 둡니다.
+
+```text
+src/main/webapp/resources/js/virtual-excel-table.js
+```
+
+JSP의 `</body>` 직전에 스크립트를 불러오고 테이블 셀렉터로 초기화합니다.
+
+```jsp
+<script src="${pageContext.request.contextPath}/resources/js/virtual-excel-table.js"></script>
+<script>var excelTable = VirtualExcelTable('#excelTable');</script>
+```
+
+기존 XML 기반 Spring MVC에서 `/resources/**` 정적 리소스 매핑이 없다면 servlet context 설정에 다음을 추가합니다.
+
+```xml
+<mvc:resources mapping="/resources/**" location="/resources/" />
+```
+
+완성된 JSP 예제는 `src/main/webapp/WEB-INF/views/virtual-excel-demo.jsp`에 있습니다. 컨트롤러에서 해당 뷰 이름(`virtual-excel-demo`)을 반환해 확인할 수 있습니다.
+
+## 기본 마크업
+
+기본 `cellSelector`는 `tbody td`입니다. 각 셀 안에서 `data-excel-target` 요소를 먼저 찾고, 없으면 첫 번째 `input`, `textarea`, `select` 또는 `contenteditable` 요소를 사용합니다. 편집 요소와 자식 태그가 없는 단순 `td`는 셀의 텍스트 자체를 읽고 씁니다. 링크·버튼·아이콘처럼 복합 마크업만 있는 셀은 DOM 손상을 막기 위해 기본적으로 읽기 전용 처리되므로, 수정할 요소에 `data-excel-target`을 붙이거나 `getValue`/`setValue`를 제공하십시오.
+
+```jsp
+<form method="post" action="${pageContext.request.contextPath}/orders/save">
+    <table id="excelTable">
+        <thead>
+        <tr>
+            <th data-excel-corner>#</th>
+            <th data-excel-column="0" data-excel-key="productCode">상품 코드</th>
+            <th data-excel-column="1" data-excel-key="quantity">수량</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <th data-excel-row-header>1</th>
+            <td><input name="items[0].productCode" data-excel-target></td>
+            <td><input name="items[0].quantity" data-excel-target></td>
+        </tr>
+        <tr>
+            <th data-excel-row-header>2</th>
+            <td><input name="items[1].productCode" data-excel-target></td>
+            <td><input name="items[1].quantity" data-excel-target></td>
+        </tr>
+        </tbody>
+    </table>
+</form>
+```
+
+`items[0].productCode` 같은 0 기반 이름은 Spring MVC 커맨드 객체의 `List` 속성 바인딩에 사용할 수 있습니다. 행을 서버/JSTL로 렌더링할 때도 인덱스가 중복되거나 빠지지 않게 만듭니다.
+
+`data-excel-row-header`는 행 전체 선택, `data-excel-column`은 열 전체 선택, `data-excel-corner`는 좌상단 전체 선택 헤더입니다. 행 헤더로 선택한 뒤 Delete를 누르면 행이 제거됩니다. 열/좌상단 전체 선택에서 Delete는 값만 비우며 열이나 행 DOM을 제거하지 않습니다.
+
+읽기 전용 셀은 `td` 또는 입력 요소에 `data-excel-readonly`, `aria-readonly="true"`, `readonly`, `disabled` 중 하나를 지정합니다. 읽기 전용 셀은 선택할 수 있지만 붙여넣기와 삭제에서는 건너뜁니다.
+
+## 사용법
+
+- 한 번 클릭: input 위에서도 한 셀 선택
+- 드래그 또는 Shift+클릭: input 위에서 시작해도 사각 범위 선택
+- 방향키: 활성 셀 이동, Shift+방향키: 범위 확장
+- 선택 상태에서 문자·숫자 입력: 기존 값을 해당 글자로 바꾸고 바로 입력 시작
+- F2 또는 더블클릭: 기존 값을 유지한 수동 커서 편집, Escape: 편집 전 값으로 취소
+- Tab/Shift+Tab: 오른쪽/왼쪽 셀 이동(행 끝에서 다음/이전 행으로 이동)
+- Enter/Shift+Enter: 아래/위 셀 이동. 편집 중에는 현재 값을 확정한 뒤 이동
+- Ctrl/Cmd+Enter: 현재 활성 행 바로 아래에 빈 행 삽입. 편집 중이면 값을 확정한 뒤 삽입
+- 바로 입력한 편집 모드의 방향키: 값을 확정하고 인접 셀 이동
+- F2/더블클릭 편집 모드의 방향키: input 내부 텍스트 커서만 이동
+- Ctrl/Cmd+C: 선택 범위를 Excel 호환 TSV 형식으로 복사
+- Ctrl/Cmd+V: Excel, LibreOffice, Google Sheets의 탭/줄바꿈 형식 데이터를 붙여넣기. 복사 블록이 선택 범위에 정확히 반복되는 크기라면 전체 범위에 타일처럼 반복
+- Delete/Backspace: 선택 값 삭제. 단, 행 헤더 선택의 Delete는 행 자체 삭제
+- Ctrl/Cmd+- 또는 `deleteRows()`: 선택된 셀이 포함된 `tbody` 행 삭제
+- Ctrl/Cmd+Z: 되돌리기, Ctrl/Cmd+Y 또는 Ctrl/Cmd+Shift+Z: 다시 실행
+
+기본 `interactionMode: 'spreadsheet'`에서는 한 번 클릭이 셀 선택이므로 Delete가 셀 전체를 비웁니다. F2/더블클릭 수동 편집 모드에서는 방향키가 input 내부 커서를 움직이고, 바로 타이핑해 진입한 편집 모드에서는 방향키가 값을 확정하고 셀을 이동합니다. 기존 폼처럼 input을 한 번 클릭해 즉시 편집하려면 `interactionMode: 'form'`을 지정하십시오.
+
+붙여넣기, 선택 값 삭제, 행 삭제와 확정된 직접 입력은 모두 같은 되돌리기 기록에 저장됩니다. 아직 input을 편집 중일 때의 Ctrl/Cmd+Z는 브라우저의 문자 편집을 따르고, Tab/Enter/외부 클릭으로 확정한 뒤에는 테이블 단위 Ctrl/Cmd+Z로 되돌릴 수 있습니다.
+
+```html
+<button type="button" onclick="excelTable.undo();">되돌리기</button>
+<button type="button" onclick="excelTable.redo();">다시 실행</button>
+<button type="button" onclick="excelTable.deleteSelection();">선택 값 삭제</button>
+<button type="button" onclick="excelTable.deleteRows();">선택 행 삭제</button>
+```
+
+`Delete` 키는 엑셀과 동일하게 셀 값만 비웁니다. `<tr>` 자체를 제거하려면 행 안의 셀을 하나 이상 선택하고 `deleteRows()`를 호출합니다. 행 삭제도 같은 Undo/Redo 기록에 포함됩니다.
+
+## 옵션
+
+```javascript
+var excelTable = VirtualExcelTable('#excelTable', {
+    cellSelector: 'tbody td.editable',
+    historyLimit: 100,
+    overflow: 'reject',
+    pasteMode: 'grid',
+    interactionMode: 'spreadsheet',
+    afterChange: function (changes, meta) {
+        // changes: [{ cell: td, oldValue: '기존값', newValue: '새값' }]
+        // meta.type: paste, delete, undo, redo
+    },
+    onError: function (error) {
+        alert(error.message);
+    }
+});
+```
+
+| 옵션 | 기본값 | 설명 |
+| --- | --- | --- |
+| `cellSelector` | `'tbody td'` | 표 안에서 편집 셀로 취급할 CSS 셀렉터 |
+| `rowSelector` | `'tbody tr'` | `deleteRows()`가 제거할 수 있는 데이터 행 셀렉터 |
+| `rowHeaderSelector` | `'tbody th'` | 클릭·드래그로 행 전체를 선택하는 헤더 셀렉터 |
+| `columnHeaderSelector` | `'thead th'` | 클릭·드래그로 열 전체를 선택하는 헤더 셀렉터 |
+| `minRows` | `1` | 행 삭제 후 반드시 남겨 둘 최소 데이터 행 수 |
+| `historyLimit` | `50` | 보관할 실행 취소 항목 수. `0` 이하는 기록하지 않음 |
+| `overflow` | `'clip'` | 붙여넣기가 표를 넘을 때 초과분만 자르는 `'clip'` 또는 전체를 거부하는 `'reject'` |
+| `autoAddRowsOnPaste` | `true` | 붙여넣기 행 수가 부족하면 마지막 행 구조를 자동 복제 |
+| `pasteMode` | `'grid'` | 항상 표 붙여넣기인 `'grid'`, 단일 입력값은 브라우저에 맡기는 `'auto'`, 표 붙여넣기를 끄는 `'native'` |
+| `interactionMode` | `'spreadsheet'` | 한 번 클릭/드래그로 셀을 선택하는 `'spreadsheet'` 또는 input 기본 편집을 우선하는 `'form'` |
+| `pasteSingleToSelection` | `true` | 한 값을 여러 선택 셀 전체에 채울지 여부 |
+| `pasteRepeatToSelection` | `true` | 복사한 직사각형 블록이 더 큰 선택 범위의 행·열 크기를 정확히 나눌 때 반복해서 채울지 여부 |
+| `dispatchEvents` | `true` | 값 변경 후 대상 요소에 버블링되는 `input`, `change` 이벤트 발생 여부 |
+| `injectStyles` | `true` | 선택/활성/읽기 전용 표시용 기본 CSS 자동 삽입 여부 |
+| `readOnly(cell, target)` | `null` | `true`를 반환한 셀을 읽기 전용으로 처리 |
+| `rowReadOnly(row)` | `null` | `true`를 반환한 행의 삭제를 차단 |
+| `getValue(cell, target)` | `null` | 사용자 정의 값 읽기 함수 |
+| `setValue(cell, value, target)` | `null` | 사용자 정의 값 쓰기 함수 |
+| `beforeChange(changes, meta)` | `null` | 변경 직전 호출. `false` 반환 시 해당 작업 취소 |
+| `afterChange(changes, meta)` | `null` | 변경 완료 후 호출 |
+| `beforeRowsDelete(rows, meta)` | `null` | 행 삭제 직전 호출. `false` 반환 시 전체 삭제 취소 |
+| `beforeRowAdd(row, meta)` | `null` | 새 행을 DOM에 추가하기 직전 호출. `false` 반환 시 취소 |
+| `rowFactory(table, index, values, referenceRow)` | `null` | 복제 대신 프로젝트 전용 새 `tr`을 반환하는 함수. 중간 삽입이면 `referenceRow` 제공 |
+| `reindexRows(table, meta)` | `null` | 행 삭제·복원·다시 삭제 후 Spring 입력 이름 등을 재정렬하는 훅 |
+| `afterRowsChange(rows, meta)` | `null` | 행 추가·자동 확장·삭제·Undo/Redo로 DOM 행 구성이 바뀐 뒤 호출 |
+| `onSelectionChange(selection)` | `null` | 선택 변경 후 호출. 선택 정보는 0 기반 `start`, `end`, `cells` 포함 |
+| `onError(error)` | `null` | 붙여넣기 범위 초과, 값 쓰기 또는 콜백 오류 등을 받을 함수 |
+
+`injectStyles: false`를 사용하면 `.vet-cell`, `.vet-selected`, `.vet-active`, `.vet-readonly` 클래스를 애플리케이션 CSS에서 직접 꾸며야 합니다.
+
+## API
+
+### 생성 함수와 정적 API
+
+| API | 반환/설명 |
+| --- | --- |
+| `VirtualExcelTable(selectorOrTable, options)` | 정확히 한 개의 테이블에 연결하고 인스턴스 반환 |
+| `VirtualExcelTable.attach(...)` | 위 생성 함수의 별칭 |
+| `VirtualExcelTable.attachAll(selectorOrList, options)` | 여러 테이블에 연결하고 인스턴스 배열 반환 |
+| `VirtualExcelTable.parseClipboardText(text)` | 탭/줄바꿈 클립보드 문자열을 2차원 배열로 변환 |
+| `VirtualExcelTable.version` | 라이브러리 버전 문자열 |
+
+같은 테이블에 다시 연결하면 기존 인스턴스를 반환합니다. 단일 생성 함수의 셀렉터가 여러 테이블과 일치하면 오류가 발생하므로 그 경우 `attachAll`을 사용합니다.
+
+### 인스턴스 API
+
+| 메서드 | 설명 |
+| --- | --- |
+| `select(startRow, startColumn[, endRow, endColumn])` | 0 기반 좌표 범위 선택. 인스턴스를 반환 |
+| `selectAll()` | 편집 대상 전체 선택 |
+| `getSelection()` | `{ start, end, cells }` 또는 선택이 없으면 `null` 반환 |
+| `getCopyText()` | 현재 선택 범위를 Excel 호환 TSV 문자열로 반환 |
+| `copy()` | 버튼 클릭 같은 사용자 동작 안에서 선택 범위를 시스템 클립보드로 복사하고 성공 여부 반환 |
+| `paste(text)` | 문자열을 현재 선택 위치에 넣고 실제 변경된 셀 수 반환 |
+| `clear()` / `deleteSelection()` | 선택 값을 비우고 실제 변경된 셀 수 반환 |
+| `deleteRows()` / `removeSelectedRows()` | 선택 셀이 속한 고유 `tbody` 행을 제거하고 삭제 행 수 반환 |
+| `addRow([values])` | 마지막 행 구조를 복제하거나 `rowFactory`로 행을 추가하고 새 `tr` 반환 |
+| `insertRowBelow([values])` / `addRowBelow([values])` | 현재 활성 행 구조를 복제해 바로 아래에 삽입하고 새 `tr` 반환 |
+| `getJsonData([keys], [options])` | 행 데이터를 객체 배열로 반환. `options.skipEmptyRows` 지원 |
+| `toJSON([keys], [options])` | `getJsonData()` 별칭 |
+| `undo()` / `redo()` | 작업 실행 후 성공 여부 반환 |
+| `canUndo()` / `canRedo()` | 실행 가능한 기록 존재 여부 반환 |
+| `refresh()` | 동적으로 행/셀을 바꾼 뒤 셀 목록과 선택 상태 갱신 |
+| `destroy()` | 이벤트와 상태/클래스를 제거하고 테이블을 원래 상태로 복원 |
+
+행을 Ajax로 추가하거나 제거했다면 마크업을 갱신한 직후 `excelTable.refresh()`를 호출합니다. 삭제된 DOM 셀을 가리키는 과거 기록은 되돌리기에서 적용할 수 없으므로, 대규모 재렌더링 뒤 기록까지 초기화하려면 `destroy()` 후 다시 생성하는 편이 안전합니다.
+
+Spring 목록 이름은 프로젝트마다 다르므로 코어가 임의로 변경하지 않습니다. 다음처럼 `reindexRows`에서 `items[n]`을 다시 맞출 수 있습니다.
+
+```javascript
+var excelTable = VirtualExcelTable('#excelTable', {
+    reindexRows: function (table) {
+        var rows = table.querySelectorAll('tbody tr');
+        var fields;
+        var i;
+        var j;
+
+        for (i = 0; i < rows.length; i += 1) {
+            fields = rows[i].querySelectorAll('[name]');
+            for (j = 0; j < fields.length; j += 1) {
+                fields[j].name = fields[j].name.replace(
+                    /^items\[\d+\]/,
+                    'items[' + i + ']'
+                );
+            }
+        }
+    }
+});
+```
+
+## Select와 JSON 값
+
+`select`는 스프레드시트 input 모드로 가로채지 않고 일반 HTML select처럼 클릭·방향키·Enter·Tab이 동작합니다. 화면 복사에는 선택된 option의 라벨을 사용하지만, JSON과 폼 전송에는 실제 `select.value`를 사용합니다. 붙여넣기는 option value를 먼저 찾고, 없으면 라벨이 같은 option을 찾아 실제 value를 선택합니다.
+
+```html
+<th data-excel-column="2" data-excel-key="status">상태</th>
+<td>
+    <select name="items[0].status">
+        <option value="A">사용</option>
+        <option value="I">미사용</option>
+    </select>
+</td>
+```
+
+```javascript
+var data = excelTable.getJsonData(
+    ['code', 'name', 'status'],
+    { skipEmptyRows: true }
+);
+
+// [{ code: 'A001', name: '사과', status: 'A' }]
+console.log(JSON.stringify(data));
+```
+
+키 배열을 생략하면 `data-excel-key`, input/select의 `name` 마지막 필드명, `key1`, `key2` 순서로 자동 추론합니다.
+
+## 행 추가와 자동 확장
+
+기본값에서는 마지막 한 행(`minRows: 1`)을 삭제할 수 없습니다. `addRow()`는 마지막 행을, `insertRowBelow()`와 Ctrl/Cmd+Enter는 현재 활성 행을 복제합니다. 중복 `id`와 label `for`를 제거하고 input 값을 비우며 select를 첫 option으로 초기화합니다. 붙여넣기에 더 많은 행이 필요할 때는 항상 테이블 끝에 자동 확장됩니다.
+
+```javascript
+excelTable.addRow();
+excelTable.addRow({
+    productCode: 'A001',
+    quantity: '10',
+    status: 'A'
+});
+excelTable.insertRowBelow();
+```
+
+복잡한 행은 복제 대신 팩토리를 제공할 수 있습니다.
+
+```javascript
+var excelTable = VirtualExcelTable('#excelTable', {
+    minRows: 1,
+    autoAddRowsOnPaste: true,
+    rowFactory: function (table, index) {
+        var row = document.createElement('tr');
+        row.innerHTML = '<th data-excel-row-header></th>' +
+            '<td><input name="items[' + index + '].code"></td>';
+        return row;
+    },
+    reindexRows: reindexItemRows
+});
+```
+
+## jQuery UI Datepicker 열
+
+코어 라이브러리는 jQuery에 의존하지 않지만, 특정 input에 `data-excel-native-editor`를 붙이면 첫 클릭을 가로채지 않으므로 jQuery UI Datepicker 같은 기존 편집기를 그대로 열 수 있습니다.
+
+```html
+<td>
+    <input type="text"
+           class="js-datepicker"
+           data-excel-native-editor
+           name="items[0].receivedDate">
+</td>
+```
+
+행 복제 시 원본 Datepicker의 `hasDatepicker` 표시 클래스는 복제되지만 jQuery 내부 인스턴스 데이터는 복제되지 않습니다. 새 행을 붙이기 전에 표시 클래스를 제거하고, 행 구성이 바뀐 뒤 현재 표 안의 미초기화 input만 다시 초기화하십시오. 이 콜백은 `addRow()`뿐 아니라 여러 행 붙여넣기의 자동 행 추가와 Undo/Redo에도 호출됩니다.
+
+```javascript
+function prepareDatepickerRow(row) {
+    var $row = jQuery(row);
+
+    $row.find('.ui-datepicker-trigger, .ui-datepicker-append').remove();
+    $row.find('.js-datepicker').each(function () {
+        jQuery.removeData(this, 'datepicker');
+        jQuery(this)
+            .removeClass('hasDatepicker')
+            .removeAttr(
+                'aria-haspopup aria-expanded aria-controls aria-describedby aria-owns'
+            );
+    });
+}
+
+function initializeDatepickers(table) {
+    jQuery(table).find('.js-datepicker').each(function () {
+        if (!jQuery.data(this, 'datepicker')) {
+            jQuery(this).removeClass('hasDatepicker').datepicker({
+                dateFormat: 'yy-mm-dd',
+                onSelect: function () {
+                    jQuery(this).trigger('input').trigger('change');
+                }
+            });
+        }
+    });
+}
+
+var tableElement = document.getElementById('excelTable');
+var excelTable = VirtualExcelTable(tableElement, {
+    beforeRowAdd: function (row) {
+        prepareDatepickerRow(row);
+    },
+    reindexRows: reindexItemRows,
+    afterRowsChange: function () {
+        initializeDatepickers(tableElement);
+    }
+});
+
+initializeDatepickers(tableElement);
+```
+
+`demo.html`은 jQuery UI 1.14.2를 CDN에서 불러오는 실행 예제를 포함합니다. 실제 Spring/JSP 프로젝트에서는 이미 로드한 jQuery/jQuery UI 파일을 그대로 사용하면 됩니다.
+
+## 셀별 유효성 검사 데모
+
+`demo.html`의 `등록(유효성 검사)` 버튼은 업무 화면에서 검증을 트리거하는 예시입니다. 실제 control에는 `data-excel-target`과 `data-field`를 붙이고, 오류 메시지는 같은 `td`의 `.vet-field-error`에 표시합니다. 따라서 오류 문구가 복사·붙여넣기·JSON 값에 섞이지 않습니다.
+
+```html
+<td>
+    <div class="vet-field-control">
+        <input type="text"
+               data-excel-target
+               data-field="code"
+               name="items[0].code">
+    </div>
+    <div class="vet-field-error" role="alert" aria-live="polite"></div>
+</td>
+
+<button type="button" id="registerButton">등록(유효성 검사)</button>
+```
+
+```css
+.vet-field-error {
+    display: none;
+    color: #dc2626;
+    font-size: 12px;
+}
+
+tr.has-validation-errors .vet-field-error {
+    display: block;
+    visibility: hidden;
+}
+
+tr.has-validation-errors td.is-invalid > .vet-field-error {
+    visibility: visible;
+}
+```
+
+데모는 input/select 자체에 CSS를 적용하지 않습니다. 바깥 `.vet-field-control`과 오류 영역만 정렬하므로 프로젝트의 기존 control 스타일이 그대로 유지됩니다. 상품 코드·상품명·상태 필수, 수량은 1 이상의 정수, 단가는 0 이상의 숫자, 입고일은 실제 존재하는 `YYYY-MM-DD` 날짜를 검사합니다. 완전히 빈 행은 무시하지만 모든 행이 비어 있으면 첫 행에 필수 오류를 보여줍니다. `input` 또는 `change`가 발생하면 해당 셀 오류만 지우며, 새 행을 복제할 때는 `beforeRowAdd`에서 기존 오류 문구와 `aria-invalid`를 제거합니다.
+
+## 테이블 구조 제약
+
+- `rowspan`과 `colspan`은 시각적인 병합 좌표로 계산하지 않습니다. 각 `<tr>`에 실제로 존재하는 셀 순서만 사용하므로 병합 셀이 있는 표에서는 선택/붙여넣기 좌표가 어긋날 수 있습니다. 편집 영역에는 사용하지 마십시오.
+- 모든 편집 행은 같은 수의 `td`를 가진 직사각형 구조를 권장합니다. 행별 셀 수가 다르면 없는 위치는 `overflow` 규칙의 영향을 받습니다.
+- 기본값에서는 `thead th`와 `tbody th`가 편집 대상이 아닙니다. 헤더까지 포함하려면 `cellSelector`를 명시하되, 데이터 행과 열 좌표가 달라진다는 점을 고려해야 합니다.
+- 중첩 테이블의 셀/입력 요소는 바깥 테이블의 편집 대상으로 섞이지 않습니다.
+- 체크박스, 라디오, 파일 및 버튼 타입 `input`은 자동 값 대상으로 취급하지 않습니다. 필요하면 `getValue`/`setValue`를 제공하십시오.
+
+## 브라우저 호환
+
+코드는 ES5 문법과 표준 DOM 이벤트를 사용하며 현재 버전의 Chrome, Edge, Firefox, Safari를 기준으로 사용할 수 있습니다. `addEventListener`, `querySelectorAll`, `matches` 계열 API가 없는 IE8 이하는 지원하지 않습니다. IE9~11 같은 구형 브라우저는 문법상 동작 가능하도록 작성되어 있지만 클립보드 이벤트와 보안 정책이 브라우저/사내 설정마다 다르므로 실제 운영 대상 환경에서 반드시 확인하십시오.
+
+브라우저 보안상 시스템 클립보드를 임의로 읽지 않습니다. 사용자가 테이블을 선택하고 Ctrl/Cmd+V를 눌러 발생시킨 `paste` 이벤트의 텍스트만 처리합니다. 테스트 자동화나 서버 데이터 적용처럼 이미 문자열이 있다면 `excelTable.paste(text)`를 사용합니다.
+
+## 테스트 방법
+
+1. `demo.html`을 브라우저로 열거나 Spring 애플리케이션에서 `virtual-excel-demo.jsp`를 반환하는 URL을 엽니다.
+2. Excel에 `상품 코드, 상품명, 수량, 단가, 입고일, 상태` 순서의 3행 x 6열 데이터를 만든 뒤 복사하고, 웹 표의 첫 셀을 클릭해 Ctrl/Cmd+V를 누릅니다.
+3. 값이 행/열 순서대로 들어가고 각 input의 개발자 도구 `value`가 바뀌었는지 확인합니다.
+4. 여러 셀을 선택해 Delete, Ctrl/Cmd+Z, Ctrl/Cmd+Y(또는 Cmd+Shift+Z)를 차례로 시험합니다.
+5. 표 오른쪽/아래 경계를 넘는 데이터를 붙여 `overflow: 'clip'`과 `'reject'`를 각각 확인합니다.
+6. 읽기 전용 셀, 한 값의 범위 채우기, 따옴표 안 탭/줄바꿈 데이터도 확인합니다.
+7. 폼을 전송하는 화면에서는 서버가 `items[n].fieldName` 값을 예상한 목록 객체로 바인딩하는지 통합 테스트합니다.
+8. 자동 회귀 검사는 `tests/browser-test.html`, Datepicker 행 추가 통합 검사는 `tests/demo-datepicker-test.html`을 브라우저로 엽니다.
+
+간단한 콘솔 확인 예시는 다음과 같습니다.
+
+```javascript
+excelTable.select(0, 0);
+excelTable.paste('A001\t사과\t10\t1200\r\nA002\t배\t5\t2500');
+console.log(excelTable.getSelection());
+console.log(excelTable.canUndo());
+excelTable.undo();
+excelTable.redo();
+```