TIL - React Table Library #2

 

 

셀 내용 커스텀 하기

테이블을 사용하다보면 단순히 표에 텍스트가 들어가는 것이 아니라 데이터 상태에 따라 이벤트가 등록된 버튼을 렌더링해야 하는 경우가 많다.

 

실제로 운영중인 프로젝트에서도 그러한 경우가 많기 때문에 셀 내용에 포맷팅 커스텀은 필수적인데,

React Table에서는 어떻게 셀의 내용을 커스텀 하는지 알아보자.

 

 

columns option

useTable 훅에 초기에 데이터를 삽입할때 { columns, data } 객체를 할당하는데 이때 데이터는 각각의 옵션을 포함하여 사용된다.

우선 실제로 컨텐츠를 커스텀해야할 columns 정보를 살펴보면 useMemo를 통해 메모이제이션된 Array가 어떤 헤더 컬럼에 속하는 정보인지 정의한다.

 

 

 

텍스트로 사용될 Header 옵션과 필수 key값으로 사용되는 accessor 값이 정의된 데이터에 추가적으로 개발자의 의도에 따라 옵션을 정의 할 수 있는데,

 

 

 

공식문서에 안내되어있는 Column Options에 대한 설명을 보면 "Cell" 옵션이 바로 셀의 내용을 커스텀 할 수 있는 포맷터 내용에 해당한다.

 

Cell Options은 함수 또는 컴포넌트 형태로 들어갈 수 있는 모든 데이터를 주입 할 수 있으며, 기본값으로 null 을 리턴하는 함수로 지정되어있다는 것을 알 수 있다.

 

따라서 다음과 같은 코드로 적용 할 수 있는데,

 

컴포넌트를 주입한 경우

  const columns: any = React.useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1", // accessor is the "key" in the data
      },
      {
        Header: "Column 2",
        accessor: "col2",
        Cell: <Button variant="primary">버튼</Button>,
      },
    ],
    []
  );

 

함수를 주입한 경우

  const columns: any = React.useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1", // accessor is the "key" in the data
      },
      {
        Header: "Column 2",
        accessor: "col2",
        Cell: (props) => {
          console.log("props", props);
          return <Button variant="primary">버튼</Button>;
        },
      },
    ],
    []
  );

 

컴포넌트를 주입한 경우에는 조건과 상관없이 버튼 컴포넌트를 렌더링하지만 함수를 주입한 경우 해당 셀에 대한 프로퍼티정보를 참조 할 수 있기 때문에 조건에 따라 렌더링을 다르게 하는것이 가능하다.

 

 

 

셀의 내용에 따라  다른 정보를 렌더링한 경우

  const columns: any = React.useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1", // accessor is the "key" in the data
      },
      {
        Header: "Column 2",
        accessor: "col2",
        Cell: (props) => {
          const { value } = props;
          if (value === "World") {
            return <Button variant="primary">버튼</Button>;
          } else {
            return value;
          }
        },
      },
    ],
    []
  );