[React] antd 테이블 클릭 시 row 색 변경

개요

antd 라이브러리의 table에서 어떤 행을 클릭했을 때 해당 행의 배경색을 바꾸는 법을 알아보자

 

방법

1. Table 탭을 클릭했을 때 클릭한 row의 index를 state에 저장하는 함수 생성

clickRow = (index) => {
	this.setState({
		activeIndex: index
	})
}
                

 

2. Table 탭의 onRow 파라미터를 사용하여 onClick 생성

onRow의 파라미터 record, index가 주어진다.

record : data의 전체정보 .[컬럼이름] 으로 세부정보 출력가능 ex) record.userName

index : 테이블에서 해당 데이터의 행 인덱스(위치)

<Table
	dataSource = {this.state.dataSource}
	onRow = {(record, index) => {
		return {
			onClick: this.clickRow(index)
		};
	}}
/>

 

3. Table의 row 배경색을 바꿔주기 위한 클래스네임 지정 함수 생성

현재 클릭한 index에 해당하는 row의 클래스명을 table-red로 바꾸기

table-red는 css에서 배경색을 빨강으로 지정해주면 된다.

setClassName = (record, index) => {
	return index === this.state.activeIndex ? `table-red` : "";
}

반응형

4. 3번에서 만든 함수 Table 탭에 붙이기

rowClassName 이라는 파라미터에 생성한 함수를 붙인다.

파라미터로 row마다의 record 정보와 index 정보를 넘겨주게 된다.

<Table
	dataSource = {this.state.dataSource}
	rowClassName = {this.setClassName}
	onRow = {(record, index) => {
		return {
			onClick: this.clickRow(index)
		};
	}}
/>

 

원리

테이블을 클릭할 때마다 클릭한 행의 index를 state에 저장하고

테이블의 모든 행의 정보를 저장하여

state에 따라 해당 index에 해당하는 정보의 행의 클래스명을 바꿔주어

css를 적용해 버리는 것이다.