CODEWITHSUNDEEP
reactjspaginationreact-table
saima m
saima m

Reputation: 59

How can I get my React table to always reset to page 1?

My react table shows data based on 2 or 3 different filters the user picks. Every time the search filters are changed and the table's data is updated, the table begins by displaying the page number that was last looked at. How can I make sure the table always starts at page 1 every time the search filters are changed?

React table code:

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable>

Upvotes: 0

Views: 2030

Answers (1)

thatslikeyouropinionman
thatslikeyouropinionman

Reputation: 31

As per the docs you can add the autoResetPage prop to your table options object like this,

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
// This one!
                    autoResetPage={true}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable> 

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        page,
        prepareRow,
        filters,
        allColumns,
        setFilter,
        selectedFlatRows,
        // below new props related to 'usePagination' hook
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: {pageIndex, pageSize},
    } = useTable(
        {
            columns,
            data,
            defaultColumn: {
                Filter: DefaultColumnFilter,
            },
            filterTypes,
// This is the one you want.
            autoResetPage,
                hiddenColumns: columns.filter((col: any) => col.show === false).map((col) => col.id || col.accessor),
                pageIndex: 0,
                pageSize: 20,
            },
        },
        ...hooks
    );

Upvotes: 1

Related Questions