핵심 개념

const columns: DataGridColumn<Product>[] = [
  {
    id: "name",
    title: "상품명",
    getValue: (row) => row.name,
    width: 200,
    minWidth: 120,
    resizable: true,
  },
  {
    id: "price",
    title: "가격",
    getValue: (row) => row.price,
    align: "right",
    width: 100,
    group: "금액",
  },
  {
    id: "tax",
    title: "세금",
    getValue: (row) => row.price * 0.1,
    align: "right",
    width: 100,
    group: "금액",
  },
];

User Input
  → parseInput(raw)          // 문자열 → 타입 변환 (예: "42" → 42)
  → validateValue(parsed)    // 유효성 검증, 에러 메시지 반환
  → setValue(row, validated)  // 불변 Row 업데이트 반환
  → onCellsEdited(changes)   // 배치 편집 인터셉트 (paste/delete 포함)
  → onRowsChange(newRows)    // 최종 상태 업데이트

{
  id: "price",
  title: "가격",
  getValue: (row) => row.price,
  setValue: (row, value) => ({ ...row, price: value as number }),
  editable: true,
  editor: { kind: "number", min: 0, max: 999999, step: 100, decimals: 0 },
  // 문자열 입력을 숫자로 변환
  parseInput: (raw) => Number(raw.replace(/,/g, "")),
  // 음수 값 거부
  validateValue: (val) =>
    val < 0 ? { valid: false, message: "음수 불가" } : { valid: true },
}

<DataGrid
  columns={columns}
  rows={rows}
  height={600}
  getRowId={(row) => row.id}
  // 가상화 튜닝
  rowBufferPx={400}
  columnOverscan={3}
  maxRenderedRows={300}
  scrollUpdateMode="raf"
  // 값 캐시
  valueCache
  valueCacheStrategy="row-id"
/>

const [selection, setSelection] = useState<DataGridSelection>();

<DataGrid
  columns={columns}
  rows={rows}
  height={400}
  rowSelect="multi"
  rowMarkers="checkbox"
  columnSelect
  selection={selection}
  onSelectionChange={setSelection}
/>

const columns: DataGridColumn<Row>[] = [
  {
    id: "status",
    title: "상태",
    getValue: (row) => row.status,
    setValue: (row, val) => ({ ...row, status: val as string }),
    editable: true,
    // 복사 시 한글 라벨로 직렬화
    serializeValue: (val) =>
      val === "active" ? "활성" : val === "paused" ? "일시정지" : "비활성",
    // 붙여넣기 시 역변환
    deserializeValue: (text) =>
      text === "활성" ? "active" : text === "일시정지" ? "paused" : "inactive",
  },
];

<DataGrid
  columns={columns}
  rows={rows}
  height={400}
  copyHeaders          // 복사 시 헤더 행 포함
  maxPasteCells={5000} // 붙여넣기 최대 셀 수 제한
  onCopy={(ctx) => {
    console.log("복사:", ctx.selection, ctx.cells);
  }}
  onPaste={(ctx) => {
    // false 반환 시 붙여넣기 취소
    if (ctx.cells.length > 1000) return false;
    return true;
  }}
/>

// DB의 PK나 UUID를 안정적인 식별자로 사용
<DataGrid
  columns={columns}
  rows={rows}
  getRowId={(row) => row.uuid}
  valueCache
  valueCacheStrategy="row-id"
  height={400}
/>