Question: Programmatically Trigger Sort

[ethannkschneider]

Hello,

First off, great project and thanks for all the active support!

I am wondering if there is anyway to programmatically trigger the sort event without manually clicking the table. In other words, something analogous to the getFilter() feature, but for sorting.

For context, I am using the remote-all prop for the table and have a bunch of custom code on the page. I want to be able to do things like reset the sort, or update the sort on certain user actions. I have read through the docs but am unsure how to get this functionality.

Some code to make things clearer:
For programattic filtering, I first utilize the getFilter option in the column definitions like so:

...
filter: selectFilter({
                options: categorySelectOptions,
                getFilter: (filter) => {
                    this.categoryFilter = filter;
                }
            })
...

I then am able to have a function which resets the filters, like so:

resetFilters = async () => {
        this.categoryFilter('');
        this.subCategoryFilter('');
        this.manuallyCategorizedFilter('');
        await this.setStateAsync({ filters: {} });
        await this.updateTableColumns();
    };

My understanding is that this will then trigger the update the internal state of the react bootstrap table, and then trigger onTableChange, where I handle the events as needed. Is there a way to do this for the sort feature?

Thank you!

[AllenFang]

@ethannkschneider indeed, so far i didn't implement too many features for sorting. i will implement it when I have time but I can not promise any eta. However, there's a workaround is though exposed API:

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  sort: true
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true
}, {
  dataField: 'price',
  text: 'Product Price',
  sort: true
}];

function handleSort() {
  this.table.sortContext.handleSort(columns[2]);
}

<button onClick={ handleSort }>Click me to sort by price</button>
<BootstrapTable
  ref={ n => this.table = n }
  // omit....
/>

[ethannkschneider]

Thanks Allen! This is good to know, and the workaround is helpful.

[shirleykabir]

Hi! How do I sort by a certain sort order?