React-bootstrap-table2: Infinite scrolling

[mathiaswillburger]

Hi,

I was wondering if there are any suggestions how to realize or if there are plans for react-bootstrap-table2 to support infinite scrolling in tables?

The goal would be to avoid pagination and pagination size selections and load data dynamically while scrolling. In case of remote data loading a query should be triggered every time the shown limit is reached to fetch the next lines. A similar example could be seen here: https://griddlegriddle.github.io/v0-docs/infiniteScroll.html

Any ideas how to solve that?

[AllenFang]

@mathiaswillburger thanks your feedback, I also want to implement this feature. However, I don't have enough time to implement it, I'm sorry that I can not give you any schedule or plan for this feature.

[mathiaswillburger]

Ok thanks for your feedback! I will look into one of the react infinite scroll components in the meanwhile to wrap around the react bootstrap table.

[Mujaddadi]

I was just searching for it. I also need the same feature.

[anurag060]

any updates regarding this feature? @mathiaswillburger can you please tell me if you have found any useful component

[mathiaswillburger]

I have investigated react-virtualized which seemed like a very flexible solution. Unfortunately the investment of implementing a lot of custom functionality to have some other features react-bootstrap-table2 provides was not worth to change the table component.

Long story short: I still use react-bootstrap-table2 and hope for an implementation soon. I think it would really benefit the component.

[amitsetty]

Would also love to see this in the future! Great work @AllenFang I'm really loving this table

[silizza]

Hello!

First of all, thank you for your job!

It would be great to see infinite scrolling!

[ayamundhenk]

I would love to have infinite scrolling too. Thank you @AllenFang.

[kaleem-elahi]

really excited to get this fature, is it done ?

[vi-cky]

feature react infinity scroll useing react-bootstrap-table-2

import axios from "axios";
import React, { useEffect, useState } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import * as ReactBootStrap from "react-bootstrap";
import "../Css/UserManagement.css";
function UserManagement() {
const [userData, setUserData] = useState([]);
const [loading, setLoading] = useState(false);
let [page, setPage] = useState(1);

const getUserData = async (page) => {
try {
const data = await axios.get(
https://randomuser.me/api/?page=${page}&results=10
);
if (page > 1) {
setUserData((prev) => [...prev, ...data.data.results]);
setLoading(true);
} else {
setUserData((prev) => [...prev, ...data.data.results]);
setLoading(true);
}
} catch (e) {
console.log(e);
}
};
function imgformatter(cell, row) {
return ;
}
const coloumn = [
{ dataField: "name[title]", text: "Name" },
{ dataField: "name[first]", text: "Name", sort: true },
{ dataField: "name[last]", text: "Last" },
{ dataField: "gender", text: "gender" },
{
dataField: "picture[thumbnail]",
text: "Photo",
formatter: imgformatter,
},
{ dataField: "location[city]", text: "City" },
{ dataField: "location[state]", text: "State" },
{ dataField: "location[country]", text: "Country" },
{ dataField: "location[postcode]", text: "Postcode" },
{ dataField: "email", text: "Email" },
{ dataField: "login[username]", text: "UserName" },
{ dataField: "login[password]", text: "Password" },
];
useEffect(() => {
getUserData(page);
}, []);
function loadMoreHandle(e) {
let bottom =
e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 50;
if (bottom) {
let page_ = page + 1;
getUserData(page_);
setLoading(true);
setPage(page_);
}
}
return (

{loading ? (
keyField="email"
data={userData}
columns={coloumn}
rowStyle={{ fontSize: "14px" }}
bootstrap4
classes="table-responsive"
striped
headerClasses="header-class"
/>
) : (

)}

Loading...

);
}

export default UserManagement;

[PavelZubkov]

just used prettier with the previous example

import axios from "axios";
import React, { useEffect, useState } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import * as ReactBootStrap from "react-bootstrap";
import "../Css/UserManagement.css";
function UserManagement() {
  const [userData, setUserData] = useState([]);
  const [loading, setLoading] = useState(false);
  let [page, setPage] = useState(1);

  const getUserData = async (page) => {
    try {
      const data = await axios.get(
        "https://randomuser.me/api/?page=${page}&results=10"
      );
      if (page > 1) {
        setUserData((prev) => [...prev, ...data.data.results]);
        setLoading(true);
      } else {
        setUserData((prev) => [...prev, ...data.data.results]);
        setLoading(true);
      }
    } catch (e) {
      console.log(e);
    }
  };
  function imgformatter(cell, row) {
    return <img style={{ width: 50 }} src={cell} />;
  }
  const coloumn = [
    { dataField: "name[title]", text: "Name" },
    { dataField: "name[first]", text: "Name", sort: true },
    { dataField: "name[last]", text: "Last" },
    { dataField: "gender", text: "gender" },
    {
      dataField: "picture[thumbnail]",
      text: "Photo",
      formatter: imgformatter,
    },
    { dataField: "location[city]", text: "City" },
    { dataField: "location[state]", text: "State" },
    { dataField: "location[country]", text: "Country" },
    { dataField: "location[postcode]", text: "Postcode" },
    { dataField: "email", text: "Email" },
    { dataField: "login[username]", text: "UserName" },
    { dataField: "login[password]", text: "Password" },
  ];
  useEffect(() => {
    getUserData(page);
  }, []);
  function loadMoreHandle(e) {
    let bottom =
      e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 50;
    if (bottom) {
      let page_ = page + 1;
      getUserData(page_);
      setLoading(true);
      setPage(page_);
    }
  }
  return;

  !loading ? (
    <BootstrapTable
      keyField="email"
      data={userData}
      columns={coloumn}
      rowStyle={{ fontSize: "14px" }}
      bootstrap4
      classes="table-responsive"
      striped
      headerClasses="header-class"
    />
  ) : (
    <ReactBootStrap.Spinner animation="border" />
  );
}
export default UserManagement;

[ranaraya]

How do you call LoadMoreHandle method, is it by adding onScroll property in Bootstraptable Component. In my case, i include bootstraptable side toolkitprovider. Will the implementation differ?

[ranaraya]

I have

[PavelZubkov]

@ranaraya
I cheated. At the bottom of the table I placed a component that calls a callback when it comes into view.
Something like this https://www.npmjs.com/package/react-visibility-sensor
Inside the callback, after some conditions, LoadMore is called

This is enough for my task

[ranaraya]

@ranaraya
I cheated. At the bottom of the table I placed a component that calls a callback when it comes into view.
Something like this https://www.npmjs.com/package/react-visibility-sensor
Inside the callback, after some conditions, LoadMore is called

This is enough for my task

Thanks for the reply. Could you comment on my question related to using "ToolkitProvider" --> Bootstraptable use in my APP. Would it be possible to implement infinite scrolling here, if Yes, InfiniteScroll Component be the parent of both the component as per above or only for Bootstraptable?

Currently, in our APP, we do have column level sorting/filtering as well as CSV download functionalities provided by both the component. Hope, I explained my scenario clearly.