React-table: Page index won't change on updated data

[domingohui]

Thanks for making such a neat component! It's really fast too!

I supply an array of filtered data into ReactTable. But when items get filtered (and thus fewer rows are displayed), the page doesn't change, so it looks like it's empty. For example, I initially have 5 pages of data. I change my filter criteria. New array of data is generated. Only 1 page worth of data gets fed to ReactTable now. But the page index is still 5 (out of 1 page...). So instead, if I were to go to page 1, I would see the data. Otherwise, it would be as if it was just empty.

Don't know if this is intended. But I would love to provide more info and dig deeper.

[tannerlinsley]

Can you post your code?
On Wed, Feb 8, 2017 at 10:35 PM Domingo [e-mail] wrote:

Thanks for making such a neat component! It's really fast too!

I supply an array of filtered data into ReactTable. But when items get
filtered (and thus fewer rows are displayed), the page doesn't change, so
it looks like it's empty. For example, I initially have 5 pages of data. I
change my filter criteria. New array of data is generated. Only 1 page
worth of data gets fed to ReactTable now. But the page index is still 5
(out of 1 page...). So instead, if I were to go to page 1, I would see the
data. Otherwise, it would be as if it was just empty.

Don't know if this is intended. But I would love to provide more info and
dig deeper.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/69, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCXLSEN192vur-6pENMDxf7FO7HUhks5raqWmgaJpZM4L7ufs
.

[domingohui]

This is part of a Redux ReactJS app. I'm essentially printing a list of names (and other data not shown here). The data generated somewhere else in the app gets passed to the DataList. When a new Redux state tree is created, a different set of data is generated, then passed to DataList -> ReactTable.

When new data gets passed, the DataList is rerendered, and so is ReactTable (I guess? Will look at the source code. ). But the page index stays the same even though that page has no data.

Also, the data is not really an array, but more like a wrapper of an array. It wraps the indices of filtered data in an array (see below) for faster filtering. Don't know if this is causing any problem. Maybe ReactTable doesn't recognize the interface of the DataListWrapper.

Thanks!

Data wrapper:

export function DataListWrapper ( listOfIndex, actualDataList ) {

/*
actualDataList: [
    {
        name: 'John'
        email: '[email protected]'
    },...
]
*/

    this._listOfIndex = listOfIndex;
    this._actualDataList = actualDataList;
    this.length = listOfIndex.length;
    this.get = _get.bind(this);
    this.map = _map.bind(this);

    function _get ( index ) {
        return this._actualDataList[this._listOfIndex[index]];
    }

    function _map ( func ) {
        let result = [];
        for ( let i = 0; i < this.length; i++ ) {
            result.push( func(this.get(i), i) );
        }
        return result;
    }
}

Here's a simplified version of the component:

const columns = [
    {
        header: 'Name',
        accessor: 'name',
        render: ({value, rowValues}) => <a href={'mailto:'+rowValues.email}>{value}</a>
    },
]

const DataList = ( { data} ) => {
    return (
        <div>
          ......
          <ReactTable 
                data={data}
                columns={columns}
                defaultPageSize={10}
            />
        </div>
    )
};

export default DataList

[tannerlinsley]

yarn upgrade react-table or yarn add react-table@^5.0.3

[domingohui]

Thanks for the quick fix! But after I render a react-table, the app fetches data asynchronously. Before the data kicks in, the page is 0/0, which is fine and makes sense. But when the data comes, the page still stays at 0 (out of many pages) - so it doesn't show anything. I'm guessing you'd have to set a min value for the current page index :D Thanks again for your time!

[tannerlinsley]

I'll cover this edge case in the morning. Expect a fix by the afternoon 👍

[domingohui]

Thank you! And apologies for the unusual problem!

[mfonsen]

Bumped into this when upgrading from 4.41 to 5.1.0. Page stuck to 0 before user action.

Workaround: initialise table with [{}] instead of [].

This is different from the example in the documentation. Don't know why it doesn't work for me.

(Big thanks for the component! Seems exactly what I was looking for but could not find elsewhere.)

[elliotrock]

@mfonsen could you please clarify the initialise workaround? Like wrap the data prop like data=[{data}] ?

Thanks