Skip to content

Extending onSortChange to return freshly sorted table data #1155

New issue

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

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

Already on GitHub? # to your account

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.

Nick Mitchell added 2 commits March 18, 2017 03:04

Verified

This commit was signed with the committer’s verified signature.
adangel Andreas Dangel

Verified

This commit was signed with the committer’s verified signature.
adangel Andreas Dangel
@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

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

Successfully merging this pull request may close these issues.

3 participants