T
TanStack•2y ago
eastern-cyan

Integration with react/stately

I am using a ui library that uses react/stately with there table to add functionality like Infinite pagination so i wast thinking how can i integrate it with react-query 
  let list = useAsyncList({
    async load({signal, cursor}) {

      if (cursor) {
        setIsLoading(false);
      }

      // If no cursor is available, then we're loading the first page.
      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
      let json = await res.json();

      setHasMore(json.next !== null);

      return {
        items: json.results,
        cursor: json.next,
      };
    },
  });
  let list = useAsyncList({
    async load({signal, cursor}) {

      if (cursor) {
        setIsLoading(false);
      }

      // If no cursor is available, then we're loading the first page.
      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
      let json = await res.json();

      setHasMore(json.next !== null);

      return {
        items: json.results,
        cursor: json.next,
      };
    },
  });
https://nextui.org/docs/components/table#infinite-pagination
Table
Tables are used to display tabular data using rows and columns. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?