T
TanStack•15mo ago
inland-turquoise

Updating table data

I am having a problem with updating data to table, it doesn't get reflected/rendered correctly. I am fetching data from my server, then I get data, I put it inside useReactTable hook - all good. Next thing I've done is creating a handleScroll function to run whenever I scroll the table, when i get to the bottom, I send request to my server, which brings me items of page number 2, which then I update state of data thus I am expecting useReactTable hook to run again and give me the old+new items, however this isn't happening. I can see in my own state that I do have the correct items and updated object but when i do: table.getRowModel().rows. I am getting only the old state. Anyone familiar with this issue? maybe I am misusing the table? what approach can I have? I cannot send all items at once since that api call will be very long so I broke it down.
11 Replies
homely-rose
homely-rose•15mo ago
Do you have a code sandbox that shows how you’re fetching the data? Is it inside the same component, with a fetching library or an useEffect?
inland-turquoise
inland-turquoiseOP•15mo ago
it is with useeffect, using regular fetch. outside the table component, i am passing data down as a prop
homely-rose
homely-rose•15mo ago
I’m gonna guess it’s to do with the dependency array on your useEffect.
inland-turquoise
inland-turquoiseOP•15mo ago
Heres a snippet of my code. On first console.log I get 20 items and second one I get 20 aswell - thats great. Problem comes when I updated data outside of this component, now first console.log gives me 40, but second one still gives me 20. and even if I update more, it will be 60..80...100... and second one stays at 20.
No description
inland-turquoise
inland-turquoiseOP•15mo ago
Passing it to state was just one way of me testing it, I also tried passing servertable.items straight up to data
homely-rose
homely-rose•15mo ago
What’s the code for the parent component where serverTable is fetched? Basically, your props would have better ergonomics if they were already split. `<Table data={serverTable.items} columns={serverTable.columns} /> Then simply put the data in the data prop for tanstack. It’s an antipattern to have a useEffect here. You shouldn’t need to sync anything React isn’t already aware of.
homely-rose
homely-rose•15mo ago
inland-turquoise
inland-turquoiseOP•15mo ago
Yes it was just out of desparation I guess. The code comes from a custom hook that fetches more data as user scrolls, that's why I have those refs set up there. Nothing fancy really. It's just a way for backend to fully control data since I can't have all records at once and then let tanstacktables control state of everything
homely-rose
homely-rose•15mo ago
Well I can’t tell what behaviour might occur when your data updates. If it were me I’d be using Tanstack Virtual for sure.
inland-turquoise
inland-turquoiseOP•15mo ago
    const gotoNextPage = async () => {
        const res = await getTableData({
            url: "widget/products/all/",
            data: { tbl: { pn: pageNum + 1, ps: pageSize } },
        });
        setItems([...items, ...res.data.items]);
        setPageNum(res.data.tbl.page_num);
        setPageSize(res.data.tbl.page_size);
    };
    const gotoNextPage = async () => {
        const res = await getTableData({
            url: "widget/products/all/",
            data: { tbl: { pn: pageNum + 1, ps: pageSize } },
        });
        setItems([...items, ...res.data.items]);
        setPageNum(res.data.tbl.page_num);
        setPageSize(res.data.tbl.page_size);
    };
here is how I update my data state. 
    const { items, columns, gotoNextPage } = props;

    const tableRef = useRef<HTMLTableElement | null>(null);
    const tableContainerRef = useRef<HTMLDivElement | null>(null);

    const table = useReactTable({
        data: items,
        columns: columns,
        filterFns: {},
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        initialState: {
            pagination: {
                pageSize: 20,
            },
        },
        columnResizeDirection: "rtl",
        autoResetPageIndex: false,
        autoResetExpanded: false,
        debugTable: true,
    });

    console.log(table.getRowModel().rows.length);
    const { items, columns, gotoNextPage } = props;

    const tableRef = useRef<HTMLTableElement | null>(null);
    const tableContainerRef = useRef<HTMLDivElement | null>(null);

    const table = useReactTable({
        data: items,
        columns: columns,
        filterFns: {},
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        initialState: {
            pagination: {
                pageSize: 20,
            },
        },
        columnResizeDirection: "rtl",
        autoResetPageIndex: false,
        autoResetExpanded: false,
        debugTable: true,
    });

    console.log(table.getRowModel().rows.length);
And here is my table component When I console log items, I can see the correct amount of items, however when I console log tabe.getRowModel().rows.length, I get 20 no matter what
homely-rose
homely-rose•15mo ago
OK - so, as long as your gotoNextPage function is in the parent component passing those props down, everything is actually working - you're not wrong. Your problem is the method you're using for checking row length. table.getRowModel().rows.length only maps visible rows, which you're statically setting as pageSize: 20 in your table instance initialState options. So it will always be 20 and that's what you're seeing. I guess it's now down to how you want to dynamically control the pageSize variable, as that will need updating every time you fetch another 20 results. This means you'll need to manually set pagination (and possibly other values) by using Tanstack Table's provided methods. For example, where you have a button to load more, you can update the pageSize value: 
onChange={e =>{table.setPageSize(Number(e.target.value))}}
onChange={e =>{table.setPageSize(Number(e.target.value))}}
That's from the first example below (partially uncontrolled) If you're going to do more server side data smarts then you'll likely need to manually control a fair amount of the tables state. 
  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  });

  const table = useReactTable({
    data: items,
    columns,
    state: {
      sorting,
      columnFilters,
      globalFilter,
      pagination,
      rowSelection,
    },
    manualSorting: true,
    manualPagination: true,
    onPaginationChange: setPagination,
    ...
  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  });

  const table = useReactTable({
    data: items,
    columns,
    state: {
      sorting,
      columnFilters,
      globalFilter,
      pagination,
      rowSelection,
    },
    manualSorting: true,
    manualPagination: true,
    onPaginationChange: setPagination,
    ...
Then you'll interact with the set values via your table object like so: table.getState().pagination.pageSize and table.setPageSize You're gonna need to check the docs: https://tanstack.com/table/latest/docs/api/features/pagination#manualpagination The examples are the best way to learn: - Pagination partially controlled https://tanstack.com/table/latest/docs/framework/react/examples/pagination - Pagination controlled https://tanstack.com/table/latest/docs/framework/react/examples/pagination-controlled Hope this helps

Did you find this page helpful?