Back to Data Tables-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Data tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/data-tables@14.1.0

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Table of Contents

Edit this section, Opens in new window

Usage

Default markup

<div class="if table-container">
  <span class="if title [heading...]" id="an-id-for-the-table-title">Table title</span>
  <p class="if description" id="an-id-for-the-table-description">Additional description if needed</p>
  <table class="if table" aria-describedby="an-id-for-the-table-description" aria-labelledby="an-id-for-the-table-title">
    <thead class="if">
      <tr class="if">
        <th scope="col" class="if"></th></tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td class="if"></td></tr></tbody>
  </table>
</div>

Sizing

The data table is available in two different row sizes: default and condensed.

Add the .condensed class to table to minimize the spacing in cells.

Name Age Position
John 38 Hitman
John 38 Hitman
John 38 Hitman
John 38 Hitman
Name Age Position
John 38 Hitman
John 38 Hitman
John 38 Hitman
John 38 Hitman
<table class="if table condensed"></table>

In different container layouts

<div class="if block">
  <div class="if grid [wide|fluid|across]">
    <table ></table>
  </div>
</div>
Edit this section, Opens in new window

Behaviours

Interactions

Pointer

A row can be selected:

Name Age Position Office Salary
John Wicker 38 Hitman London 833 000
John Wicker 38 Hitman London 833 000
Expandable 38 Hitman London 833 000
John Wicker 38 Hitman London 83 312 000
<tr class="if is-selected">
  <td class="if">
    <div class="if" style="position:relative;">
      <input
        id="behaviour-selected-row-4"
        type="checkbox"
        checked
        class="if checkbox standalone"
        aria-label="Select this row"
      />
      <label for="behaviour-selected-row-4"></label>
    </div>
  </td></tr>

Sorting

Name Age Birthdate
C 38 1983-11-10
B 37 1983-11-11
A 36 1983-11-12
<table class="if table">
  <thead class="if">
    <tr class="if ">
      <th scope="col" class="if">
        Name<span class="if inline-nowrap" title="Sort column" aria-label="Sort column">
          <span class="if sort"></span
        ></span>
      </th>
      <th scope="col" class="if is-descending">
        Age<span class="if inline-nowrap" title="Sort column" aria-label="Sort column">
          <span class="if sort"></span
        ></span>
      </th>
      <th scope="col" class="if is-ascending">
        Birthdate<span class="if inline-nowrap" title="Sort column" aria-label="Sort column">
          <span class="if sort"></span
        ></span>
      </th>
    </tr>
  </thead>
  <tbody class="if"></tbody>
</table>

Expandable

<table class="if table expandable">
  <thead class="if"></thead>
  <tbody class="if">
    <tr class="if expandable">
      <td class="if" scope="row" tabindex="0" aria-controls="controlled-expandable-content-1" aria-expanded="false">        John Wicker
      </td></tr>
    <tr class="if" id="controlled-expandable-content-1" aria-hidden="true">      <td class="if" colspan="6"></td>
    </tr></tbody>
</table>

Toolbar

Filters
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<div class="if table-toolbar">
  <div class="if filter-search-holder search-field">
    <input type="search" class="if" placeholder="Search table" aria-label="Search/Filter by" />
    <button type="button" class="if reset" aria-label="Reset search"></button>
  </div>
  <div class="if filter-tags-holder"></div>
  <div class="if table-filters" aria-describedby="behaviours-toolbar-table-fiters-title-1">
    <span class="if title" id="behaviours-toolbar-table-fiters-title-1">Filters<span aria-hidden="true">:</span></span>
    <ul class="if dropdown-filter-groups">
      <li class="if">
        <button
          type="button"
          aria-controls="behaviours-toolbar-office-filters-1"
          aria-haspopup="true"
          role="combobox"
          aria-owns="behaviours-toolbar-office-filters-1"
          aria-expanded="true"
          class="if dropdown-filter-button"
        >
          Office
        </button>
        <div class="if dropdown-filter center" id="behaviours-toolbar-office-filters-1" role="listbox">
          <ul class="if" aria-activedescendant="behaviours-toolbar-office-filter-2">
            <li class="if">
              <input
                id="behaviours-toolbar-office-filter-1"
                type="checkbox"
                role="option"
                aria-selected="false"
                data-rel="London"
                class="if checkbox"
              />
              <label class="if" for="behaviours-toolbar-office-filter-1">London</label>
            </li></ul>
        </div>
      </li>
      <li class="if">
        <button
          type="button"
          aria-controls="behaviours-toolbar-availability-filters-1"
          aria-haspopup="true"
          role="combobox"
          aria-owns="behaviours-toolbar-availability-filters-1"
          aria-expanded="true"
          class="if dropdown-filter-button"
        >
          Availability
        </button>
        <div class="if dropdown-filter center" id="behaviours-toolbar-availability-filters-1" role="listbox"></div>
      </li>
    </ul>
  </div>
</div>

Bulk actions

Performing actions on 3 items
Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 83312 000 Available
<div class="if table-bulk-actions [is-open]">
  <button type="button" class="if" data-title="Hire">Hire</button>
  <button type="button" class="if is-hovered" data-title="Send message">Send message</button>
  <button type="button" class="if" data-title="Retire">Retire</button>
  <button type="button" class="if js-table-bulk-cancel" data-title="Cancel">Cancel</button>
  <span class="if description"
    >Performing actions on <strong class="if js-table-bulk-select-selected-items">3 items</strong></span
  >
</div>

Inline actions

Försäkring Betalningssätt Action
Villaförsäkring, LYXVILLAN PÅ SOLSIDAN Helårsvis
Hemförsäkring, Testgatan 1 Helårsvis
Olycksfallsförsäkring, TESTTVÅ, MYPAGES Helårsvis
<button class="if button control text" type="button">
  <span class="if  icon ui clock blue"></span>Ändra betalningssätt
</button>
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Expandable 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 83312 000
<button type="button" class="if button control delete" aria-label="Delete row"></button>
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Expandable 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 83312 000
<button type="button" class="if contextual-menu-button js-table-row-menu" aria-label="Open row menu"></button>
<nav class="if contextual-menu" style="top: 40px; right: 0px;">
  <ul class="if">
    <li class="if">
      <button class="if" type="button">
        Add to watch list
      </button>
    </li>
    <li class="if separator"></li>
    <li class="if">
      <button class="if" type="button">
        <span class="if icon ui trashcan"></span>
        Delete
      </button>
    </li>
  </ul>
</nav>

Modifiers

Striped

Add the .striped class to the table element to get a striped table.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<table class="if table striped"></table>

Highlight row

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<tr class="if is-selected"></tr>

Unread row

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<tr class="if is-unread"></tr>

Interactive row

A row can be interactive:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<tr class="if is-interactive" tabindex="0"></tr>

Hoverable

Add the class .is-hoverable to the table element to let each row be highlighted on hover. Not needed for small tables, preferably on larger tables (datasets, wider) and denser tables.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<table class="if table is-hoverable"></table>

Filled headers

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<thead class="if filled"></thead>
Name John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker
Age 38 38 38 38 38 38
Position Hitman Hitman Hitman Hitman Hitman Hitman
Office London London London London London London
Start date 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971
Salary 833 000 833 000 833 000 833 000 83312 000 833 000
<table class="if table col-left filled"></table>

Sticky

A table can have sticky headers. This might make the table a bit responsive in some cases:

position: sticky can't be used in Chrome/Edge/Opera on <thead> tags, only <th> tags: https://caniuse.com/css-sticky, it's a bug in chrome and edge: https://bugs.chromium.org/p/chromium/issues/detail?id=702927 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16765952/.

So a workaround is required using a mix of position: absolute and position: fixed on scroll.

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123
<div class="if table-container" style="max-height: 20rem; overflow-y: scroll;">
  <table class="if table sticky"></table>
</div>
Name John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker
Age 38 38 38 38 38 38 38 38 38 38 38 38
Position Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman
Office London London London London London London London London London London London London
Start date 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971
Salary 833 000 833 000 833 000 833 000 83312 000 833 000 833 000 833 000 833 000 833 000 83312 000 833 000
<div class="if table-container" style="max-width: 100%; overflow-x: scroll;">
  <table class="if table col-left sticky"></table>
</div>

Status

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<tr class="if [is-ok|is-warning|is-error]"></tr>

If you want to add statuses to every row, use the Status Indicator:

Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Retired
John Wicker 38 Hitman London 83312 000 Available
Wicked Witch 62 Beheader Moscow 622 430 Away
Black Widow 34 Undercover Agent Copenhagen 1 351 400 Dead
Deadpool ?? Pain in the ass ?? Free Available
Spawn 43 Demon New York Free Away
<td class="if"><span class="if status-indicator [active|in-progress|error|success|pause">Away</span></td>

A cell can have different statuses:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<td class="if [is-ok|is-warning|is-error]"></td>

Table container

A table is to be placed inside a table container, <div class="if table-container"> when applicable. It is essentially a wrapper with no extra styling.

However, you can use this wrapper to emphasize a table, by using it as a box, with the if.table-container.box-classes.

Table title

Additional description if needed

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
<div class="if table-container box">
  <span class="if title heading small" id="an-id-for-the-table-title">Table title</span>
  <p class="if description" id="an-id-for-the-table-description">Additional description if needed</p>
  <table class="if table" aria-describedby="an-id-for-the-table-description" aria-labelledby="an-id-for-the-table-title">
    <thead class="if">
      <tr class="if">
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
        <th scope="col" class="if">Position</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if number" style="width: 10rem;">Salary</th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td class="if">John Wicker</td>
        <td class="if">38</td>
        <td class="if">Hitman</td>
        <td class="if">London</td>
        <td class="if">01.01.1971</td>
        <td class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td class="if">John Wicker</td>
        <td class="if">38</td>
        <td class="if">Hitman</td>
        <td class="if">London</td>
        <td class="if">01.01.1971</td>
        <td class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td class="if">John Wicker</td>
        <td class="if">38</td>
        <td class="if">Hitman</td>
        <td class="if">London</td>
        <td class="if">01.01.1971</td>
        <td class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td class="if">John Wicker</td>
        <td class="if">38</td>
        <td class="if">Hitman</td>
        <td class="if">London</td>
        <td class="if">01.01.1971</td>
        <td class="if number">833 000</td>
      </tr>
    </tbody>
  </table>
  <div class="if table-global-actions">
    <button type="button" class="if button text"><span class="if icon ui document-pdf blue"></span>Export PDF</button
    ><button type="button" class="if button text">
      <span class="if icon ui document-xlsx blue"></span>Export Spreadsheet
    </button>
  </div>
</div>
Edit this section, Opens in new window

Accessibility

The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid.

Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers.

Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

Considerations

  • The data table headers accurately describe the data contained in the rows and columns.
  • If the data table has a labels it should be clear and concise.
  • If the data table has a description, aria-describedby should be set on the table element with a value referring to the element containing the description.

To meet the WCAG 2.1 requirements, every table must have the correct attributes set.

Label

Every table should have a label. If it's a separate element, use aria-labelledby; otherwise use aria-label:

<table class="if table" aria-label="A label"></table>

Or:

<table class="if table" aria-labelledby="id-to-label-element"></table>

Description

Not every table needs to have a caption or description, but every table that does should use aria-describedby to connect it with that element:

<table class="if table" aria-describedby="id-to-description-element"></table>

Identify column and row headers

Identify the direction of the table headers. If the headers are horizontally, use scope="col" on the ths:

Header Header Header Header
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell
The headers are in the first row
<table class="if" >
  <thead class="if">
    <tr class="if">
      <th class="if" scope="col"></th>
      <th class="if" scope="col"></th>
      <th class="if" scope="col"></th>
      <th class="if" scope="col"></th>
    </tr>
  </thead>
</table>

If the headers are vertically, use scope="row" on the ths:

Header Cell Cell Cell
Header Cell Cell Cell
Header Cell Cell Cell
The headers are in the first column
<table class="if" >
  <tbody class="if">
    <tr class="if">
      <th class="if" scope="row"></th>      <td class="if"></td>
      <td class="if"></td>
      <td class="if"></td>
    </tr>
  </tbody>
</table>

The rule that applies to layout tables also applies to data tables. Let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required of those with low vision. If cell widths need to be defined, use relative values, such a percentages, rather than pixel values. Defined cell heights should generally be avoided so the cell can expand downward to accommodate its content - something especially useful for users with low vision that may enlarge text content.

Resources

Edit this section, Opens in new window

Responsive

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

Mobile table version 1

This table is displayed as separate cards with a table inside, headings to the left, content to the right, in mobile view

Mobile table version 1

<div class="if table-container">
  <table
    class="if table responsive-data"
    aria-describedby="table-responsive-data-description-1"
    aria-labelledby="table-responsive-data-title-1"
  >
    <thead class="if filled">
      <tr class="if">
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
        <th scope="col" class="if">Position</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
    </tbody>
    <tfoot class="if">
      <tr class="if">
        <td class="if" colspan="9"></td>
        <td class="if number" colspan="2">123 123 123</td>
      </tr>
    </tfoot>
  </table>
</div>

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

Mobile table version 2

This table is displayed as a scrollable table in mobile view

Mobile table version 2

<div class="if table-container responsive md">
  <table
    class="if table responsive-scroll"
    aria-describedby="table-responsive-scroll-description-1"
    aria-labelledby="table-responsive-scroll-title-1"
  >
    <thead class="if filled">
      <tr class="if">
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
        <th scope="col" class="if">Position</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
    </tbody>
    <tfoot class="if">
      <tr class="if">
        <td class="if" colspan="9"></td>
        <td class="if number" colspan="2">123 123 123</td>
      </tr>
    </tfoot>
  </table>
</div>

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

The table is too large for this view. Please download or open in new tab.

Download as PDF

Mobile table version 3

The table is hidden and export methods are shown in mobile view. If the usage is to modify, download, if it is to preview, open in new tab

Mobile table version 3

<div class="if table-container responsive sm export">
  <table
    class="if table responsive-export"
    aria-describedby="table-responsive-export-description-1"
    aria-labelledby="table-responsive-export-title-1"
  >
    <thead class="if filled">
      <tr class="if">
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
        <th scope="col" class="if">Position</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Office</th>
        <th scope="col" class="if">Start date</th>
        <th scope="col" class="if">Salary</th>
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">32</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if">Hitman</td>
        <td data-col="Office" class="if">London</td>
        <td data-col="Start date" class="if">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
    </tbody>
    <tfoot class="if">
      <tr class="if">
        <td class="if" colspan="9"></td>
        <td class="if number" colspan="2">123 123 123</td>
      </tr>
    </tfoot>
  </table>
  <div class="if export" style="flex-direction: column;">
    <p class="if text body">The table is too large for this view. Please download or open in new tab.</p>
    <a
      href="https://github.com/simonbengtsson/jsPDF-AutoTable"
      target="_blank"
      class="if text button export js-tab-export-pdf"
      style=" margin-bottom: 0;width: auto; min-width: 0;"
      ><span class="if icon ui document-pdf blue"></span>Download as PDF</a
    >
    <button
      type="button"
      class="if text button export js-tab-export-csv"
      style=" margin-bottom: 0;width: auto; min-width: 0;"
    >
      <span class="if icon ui document-xlsx blue"></span>Download as Spreadsheet
    </button>
    <button
      type="button"
      class="if text button export js-tab-export-csv"
      style=" margin-bottom: 0;width: auto; min-width: 0;"
    >
      <span class="if icon ui share blue"></span>Open in new tab
    </button>
  </div>
</div>

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Mobile table version 4

The preselected rows are hidden in mobile view. This method should either be done manually with css, i.e. setting the cells(columns) to be hidden, or by JavaScript

Mobile table version 4

<div class="if table-container">
  <table
    class="if table"
    aria-describedby="table-responsive-selective-description-1"
    aria-labelledby="table-responsive-selective-title-1"
  >
    <thead class="if">
      <tr class="if">
        <th scope="col" class="if">Name</th>
        <th scope="col" class="if">Age</th>
        <th scope="col" class="if u-hidden-down--md">Position</th>
        <th scope="col" class="if u-hidden-down--md">Office</th>
        <th scope="col" class="if u-hidden-down--md">Start date</th>
        <th scope="col" class="if">Salary</th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if u-hidden-down--md">Hitman</td>
        <td data-col="Office" class="if u-hidden-down--md">London</td>
        <td data-col="Start date" class="if u-hidden-down--md">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if u-hidden-down--md">Hitman</td>
        <td data-col="Office" class="if u-hidden-down--md">London</td>
        <td data-col="Start date" class="if u-hidden-down--md">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if u-hidden-down--md">Hitman</td>
        <td data-col="Office" class="if u-hidden-down--md">London</td>
        <td data-col="Start date" class="if u-hidden-down--md">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
      <tr class="if">
        <td data-col="Name" class="if">John Wicker</td>
        <td data-col="Age" class="if">38</td>
        <td data-col="Position" class="if u-hidden-down--md">Hitman</td>
        <td data-col="Office" class="if u-hidden-down--md">London</td>
        <td data-col="Start date" class="if u-hidden-down--md">01.01.1971</td>
        <td data-col="Salary" class="if number">833 000</td>
      </tr>
    </tbody>
  </table>
</div>

Type Purpose
Default The default data table comes with a base style with only the title, header, and table elements. rows.
With selection Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected.
With expansion The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information.

Mobile table version 5

This table is displayed like a definition list with key-value pairs.

Mobile table version 5

<div class="if table-container responsive">
  <table
    class="if table responsive-key-value"
    aria-describedby="table-responsive-key-value-description-2"
    aria-labelledby="table-responsive-key-value-title-2"
  >
    <thead class="if filled">
      <tr class="if">
        <th class="if" style="width: 10rem;">
          Type
        </th>
        <th class="if">
          Purpose
        </th>
      </tr>
    </thead>
    <tbody class="if">
      <tr class="if">
        <td class="if">Default</td>
        <td class="if">
          The default data table comes with a base style with only the title, header, and table elements. rows.
        </td>
      </tr>
      <tr class="if">
        <td class="if">With selection</td>
        <td class="if">
          Batch actions are functions that may be performed on multiple items within a table. This type of table enables
          the user to select individual rows and apply an action. A batch action toolbar appears when table rows are
          selected.
        </td>
      </tr>
      <tr class="if">
        <td class="if">With expansion</td>
        <td class="if">
          The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed
          and can be expanded to reveal extra information.
        </td>
      </tr>
    </tbody>
  </table>
</div>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

Bug Fixes

  • 🐛 Fix responsive table for key-value with condensed table (5824e14)
  • 🐛 Typo for usage of the word and class name description (9d0c747)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Bug Fixes

  • 🐛 Fix table border issue on webkit (6278788)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.1.5 (2021-09-01)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Fix typo for aria-labelledby (9b0c9df)
  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • 🐛 Fix contextual menu in docs, dev and demo (4e869e1)
  • 🐛 Update references (c08f107)

Code Refactoring

Features

  • 🎸 Extract components from selection control (50607a4), closes #336508
  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • 🧨 Selection controls is no more. Has ceased to be. Bereft of life, it

rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox

10.0.0 (2021-02-15)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

9.0.0 (2021-01-18)

  • Merged PR 34894: fix: 🐛 Table filter tag alignment (9611a04), closes #303471

Bug Fixes

BREAKING CHANGES

  • 🧨 Table toolbar structure
  • 🧨 Table toolbar structure

Bug Fixes

13.1.5 (2021-09-01)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Fix typo for aria-labelledby (9b0c9df)
  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • 🐛 Fix contextual menu in docs, dev and demo (4e869e1)
  • 🐛 Update references (c08f107)

Code Refactoring

Features

  • 🎸 Extract components from selection control (50607a4), closes #336508
  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • 🧨 Selection controls is no more. Has ceased to be. Bereft of life, it

rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox

10.0.0 (2021-02-15)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

9.0.0 (2021-01-18)

  • Merged PR 34894: fix: 🐛 Table filter tag alignment (9611a04), closes #303471

Bug Fixes

BREAKING CHANGES

  • 🧨 Table toolbar structure
  • 🧨 Table toolbar structure

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.43.0 (2020-10-27)

Features

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling for data-tables (68ae01c)

6.32.0 (2020-09-27)

Features

  • 🎸 Add a fifth mobile version for data-tables (ef6a0d4)

6.31.0 (2020-09-25)

Bug Fixes

  • 🐛 Adjust data-table styling according to latest feedback (9943ffd)

Features

  • 🎸 Add new component: Data-tables (cfbce03)
Edit this section, Opens in new window
Contact us, Opens in new window