title: Loading more rows after click event in Sortable Table Material UI table and React
body: <p>I'm making a sortable table component using Material UI and React.
  The functionality that I want to implement is </p>
  
  <ul>
  <li>Sortable table with 4 rows </li>
  <li>When user click a 'LOAD MORE', 4 more rows will be shown up below the default data.</li>
  </ul>
  
  <p>Currently, I added another <code>renderRows()</code> after first one. It shows 8 rows in a table. But the data is sorted by each <code>renderRows()</code>. </p>
  
  <p>Image 1 Default page</p>
  
  <p><a href="https://i.stack.imgur.com/TEnBa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEnBa.png" alt="enter image description here"></a></p>
  
  <p>Image 2 After click event</p>
  
  <p><a href="https://i.stack.imgur.com/Y7IAp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y7IAp.png" alt="enter image description here"></a></p>
  
  <p>Code </p>
  
  <pre><code>// properties of TableHeader component
  let headerProps = {
  enableSelectAll: false,
  displaySelectAll: false,
  adjustForCheckbox: false
  };
  
   // initial set of rows, simulating data from the database
   let rows = [
   {date: "12:30 12.9.2017", payment: "MasterCard", narrative: "restige 
  Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest 
  Black, 1.2 g (.04 oz)", amount: "$912.51", uniqueId: 0 },
  {date: "11:30 12.9.2017", payment: "Visa", narrative: "Total Intensity 
  Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)", 
  amount: "$744.51", uniqueId: 1 },
  {date: "13:30 12.9.2017", payment: "PayPal", narrative: "Eyeliner Long 
  Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)", amount: "$12.51", 
  uniqueId: 2 },
  {date: "20:30 12.9.2017", payment: "MasterCard", narrative: "Long 
  Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)", amount: "$16.51", 
  uniqueId: 3 }
   ];
  
  // our table hader information, key is the name of the 
  // property to sort by when the header is clicked 
  let headers = [
  {name: "", key: "checkbox"},
  {name: "Today", key: "date"},
  {name: "Payment", key: "payment"},
  {name: "Narrative", key: "narrative"},
  {name: "Amount", key: "amount"}
   ];
  
   // our table component that can sort columns
   class SortableTable extends React.Component {
  
   constructor(props){
   super(props);
   this.state = {rows, 
                sortBy: 'firstName',
                tableOpen : false
              };
    }
  
   handleClick = (event) =&gt; {
   event.preventDefault();
   this.setState({
    tableOpen : !this.state.tableOpen
   })
  }
  
  renderHeaders(){
  let header= headers.map( (h) =&gt; {
    return &lt;SortableHeader 
              key={h.key}
              name={h.name}
              onClicked={()=&gt;this.updateSortBy(h.key)} 
              isSortColumn={this.state.sortBy == h.key}/&gt;
  });
  return &lt;TableRow&gt;{header}&lt;/TableRow&gt;;
  }
  
  renderRows() {
  return this.state.rows.map( (row, i) =&gt; &lt;UserRow {...row} key=
  {row.uniqueId}/&gt; );
   }
  
  updateSortBy(sortBy){
    // multiple clicks on the same column reverse the sort order
    if( sortBy == this.state.sortBy ){
      this.setState( {rows: [...this.state.rows.reverse()]} );
      return;
    }
  
    let rows = [...this.state.rows];
    rows.sort( (a,b) =&gt; {
      if (a[sortBy] &lt; b[sortBy])
        return -1;
      if(a[sortBy] &gt; b[sortBy])
        return 1;
      return 0;
    });
  
    this.setState({rows, sortBy});
  }
  
  
   render() {
   return (
    &lt;div&gt;
      &lt;MuiThemeProvider&gt;
      &lt;Table&gt;
        &lt;TableHeader {...headerProps}&gt;
            {this.renderHeaders()}
        &lt;/TableHeader&gt;
        &lt;TableBody&gt;
          {this.renderRows()}
          {!this.state.tableOpen ? this.renderRows() : "" }
        &lt;/TableBody&gt;
      &lt;/Table&gt;   
    &lt;/MuiThemeProvider&gt;
    &lt;p className="openTable" onClick={this.handleClick} &gt;LOAD MORE&lt;/p&gt;
    &lt;/div&gt;
    );
   }
  }
  
  
  
  function SortableHeader(props){
  let style = {
  cursor: "pointer"
  }
  if(props.isSortColumn){
  style.fontWeight = "bold";
  style.color = "black";
  }
  
  return (
    &lt;TableHeaderColumn&gt;
    &lt;div style={style} onClick={() =&gt; props.onClicked()}&gt;{props.name}
    {props.name==""? "" :&lt;img src={arrowUpDown} alt="arrowUpDown" 
    className="arrowUpDown"/&gt;}&lt;/div&gt;
    &lt;/TableHeaderColumn&gt;
    );
   }
  
  
   function UserRow(props){
   return (
   &lt;TableRow&gt;
    &lt;TableRowColumn&gt;&lt;img src={Check} alt="Check" className="Check"/&gt;
   &lt;/TableRowColumn&gt;
    &lt;TableRowColumn&gt;{props.date}&lt;/TableRowColumn&gt;
    &lt;TableRowColumn&gt;{props.payment=="Visa" ?  &lt;img src={Visa} alt="Visa" 
    className="Visa"/&gt; :  (props.payment=="PayPal" ?  &lt;img src={Paypal} 
    alt="Paypal" className="Master"/&gt; :  &lt;img src={Master} alt="Master" 
    className="Master"/&gt;)}
  
  
    {props.payment}&lt;/TableRowColumn&gt;
     &lt;TableRowColumn&gt;{props.narrative}&lt;/TableRowColumn&gt;
     &lt;TableRowColumn&gt;{props.amount}&lt;/TableRowColumn&gt;
     &lt;/TableRow&gt;
   );
   }
  </code></pre>