antd 상위 셀과 값이 같을 경우 셀 병합
2023. 4. 11. 16:31ㆍ개발/react,next
반응형
const renderCell = (value, row, index) => {
const obj = {
children: value, // 셀에 표시될 값
props: {}, // 셀의 속성을 설정할 객체
};
if (index > 0 && row.hirkCommCd === codeData[index - 1].hirkCommCd) {
// 이전 행과 현재 행의 상위코드 값이 같다면, 병합할 필요가 없으므로 rowSpan을 0으로 설정
obj.props.rowSpan = 0;
} else {
// 현재 행의 상위코드 값과 다른 행을 찾아서 연속된 행의 개수를 구함
for (let i = index; i < codeData.length; i++) {
if (row.hirkCommCd !== codeData[i].hirkCommCd) {
break;
}
obj.props.rowSpan = obj.props.rowSpan ? obj.props.rowSpan + 1 : 1;
}
}
return obj; // 셀의 속성이 설정된 객체를 반환
<Table.Column
*** 생략 ***
render={renderCell}
/>
반응형
'개발 > react,next' 카테고리의 다른 글
antd Form 비활성화 (0) | 2023.04.18 |
---|---|
Ant Design의 Table 컴포넌트에서 ref를 사용하여 특정 column의 backgroundColor를 다른 column에 적용하는 기능 (0) | 2023.04.17 |
redux-toolkit (0) | 2023.04.04 |
리액트 연습 코드 모음 (0) | 2023.03.31 |
react-redux 사용 예시 (0) | 2023.03.30 |