Antd Table 컴포넌트 column render

AntD Table column render

AntD를 사용하면서 multi line으로 데이터를 표시하거나, 조건에 맞게 데이터를 표시하는 경우 등 렌더링이 필요한 경우에 render 옵션을 활용하면 쉽게 원하는대로 표현할 수 있습니다.

render 옵션

// render 옵션은 Array.map()처럼 작동합니다.
render: (text, row, index) => {};
// text: name의 data [String]
// row: 하나의 row data [Object]
// index: row index [Number]

사용하기

const columns = [
  {
    title: "월",
    dataIndex: "month",
    key: "month",
    align: "center",
    // render: (text) => <a>{text}</a>,
  },
  {
    title: "전력 소비량",
    dataIndex: "energy1",
    key: "energy1",
    align: "center",
  },
  {
    title: "권장 소비량 대비 초과 %",
    dataIndex: "percent",
    key: "percent",
    align: "center",
    render: (text, row, index) => {
      return (
        <>
          {row.percent > 0 ? (
            <h3 style=>{row.percent}%</h3>
          ) : (
            <h3 style=>{row.percent}%</h3>
          )}
        </>
      );
    },
  },
];

결과

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)