[Pqgrid] 초기 세팅 정보

1. 라이브러리 설치

> yarn add pqgrid

 

2. 컴포넌트 추가

const Pqgrid = ({ options }) => {
  useEffect(() => {
    pq.grid('#grid', options);
    pq.grid('#grid').refreshDataAndView();
  }, [options]);

  return <div id="grid"></div>;
};

 

3. 컴포넌트 options 세팅

const options = {
    collapsible: { on: false, toggle: false },
    height: '100%',
    maxHeight: '100%',
    showTitle: false,
    menuIcon: false,
    reactive: true,
    resizable: true,
    locale: 'en',
    numberCell: { show: false },
    autoRow: true,
    scrollModel: { autoFit: true },
    columnTemplate: {
      style: {
        height: 54,
      },
    },
    colModel: [],
    dataModel: {
      data: [],
    },
 };

  return <Pqgrid options={options} />;

 

4. 사용한 import

import pq from 'pqgrid';
import 'pqgrid/localize/pq-localize-en.js';
import 'pqgrid/pqgrid.min.css';
import 'pqgrid/pqgrid.ui.min.css';
import 'pqgrid/themes/steelblue/pqgrid.css';
import 'pqgrid/pqgrid.min.js';
import 'jszip/dist/jszip.min.js';