title: "material-table" - How to add more rows per page and fix rendering - ReactJs
body: <p>I am trying to apply more rows per page to my table from <code>material table</code>. Until now I found out that you can add an array with the wishful rows per page ex. <code>rowsPerPageOptions={[5, 10, 25, 50, 100]}</code>
  , but my problem is when I apply the row of 100 the table extends to a blank one. ( I receive at the moment only 24 rows (documents) from the backend ) So basically it has to be limited to the data that I have. Can someone give me a hand? Thank you</p>
  <pre><code> divideItems = () =&gt; {
  
          let startIndex = ((parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage) - this.state.rowsPerPage;
          let endIndex = (parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage - 1;
          let tabItems = [];
  
          for (let i = startIndex; i &lt;= endIndex; i++) {
              if (this.state.items[i]) {
                  tabItems.push(this.state.items[i]);
              }
          }
  
  
          this.setState({
              tabItems
          }, () =&gt; {
  
          });
  
      }
      getNewIndex = (event, page) =&gt; {
          this.setState({
              activePaginationTab: page
          }, () =&gt; { this.divideItems() })
          // this.divideItems(page)
  
  
      };
  
      handleChangeRowsPerPage = (event) =&gt; {
  
          this.setState({
              rowsPerPage: event.target.value
          }, () =&gt; {
              this.divideItems();
          })
      }
  </code></pre>
  <pre><code>render() {
    components={{
                Pagination: props =&gt; (
                    &lt;TablePagination
                        {...props}
                        rowsPerPageOptions={[5, 10, 25, 50,100]}
                        rowsPerPage={this.state.rowsPerPage}
                        count={this.state.items.length}
                        /&gt;
      ),
  </code></pre>