[REACT] mui data grid로 리액트 테이블 만들기

 

 

[Material Ui Data Grid]

 

https://mui.com/components/data-grid/

React Data Grid component - MUI

 

react에서 테이블을 만드는 라이브러리들은 여러개가 있는데 

그 중에서 이번 시간에는 material ui 를 사용해보려고 한다.

사용해본 소감은

정말 세상에나 너무나 쉽다.

 

내가 구현해보고자 했던 기능은

1. row가 선택될 수 있어야 하지만 일부는 자동으로 선택 불가하도록

2. 일부 column이 왼쪽으로 붙어서 고정되게 

 

아래 동영상은 구현한 결과물이다.

 

 

[data 준비하기]

table이니까 column이랑 row가 필요하다.

나는 data폴더에 columns.ts 파일과 rows.ts파일을 만들었다.

//rows.ts
export const rows = [
  {
    id: "1",
    orderDate: "2021-12-03",
   ....
  },
    ....
];

 

//columns.ts
export const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "orderDate",
    headerName: "오더등록일",
    width: 150,
    type: "number",
    editable: true,
  },
...
];

여러가지 설정할 수 있는데 이것은 공식문서에서 보면된다.

headerName이 화면에 보여지는 table header이고

filed이 row에서 key값과 같아야한다.

row에서 orderDate에 해당하는 값이 이 밑으로 주르륵 나오는 것이다.

 

 

[package설치]

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

기본적으로는 이것을 설치하면 되지만

column을 pinning하고 싶으면 pro를 사용해야한다. 

그것은 유료 서비스인데 일단 사용할 수 있긴 하다

// with npm
npm install @mui/x-data-grid-pro

// with yarn
yarn add @mui/x-data-grid-pro

 

 

[selectable 설정]

import React, { useMemo } from "react";
import { DataGrid } from "@mui/x-data-grid";
import { columns } from "../data/columns";
import { rows } from "../data/rows";

export default function Incomplete() {
  const columnData = useMemo(() => columns, [columns]);
  const rowData = useMemo(() => rows, [rows]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rowData}
        columns={columnData}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        isRowSelectable={(params: any) => params.row.OrderAmount > 1}
      />
    </div>
  );
}

아까 만든 데이터를 가져와서 rows와 columns에 넣고

내가 원했던 기능 중 하나인 

특정 row는 선택이 불가하도록 하는 기능을 만들어보겠다. 

맨 밑에줄에 isRowSelectable에서 내가 원하는 조건을 넣어주면 된다

나는 row중에 OrderAmount가 1이하이면 선택이 불가하도록 했다. 

 

 

[column pinning]

컬럼이 많아질 경우 보통 맨 왼쪽에 있는 컬럼들을 고정시켜놓는다.

그럴때는 유료버전인 Pro를 사용하여 

initialState에 어떤 컬럼을 왼쪽에 붙일건지, 오른쪽에 붙일건지 정한다.

배열 형태로 되어있어서 배열에 넣은 순서대로 화면에 보여진다.

 

import React, { useMemo } from "react";
import { DataGridPro } from "@mui/x-data-grid-pro";
import { columns } from "../data/columns";
import { rows } from "../data/rows";

export default function Incomplete() {
  const columnData = useMemo(() => columns, [columns]);
  const rowData = useMemo(() => rows, [rows]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPro
        rows={rowData}
        columns={columnData}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        isRowSelectable={(params: any) => params.row.OrderAmount > 1}
        initialState={{
          pinnedColumns: { left: ["orderDate"], right: ["age"] },
        }}
      />
    </div>
  );
}