데이터그리드,renderCell 사용법

vue,react,... 뭘 쓰던간에 데이터그리드를 사용한다면
하나의 cell 안에 다양한 것들이 들어온다.
select, button, input, text, a, 기타등등

그리드데이터에서 제공하지 않는 특별한 요소를 넣으려면
커스텀이 필요하다.

부모페이지에선 그리드에 들어갈 데이터를 받아서 컴포넌트인 Grid.js에 props로 전달하고

자식요소인 [컴포넌트 Grid.js]에선 받은 데이터를 가지고 뿌려준다.

아마 모든 데이터 그리드는 이렇게 사용할거다.
방식만 좀 다를뿐이지 다 비슷비슷한듯.
참고용으로 남겨둔다.

1. Parent.js

"use client";

import { useEffect, useState } from "react";
import { Button } from "@mui/material";

import SearchArea from "@/components/SearchArea";
import Grid from "@/components/Grid";

import gridRowData from "@/api/grid/apiGrid";

const gridColData = [
  {
    field: "id",
    headerName: "id",
    width: 50,
    editable: true,
  },
  {
    field: "name",
    headerName: "name",
    width: 100,
    editable: true,
  },
  {
    field: "username",
    headerName: "username",
    width: 200,
    editable: true,
    renderType: "button",
  },
  {
    field: "email",
    headerName: "email",
    width: 200,
    editable: true,
  },
  {
    field: "phone",
    headerName: "phone",
    width: 200,
    editable: true,
  },
  {
    field: "province",
    headerName: "province",
    width: 200,
    editable: true,
  },
  {
    field: "city",
    headerName: "city",
    width: 200,
    editable: true,
  },
  {
    field: "createdAt",
    headerName: "createdAt",
    width: 200,
    editable: true,
  },
  {
    field: "updatedAt",
    headerName: "updatedAt",
    width: 200,
    editable: true,
  },
];

const searchParams = [
  {
    id: "",
    userId: "",
    name: "",
    keyword: "",
  },
];

export default function Page() {
  const [apiData, setApiData] = useState(null);
  const [loadStatus, setLoadStatus] = useState(false);

  useEffect(() => {
    getData();
  }, []);

  // api : get grid data
  async function getData() {
    const _params = {
      url: "/users",
    };
    const _data = await gridRowData(_params);
    setApiData(_data);
    setLoadStatus(true);
  }

  return (
    <div className="page-wrap">
      <div className="page-header">
        <h2>그리드</h2>
      </div>
      <div className="page-container">
        <section className="section-area">
          <SearchArea></SearchArea>
        </section>

        <section className="section-area">
          <div className="section-title">
            <h3>그리드 목록</h3>
          </div>

          {loadStatus && apiData ? (
            <Grid colData={gridColData} rowData={apiData}></Grid>
          ) : (
            <p className="loading-box">Loading...</p>
          )}
        </section>
      </div>
    </div>
  );
}

2. Grid.js

"use client";

import { useEffect, useState } from "react";
import Button from "@mui/material/Button";
import { DataGrid } from "@mui/x-data-grid";

// 렌더러 셀
function RenderButton(props) {
  const { value } = props;
  return (
    <Button className="btn line-gray size-s">
      <span className="txt">{value}</span>
    </Button>
  );
}

function RenderDefault(props) {
  const { value } = props;
  return <span className="txt">{value}</span>;
}

// api 호출 데이터
export default function Grid(props) {
  function getRenderCell(type) {
    switch (type) {
      case "button":
        return RenderButton;
      default:
        return RenderDefault;
    }
  }

  // 화살표함수로 데이터변환
  // const columnsData = props.colData.map((col) => ({
  //   ...col,
  //   renderCell: getRenderCell(col.renderType),
  // }));

  // 기본함수로 데이터변환
  const columnsData = props.colData.map(function (col) {
    return {
      ...col,
      renderCell: getRenderCell(col.renderType),
    };
  });

  console.log("@@@@@@@@@@@@");
  console.log(columnsData);

  return (
    <div className="grid-wrap">
      <DataGrid
        className="grid-area"
        columns={columnsData}
        rows={props.rowData}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
        disableColumnMenu
        columnHeaderHeight="40"
      />
    </div>
  );
}