데이터와 행 추가·수정·삭제

comins-table@0.2.2

Core helper는 framework와 분리된 상태 모델을 제공합니다. React component에서는 외부 useState 또는 store state 배열을 data prop에 직접 연결합니다.

import {
  addCominsRows,
  createCominsTableState,
  deleteCominsRows,
  queryCominsRows,
  updateCominsRows,
} from "comins-table";

const state = createCominsTableState({
  columns: [{ field: "name", label: "Name" }],
  getRowId: (row: { id: string }) => row.id,
  rows: [{ id: "a", name: "Alpha" }],
});

const added = addCominsRows(state, [{ id: "b", name: "Beta" }]);
const updated = updateCominsRows(added, [{ id: "b", patch: { name: "Beta updated" } }]);
const deleted = deleteCominsRows(updated, ["a"]);
const result = queryCominsRows(deleted);

React component에서 발생한 데이터 변경은 onChangeData(nextData)로 외부 상태에 반영합니다.

데이터 소유권과 화면 상태

테이블 내부 편집에서 onChangeData는 다음 일반 Row 배열 또는 Tree Grid 노드 배열을 전달합니다. 변경을 유지하려면 해당 배열을 data에 다시 전달합니다. Viewport 모드는 전체 배열 대신 제어되는 블록 스냅샷을 사용하며, useCominsViewport가 스냅샷과 콜백을 연결합니다. 다른 제어 모델은 onChangeData가 아닌 각 모델의 값 prop과 대응 콜백을 사용합니다.

선택, 열 배치, 정렬은 테이블 내부 화면 상태입니다. onChangeSelection, onChangeColumnLayout, onChangeSort, onChangeSortModel은 변경을 관찰해 외부 동기화나 저장에 사용할 수 있습니다. 콜백을 생략해도 해당 내부 상태는 갱신됩니다.

복원이 지원되는 항목은 Ref API를 사용합니다. setSelectedRow와 setSelectedRows는 표시 인덱스로 Row 선택을 복원하고, setColumnLayout은 열 배치를 복원합니다. setSortState와 clearSort는 정렬을 설정하거나 해제하며, setSortModel은 순서가 있는 전체 정렬 모델을 복원합니다. getColumnLayout, getSortState, getSortModel은 현재 배치와 정렬 상태를 조회합니다. 관련 계약은 Core State와 Ref API, 제어되는 Row Expand를 참고합니다.

Playground 데이터

CRUD 예제는 수정 가능한 데이터 키와 Column 이름을 column1부터 column6까지 동일하게 사용합니다. 별도의 내부 id는 선택·삭제를 위해 유지하며 JSON 편집창에서 제외합니다. column4를 포함한 표시 필드 6개를 모두 수정해도 Row 식별자는 바뀌지 않습니다. 예제의 필드 규칙이며 라이브러리는 application이 정의한 필드와 label을 허용합니다. 구간 조회와 로딩된 Cell 편집에는 배열 CRUD helper 대신 Viewport Datasource를 사용합니다.

---

실행 가능한 대표 예제 · 배포 기준 원본 가이드