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

Answer 2

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.

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import 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"));

Answer 3

In order to update ReactTable page size after initial render, use the pageSize attribute:

<ReactTable 
  minRows={0}
  data={data} 
  defaultPageSize={initialSize}
  pageSize={updatedSize}
/>