5분 안에 첫 그리드

초안

아직 npm에 배포되지 않았습니다. 저장소 워크스페이스(pnpm install)에서 사용하는 방법을 기준으로 합니다. 패키지 이름과 배포 방식은 확정되지 않았습니다.

1. 설치

사용하는 프레임워크 패키지와 테마를 설치합니다.

React

pnpm add @grid/react @grid/themes

Vue

pnpm add @grid/vue @grid/themes

Angular

pnpm add @grid/angular @grid/themes

2. 테마 불러오기

앱 진입점에서 한 번만 불러옵니다.

import '@grid/themes/grid.css';

다크 모드는 그리드 또는 조상 요소에 data-mxg-theme="dark" 속성을 지정합니다.

3. 그리드 표시

컬럼과 행을 options로 전달합니다. 그리드는 부모 요소의 높이를 채우므로 부모에 높이를 지정해야 합니다.

React

import { Grid } from '@grid/react';
import type { GridOptions } from '@grid/react';

interface Row {
  id: number;
  name: string;
}

const options: GridOptions<Row> = {
  columns: [
    { id: 'id', title: '번호', width: 80 },
    { id: 'name', title: '이름' },
  ],
  rows: [
    { id: 1, name: '김민준' },
    { id: 2, name: '이서연' },
  ],
  rowKey: 'id',
};

export function App() {
  return (
    <div style={{ height: 300 }}>
      <Grid options={options} onRowClicked={({ rowKey }) => console.log(rowKey)} />
    </div>
  );
}

Vue

import { Grid } from '@grid/vue';
import { defineComponent, h } from 'vue';

const options = {
  columns: [
    { id: 'id', title: '번호', width: 80 },
    { id: 'name', title: '이름' },
  ],
  rows: [
    { id: 1, name: '김민준' },
    { id: 2, name: '이서연' },
  ],
  rowKey: 'id',
};

export default defineComponent({
  render: () =>
    h('div', { style: 'height: 300px' }, [
      h(Grid, { options, onRowClicked: ({ rowKey }: { rowKey: unknown }) => console.log(rowKey) }),
    ]),
});

Angular

import { Component } from '@angular/core';
import { GridComponent, type GridEventMessage, type GridOptions } from '@grid/angular';

interface Row {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 300px">
      <mx-grid [options]="options" (gridEvent)="onEvent($event)" />
    </div>
  `,
})
export class AppComponent {
  options: GridOptions<Row> = {
    columns: [
      { id: 'id', title: '번호', width: 80 },
      { id: 'name', title: '이름' },
    ],
    rows: [
      { id: 1, name: '김민준' },
      { id: 2, name: '이서연' },
    ],
    rowKey: 'id',
  };

  onEvent(event: GridEventMessage<Row>) {
    if (event.name === 'rowClicked') console.log(event.payload.rowKey);
  }
}

4. 현재 지원 범위 (v0)

• 컬럼 헤더와 행 표시, 컬럼 너비·정렬·숨김, 값 포맷터(formatValue)
• 행 번호 열, rowClass / cellClass, 빈 데이터·로딩 안내
• 행 추가·교체·제거(addRows, updateRows, removeRows, transact)
• 행/셀/헤더 클릭 이벤트

정렬, 필터, 선택, 편집, 가상 스크롤 등은 계약에는 있으나 아직 구현되지 않았습니다. 구현 상태는 저장소의 docs/design/api-contract.md 표를 따릅니다.