React table dynamic page size but with size limit and pagination

reactjs react-table

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} />

reactjs react-table

Check out React-Table's sample table.

I modified their code a bit to make it work for your situation. Copy and paste this code in their editor to see the output.

In the constructor, you can change the makeData(20) to whatever amount of data you want.

Notice that I completely removed the defaultPageSize and am handling it through your ternary operator. Your table would grow up to 10 (default size), but at 11, would shrink back down to only 5 rows.

Show code snippet

import React from "react";import { render } from "react-dom";import { makeData, Logo, Tips } from "./Utils";// Import React Tableimport ReactTable from "react-table";import "react-table/react-table.css";class App extends React.Component {  constructor() {    super();    this.state = {      data: makeData(20)    };  }  render() {    const { data } = this.state;    return (      <div>        <ReactTable          data={data}          pageSize={(data.length > 10) ? 10 : data.length}          columns={[            {              Header: "Name",              columns: [                {                  Header: "First Name",                  accessor: "firstName"                },                {                  Header: "Last Name",                  id: "lastName",                  accessor: d => d.lastName                }              ]            },            {              Header: "Info",              columns: [                {                  Header: "Age",                  accessor: "age"                },                {                  Header: "Status",                  accessor: "status"                }              ]            },            {              Header: 'Stats',              columns: [                {                  Header: "Visits",                  accessor: "visits"                }              ]            }          ]}          className="-striped -highlight"        />        <br />        <Tips />        <Logo />      </div>    );  }}render(<App />, document.getElementById("root"));

Expand snippet