React-table: Dynamically changing defaultPageSize needs key

[derekcannon]

Problem Description

I have a table that I want to start off with no pagination and render every row of data passed in, no matter how long it makes the list. When a row is clicked, I'd like the table to shrink and pagination, to a defaultPageSize of 10.

To achieve this, I have an expanded boolean property that, when true, will set defaultPageSize equal to the length of the data array's length (since this is currently no way I can see to just render a list of ALL the data without pagination). When a row is clicked, expanded becomes false, and defaultPageSize becomes 10 with showPagination set to true.

However, when I respecify a value on defaultPageSize, it does not update the table. I've looked into it and found that I could fix the problem by adding a key prop to the ReactTable component that is a combination of the length of the data array (to redraw when the expanded length changes), and the currently selected item (so that the list will paginate when an item is selected).

Code Snippet(s)

Here's a sample of what I'm trying to achieve:

  const paginationProps = expanded
    ? { defaultPageSize: data.length, showPagination: false }
    : { defaultPageSize: 10 };

<ReactTable data={data}
            columns={columns}
            {...paginationProps} />

But I am unfortunately having to add a key:

key={`${data.length}-${currentSelection}`}

System Information

yarn version 0.21.3
node 7.7.1
react-table 5.4.1

[aaronschwartz]

since this is currently no way I can see to just render a list of ALL the data without pagination

There is a way to do that. Have you tried setting the pageSize option?

pageSize={data.length}
showPagination={false}

[derekcannon]

@TacticalCoding Oh, thanks. I didn't see that property. Works perfectly without a key now! (With a little notable lag when the size adjusts (rows disappear then half a second later the table readjusts size.))

[aaronschwartz]

Anytime. I have seen the delay until the table re-renders again as well. Maybe I'll look into that eventually.

[ShreyasPobbi]

When there is 2 ReactTable, "data.length" is taking the value from the 1st ReactTable and not the 2nd ..
Any idea how this can be solved??

[joe-oli]

I was using defaultPageSize, and it was hit and miss, sometimes # of rows would adjust, other times it would not.

defaultPageSize = { rowsDataArray.length > 20 ? 20 : rowsDataArray.length }
showPagination  = { rowsDataArray.length > 20 ? true : false}
showPageSizeOptions = {false}

After I added the extra line pageSize= (because i did not see this prop in the docs initially)

defaultPageSize = { rowsDataArray.length > 20 ? 20 : rowsDataArray.length }
pageSize = { rowsDataArray.length > 20 ? 20 : rowsDataArray.length }
showPagination  = { rowsDataArray.length > 20 ? true : false}
showPageSizeOptions = {false}

it is now working all the time.
I am guessing i should only need pageSize, and remove defaultPageSize?