Table with Alphabetical Filtering Example 2

Example:

HR Guidance Library
Accommodations Guidance & Webpages ADA Guidelines on Disability & Access Accommodations - CU Boulder Policy ADA & Accessability Office - Campus Office Workplace Accommodations for Working Mothers - HR Guidance Forms & Tools Accommodations Requests & Appeals Who to Contact Office of Institutional Equity & Compliance ADA: 303-492-9725 Website: https://www.colorado.edu/oiec/ada-accessibility
Acting & Interim Appointments Guidance & Webpages Acting & Interim Appointments for University Staff Positions - CU System APS Forms & Tools Who to Contact Position Managment & Compensation
Additional Pay Guidance & Webpages Compensation - HR Guidance Issue Additional Pay - HCM Guidance Forms & Tools Additional Pay Form Who to Contact Compensation: Position Management & Compensation Transactions: HR Service Center Support: HR Service Center hrsc@colorado.edu Service Center Directory Non-Service Center Support: Employee Services payroll@cu.edu 303-860-4299
Administrative Leave Guidance & Webpages Administrative Leave - HR Guidance Paid Administrative Leave for University Staff & Faculty on Twelve-Month Appointments - CU Boulder Policy Paid Administrative Leave for University Staff and Faculty on Twelve-Month Appointments - CU System APS Forms & Tools Who to Contact Employee Relations
Background Checks Guidance & Webpages Background Checks - HR Guidance Background Check Policy - CU Boulder Policy Background Check Policy Appendix A Forms & Tools Who to Contact Talent Acquisition Team
Behavioral Intervention Team Guidance & Webpages Threat Assessment Program and the Behavioral Intervention Team - HR Guidance Forms & Tools Concerning Incident Referral Form Who to Contact intervention@colorado.edu If you need immediate assistance, contact: 303-492-6475 Assaults or threats of physical harm that require immediate police attention should be reported to the Police Department by dialing 911.
Benefits Guidance & Webpages Benefits & Wellness Website - CU System Website Forms & Tools Who to Contact Employee Services, CU System Office that serves all four campuses Phone: 303-860-4200, option 3 Toll-free: 1-855-216-7740, option 3 Para Español, escoja 4 Hours: 8 a.m. to 5 p.m. Email:benefits@cu.edu
Call-back Pay Guidance & Webpages Temporary, Additional and Premium Pay - HR Guidance Forms & Tools Who to Contact Position Management & Compensation
Career Development Guidance & Webpages Career Development - HR Guidance Employee Learning - HR Guidance Forms & Tools Who to Contact Organization and Employee Development Staff Dahlia Smith, LCSW Staff Career Counselor Dahlia.Smith@colorado.edu
Chancellor's Employee of the Year Guidance & Webpages Chancellor's Employee of the Year Award - HR Guidance Forms & Tools Who to Contact Chancellor's Office: Mark.Berge@colorado.edu
Children in the Workplace Guidance & Webpages Guidelines for Children in the Workplace and/or Classroom - CU Boulder Policy Forms & Tools Who to Contact Employee Relations
Clery Act Guidance & Webpages Clery Act & Campus Security Authorities - CU Boulder Policy Reports as required by the Jeanne Clery Disclosure of Campus Security Policy and Campus Crime Statistics Act (the Clery Act). The University will provide prospective employees with a paper copy of these reports upon request. Forms & Tools Who to Contact clery@colorado.edu

Code:

<!-- TableFilter JavaScript Library - CSS Styles -->
<link href="https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/style/tablefilter.css" rel="stylesheet" />
<style type="text/css">
  /* Custom Table Styles */
  .alphabet-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .alphabet-filter:hover {
    font-weight: bolder;
    background-color: #EAEAEA;
  }
  .helpBtn {
    display: none;
  }
  #hr-guidance-library thead {
    display: none;
  }
  /* Details Summary Styles */
  details[open] summary ~ * {
    animation: open 0.3s ease-in-out;
  }
  @keyframes open {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  details summary::-webkit-details-marker {
    display: none;
  }
  details summary {
    width: 100%;
    padding: 0.5rem 0;
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    list-style: none;
  }
  details summary:after {
    content: "+";
    color: black;
    position: absolute;
    font-size: 1.75rem;
    line-height: 0;
    margin-top: 0.75rem;
    right: 0;
    font-weight: 200;
    transform-origin: center;
    transition: 200ms linear;
  }
  details[open] summary:after {
    transform: rotate(45deg);
    font-size: 2rem;
  }
  details .row {
    border: 2px solid #EAEAEA;
    padding-top: 15px;
  }
</style>
<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="hr-guidance-library">
  <thead>
    <tr>
      <th style="cursor: pointer; text-align: center;">HR Guidance Library
      </th>
    </tr>
  </thead>
  <tbody>
	  
    <tr>
      <td>
        <details>
          <summary>Accommodations
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/oiec/ada-accessibility">ADA Guidelines on Disability &amp; Access Accommodations</a>&nbsp;<em>-&nbsp;CU Boulder Policy</em></li>
                <li><a href="https://www.colorado.edu/oiec/ada-accessibility">ADA &amp; Accessability Office</a>&nbsp;<em>- Campus Office</em></li>
                <li><a href="https://www.colorado.edu/hr/workplace-accommodations-nursing-mothers">Workplace Accommodations for Working Mothers</a>&nbsp;-&nbsp;<em>HR Guidance</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
              <p><a href="https://www.colorado.edu/oiec/ada-accessibility/employment-accommodations/accommodations-requests-appeals">Accommodations Requests &amp; Appeals</a>
              </p>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p>Office of Institutional Equity &amp; Compliance
                <br />
                ADA:&nbsp;303-492-9725
                <br />
                Website:&nbsp;<a href="https://www.colorado.edu/oiec/ada-accessibility">https://www.colorado.edu/oiec/ada-accessibility</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary>Acting &amp; Interim Appointments
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.cu.edu/ope/aps/5013">Acting &amp; Interim Appointments for University Staff Positions</a>&nbsp;-<em>&nbsp;CU System APS</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/position-management-compensation">Position Managment &amp; Compensation</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary>Additional Pay
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/compensation">Compensation&nbsp;</a>&nbsp;- <em>HR Guidance</em></li>
                <li><a href="https://www.cu.edu/hcm-community/pay-transactions/issue-additional-pay">Issue Additional Pay</a>&nbsp;<em>- HCM Guidance</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><i class="fa fa-link"></i> <a href="https://www.cu.edu/hcm-community/additional-pay">Additional Pay Form</a></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <h4><strong>Compensation:&nbsp;</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/position-management-compensation">Position Management &amp; Compensation</a>
              </p>
              <h4><strong>Transactions:&nbsp;</strong>
              </h4>
              <h5><em>HR Service Center Support:&nbsp;</em>
              </h5>
              <p>HR Service Center
                <br />
                <a href="mailto:hrsc@colorado.edu">hrsc@colorado.edu</a>
                <br />
                <a href="https://www.colorado.edu/hr/node/303">Service Center Directory</a>
              </p>
              <h5><em>Non-Service Center Support:</em>
              </h5>
              <p>Employee Services
                <br />
                <a href="mailto:payroll@cu.edu">payroll@cu.edu</a>
                <br />
                303-860-4299
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary>Administrative Leave
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/leave/#administrative-89">Administrative Leave</a> - <em>HR Guidance</em>
                  <ul>
                    <li><a href="http://www.colorado.edu/policies/paid-administrative-leave-university-staff-and-faculty-twelve-month-appointments">Paid Administrative Leave for University Staff &amp; Faculty on Twelve-Month Appointments</a>&nbsp;<em>- CU Boulder Policy</em></li>
                    <li><a href="https://www.cu.edu/ope/aps/5021">Paid Administrative Leave for University Staff and Faculty on Twelve-Month Appointments</a><em>&nbsp;-&nbsp;CU System APS</em></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/employee-relations">Employee Relations</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Background Checks 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/background-checks">Background Checks</a>&nbsp;- <em>HR Guidance</em>
                  <ul>
                    <li><a href="http://www.colorado.edu/policies/background-check-policy">Background Check Policy</a><em>&nbsp;-&nbsp;CU Boulder Policy</em>
                      <ul>
                        <li><a href="https://www.colorado.edu/hr/background-check-policy-appendix">Background Check Policy Appendix A</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/talent-acquisition">Talent Acquisition Team</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Behavioral Intervention Team 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/behavioral-intervention-team-threat-assessment">Threat Assessment Program and&nbsp;the Behavioral Intervention Team</a>&nbsp;- <em>HR Guidance</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
              <p><a class="button button-blue" href="https://cuboulder.qualtrics.com/jfe/form/SV_dcHqJpkGQGYTXqC">Concerning Incident Referral Form</a>
              </p>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <h4><a href="mailto:intervention@colorado.edu">intervention@colorado.edu</a>
              </h4>
              <h4>If you need immediate assistance, contact:
              </h4>
              <p><i class="fa fa-phone"></i> 303-492-6475
              </p>
              <p><em>Assaults or threats of physical harm that require immediate police attention should be reported to the Police Department by dialing 911.</em>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Benefits 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.cu.edu/employee-services/benefits-wellness">Benefits &amp; Wellness Website</a> - <em>CU System Website</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p>Employee Services, CU System Office that serves all four campuses
              </p>
              <ul class="list-style-nobullet">
                <li><strong>Phone:</strong>&nbsp;303-860-4200, option 3</li>
                <li><strong>Toll-free:</strong>&nbsp;1-855-216-7740, option 3</li>
                <li>Para Español, escoja 4</li>
                <li><strong>Hours:</strong>&nbsp;8 a.m. to 5 p.m.&nbsp;</li>
                <li><strong>Email:</strong><a href="mailto:benefits@cu.edu">benefits@cu.edu</a></li>
              </ul>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Call-back Pay 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/compensation">Temporary, Additional and Premium Pay</a>&nbsp;<em>- HR Guidance</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/position-management-compensation">Position Management &amp; Compensation</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Career Development 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/learning-development/career-development">Career Development</a>&nbsp;- <em>HR Guidance</em>
                <br />
                <a href="https://www.colorado.edu/hr/learning-development/open-enrollment">Employee Learning</a>&nbsp;- <em>HR Guidance</em>
              </p>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/organization-employee-development">Organization and Employee Development</a>
              </p>
              <p><strong>Staff</strong>
                <br />
                Dahlia Smith, LCSW
                <br />
                Staff Career Counselor
                <br />
                <a href="mailto:Dahlia.Smith@colorado.edu">Dahlia.Smith@colorado.edu</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Chancellor's Employee of the Year 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/hr/chancellors-employee-year-award">Chancellor's Employee of the Year Award</a>&nbsp;- <em>HR Guidance</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p>Chancellor's Office: <a href="mailto:Mark.Berge@colorado.edu">Mark.Berge@colorado.edu</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Children in the Workplace 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fa fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="https://www.colorado.edu/policies/guidelines-children-workplace-andor-classroom">Guidelines for Children in the Workplace and/or Classroom</a>&nbsp;<em>- CU Boulder Policy</em></li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="https://www.colorado.edu/hr/about-hr/employee-relations">Employee Relations&nbsp;</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
    <tr>
      <td>
        <details>
          <summary> Clery Act 
          </summary>
          <div class="row">
            <div class="col">
              <h4><i class="fal fa-link"></i> <strong>Guidance &amp; Webpages</strong>
              </h4>
              <ul class="list-style-nobullet">
                <li><a href="http://www.colorado.edu/police/clery">Clery Act &amp; Campus Security Authorities</a>&nbsp;<em>-&nbsp;CU Boulder Policy</em>
                  <ul>
                    <li><em>Reports as required by the Jeanne Clery Disclosure of Campus Security Policy and Campus Crime Statistics Act (the Clery Act). The University will provide prospective employees with a paper copy of these reports upon request.&nbsp;</em></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="col">
              <h4><i class="fal fa-copy"></i>&nbsp;<strong>Forms &amp; Tools</strong>
              </h4>
            </div>
            <div class="col">
              <h4><i class="fal fa-phone"></i>&nbsp;<strong>Who to Contact</strong>
              </h4>
              <p><a href="mailto:clery@colorado.edu">clery@colorado.edu</a>
              </p>
            </div>
          </div>
        </details>
      </td>
    </tr>
	  
  </tbody>
</table>
<!-- TableFilter JavaScript Library https://www.tablefilter.com/alphabetical-pager.html -->
<script src="https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tablefilter.js">
</script>
<script src="https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tf-1-2aa33b10e0e549020c12.js">
</script>
<script>
  // 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
    // use the column index number starting from 0
    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('#hr-guidance-library'),
    {
      base_path: 'tablefilter/',
      start_with_operator: '←',
      paging: {
        length: 10
      },
      rows_counter: {
        text: 'Rows: '
      },
      //col_types: [
      //  'string'
      //],
      // hide filters
      on_filters_loaded: function(tf) {
        tf.dom().rows[tf.getFiltersRowIndex()].style.display = 'none';
      },
      // sorting feature
      //extensions: [{
      //  name: 'sort'
      //}]
    }
  );
  document.addEventListener("DOMContentLoaded", function(event) {
    tf.init();
    // keep reference of selected letter element
    tf.selectedLetter = null;
  });
</script>