react-bootstrap-table2 Infinite scrolling

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?

Jun 19 '19 13:06 mathiaswillburger

@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.

Jun 22 '19 07:06 AllenFang

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.

Jun 25 '19 00:06 mathiaswillburger

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

Jun 25 '19 10:06 Mujaddadi

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

Oct 09 '19 10:10 anurag060

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.

Oct 09 '19 23:10 mathiaswillburger

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

Feb 27 '20 09:02 amitsetty

Hello!

First of all, thank you for your job!

It would be great to see infinite scrolling!

May 24 '20 12:05 silizza

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

Dec 10 '20 17:12 ayamundhenk

really excited to get this fature, is it done ?

Feb 02 '21 10:02 kaleem-elahi

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

export default UserManagement;

Feb 13 '21 10:02 vi-cky

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;

Mar 07 '21 09:03 PavelZubkov

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?

Mar 08 '21 04:03 ranaraya

I have <ToolkitProvider ...> { props => { <Bootstartable id='bsTbl' ...>. Question is: How do I implement infinite scroll?

Mar 08 '21 21:03 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

Mar 12 '21 22:03 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

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.

Mar 13 '21 15:03 ranaraya

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;

Can't we do it using IntersectionObserver?

Aug 11 '22 04:08 aashiqahmed98

react-bootstrap-table2 react-bootstrap-table2 copied to clipboard

Infinite scrolling

react-bootstrap-table2
react-bootstrap-table2 copied to clipboard