Tables have been designed to elevate the data at all times. The purpose of the Table is to organize data so users may gain insights around the data by making comparisons. Tables should be organized by default, sorted or alphabetized. Tables should ensure that any interaction is made clear to the user, either using hover states or color. Tables should be easy to use and easy to interpret.


Time Click to Sort
Date Sorted NoneClick to Sort
2:56:26 pmExample 107/25/2016£ 178.45
2:23:06 pmExample 204/12/2006£ 17.00
Rows per page
1 - 10 of 100

Table Functionality

Row Click

If the row is meant to have a click action, you must use the rowAction directive provided. The reason for using this over the click handler is we safeguard against menus and other action items inside the table from triggering the row action.

In the above example notice that clicking the checkbox or any menu item does not trigger the row action to be logged in the console. This is the benefit of the rowAction directive.

Button Actions


In both of the actions examples above you will notice screen reader (.sr-only) only text as well as verbose labels. When providing actions in the table row it is important to provide some indicator as to what row the user is acting upon. A little bit extra information can really help provide context to make an informed decision.

Table Styles

@featherds/table has predefined table classes that allow you to effectively style a basic table as required. It also provides a common component for sorting that you can include if you require.


Table styling is exposed through various mixins that can be combined to produce the desired outcome.


All tables must include at least this mixin in order to achieve the required styling.

@import "@featherds/table/scss/table";
table {
  @include table();

The table mixin provide basic table styling as well as the Column alignment, Icon cells and Checkbox cells classes.


The row-select mixin adds the .selected class which can be set on tr elements to show that the row is selected.

@import "@featherds/table/scss/table";
table {
  @include table();
  @include row-select();


The row-hover mixin adds styling to each row when it is hovered over.

@import "@featherds/table/scss/table";
table {
  @include table();
  @include row-hover();


The table-condensed mixin reduces the sizing of the table.

@import "@featherds/table/scss/table";
table {
  @include table();
  @include table-condensed();


The row-striped mixin adds striping pattern to the table.

@import "@featherds/table/scss/table";
table {
  @include table();
  @include row-striped();


The tbody-striped mixin adds striping pattern to the table by striping the underlying tbody elements. This is useful when you need to stripe grouped rows. The best way to group rows is to use multiple tbodys.

@import "@featherds/table/scss/table";
table {
  @include table();
  @include tbody-striped();

Table Classes

These classes are available when you use the Table mixin.

Column alignment

There are a set of auto-generated classes to address the challenge of left/right/center alignment of columns. These classes take the format: prefix | alignment | column number

  • Prefix is t (table)
  • Alignment is a single letter - l | r | c - representing left, right and center respectively
  • Column Number is the number of the column you wish to apply it to, starting at 1

tl1 means the 1st column will be aligned left tr5 means the 5th column will be aligned right tc32 means the 32nd column will be aligned center

  class="tl1 tr2 tl3 tr4 tr5 tr6 tl7 tc8 tc9 tl10 tr11 tc12 tc13"
  summary="A demo dataset to show feather-table"

Columns default to being left aligned.

Icon cells

If you want to use a cell to only display an icon, and have it take the appropriate size/spacing etc, you can apply the icon-cell class to affected cells.

<td class="icon-cell">
  <FeatherIcon :icon="icon" />
<td class="icon-cell">
  <font-awesome-icon title="test" :icon="icon2"></font-awesome-icon>

Checkbox cells

Similarly, if your cell only contains a checkbox, you can have it styled accordingly with the checkbox class.

<td class="checkbox-cell">
  <FeatherCheckbox v-model="checkbox1" label="Checkbox1" />



sortcurrent applied sort to the columnasc, desc, nonetrue-
propertyshould be the name of the property that is to be sorted. This is only used to help you identify the sorting in the sort-changed eventStringtrue-
labelsobject containing labels to be used by this component. Mainly used for i18n or customization of labels. See Labels exampleObjectfalseSee Labels example


Text labels for can be customized via the labels property. The default labels values are:

  sortAscending: "Sorted Ascending",
  sortDescending: "Sorted Descending",
  sortNone: "Not Sorted",
  clickSort: "Click to Sort"


  • sort-changed - triggered when sorting should be changed. Emits object { value: asc|desc|none, property }


  • default - the text content of the header


  • feather-sort-header - the base element of the header


Current known issues:

  • Announcement of Sorted None in the button name when not sorted. This is to handle the lack of announcement by NVDA which does not announce the aria-sort attribute when it is set to none
  • Duplicate announcement of sort changing in JAWS. This is due to NVDA not announcing a sort change we must announce our own which causes duplication in JAWS