[MRT] 여러 정보를 한컬럼 내에서 사용하기

작업하다가 표출은 name으로, 내부적으로 사용은 id를 사용해야하는 상황이 생겼다
(클릭하면 Modal이 열려야하는데, id 정보를 보내야 하기 때문)
이전에 작업했던 내역은 아이콘을 무조건 표출하고 아이디값을 고정으로 받아왔었기 때문에 전혀 도움이 되지 않았다ㅠㅠ

 

<이전 작업 예시>

        accessorKey: "id",
        header: "예시"
        Cell: ({ renderedCellValue }: any) => {
          if (renderedCellValue)
            return (
              <span
                className="cursor-pointer"
                onClick={() => {
                  setReportId(renderedCellValue);
                  setReportToggle(true);
                }}
              >
                {<DescriptionIcon />}
              </span>
            );
          else return
          <span className="text-gray-300">{<DescriptionIcon />}</span>;
        },

 

그래서 열심히 찾다가 row에 정보가 담겨있어서 한번에 정보를 사용할수 있다는걸 찾았다!

 

<해결>

       accessorFn: (row) => row.name,
        header: "이름",
        Cell: ({ row }) => <span>{row.original.name}</span>,
        muiTableBodyCellProps: ({ row }) => ({
          onClick: (event) => {
            setIdForModal(row.original.id);
            setIsToggle(true);
          },
          style: {
            cursor: "pointer",
          },
        }),

 

row.original로 해당 row의 데이터 전체에 접근 가능

muiTableBodyCellProps를 사용해야 cell 아무곳이나 클릭했을때 전부 클릭 이벤트를 넣을 수 있다.