Design

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.

Example

Time Click to Sort
TextIcon
Date Sorted NoneClick to Sort
Currency
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

Accessibility

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.

Mixins

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

Table

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.

row-select

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();
}

row-hover

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();
}

table-condensed

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

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

row-striped

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

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

tbody-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

<table
  id="feather-table"
  class="tl1 tr2 tl3 tr4 tr5 tr6 tl7 tc8 tc9 tl10 tr11 tc12 tc13"
  summary="A demo dataset to show feather-table"
></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>
<td class="icon-cell">
  <font-awesome-icon title="test" :icon="icon2"></font-awesome-icon>
</td>

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" />
</td>

SortHeader

Props

NameDescriptionTypeRequiredDefault
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

Labels

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"
};

Events

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

Slots

  • default - the text content of the header

data-ref-ids

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

Accessibility

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