Infinite scrolling - Githubissues

mathiaswillburger commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

anurag060 commented 5 years ago

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

mathiaswillburger commented 5 years ago

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 commented 4 years ago

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

silizza commented 4 years ago

Hello!

First of all, thank you for your job!

It would be great to see infinite scrolling!

ayamundhenk commented 3 years ago

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

kaleem-elahi commented 3 years ago

really excited to get this fature, is it done ?

vi-cky commented 3 years ago

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

{loading ? ( ) : ( )}

Loading...

); }

export default UserManagement;

PavelZubkov commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

PavelZubkov commented 3 years ago

@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 commented 3 years ago

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

aashiqahmed98 commented 2 years ago

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" /> ) : (

)}

Loading...

); } export default UserManagement;

Can't we do it using IntersectionObserver?

react-bootstrap-table / react-bootstrap-table2

Infinite scrolling #981