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;