Table with Alphabetical Filtering using TableFilter

Simple table with Alphabetical Filtering capabilities using the TableFilter JavaScript library and Bootstrap.

Codepen: https://codepen.io/astralmemories/pen/QWQqMQo

CSS Requirements:

// Bootstrap
https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css
// TableFilter
https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/style/tablefilter.css

JS Requirements:

// jQuery
https://code.jquery.com/jquery-3.3.1.slim.min.js
// Popper
https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js
// Bootstrap
https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js
// TableFilter
https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tablefilter.js
https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tf-1-2aa33b10e0e549020c12.js

HTML:

<h2>List of Holidays in USA in 2022</h2>
<div class="alphabet-container">
  <button class="btn alphabet-filter" onclick="filter(event);" value="">All</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="A">A</button> 
  <button class="btn alphabet-filter" onclick="filter(event);" value="B">B</button> 
  <button class="btn alphabet-filter" onclick="filter(event);" value="C">C</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="D">D</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="E">E</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="F">F</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="G">G</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="H">H</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="I">I</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="J">J</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="K">K</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="L">L</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="M">M</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="N">N</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="O">O</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="P">P</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="Q">Q</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="R">R</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="S">S</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="T">T</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="U">U</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="V">V</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="W">W</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="X">X</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="Y">Y</button>
  <button class="btn alphabet-filter" onclick="filter(event);" value="Z">Z</button>
</div>
<table class="table" id="holiday-table">
  <thead>
    <tr>
      <th>Holiday Name</th>
      <th>Day</th>
      <th>Date</th>
      <th>Type</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>New Year's Day</td>
      <td>Saturday</td>
      <td>Jan 01</td>
      <td>Federal Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>New Year's Day (in lieu)</td>
      <td>Monday</td>
      <td>Jan 03</td>
      <td>Regional Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Martin Luther King Jr. Day</td>
      <td>Monday</td>
      <td>Jan 17</td>
      <td>Federal Holiday</td>
      <td>3rd Monday in January</td>
    </tr>
    <tr>
      <td>President's Day</td>
      <td>Monday</td>
      <td>Feb 21</td>
      <td>Federal Holiday</td>
      <td>3rd Monday in February</td>
    </tr>
    <tr>
      <td>Easter Sunday</td>
      <td>Sunday</td>
      <td>Apr 17</td>
      <td>Not A Public Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Mother's Day</td>
      <td>Sunday</td>
      <td>May 08</td>
      <td>Not A Public Holiday</td>
      <td>2nd Sunday in May. Not a public holiday</td>
    </tr>
    <tr>
      <td>Memorial Day</td>
      <td>Monday</td>
      <td>May 30</td>
      <td>Federal Holiday</td>
      <td>Last Monday in May</td>
    </tr>
    <tr>
      <td>Juneteenth</td>
      <td>Sunday</td>
      <td>Jun 19</td>
      <td>Federal Holiday</td>
      <td>Emancipation Day</td>
    </tr>
    <tr>
      <td>Father's Day</td>
      <td>Sunday</td>
      <td>Jun 19</td>
      <td>Not A Public Holiday</td>
      <td>3rd Sunday in June. Not a public holiday</td>
    </tr>
    <tr>
      <td>Juneteenth (in lieu)</td>
      <td>Monday</td>
      <td>Jun 20</td>
      <td>Federal Holiday</td>
      <td>Emancipation Day</td>
    </tr>
    <tr>
      <td>Juneteenth</td>
      <td>Monday</td>
      <td>Jun 20</td>
      <td>Federal Holiday</td>
      <td>Emancipation Day</td>
    </tr>
    <tr>
      <td>Independence Day</td>
      <td>Monday</td>
      <td>Jul 04</td>
      <td>Federal Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Labor Day</td>
      <td>Monday</td>
      <td>Sep 05</td>
      <td>Federal Holiday</td>
      <td>1st Monday in September</td>
    </tr>
    <tr>
      <td>US Indigenous People's Day</td>
      <td>Monday</td>
      <td>Oct 10</td>
      <td>Regional Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Columbus Day</td>
      <td>Monday</td>
      <td>Oct 10</td>
      <td>Federal Holiday</td>
      <td>2nd Monday in October</td>
    </tr>
    <tr>
      <td>Veterans Day</td>
      <td>Friday</td>
      <td>Nov 11</td>
      <td>Federal Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Thanksgiving</td>
      <td>Thursday</td>
      <td>Nov 24</td>
      <td>Federal Holiday</td>
      <td>4th Thursday in November</td>
    </tr>
    <tr>
      <td>Day after Thanksgiving</td>
      <td>Friday</td>
      <td>Nov 25</td>
      <td>Regional Holiday</td>
      <td>Day after 4th Thursday in November</td>
    </tr>
    <tr>
      <td>Christmas Day</td>
      <td>Sunday</td>
      <td>Dec 25</td>
      <td>Federal Holiday</td>
      <td></td>
    </tr>
    <tr>
      <td>Christmas Day (in lieu)</td>
      <td>Monday</td>
      <td>Dec 26</td>
      <td>Federal Holiday</td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS:

.alphabet-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.alphabet-filter:hover {
  font-weight: bolder;
  background-color: lightgray;
}
.helpBtn {
  display: none;
}

JS:

// filter by first letter logic
function filter(evt){
  var elm = evt.target;
  var query = elm.value.length > 0 ? tf.stOperator + elm.value : '';
  // set the column's filter value
  tf.setFilterValue(0, query);
  // filter the table
  tf.filter();
  // clear previously marked element
  if(tf.selectedLetter) {
    tf.selectedLetter.classList.remove('btn-primary');
  }
  // mark selected letter
  elm.classList.add('btn-primary');
  // keep reference of selected element
  tf.selectedLetter = elm;
}

var tf = new TableFilter(
  document.querySelector('#holiday-table'),
  {
    base_path: 'https://unpkg.com/tablefilter@latest/dist/tablefilter/',
    start_with_operator: '←',
    paging: {
      length: 10
    },
    rows_counter: {
      text: 'Holidays: '
    },
    col_types: [
      'string', 'string', 'string',
      'string', 'string'
    ],
    //col_widths: [
    //  '75px','350px','350px',
    //  '75px','75px'
    //],
    // hide filters
    on_filters_loaded: function(tf) {
      tf.dom().rows[tf.getFiltersRowIndex()].style.display = 'none';
    },
    // sorting feature
    extensions: [{
      name: 'sort'
    }]
  }
);

tf.init();

// keep reference of selected letter element
tf.selectedLetter = null;