Ant Design의 Table 컴포넌트에서 ref를 사용하여 특정 column의 backgroundColor를 다른 column에 적용하는 기능

기능은 버전 4.7.0 이상에서부터 지원됩니다. 따라서 4.18 버전에서는 이 기능을 사용할 수 없습니다. 4.18 버전에서는 다른 방법을 사용해야 할 것입니다.

다만, 만약 4.18 버전에서 해당 기능을 구현해야 한다면, 다음과 같은 방법이 있을 수 있습니다.

 

1.데이터를 가공하여, 렌더링할 때 적용할 backgroundColor 값을 계산하여 넘겨주는 방법

const columns = [
  {
    title: '상위코드',
    align: 'center',
    dataIndex: 'hirkCommCd',
    render: renderCell,
  },
  {
    title: '공통코드',
    align: 'center',
    dataIndex: 'commCd',
    render: (text, record, index) => {
      const backgroundColor = /* 계산하여 가져올 backgroundColor 값 */;
      return (
        <div style={{ backgroundColor }}>
          {/* 1번째 column에 backgroundColor 값을 적용 */}
          <span>{text}</span>
        </div>
      );
    },
  },
];

 

2. 커스텀 컴포넌트를 사용하여 column을 구현하고, 그 안에서 ref를 이용하여 원하는 동작을 수행하는 방법

 

const MyCustomColumn = ({ text, backgroundColor }) => {
  const targetRef = useRef(null); // 적용할 column의 ref

  useEffect(() => {
    // targetRef를 이용하여 원하는 동작 수행
    // 예: backgroundColor 값을 가져와서 1번째 column에 적용
    const targetColumn = targetRef.current;
    const targetBackgroundColor = /* 계산하여 가져올 backgroundColor 값 */;
    targetColumn.style.backgroundColor = targetBackgroundColor;
  }, [backgroundColor]);

  return (
    <div ref={targetRef}>
      {/* 컬럼의 내용 */}
      <span>{text}</span>
    </div>
  );
};

//...

const columns = [
  {
    title: '상위코드',
    align: 'center',
    dataIndex: 'hirkCommCd',
    render: renderCell,
  },
  {
    title: '공통코드',
    align: 'center',
    dataIndex: 'commCd',
    render: (text, record, index) => {
      const backgroundColor = /* 계산하여 가져올 backgroundColor 값 */;
      return <MyCustomColumn text={text} backgroundColor={backgroundColor} />;
    },
  },
];

 

 

 

 

최신 버젼

import React, { useRef } from 'react';
import { Table } from 'antd';

const MyTableComponent = () => {
  const tableColorRef = useRef(null); // ref를 생성

  const columns = [
    {
      title: '상위코드',
      align: 'center',
      dataIndex: 'hirkCommCd',
      render: renderCell,
    },
    {
      title: '공통코드',
      align: 'center',
      dataIndex: 'commCd',
      render: middleColor,
      onCell: () => ({
        ref: tableColorRef, // ref를 설정
      }),
    },
  ];

  const middleColor = (text, record, index) => {
    const backgroundColor = tableColorRef.current?.cell?.[index]?.style?.backgroundColor; // 2번째 column의 backgroundColor를 가져옴
    return (
      <div style={{ backgroundColor }}>
        {/* 1번째 column에 2번째 column의 backgroundColor를 적용 */}
        <span>{text}</span>
      </div>
    );
  };

  //... 나머지 코드

  return (
    <Table
      columns={columns}
      //... 나머지 props
    />
  );
};

export default MyTableComponent;