[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를 적용해 버리는 것이다.