How do I limit table height and attach a scroll bar to the table body in React?

Question

I am new to React and webdev in general. How can I limit table height and attach a scroll bar to the table body? Can I continue using bootstrap or should I use MaterialUI/AntDesign?

<table style={{width: 700, marginLeft: 20}} className="table sortable table-bordered">
  <thead>
    <tr>
      <th>Date <button onClick={this.sortByDate}>{this.state.records.length > 1 && this.state.sortDownDates ?
          <FaSortAmountUp /> :
          <FaSortAmountDown />}</button></th>
      <th>Cases <button onClick={this.sortByCase}>{this.state.records.length > 1 && this.state.sortDownCases ?
          <FaSortAmountUp /> :
          <FaSortAmountDown />}</button></th>
    </tr>
  </thead>
  <tbody>
    {this.state.records.map(({date, caseId}) =>
    <td>
      <td>{date}</td>
      <td>{caseId}</td>
    </td> // I want to limit this
    )}
  </tbody>
</table>

score 1 · Answer 1 · answered Apr 11 '20 at 15:10

1

Add some css to your table style:

<table style={{width: 700, marginLeft: 20, maxHeight: '800px', overflowY: 'auto'}}

answered Apr 11 '20 at 15:10

HermitCrab

3,194
1
11
10

Thanks for giving an answer but adding maxHeight does not work. – Darkhan Mukhtar Apr 11 '20 at 15:16
The problem when you use a UI library like bootstrap is that there are a lot of CSS side effects that you have to fight against. Maybe there is something in the CSS class table, sortable or table-bordered that prevents you from using maxHeight – HermitCrab Apr 11 '20 at 15:21

How do I limit table height and attach a scroll bar to the table body in React?

1 Answers1