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="row">
  <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>
        </tr>
      </thead>
      <tbody style="font-size: smaller">
        <tr>
          <td>1</td>
          <td>10</td>
          <td>slitherin</td>
          <td>Fair</td>
        </tr>
        <tr>
          <td>2</td>
          <td>11</td>
          <td>Griffindork</td>
          <td>Middlin</td>
        </tr>
        <tr>
          <td>3</td>
          <td>10</td>
         ...

JavaScript

var counter = 1;
var dtab = $('#tblCohort').dataTable({
  paging: false,
  scrollX: true,
  scrollY: '45vh',
  scrollCollapse: true,
  fixedColumns: {
    leftColumns: 3
  },
  dom: 'fBrti',
  buttons: [
    'copy', 'excel', 'pdf'
  ]
});

dtab.button().add(0, {
  action: function() {
    this.remove();
  },
  text: 'Button ' + (counter++),
});