[React] React-Table 지정 컬럼 고정시키하기

React-Table에서 컬럼을 고정하는 방법을 공유합니다.

 

1. 우선react-table-hoc-fixed-columns react 모듈 을 설치한다.

   참조: https://www.npmjs.com/package/react-table-hoc-fixed-columns

    npm install react-table-hoc-fixed-columns --save

2. import 문을 삽입한다.

   import ReactTable from "react-table";

   import 'react-table/react-table.css';

   import withFixedColumns from 'react-table-hoc-fixed-columns';

   import 'react-table-hoc-fixed-columns/lib/styles.css' // important: this line must be placed after react-table css import

3. Header 속성(attribute)에 fixed 를 추가한다.

  { Header: '안내메시지', accessor: 'errmsg', show: true, fixed:'right',},

4. React-Table 컴포넌트 태그명을 ReactTableFixedColumns으로 변경한다.