react-wasm-table
  • 한국어

      • 시작하기

      패키지를 설치하고 몇 줄로 간단한 그리드를 렌더링합니다.

      설치

      npm
      yarn
      pnpm
      bun
      deno
      npm add @ohah/react-wasm-table

      빠른 시작

      createColumnHelper와 Grid 컴포넌트에 data, columns를 넘깁니다.

      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} />;      
}

      객체 기반 컬럼

      컬럼을 배열로만 정의할 수도 있습니다. columns를 넘기면 JSX 자식은 무시됩니다.

      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", 
      enableSorting: boolean
      enableSorting      : true },      
  {
    
      id: string
      id      : "price",      
    
      accessorKey: string
      accessorKey      : "price",      
    
      size: number
      size      : 100,      
    
      header: string
      header      : "Price",      
    
      align: string
      align      : "right",      
    
      enableSorting: boolean
      enableSorting      : true,      
  },
];

const 
      const data: {
    id: number;
    name: string;
    price: number;
}[]
      data       = [      
  { 
      id: number
      id      : 1, 
      name: string
      name      : "Alice", 
      price: number
      price      : 100 },      
  { 
      id: number
      id      : 2, 
      name: string
      name      : "Bob", 
      price: number
      price      : 200 },      
];

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

      다음 단계