Interactive Table

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

Dependencies

• Custom Checkbox
• Menu
• Menu Bar

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.

Actions #

The Interactive Table component can have different actions based on whether there are selected items or not (see demo).

To the container of the actions, add a data-table-controls attribute equal to the table id.

Add a class of .js-int-table-actions__items-selected to the actions you want to show when at least one item is selected, and a .js-int-table-actions__no-items-selected class to the actions you want to show when no items are selected.

<div data-table-controls="table-1">
  <menu class="js-int-table-actions__no-items-selected">
    <!-- all the actions you want to show when no items are selected -->
  </menu>

  <menu class="js-int-table-actions__items-selected">
    <!-- all the actions you want to show when at least one item is selected -->
  </menu>
</div>

<div id="table-1" class="int-table text-sm js-int-table">
  <!-- table cntent here -->
</div>

Categories

• Data Display > Table

Bug report & feedback

Component Github page ↗