Pagination label for all rows-CodePudding

I have a pagination as below:-

Now right now it has options 10,25,50 and I added one more for all rows as I have total of 1000 rows which I want to see without going to multiple pages 20 times. So i included data.length which gives me output as below now:-

My code is:-

            <select value={pageSize} onChange={e => setPageSize(Number(e.target.value))}>
              {[10, 25, 50, data.length].map(pageSize =>(
                <option key ={pageSize} value={pageSize}>
                  Show {pageSize}
                </option>
              ))}

I need to choose a label for data.length and not a number as shown in screenshot above. Can anyone help.

CodePudding user response：

You can write condition, if data.length equal pageSize you show text All else pageSize.

Example:

{[10, 25, 50, data.length].map((pageSize) => (
          <option key={pageSize} value={pageSize}>
            Show {data.length === pageSize ? "All" : pageSize}
          </option>
        ))}

codesandbox