fair-rose

Whenever you change an item on the other pages, it re-renders the table.

Can anyone help me? I have a scenario where I'm using a data table, and the list of items comes from a state and one of the columns is a select with options. The problem is that whenever I change the information in the select by changing the value of a row that is not on the first page, I need to update the item in the state and with that the table is rendered again and returns to the first page.

3 Replies

exotic-emerald•10mo ago

Sounds like a state value isn't added as a dependency. Please share code.

typical-coral•10mo ago

I was facing this. I resolved it by setting these properties in the useTable config

    autoResetAll: false,
    autoResetExpanded: false,
    autoResetPageIndex: false,

    autoResetAll: false,
    autoResetExpanded: false,
    autoResetPageIndex: false,

fair-roseOP•10mo ago

Thank's @amgau I ended up implementing a state to store the current page and pass it as a parameter to the data table, so even if the state updates I keep it on the same page.

    const [pageIndex, setPageIndex] = useState(0);


    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        state: {
            pagination: {
                pageIndex,
                pageSize: 10
            },
        },
    })

    const handlePageChange = (newPageIndex: number) => {
        setPageIndex(newPageIndex);
    };

    return (
        <div className="rounded-md border">
            <DataTablePaginationControls onPageChange={handlePageChange} table={table} />
            <Table>

    const [pageIndex, setPageIndex] = useState(0);


    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        state: {
            pagination: {
                pageIndex,
                pageSize: 10
            },
        },
    })

    const handlePageChange = (newPageIndex: number) => {
        setPageIndex(newPageIndex);
    };

    return (
        <div className="rounded-md border">
            <DataTablePaginationControls onPageChange={handlePageChange} table={table} />
            <Table>

import {Button} from "@components/button";
import {Table} from "@tanstack/table-core";

export function DataTablePaginationControls<TData>({table, onPageChange}: {
    table: Table<TData>,
    onPageChange: (pageIndex: number) => void
}) {
  ....
    return (
        <div className="flex items-center justify-end space-x-2 py-4 px-8">
            <Button variant="outline" size="sm" disabled={pageIndex === 0} icon="ChevronFirst" iconSize={iconSize}
                    onClick={() => {
                        onPageChange(0);
                    }}
            />
            <Button variant="outline" size="sm" disabled={!table.getCanPreviousPage()} icon="ChevronLeft"
                    iconSize={iconSize}
                    onClick={() => {
                        console.log(table.getState().pagination.pageIndex)
                        if (table.getState().pagination.pageIndex > 0) {
                            onPageChange(table.getState().pagination.pageIndex - 1);
                        }
                    }
                    }
            />
            {Array.from({length: pageCount}, (_, i) => (
                <Button key={i} variant={i === pageIndex ? "default" : "outline"} size="sm" iconSize={iconSize}
                        label={String(i + 1)}
                        onClick={
                            () => onPageChange(i)
                        }
                />
            ))}
            <Button variant="outline" size="sm" disabled={!table.getCanNextPage()} icon="ChevronRight"
                    iconSize={iconSize}
                    onClick={() => {
                        if (table.getState().pagination.pageIndex < table.getPageCount() - 1) {
                            onPageChange(table.getState().pagination.pageIndex + 1);
                        }
                    }}
            />
            ....
        </div>
    );
}

import {Button} from "@components/button";
import {Table} from "@tanstack/table-core";

export function DataTablePaginationControls<TData>({table, onPageChange}: {
    table: Table<TData>,
    onPageChange: (pageIndex: number) => void
}) {
  ....
    return (
        <div className="flex items-center justify-end space-x-2 py-4 px-8">
            <Button variant="outline" size="sm" disabled={pageIndex === 0} icon="ChevronFirst" iconSize={iconSize}
                    onClick={() => {
                        onPageChange(0);
                    }}
            />
            <Button variant="outline" size="sm" disabled={!table.getCanPreviousPage()} icon="ChevronLeft"
                    iconSize={iconSize}
                    onClick={() => {
                        console.log(table.getState().pagination.pageIndex)
                        if (table.getState().pagination.pageIndex > 0) {
                            onPageChange(table.getState().pagination.pageIndex - 1);
                        }
                    }
                    }
            />
            {Array.from({length: pageCount}, (_, i) => (
                <Button key={i} variant={i === pageIndex ? "default" : "outline"} size="sm" iconSize={iconSize}
                        label={String(i + 1)}
                        onClick={
                            () => onPageChange(i)
                        }
                />
            ))}
            <Button variant="outline" size="sm" disabled={!table.getCanNextPage()} icon="ChevronRight"
                    iconSize={iconSize}
                    onClick={() => {
                        if (table.getState().pagination.pageIndex < table.getPageCount() - 1) {
                            onPageChange(table.getState().pagination.pageIndex + 1);
                        }
                    }}
            />
            ....
        </div>
    );
}

I will test your solution tks

Gaming

Programming

Whenever you change an item on the other pages, it re-renders the table.

Did you find this page helpful?