BootstrapTable doesn't re-render after setState when remote/onTableChange is used #847
Description
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 />
);
}
}