React-bootstrap-table2: BootstrapTable doesn't re-render after setState when remote/onTableChange is used

[hasangursoy]

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 />
        );
    }
}

[picasik]

Same issue. If remove filter from BootstrapTable parameters it works.
"react-bootstrap-table-next": "^2.2.0",
"react-bootstrap-table2-editor": "^1.2.2",
"react-bootstrap-table2-filter": "^1.1.6",
"react-bootstrap-table2-overlay": "^1.0.0",
"react-bootstrap-table2-paginator": "^2.0.4"

[tataurov]

I think I found the problem, the data is assigned in constructor and does not change in remote mode on.
because filtering methods are not called and data is returned with initial state.
here https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-filter/src/context.js#L30

[tataurov]

as fast fix maybe changing this method at filter context here https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-filter/src/context.js#L40

    componentWillReceiveProps(nextProps) {
      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
        this.doFilter(nextProps, undefined, this.isEmitDataChange);
      } else {
        this.data = nextProps.data;
      }
    }

[dofrisec]

I've been testing whether it is viable to start migrating from react-bootstrap-table to react-bootstrap-table-next, and this issue is blocking me at the moment.
The suggested fix seems to work.

[AllenFang]

This issue might be similar with https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/849

I will try to fix it in this weekend. Sorry for inconvenience.

[AllenFang]

Fixed https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2019/03/17/version-bump.html

Please upgrade to newest version

[AllenFang]

tag me if the issue still remain, thanks

[kevinvugts]

@AllenFang

Whenever a state change is triggered the react bootstrap table next throws the following error (only when pagination is enabled):

Uncaught TypeError: Cannot read property 'emit' of undefined

It is thrown in the following function:
this.isRemotePagination = function () { var e = {}; _this2.remoteEmitter.emit('isRemotePagination', e); return e.result; }; };

Here is my code: https://pastebin.com/TLWEh1Ay

[jamesdamild]

hi @hasangursoy ,
were you able to resolve this issue ? I am having the problem , whenever I change the state of data, the table is not rendered, always shows same data at initial :/

[balpaula]

Hi @jamesdamild,

Were you able to resolve it? I am facing the exact same problem... I make changes to the table data, I change the state of the data and the table shows again the initial data (although having done and saved some changes with cellEdit). I am trying to update the state of the data inside afterSaveCell(), but still the same occurs :(

thanks!

[superphil0]

still persists

[superphil0]

If anybody still cares I figured out the solution.

It is most likely due to wrong useage of the Pagination combined with the filter.

Here is an example of how to use pagination properly:
https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination%20with%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel