React-table: No way to show "All rows" as pagination option?

[y2chen]

Being able to customize the pagination options is great, but it seems the only valid inputs are numbers. I'm trying to allow for a user to just say, show me all the rows in the table. Right now, the only way to achieve that is to add an entry matching the length of the data, but then that would show up in the list as something like "521 rows" instead of "All rows", which would be much cleaner (and visually consistent between tables).

Could be added as a prop along the lines of "showAllPageSizeOption" or something similar. Or allow customized text in the pagination list, but that seems to have fewer reasonable use cases.

[tannerlinsley]

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

[emon535]

What is the other way I can show all the rows ? Can you suggest me a trick?

[sviatoslav-lirsoft]

@emon535 maybe combining
showPagination={false} defaultPageSize={data.length} props will work for you. This suits in my case.

[emon535]

I solved the problem by doingshowPagination = {false}and pageSize = {all_data}.
DoingdefaultPageSize={data.length} does not render all the data and keeps only the previous data as it does not re-render

Thanks for the help.

[Dharani16]

I have managed to solve my issue with help of renderPageSizeOptions prop
renderPageSizeOptions = ({ pageSize, pageSizeOptions, rowsSelectorText, onPageSizeChange, rowsText }) => { return (<select onChange={e => onPageSizeChange(Number(e.target.value))} value={pageSize} > {pageSizeOptions.map((option, i) => ( // eslint-disable-next-line react/no-array-index-key <option key={i} value={option}> {${option} ${{this.props.rowsText}}} </option> ))} </select>) }

[amrita-syn]

I did the following since I had multiple tables with unknown number of rows to be shown in different tabs. This gives the effect of 'max-height', if anyone is interested.

pageSize={pageSize}
style={{ height: pageSize < 10 ? ((pageSize + 1) * 35).toString() + "px" : "350px" }}
showPagination={false}