ant design table expandable overiding 하기 (feat. react)

현재 ant-design에서 제공하는 expandable 기능이다. 비즈쌤에선 이 expandable 기능 활용해서 인버터별 추가적 데이터를 사용자에게 보여주고 있다.

문제는 기획에서 전체 열기 전체 닫기 기능을 요청하면서 시작되었다. ant-design에서는 이와 같은 기능을 제공하지 않는다. 어떻게 할지 고민해보았다.
비즈쌤 화면은 보안상 공유하지 못한다.

1. selection의 아이콘을 변경하는 방법
   

selection은 전체 선택 전체 해제 기능을 제공하고 있다. 그래서 이 기능을 활용해서 ant-design expandable을 조작해보려 헀다.
하지만 저 selection 기능에 expandable을 덧붙이는 건 불가능했다.

2. position:absolute한 아이콘을 왼쪽 상단에 붙여서 expandable 조절

expandable에는 expandedRowKeys property가 있는데 이건 여는 Row key리스트를 반환하면 된다. 이걸로 왼쪽 상단의 버튼에 이벤트를 붙여서 해결한다.

원했던 기능은 구현 되었다. 클릭하면 expandedRowKeys를 ["1", "2", "3", "4"]로 다시 클릭하면 [] 로 변환하면 전체 열기 전체 닫기가 가능하다.

하지만 position absolute 특성상 list에 스크롤이 생겨 버리면 그 상단에 계속 머물러 있는다.

3. 바닐라로 table의 원하는 자리에 아이콘을 넣기

	useEffect(() => {
		if (!isExpandable) {
			return;
		}
		const button = document.createElement('button');
		if (expanded) {
			button.setAttribute('class', 'btn expandButton ant-table-row-expand-icon ant-table-row-expand-icon-expanded');
		} else {
			button.setAttribute('class', 'btn expandButton ant-table-row-expand-icon ant-table-row-expand-icon-collapsed');
		}

		button.style.width = '17px';
		button.style.height = '17px';
		button.style.backgroundColor = 'white';
		button.style.border = '1px solid #e8eaef';
		button.style.borderRadius = '4px';
		button.addEventListener('click', () => {
			onPlus(expanded);
		});
		const header = document.getElementsByClassName('ant-table-row-expand-icon-cell');
		const isButton = document.getElementsByClassName('expandButton');
		if (isButton.length > 0) {
			header[0].removeChild(isButton[0]);
		}
		header[0].appendChild(button);
	}, [expanded, isExpandable, onPlus]);

(1) 직접 button element를 만들고 expanded 되어있는지 아닌지 여부를 확인한후 각자 다른 아이콘을 넣는다.
(2) 해당 아이콘 style 넣기
(3) 이벤트 넣기 (expandedRowKeys 컨트롤)
(4) 사용 이후엔 기존에 있던 버튼 지우기

이렇게 개발하니 깔끔하게 작동했다.
안되면 되게 바닐라로 되게 했다.