🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Interactive Table

Table with the option of sorting data and selecting rows to perform specific actions.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

Tables can be used to organize data in a two-dimensional grid so that correlation is clear to users.

The Interactive Table component comes with the option of sorting the displayed data and selecting rows to perform specific actions.

Sorting #

The Interactive Table allows users to sort data in ascending order, descending order or reset them to the initial order. You can sort strings, numbers and dates.

If you are filtering dates, you'll need to specify the format you are using: add a data-date-format to the th.int-table__cell--sort element inside the <thead> element:

<th class="int-table__cell int-table__cell--th int-table__cell--sort js-int-table__cell--sort" data-date-format="dd-mm-yyyy">
  <div class="flex items-center">
    <span>Date</span>
  </div>
</th>

For example, you can set data-date-format="mm-dd-yyyy" if you are using the United States date format.

The sorting feature has been developed to be accessible to both Screen Reader users and keybord users; each th.int-table__cell--sort includes a list of three radio inputs (one input for each sorting order) that is visually hidden using the sr-only class:

<th class="int-table__cell int-table__cell--th int-table__cell--sort  js-int-table__cell--sort">
  <div class="flex items-center">
    <span>Name</span>
    
    <svg class="icon icon--xxs margin-left-xxxs int-table__sort-icon" aria-hidden="true" viewBox="0 0 12 12"><polygon class="arrow-up" points="6 0 10 5 2 5 6 0"/><polygon class="arrow-down" points="6 12 2 7 10 7 6 12"/></svg>
  </div>

  <ul class="sr-only js-int-table__sort-list">
    <li>
      <input type="radio" name="sortingName" id="sortingNameNone" value="none" checked>
      <label for="sortingNameNone">No sorting</label>
     </li>

    <li>
      <input type="radio" name="sortingName" id="sortingNameAsc" value="asc">
      <label for="sortingNameAsc">Sort in ascending order</label>
    </li>
      
    <li>
      <input type="radio" name="sortingName" id="sortingNameDes" value="desc">
      <label for="sortingNameDes">Sort in descending order</label>
    </li>
  </ul>
</th>

Screen Readers announce the three different options allowing user to select one of the available sorting. At the same time, keyboard users can move their focus to the th.int-table__cell--sort and control the sorting.

Bug Report & Feedback

To report a bug or get notified if we update this component, visit the GitHub repository.

If you'd like to suggest new components, visit our components board.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us