[Again] Uncaught TypeError: onSort is not a function

[mazzalab]

Hi all,
I know this is a duplicate of #652 but it seems that that issue was closed without providing a solution to the problem.

I am using "react-bootstrap-table-next": "^3.3.3" and my simple Component ha this constructor:

constructor(props) {
        var _isMounted = false;

        super(props);
        this.state = {
            data: [{ 'id': 1 }],
            columns: [{
                dataField: 'id',
                text: 'Product IDs'
            }],
            rowCount: 10
        }
    }

You can see that I save data and columns in the component state, which I finally update in

componentDidMount() {
        this._isMounted = true;

        fetch('http://127.0.0.1:5000/')
            .then(response => response.json())
            .then(data => {
                var sorted_header = this.formatHeader(data);

                if (this._isMounted) {
                    this.setState({ columns: sorted_header });
                    this.setState({ data: data });
                }
            });
    }

the "formatHeader" method simply formats the header of the table with things like:

const sorted_header = [{
            dataField: 'id',
            text: 'Product ID',
            sort: true
        }, {
            dataField: 'user',
            text: 'User',
            filter: textFilter(),
            style: {
                fontStyle: 'italic',
            },
            sort: true
        }
       ...

whenever I click on the header up/down arrow to sort one of these columns I get the wrror in object that points to the internal file "header-cell.js:123"
(this error in attachment)

What to do?
thanks

[AllenFang]

@mazzalab upgrade to newest react-bootstrap-table-next, it is fixed!

[ux-powered]

Hi, I upgraded the package version (3.3.4), but the error is still here 🤔. Any workarounds?

[mazzalab]

yes indeed, it is not fixed.
It seems that BootstrapTable does not work well with state variables. If possible, try passing props and not state variables to the table.

<BootstrapTable
                    keyField="id"
                    data={this.props.data}

it should work.

read also: #652 (comment)

[ux-powered]

Thank you for the info, I will try it 🙂

@mazzalab None of the alternatives worked :/ I'm passing the columns through props (tried hardcoded as well), latest versions (react: ^16.12.0, react-bootstrap-table-next: ^3.3.4, react-bootstrap-table2-paginator: ^2.1.0, react-bootstrap-table2-toolkit: ^2.1.2)

The default sort arrow is not in the "active" state at the start, and when I go to another page (using pagination), this arrow appears active and the sort works, but only on even pages! :S

[jmmadsen]

I'm getting this error as well. I need to use 3.3.4 for the new tab functionality that now works with sorting, but unfortunately this is broken.

[asaduryan]

Try to show table component when data is already loaded i think problem is in loading steps , if table renders but data is not loaded yet sort method doesn't work

try like this

data={this.props.data?this.props.data: []}

<BootstrapTable
ref={this.table}
keyField='_id'
noDataIndication="Table is Empty"
data={this.props.data?this.props.data: []}
columns={columns}
filter={filterFactory()}
........

[g-akshay]

Still facing this issue on version 3.3.4

[rudza]

Still facing this issue on version 3.3.4

I fixed the issue by updating to v3.3.5