직접 만져보세요
아래는 실제 동작하는 그리드입니다 — 헤더를 클릭해 정렬해 보세요. 셀 렌더러(숫자·날짜·배지·링크)가 자동 배선됩니다.
차트도 내장
셀 스파크라인부터 엔터프라이즈 17종(Apache ECharts)까지. 아래 차트의 툴바로 막대·선·레이더·히트맵을 바로 전환해 보세요 — React·Vue 3 동일 엔진.
한 그리드로, 엔터프라이즈까지
커뮤니티(MIT) 코어부터 Pro 기능까지 — 필요한 패키지만 골라 쓴다.
빠른 온보딩
createColumns({ id, name, type }) 로 TanStack 지식 없이 컬럼을 선언. 데이터 키 타입 안전(오타는 컴파일 차단).
가상화 + 컬럼 고정
수만 행도 부드러운 스크롤. 행/컬럼 가상화, 좌·우 핀, sticky 헤더.
피벗 · 집계
다축 피벗 테이블·소계·전치, 그룹별 합계/평균/카운트, 그룹 패널(DnD).
서버사이드 (SSRM)
블록 lazy 로드·무한 스크롤·뷰포트 행 모델·서버 트리. 대용량 백엔드 연동.
차트 17종 (React/Vue)
셀 스파크라인부터 엔터프라이즈 17종까지. BYO 엔진·SSR·동일 코어 멀티프레임워크.
스프레드시트
A1 수식·의존 그래프 재계산·VLOOKUP/날짜/재무 함수·셀 서식/스타일/병합.
Excel·CSV·PDF 내보내기
버튼 하나로 Excel/CSV/PDF 다운로드·클립보드·인쇄. 전체/필터/선택 범위·숫자서식·다중 시트·수식 보존. (무료 MIT)
편집 · 변경 추적
인라인 편집, 추가/수정/삭제 dirty 추적, 검증 룰, Excel-style 범위 선택·클립보드.
멀티프레임워크
동일 headless 코어(@tanstack/table-core) 위에서 React 18/19 + Vue 3 어댑터.
TanStack 지식 없이, 타입 안전하게
createColumns 가 type 으로 셀 렌더러를 자동 배선하고, 컬럼 id 를 keyof TData 로 강제한다. 셀/필터 콜백은 깨끗한 GridCellContext 를 받아 TanStack 타입을 import 할 필요가 없다.
- 오타 컬럼 키 = 컴파일 에러
- facade @topgrid/grid 하나로 시작, 트리셰이킹은 개별 패키지로
- 완전 제어가 필요하면 raw TanStack ColumnDef 도 그대로 허용
import { Grid, createColumns } from '@topgrid/grid';
interface User { id: number; name: string; email: string; age: number; }
// type 으로 셀 렌더러 자동 배선 · id 는 keyof User 강제(오타 차단)
const columns = createColumns<User>([
{ id: 'name', name: '이름', type: 'text' },
{ id: 'email', name: '이메일', type: 'text' },
{ id: 'age', name: '나이', type: 'number', align: 'right' },
]);
export default function App() {
return (
<Grid<User>
data={users}
columns={columns}
getRowId={(u) => String(u.id)}
enableSort
// clean 콜백 — TanStack 타입 import 불필요
onCellClick={(ctx) => console.log(ctx.columnId, ctx.value)}
/>
);
}