react-wasm-table
  • 한국어

      • Table API

      메인 테이블 컴포넌트와 컬럼 정의 타입입니다.

      Grid와 Table

      두 가지 진입점이 있습니다.

      • Grid — <canvas>를 렌더하고 어댑터·WASM·캔버스 렌더러 전체 파이프라인을 구동합니다. 일반적인 캔버스 기반 테이블에 사용하세요.
      • Table — 헤드리스 테이블: 캔버스 없이 구조만(SSR 또는 커스텀 렌더링용). 동일한 data / columns 스타일 props를 받습니다.

      아래 예제는 모두 객체 기반 columns와 data로 Grid를 사용합니다.

      기본 사용

      import { 
      import Grid
      Grid      , 
      import createColumnHelper
      createColumnHelper       } from "@ohah/react-wasm-table";      

type 
      type Row = {
    name: string;
    age: number;
}
      Row       = { 
      name: string
      name      : string; 
      age: number
      age      : number };      
const 
      const helper: any
      helper       = 
      import createColumnHelper
      createColumnHelper      <
      type Row = {
    name: string;
    age: number;
}
      Row      >();      
const 
      const columns: any[]
      columns       = [      
  
      const helper: any
      helper      .accessor("name", { 
      header: string
      header      : "Name", 
      size: number
      size      : 200 }),      
  
      const helper: any
      helper      .accessor("age", { 
      header: string
      header      : "Age", 
      size: number
      size      : 100 }),      
];
const 
      const data: Row[]
      data      : 
      type Row = {
    name: string;
    age: number;
}
      Row      [] = [      
  { 
      name: string
      name      : "Alice", 
      age: number
      age      : 30 },      
  { 
      name: string
      name      : "Bob", 
      age: number
      age      : 25 },      
];

function 
      function App(): JSX.Element
      App      () {      
  return <
      import Grid
      Grid       
      data: Row[]
      data      ={
      const data: Row[]
      data      } 
      columns: any[]
      columns      ={
      const columns: any[]
      columns      } 
      width: number
      width      ={600} 
      height: number
      height      ={400} />;      
}

      Grid props

      PropType기본값설명
      dataRecord<string, unknown>[]필수행 데이터(객체 배열)
      columnsColumnDef[]필수컬럼 정의
      widthnumber필수캔버스 너비(px)
      heightnumber필수캔버스 높이(px)
      rowHeightnumber36행 높이(px)
      headerHeightnumber40헤더 행 높이(px)
      themePartial<Theme>-테마 오버라이드
      childrenReactNode-columns가 있으면 무시

      ColumnDef (객체 기반 컬럼)

      PropType설명
      idstring컬럼 키
      widthnumber너비(px)
      minWidthnumber최소 너비
      maxWidthnumber최대 너비
      flexGrownumberflex grow
      flexShrinknumberflex shrink
      headerstring헤더 라벨
      align"left" | "center" | "right"셀 정렬
      sortableboolean헤더 정렬 사용
      editor"text" | "number" | "select"셀 에디터 타입
      render(value: unknown) => RenderInstruction커스텀 셀 인스트럭션

      커스텀 셀 렌더링 (render prop)

      컬럼의 render(또는 JSX children)에서 RenderInstruction(예: text, badge, flex)을 반환하면 캔버스 렌더러가 그에 맞게 그립니다.

      import { 
      import Grid
      Grid      , type 
      import ColumnDef
      ColumnDef       } from "@ohah/react-wasm-table";      

const 
      const columns: ColumnDef[]
      columns      : 
      import ColumnDef
      ColumnDef      [] = [      
  { 
      id: string
      id      : "name", 
      accessorKey: string
      accessorKey      : "name", 
      size: number
      size      : 200, 
      header: string
      header      : "Name" },      
  {
    
      id: string
      id      : "status",      
    
      accessorKey: string
      accessorKey      : "status",      
    
      size: number
      size      : 120,      
    
      header: string
      header      : "Status",      
    
      cell: (info: any) => {
    type: string;
    value: string;
    style: {
        color: string;
        backgroundColor: string;
    };
}
      cell      : (
      info: any
      info      ) => {      
      const 
      const value: any
      value       = 
      info: any
      info      .getValue();      
      return {
        
      type: string
      type      : "badge",      
        
      value: string
      value      : 
      var String: StringConstructor
(value?: any) => string
      Allows manipulation and formatting of text strings and determination and location of substrings within strings.
      String      (
      const value: any
      value      ),      
        
      style: {
    color: string;
    backgroundColor: string;
}
      style      : {      
          
      color: string
      color      : 
      const value: any
      value       === "active" ? "#065f46" : "#374151",      
          
      backgroundColor: string
      backgroundColor      : 
      const value: any
      value       === "active" ? "#d1fae5" : "#f3f4f6",      
        },
      };
    },
  },
];

const 
      const data: {
    id: number;
    name: string;
    status: string;
}[]
      data       = [      
  { 
      id: number
      id      : 1, 
      name: string
      name      : "Alice", 
      status: string
      status      : "active" },      
  { 
      id: number
      id      : 2, 
      name: string
      name      : "Bob", 
      status: string
      status      : "inactive" },      
];

function 
      function App(): JSX.Element
      App      () {      
  return <
      import Grid
      Grid       
      data: {
    id: number;
    name: string;
    status: string;
}[]
      data      ={
      const data: {
    id: number;
    name: string;
    status: string;
}[]
      data      } 
      columns: ColumnDef[]
      columns      ={
      const columns: ColumnDef[]
      columns      } 
      width: number
      width      ={500} 
      height: number
      height      ={400} />;      
}

      정렬과 필터

      • 정렬: 컬럼에 sortable: true 설정. 헤더 클릭으로 none → asc → desc → none 순환. 상태는 내부(ref)라 스크롤이 빠르게 유지됩니다.
      • 필터: columnFilters / onColumnFiltersChange(제어) 또는 initialState.columnFilters(비제어). 전역 필터: globalFilter / onGlobalFilterChange.

      셀용 지원 인스트럭션 타입: text, badge, flex, box, stack, sparkline 및 스텁. 자세한 내용은 캔버스 컴포넌트를 참고하세요.