데이터 그리드

Canvas 로 그려서 수만 행도 부드럽게 다루는 표입니다. 정렬·필터·선택·트리·가상 스크롤을 지원합니다.

@tissue-ui/grid-react

설치

bash

npm install @tissue-ui/grid-core @tissue-ui/grid-react @tissue-ui/grid-themes

Grid 는 canvas 로 그려서 별도 CSS 를 불러올 필요가 없습니다.

라이브 데모

머리글을 눌러 정렬해 보세요.

기본 사용법

열은 columns 로 정의하고, 데이터는 canvas 특성상 onMount 에서 넣습니다. Grid 는 높이가 있는 컨테이너 안에 두세요.

tsx

import { Grid } from "@tissue-ui/grid-react";

const columns = [
  { name: "name", header: "이름" },
  { name: "amount", header: "금액", align: "right", sortable: true },
];

export function Demo() {
  const rows = [{ name: "홍길동", amount: "₩1,240,000" }];
  return (
    <div style={{ height: 320 }}>
      <Grid columns={columns} style={{ height: "100%" }}
            onMount={(api) => api.setData(rows)} />
    </div>
  );
}

주요 구성 요소

Grid — React 컴포넌트. useGrid·useGridEvent 훅도 제공.
@tissue-ui/grid-core — 렌더러와 store, 테마 토큰(defaultTheme 등)과 composeTheme. React 없이도 씁니다.
@tissue-ui/grid-themes — 추가 프리셋 테마.