BootstrapTable doesn't re-render after setState when remote/onTableChange is used

I’m trying to update data using a server call with axios but the table doesn’t update when setState is used inside the onTableChange handler even with basic data. Table data always stays at default assigned state. I got the code from Remote All sample. I’m trying to use this component for first time.

import React, { Component } from "react";
import PropTypes from "prop-types";

import axios from "axios";

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";

const products = [
    { id: 1, name: "test 1", currentVersion: 123 },
    { id: 2, name: "test 2", currentVersion: 234 },
    { id: 3, name: "test 3", currentVersion: 345 }
];

const columns = [
    {
        dataField: "id",
        text: "ID",
        sort: true,
        headerClasses: "text-center",
        classes: "text-center"
    },
    {
        dataField: "name",
        text: "Name",
        filter: textFilter(),
        sort: true
    },
    {
        dataField: "currentVersion",
        text: "Current Ver.",
        filter: textFilter(),
        sort: true
    }
];

const defaultSorted = [{
    dataField: "id",
    order: "asc"
}];

const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
    <BootstrapTable
        remote
        striped
        hover
        condensed
        bootstrap4

        keyField="id"
        data={data}
        columns={columns}
        defaultSorted={defaultSorted}
        filter={filterFactory()}
        pagination={paginationFactory({ page, sizePerPage, totalSize })}
        onTableChange={onTableChange}
    />
);

RemoteAll.propTypes = {
    data: PropTypes.array.isRequired,
    page: PropTypes.number.isRequired,
    totalSize: PropTypes.number.isRequired,
    sizePerPage: PropTypes.number.isRequired,
    onTableChange: PropTypes.func.isRequired
};

class TableContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            data: [],
            totalSize: 1,
            sizePerPage: 10,
            loading: false
        };
    }

    handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder }) => {
        console.log("handleTableChange", this.state.data);

        //const params = {
        //    page,
        //    sizePerPage,
        //    filters,
        //    sortField,
        //    sortOrder
        //};

        //axios.get("http://localhost:52632/api/database", { params })
        //    .then(response => {
        //        console.log("handleTableChange", response.data);

        //        this.setState(() => ({
        //            data: response.data,
        //            totalSize: response.data.length
        //        }));
        //    });

        this.setState(() => ({
            data: products,
            totalSize: products.length
        }))
    }

    render() {
        const { data, sizePerPage, page, totalSize } = this.state;

        return (
            <RemoteAll
                data={data}
                page={page}
                sizePerPage={sizePerPage}
                totalSize={totalSize}
                onTableChange={this.handleTableChange}
            />
        );
    }
}

export default class extends Component {
    render() {
        return (
            <TableContainer />
        );
    }
}

[ahsan-alii]

still facing the same issue with these packages

import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider from 'react-bootstrap-table2-toolkit'; import paginationFactory from "react-bootstrap-table2-paginator";

I don’t know why is this issue closed, even though it exists

[joseciusshenll]

@AllenFang ToolkitProvider(default search& filter ) and Pagination not working together when I add remote for pagination.

I am also facing the same issue currently. If anybody knows please update here