[React] antd table에서 pagination시 rowSelection값 유지하기

개요

antd table에서 pagination(페이지 이동)으로 인해 새 데이터셋을 뿌려주게 되면 이전 페이지에서 선택한 rowSelection 배열 값이 초기화된다. 유지하는 법에 대해 알아보자

문제점

1. 이전 페이지로 돌아갔을 때 선택한 idx정보를 얻을 수 없다.

2. 체크 후 제출할 때 현재 페이지에 체크된 정보만 전달되게 된다.

 

해결책

1. 전체 체크된 idx 정보를 저장할 map자료구조를 선언한다.

2. 체크 이벤트 때마다 한 페이지의 체크된 리스트를 selectedRowKeys 파라미터로 받아와서 배열에 오버라이팅 한다.

3. 체크 이벤트 때마다 2번의 배열을 1번의 배열에 오버라이팅 한다.

4. 체크 후 제출할 때나 테이블의 checked UI를 보여줄 때 1번의 배열을 사용한다.

 

1번의 배열은 전체 체크 정보를 갖고 있기 때문에 페이지를 이동해도

 다른 페이지의 체크 정보를 잃지 않는다.

 

소스코드 예제

반응형

1. 테이블에 rowSelection 선언

<Table
	rowKey={(record) => record.idx}
	dataSource
	rowSelection={rowSelection} // rowSelection만 선언해도됨(함수 이름이 rowSelection일 경우)
	columns
	pagination
	onChange={this.handleTablePageChange}
	className="dataTable"
/>

 

2. rowSelection 정의

// state에 selectedRowKeys: [] 선언
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
	selectedRowKeys,
	onChange: this.onSelectChange,
};

 

3. onSelectChange 정의

onSelectChange = (selectedRowKeys) => {
    var cur_list = this.props.data; // 데이터 (테이블에 넣을 데이터)
    var overrideData = {}; // 전체 배열에 오버라이팅 할 한 페이지 내 선택정보 배열
    // 페이지 내 클릭정보를 오버라이팅 배열에 넣는다.
    // true : 클릭됨 / false : 클릭 해제
    for (let i = 0; i < cur_list.length; i++) {
      var idx = cur_list[i].idx;
      if (selectedRowKeys.includes(idx)) overrideData[idx] = true;
      else overrideData[idx] = false;
    }

	// 전체 체크리스트 배열에 한 페이지 체크리스트를 오버라이팅 
    var curIdxs = this.state.dataIdxs;
    curIdxs = Object.assign(curIdxs, overrideData);

	// 전체 체크리스트 배열을 selectedRowKeys로 deep copy
    selectedRowKeys = [];
    for (let i = 0; i < curIdxs.length; i++) {
      if (curIdxs[i]) {
        selectedRowKeys = [...selectedRowKeys, i];
      }
    }
    
    // 전체 체크리스트 배열, selectedRowKeys state값 변경
    this.setState({
      selectedRowKeys: selectedRowKeys,
      dataIdxs: curIdxs,
    });
};