Toast UI (feact. React) 사용기 3 - Grid

테이블을 만들자

언제나처럼 설치부터

npm install --save @toast-ui/react-grid

 

import 'tui-grid/dist/tui-grid.css';
import Grid from '@toast-ui/react-grid';

 

예제를 보며 적용해보기

https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.react-grid

const data = [
  { id: 1, name: "Editor" },
  { id: 2, name: "Grid" },
  { id: 3, name: "Chart" },
];

const columns = [
  { name: "id", header: "ID" },
  { name: "name", header: "Name" },
];

export default function DefaultGrid() {
  return (
    <div>
      <Grid
        data={data}
        columns={columns}
        rowHeight={25}
        bodyHeight={100}
        heightResizable={true}
        rowHeaders={["rowNum"]}
      />
    </div>
  );
}

 

차트에 비하면 이해도 용이하고 적용도 쉽다.

대략적으로 사용법을 설명하자면

Grid 컴포넌트

• data, columns, rowHeight, bodyHeight 등의 속성을 넘겨준다. (data, columns 는 필수)
• 특히 data 의 형식에 있어선 column 에서 정해주는 name 값과 동일한 값이 키가 되는 객체가 되어야 한다.
• column의 header 는 테이블상에서 보일 내용을 적어준다. 이른바 title 같은 것

 

만약 동적 데이터 바인딩을 하려면?

dataSource 를 data 속성에 넣어줘야 한다.

const dataSource = {
  withCredentials: false,
  initialRequest: true,
  api: {
    readData: { url: 'api/readData', method: 'GET' }
  }
};

// ...
  <Grid
    columns={columns}
    data={dataSource}
    pageOptions={{ perPage: 3 }}
    onSuccessResponse={data => {
      console.log(data);
    }}
  />

dataSource 의 객체에는 HTTP Ajax 요청에서 사용되는 옵션 중 하나인 withCredentials을 false로,

withCredentials
서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼지 결정하는 항목

기본값은 false 지만, true 로 설정해야하는 경우에는,
1. 쿠키에 첨부해서 보내는 요청일 경우
2. 헤더에 Authorization 항목이 있는 요청의 경우
에 해당한다.

 

initialRequest 속성은 true

api 속성에 readData 객체를 포함한 값을 넣어준다.

api : { readData : { url: 'api주소', method: '요청메서드' } }

 

---

리액트에서 Grid 는

일반적으로 리액트의 구성 요소는 상위 요소에서 받은 props가 바뀔 때마다 리렌더링 되는 것이 기본이다.

하지만 Toast UI Grid는 몇몇 속성에 한해서 setter 메서드를 제공한다.

• data -> setData
• columns -> setColumns
• bodyHeight -> setBodyHeight
• frozenColumnCount -> setFrozenColumnCount

 

몇몇 속성이 반응하지 않도록 하려면 oneTimeBindingProps 속성으로 배열을 넣어서 비활성화해줄 수 있다.

<Grid
    data={data}
    columns={columns}
    bodyHeight={100}
    frozenColumnCount={2}
    oneTimeBindingProps={['data', 'columns']}
/>

 

 

기본적으로 Grid 의 데이터수(행의 수)가 많아지면 자동적으로 스크롤이 생기며,

테이블의 크기를 조정할 수 있는 속성인 heightResizable 을 false (기본값)으로 해주면 테이블이 고정 크기가 된다.