Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending onSortChange to return freshly sorted table data #1155

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

lequesne
Copy link

Wanted to retrieve the freshly sorted table data as a sorted array on return of onSortChange event function.

Have added the sort result as a fourth param to the onSortChange function.

@AllenFang
Copy link
Owner

@lequesne, in my consideration, onSortChange is supposed not to return the result, how about I add another hook, like afterSortChange? is that help you?

Thanks, and sorry for lately reply, I'm busy at this month.

@nirmalasubu
Copy link

@AllenFang I have react bootstrap table with pagination. when I click on the sort button on the 3rd page data is sorted but it is not taking back to the first page . I'm expecting sort behavior like this bootstrap table https://datatables.net/examples/styling/bootstrap.html . Is this afterSortChange function takes me to the first page whenever I do sorting.

@AllenFang
Copy link
Owner

@nirmalasubu, not a good solution, but you can give a try

class DefaultPaginationTable extends React.Component {
  constructor(props) {
    super(props);
    this.onSortChange = this.onSortChange.bind(this);
  }

  onSortChange() {
    const sizePerPage = this.refs.table.state.sizePerPage;
    this.refs.table.handlePaginationData(1, sizePerPage);
  }

  render() {
    const options = {
      onSortChange: this.onSortChange
    };
    return (
      <div>
        <BootstrapTable
          ref='table'
          data={ products }
          options={ options }
          pagination>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' dataSort>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price' dataSort>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

@nirmalasubu
Copy link

@AllenFang It worked . Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants