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

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 <ToolkitProvider ...> { props => { <Bootstartable id='bsTbl' ...>. Question is: How do I implement infinite scroll?

[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