CODEWITHSUNDEEP
javascripthtmlreactjsfrontendreact-bootstrap
Darkhan Mukhtar
Darkhan Mukhtar

Reputation: 137

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

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>

Upvotes: 0

Views: 1875

Answers (1)

HermitCrab
HermitCrab

Reputation: 3264

Add some css to your table style:

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

Upvotes: 1

Related Questions