TUI Grid에서 행 삽입과 삭제를 자연스럽게 구현하는 방법 (v3 기준)

웹에서 표 형태의 데이터를 다루다 보면 사용자가 직접 행을 추가하거나 삭제할 수 있도록 하는 기능은 필수가 된다. 특히 TUI Grid를 사용하는 경우에는 다양한 기능이 기본적으로 제공되지만, 실제 프로젝트에서 원하는 방식으로 삽입이나 삭제 기능을 구현하려면 약간의 커스터마이징이 필요하다.

이번 포스팅에서는 TUI Grid v3 버전을 기준으로, 사용자가 선택한 위치에 새로운 행을 삽입하고, 특정 행을 자연스럽게 삭제하는 기능을 직접 구현하는 방법을 공유하려 한다.
이 기능은 단순히 appendRow()나 removeRow() 같은 기본 메서드를 사용하는 것을 넘어서, 데이터의 흐름을 제어하면서 더욱 유연하게 다루는 방식이다.

---

✅ 행 삽입: 선택한 행 아래에 새 행 추가하기

TUI Grid의 기본 행 추가 기능은 보통 마지막에 데이터를 붙이는 형태다. 하지만 실제 현업에서는 사용자가 체크한 특정 위치 아래에 새로운 행을 추가하고 싶어하는 경우가 많다.

이를 구현하려면 먼저 사용자가 체크한 행의 rowKey를 가져와서, 그 다음 위치에 새 행을 삽입해야 한다. 문제는 이 삽입 이후 기존 데이터를 한 칸씩 뒤로 밀어야 한다는 점이다. 그렇지 않으면 기존 데이터가 덮어씌워지기 때문이다.

아래는 그러한 로직을 구현한 자바스크립트 코드이다:

$("#insertRow").click(function () {
    const checkedRows = grid.getCheckedRows();

    if (checkedRows.length === 0) {
        alert("먼저 삽입할 위치의 행을 선택하세요.");
        return;
    }

    const firstCheckedRowKey = checkedRows[0].rowKey;
    let rowIndex = firstCheckedRowKey + 1;

    // 기존 데이터 한 칸씩 뒤로 밀기
    for (let i = grid.getRowCount() - 1; i >= rowIndex; i--) {
        let rowData = grid.getRow(i);
        for (let j = 1; j <= 9; j++) {
            grid.setValue(i + 1, `col${j}`, rowData[`col${j}`]);
        }
    }

    // 새로운 빈 행 삽입
    for (let j = 1; j <= 9; j++) {
        grid.setValue(rowIndex, `col${j}`, '');
    }

    grid.focus(rowIndex, 'col1');
});

핵심은 뒤에서부터 데이터를 복사해서 한 칸씩 밀어주는 작업이다. 이렇게 하면 기존 데이터를 보존하면서 새 행을 원하는 위치에 삽입할 수 있다.

---

✅ 행 삭제: removeRow() 없이 자연스럽게 당기기

TUI Grid에서 행 삭제는 removeRow()를 사용하면 간단하지만, 실무에서는 그보다 더 세밀한 제어가 필요할 때가 있다. 특히 여러 행을 삭제할 때 rowKey가 재정렬되면서 예기치 않은 문제가 발생하는 경우도 있다.

이럴 때는 선택한 행 이후의 데이터를 한 칸씩 앞으로 당기고, 마지막 행은 빈 값으로 초기화하는 방식이 훨씬 안정적이다.

아래는 해당 로직을 반영한 삭제 코드다:

$("#deleteRow").click(function () {
    const checkedRows = grid.getCheckedRows();

    if (checkedRows.length === 0) {
        alert("삭제할 행을 선택하세요.");
        return;
    }

    const checkedRowKeys = checkedRows.map(row => row.rowKey).sort((a, b) => a - b);

    checkedRowKeys.forEach(rowKey => {
        const rowCount = grid.getRowCount();

        // 이후 데이터 앞으로 당기기
        for (let i = rowKey; i < rowCount - 1; i++) {
            let nextRow = grid.getRow(i + 1);
            for (let j = 1; j <= 9; j++) {
                grid.setValue(i, `col${j}`, nextRow[`col${j}`]);
            }
        }

        // 마지막 행 비우기
        const lastIndex = grid.getRowCount() - 1;
        for (let j = 1; j <= 9; j++) {
            grid.setValue(lastIndex, `col${j}`, '');
        }
    });

    grid.blur(); // 포커스 해제
});

이 방식은 특히 여러 줄을 동시에 삭제할 때 유용하다. 행 번호가 바뀌는 문제 없이 안정적으로 동작하며, 비즈니스 로직과의 충돌도 없다.

---

실무에 적합한 방식으로 그리드 제어하기

위와 같은 방식으로 구현하면 단순한 행 삽입이나 삭제 이상의 컨트롤이 가능해진다. 예를 들어:

• 데이터를 임시 보관하면서 복사 및 붙여넣기 기능 구현
• 삭제 시 사용자 입력 데이터를 백업하거나 로그로 남기기
• 삽입 시 이전 행의 데이터를 복제해서 새로운 행을 빠르게 구성

이러한 커스터마이징은 단순히 TUI Grid의 기본 기능만으로는 구현이 어려운 부분이지만, 조금만 로직을 조절하면 충분히 적용할 수 있다.

TUI Grid는 특히 한국에서 많은 기업 시스템에 사용되는 만큼, 사용자 편의성을 높이기 위한 작은 조정이 전체 사용 경험을 크게 개선시킬 수 있다.
복잡한 데이터 입력을 다루는 시스템이라면 이번 방식처럼 행 삽입/삭제 로직도 꼭 커스터마이징해보는 것을 추천한다.

JavaScript와 jQuery만으로도 충분히 유연하게 구현할 수 있기 때문에, 향후 프로젝트에 바로 적용해도 무리가 없다. TUI Grid를 다루는 개발자라면 꼭 알아두어야 할 팁 중 하나다.