How can I get jsGrid to use Bootstrap styles?

I have a tabular UI that I sketched in HTML with the Bootstrap table style and now that I'm making it functional using jsGrid, I hate it and I want to make jsGrid use the Bootstrap CSS instead of it's own.

In Bootstrap:

In jsGrid:

My mockup code is so simple (repeating rows removed):

<table class="table table-striped light">
  <tr>
    <th>Team</th>
    <th>Agent</th>
    <th>State</th>
    <th>Duration</th>
  </tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td><td>01:39:33</td></tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td><td>01:39:33</td></tr>
  <tr><td>GLAM-pg01-s</td><td>Mildred Drysdale</td><td>Idle</td>
</table>

The thing is, jsGrid only seems to allow CSS to be applied to the ROWS and CELLS, not the overall table.

I'm going to try getting the DOM after it renders and futzing with the table tag after jsGrid writes it in, hopefully that'll do it. But I'm hoping someone who knows jsGrid better can offer a "recognized" procedure to ditch default CSS.

And why is the scroller displayed without a thumb? ugh...

Well, here's what I come up wit - I simply add the classes to the DOM elements after they're rendered by jsGrid. It also corrects faulty scrolling.

function displayData(results) {
  $('#daGrid').jsGrid( {
    width: '100%',
    height: '90%',
    autoload: false,
    selecting: true,
    data: results,
    rowClick: onRowClick,
    fields: chatAgents.layout
  });
  
  correctCSS();
}

function correctCSS() {
  $('table').addClass('table table-striped light');
  var h = $('.jsgrid-grid-body').css('height');
  if( h ) {
    h = h.match((/\d*/));
    if( h[0] > 500 ) {
      $('.jsgrid-grid-body').height(490);
      $('.jsgrid-grid-body').css('overflow-y', 'scroll');
    }
  }
}