ReactJS+ Antd - pagination dynamic row expand issue

Question

We have used antd table with pagination + expandable row feature. Row gets expanded when clicked on + icon. Internally Row details api is called and displayed in expanded view.

We have used antd expanded row feature and also called api , It is working fine for first page. As we added pagination as well so when checked for second page it won't work, it still shows old key record.

onTableRowExpand(expanded, record){
   getChildData(record.id) // service call to fetch child data displayed as expanded row details

   var keys = [];
   if(expanded){
    keys.push(record.id); //  record.id as row key which is coming same across pagination
   }

this.setState({expandedRowKeys: keys});
}

We want to know changes required for showing expanded row ( child table ) using ReactJS+ Antd where pagination is also included.

Documentation says that expandedRowRender function has the following signature: Function(record, index, indent, expanded):ReactNode. it seems you are using record as expanded. Which version of antd are you using? — Yaelet

Yaelet Yaelet · Accepted Answer · 2019-07-09T07:40:30

You problem may be related to the way antd counts rows in a paginated table. The index resets itself on every page, so you must add the page number to the index, to calculate the index correctly.

I created an example combined from antd's examples for ajax and expanded rows,

  expandRow = (record, index) => {
    // get the id by the current 0 based page number
    const page = (this.state.pagination.current || 1) - 1;
    index = 10*page + index; // 10 should be a variable.

    this.fetchDetails(index);
    return (
      <p style={{margin: 5}}>
        {this.state.expandRowData[index] ?
        <span>{ JSON.stringify(this.state.expandRowData[index]) }</span>
        :
        <span>(Loading...)</span>
        }
      </p>
    )
  }

ReactJS+ Antd - pagination dynamic row expand issue

1 Answers