JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.css" />

<div class="table-responsive">
  <table id="tblCohort" class="table table-sm">
    <thead style="font-size: x-small">
      <tr>
        <td>Student ID</td>
        <td>Grade</td>
        <td>School</td>
        <td>Status</td>
        <td class="sec1">Section 1 Stuff</td>
        <td class="sec1">Section 1 Stuff Also</td>
        <td class="sec2">Section 2</td>
        <td class="sec2">Section 2 Other Stuff</td>
      </tr>
    </thead>
    <tbody style="font-size: smaller">
      <tr>
        <td>1</td>
        <td>10</td>
        <td>slitherin</td>
        <td>Fair</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for...

JavaScript

var counter = 1;
var dtab = $('#tblCohort').DataTable({
  paging: false,
  dom: 'Brt',
  buttons: [{
      extend: 'collection',
      text: 'Section Visibility',
      buttons: []
    },
    'copy', 'excel', 'pdf'
  ]
});

dtab.button().add('0-0', {
  extend: 'colvisGroup',
  text: 'Hide Section 1',
  className: 'hidesec1',
  hide: '.sec1'
})

dtab.button().add('0-1', {
  extend: 'colvisGroup',
  text: 'Show Section 1',
  className: 'showsec1',
  show: '.sec1'
})

dtab.button().add('0-2', {
  extend: 'colvisGroup',
  text: 'Hide Section 2',
  className: 'hidesec2',
  hide: '.sec2'
})

dtab.button().add('0-3', {
  extend: 'colvisGroup',
  text: 'Show Section 2',
  className: 'showsec2',
  show: '.sec2'
})


$('.hidesec1').click(function() {
  alert('hide sec 1');
})