React table dynamic page size but with size limit and pagination
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"));In order to update ReactTable page size after initial render, use the pageSize attribute:
<ReactTable
minRows={0}
data={data}
defaultPageSize={initialSize}
pageSize={updatedSize}
/>
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} />