Scrolling tables using ReactJS and Skeleton Css

Question

I am having an issue trying to get a scrolling table to work in React JS. I am also using skeleton. I only mention this, just in case there is some kind of conflict with skeleton and scrolling tables that I don't know about.

I currently have the following React JS component:

HistoryContainer.jsx

    import React from 'react'; 

    import HistoryItem from './historyItem';

        export default class HistoryContainer extends React.Component {
             render(){
                 var self=this;
                return (
                  <div>
                      <h6><strong>{'Service History'}</strong></h6>
                      <table>
                      <tbody styles={'height: 100px; overflow: scroll;'}>
                      {

                        self.props.historyItems.map(function(historyItem) 
                        {
                          return ( 
                                  <HistoryItem  historyItem={historyItem}/>
                                )                              
                        })

                      }
                      </tbody>
                      </table>
                  </div>
                        );
                     } }

HistoryItem.jsx:

import React from 'react';

export default class HistoryItem extends React.Component{

  convertDate(data)
  {
     var d= new Date(data);
     return (d.getMonth()+1)+'\\'+d.getDate()+"\\"+ d.getFullYear();
  }
  render(){

       if(this.props.historyItem.WorkPerformedSummary==='')
       {
        return null;
       }

       return( 
          <div className='row'>
                <tr>
                      <td><strong>{this.props.historyItem.WorkPerformedSummary}</strong></td>


                      { this.props.historyItem.CompletedDate ? <td>
                                  {this.convertDate(this.props.historyItem.CompletedDate)}
                                  </td>: <td> {'n/a'} </td>  }

                </tr>
          </div>
          );
  }
}

So, my issue is, I can't get the table inside of the HistoryContainer.jsx to have a scrollbar, even with the styling in the <tbody>. Any ideas?

Thanks

Answer 1

You need to convert tbody into a block level elements in order for them to be scrollable. Try adding display: block; to tbody and thead.

Answer 2

Got it working. I had to change my code to this

<tbody style={{'height': '300px', 'overflow':'scroll', 'display': 'block'}}>

and also

<thead style={{'display': 'block'}}>