How to set initial sorting and pagination state?

[mathiaswillburger]

Hi,

is there a way to manipulate the sorting icons state or pagination state when initially loading the table?

I have implemented react-bootstrap-table2 with remote pagination and sorting. As described in the documentation I pass options like page to the paginationFactory and sortField etc. for sorting. Everything works fine so far when navigating through the data using the onTableChange event.

As the data like sorting and pagination is saved in a store, I am using this parameters every time the user comes back to the same table rather than resetting the table to the original state. This means the user can set table sizes, sorting etc. to their preferences and will find everything they configured whenever coming back to the table.

This works fine in terms of data display as everything is passed correctly to my API and populated to the data table.

But here's the catch: visually the react-bootstrap-table2 does not match the displayed data anymore. So let's say I ordered by customer name and am on pagination page 3. When coming back to the page the data is loaded correctly, but the customer name column icons appear as if they are not sorted, the pagination shows page 1 instead of 3 and also the information about "Showing rows 1 to 5 of 255" is not correct anymore.

So long story short: is there a way to manipulate the icons or the pagination state to match the data displayed when populating the data the first time to the table?

I did not find a suitable solution in the documentation until now, but maybe someone has a solution approach.

Thanks in advance.

[waynebrantley]

Default sort - https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html#default-sort
Initial page: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html

[mathiaswillburger]

Thanks for your your reply. Unfortunately with that I am facing the following difficulties:

• Initial Page: there is no such parameter in the documentation, so I used the pagination.page property. Actually as my store "knows" which page the user was on the page property is set to the correct page, i.g. three. Nevertheless, the pagination doesn't seem to care and activate page "1", even though page "3" is correctly displayed. Same happens for paginationTotalRenderer which is not showing the correct page text.
• Default sort: when applying this property no data is displayed anymore at all for some reason. I haven't figured out yet why. However, when after initially loading clicking on one of the columns and triggering onTableChange the data is displayed again.

Here is part of my current configuration for completeness:

<BootstrapTable
  loading={store.loading}
  data={store.dataSource}
  columns={columns}
  keyField={keyField}
  caption={dataTableCaption}
  remote={{ filter: true, pagination: true, sort: true, cellEdit: true }}
  onTableChange={this.onTableChange}
  noDataIndication={intl.formatMessage({ id: 'common.no_records_found' })}
  filter={filterFactory()}
  pagination={paginationFactory(paginationOptions)}
  hover
  bordered={false}
  classes="bordered-no-grid"
  rowEvents={rowEvents}
  selectRow={selectRow}
  rowClasses={rowClasses}
/>

[waynebrantley]

Would need more info. Setting the page will have the grid display the correct page, we use it. Give a more complete example (including paginationOptions)

[mathiaswillburger]

Sure, I'll prepare a complete example asap.

[singleseeker]

any update?

[OlegGedzjuns]

Sure, I'll prepare a complete example asap.

Any updates?