React table dynamic page size but with size limit and pagination

Question

I am using React Table and i need to set the table rows dynamically depending on the length of my data. this is what i got:

let pgSize = (data.length > 10) ? 5 : data.length;


<ReactTable
    data={data} 
    PaginationComponent={Pagination}
    columns={[
        {
            columns: [
            //column defs
            ]
        }
    ]}
    defaultPageSize={10}
    pageSize={pgSize}
    className="-striped -highlight"
/>

i need the rows to be dynamic but if i set the pagesize to the length of the data. the pagination gets removed and this would be a problem if i have 100 rows of data. i need a maximum of 10 as the default page size. i cant seem to get the logic of doing this.

Thanks for the help!

Answer 1

Nathan's answer works just fine, but there's no need to dynamically calculate a pageSize to solve this. The simpler method is to define the minRows prop on the react-table component. By default it is undefined, and react-table will add as many empty padding rows to fill your page as it needs to. Defining this limits the number of padding rows created, so you can set it to either 0 or 1 to achieve what you're after, depending on if you want a padding row rendered or not when there are no rows to display.

<ReactTable minRows={1} columns={columns} data={data} />