Back to Data Tables-guidelines

CSS ComponentThe latest version of this package is: 17.0.14, 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@17.0.14

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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 three different row sizes: Light (default), Medium and Heavy.

Add the .medium or .heavy class to table to minimize the spacing in cells.

.light is the default spacing.

NameAgePosition
John38Hitman
John38Hitman
John38Hitman
John38Hitman
NameAgePosition
John38Hitman
John38Hitman
John38Hitman
John38Hitman
NameAgePosition
John38Hitman
John38Hitman
John38Hitman
John38Hitman
<table class="if table [heavy|medium|light]"></table>
Edit this section, Opens in new window

Behaviours

Interactions

Pointer

A row can be selected:

NameAgePositionOfficeSalary
John Wicker38HitmanLondon833 000
John Wicker38HitmanLondon833 000
Expandable38HitmanLondon833 000
John Wicker38HitmanLondon83 312 000
<tr class="if is-selected">
  <td class="if">
    <div class="if" style="position:relative;">
      <input
        id="behaviour-selected-row-4"
        type="checkbox"
        defaultChecked
        class="if checkbox standalone"
        aria-label="Select this row"
      />
      <label for="behaviour-selected-row-4"></label>
    </div>
  </td></tr>

Sorting

To be able to utilize this feature properly, you will need the JavaScript from @ids-js/data-tables

NameAgeBirthdate
C381983-11-10
B371983-11-11
A361983-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

To be able to utilize this feature properly, you will need the JavaScript from @ids-js/data-tables

<table class="if table expandable">
  <thead class="if"></thead>
  <tbody class="if">
    <tr class="if expandable">
      <td class="if"><span class="if" role="button" aria-controls="description-1" aria-expanded="false" tabindex="0">John Wicker</span></td></tr>
    <tr class="if" id="description-1" aria-hidden="true">      <td class="if" colspan="6"></td>
    </tr></tbody>
</table>

Toolbar

To be able to utilize this feature properly, you will need the JavaScript from @ids-js/data-tables.

You are also required to use the @ids-core/dropdown-filter-package.

Filters
NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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

To be able to utilize this feature properly, you will need the JavaScript from @ids-js/data-tables

Performing actions on 3 items
NameAgePositionOfficeSalaryAvailability
John Wicker38HitmanLondon833 000Available
John Wicker38HitmanLondon833 000Available
Expandable38HitmanLondon833 000Available
John Wicker38HitmanLondon83312 000Available
<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äkringBetalningssättAction
Villaförsäkring, LYXVILLAN PÅ SOLSIDANHelårsvis
Hemförsäkring, Testgatan 1Helårsvis
Olycksfallsförsäkring, TESTTVÅ, MYPAGESHelårsvis
<button class="if button control text" type="button">
  <span class="if  icon ui clock blue"></span>Ändra betalningssätt
</button>
NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
Expandable38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.197183312 000
<button type="button" class="if button control delete" aria-label="Delete row"></button>
NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
Expandable38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.197183312 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.

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<table class="if table striped"></table>

Highlight row

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<tr class="if is-selected"></tr>

Unread row

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<tr class="if is-unread"></tr>

Interactive row

A row can be interactive:

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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.

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<table class="if table is-hoverable"></table>

Filled headers

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<thead class="if filled"></thead>
NameJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn Wicker
Age383838383838
PositionHitmanHitmanHitmanHitmanHitmanHitman
OfficeLondonLondonLondonLondonLondonLondon
Start date01.01.197101.01.197101.01.197101.01.197101.01.197101.01.1971
Salary833 000833 000833 000833 00083312 000833 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.

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
123 123 123
<div class="if table-container" style="max-height: 20rem; overflow-y: scroll;">
  <table class="if table sticky"></table>
</div>
NameJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn WickerJohn Wicker
Age383838383838383838383838
PositionHitmanHitmanHitmanHitmanHitmanHitmanHitmanHitmanHitmanHitmanHitmanHitman
OfficeLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon
Start date01.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.197101.01.1971
Salary833 000833 000833 000833 00083312 000833 000833 000833 000833 000833 00083312 000833 000
<div class="if table-container" style="max-width: 100%; overflow-x: scroll;">
  <table class="if table col-left sticky"></table>
</div>

Status

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
<tr class="if [is-ok|is-warning|is-error]"></tr>

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

NameAgePositionOfficeSalaryAvailability
John Wicker38HitmanLondon833 000Available
John Wicker38HitmanLondon833 000Available
Expandable38HitmanLondon833 000Retired
John Wicker38HitmanLondon83312 000Available
Wicked Witch62BeheaderMoscow622 430Away
Black Widow34Undercover AgentCopenhagen1 351 400Dead
Deadpool??Pain in the ass??FreeAvailable
Spawn43DemonNew YorkFreeAway
<td class="if"><span class="if status-indicator [active|in-progress|error|success|pause">Away</span></td>

A cell can have different statuses:

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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"></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:

The headers are in the first row

HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
<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:

The headers are in the first column

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

If the header cell spans more than one column, use scope="colgroup".

The header spans two columns

HeaderHeader
CellCellCell
CellCellCell
CellCellCell
<table class="if" >
  <tbody class="if">
    <tr class="if">
        <th class="if"></th>
        <th class="if" scope="colgroup" colspan="2"></th>    </tr>
  </tbody>
</table>

If the header cell spans more than one row, use scope="rowgroup".

The headers spans two rows

HeaderCellCellCell
CellCellCell
HeaderCellCellCell
<table class="if" >
  <tbody class="if">
     <tr class="if">
        <th class="if" scope="rowgroup" rowspan="2">        Header
        </th>
        <td class="if">Cell</td>
        <td class="if">Cell</td>
        <td class="if">Cell</td>
    </tr>
  </tbody>
</table>

If the column header changes in the middle of the table, make sure that each data cell is associated with the correct header. Each th element must have a unique id and each td cell must have a headers attribute that lists the id values of the associated header cells.

Table with multiple headers in one column

 HeaderHeader
HeaderCellCell
HeaderCellCell
HeaderCellCell
 HeaderHeader
HeaderCellCell
HeaderCellCell
HeaderCellCell
<table class="if" >
    <tbody class="if">
        <tr class="if">
            <th class="if">&nbsp;</th>
            <th class="if" id="co1">Header</th>            <th class="if" id="co2">Header</th>
        </tr>
        <tr>
            <th class="if" id="c1">Header</th>            <td class="if" headers="co1 c1">Cell</td>            <td class="if" headers="co2 c1">Cell</td>
        </tr>
    </tbody>
</table>

Expandable table

  • The first cell of each row contains a disclosure button that controls the visibility of the hidden content.
  • When the controlled content is hidden, the button is styled with a down-pointing arrow to hint that activating the button will display additional content. When the content is visible, the arrow points up.
  • When the content is visible, the disclosure button must have aria-expanded attribute set to true. When the content area is hidden, it should be set to false.
  • The disclosure button must have aria-controls attribute that refers to element that contains all the content that is shown or hidden.
  • To activate the disclosure button and toggle the visibility of the disclosure content, user can use button "Enter" or "Space".

Table with expandable rows

<table class="if">
  <tbody class="if"><tr class="if expandable is-expanded">
      <td class="if">
        <span
          class="if"
          role="button"
          aria-controls="description-2"          aria-expanded="true"          tabindex="0"
        >
          John Wicker
        </span>
      </td>
      <td class="if">38</td>
      <td class="if">Hitman</td>
    </tr>
    <tr class="if" id="description-2">      <td class="if" colspan="3">
        <p class="if">
          Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin
          volutpat ac justo ac efficitur.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Announcements

  • Inform the user that the table contains expandable rows or table can be sorted after each column, by adding aria-describedby attribute.
  • Let the user know if the hidden content is visible or not after pressing the disclosure button.

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

Mobile table version 1

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 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

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

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
123 123 123

Mobile table version 2

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
123 123 123

This table is displayed as a scrollable table in mobile view

Mobile table version 2

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

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 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

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 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

This table is displayed as a scrollable table in mobile view

NameAgePositionOfficeStart dateSalaryOfficeStart dateSalaryNameAge
John Wicker01.01.1971833 000John Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker38HitmanJohn Wicker38Hitman38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
John Wicker32Hitman01.01.1971833 000John Wicker38HitmanLondon01.01.1971833 000
123 123 123

Mobile table version 4

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 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

NameAgePositionOfficeStart dateSalary
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000
John Wicker38HitmanLondon01.01.1971833 000

Mobile table version 5

TypePurpose
DefaultThe default data table comes with a base style with only the title, header, and table elements. rows.
With selectionBatch 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 expansionThe 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

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

TypePurpose
DefaultThe default data table comes with a base style with only the title, header, and table elements. rows.
With selectionBatch 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 expansionThe 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.
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Data Table tokens

Name Value Is aliased in
$ids-data-tables-toolbar-padding-top
0.5rem
$ids-data-tables-toolbar-input-height
2.5rem
$ids-data-tables-cell-spacing-inset-heavy-media-query-base
0.125rem 0.5rem
$ids-data-tables-cell-spacing-inset-heavy-media-query-xs
0.125rem 0.5rem
$ids-data-tables-cell-spacing-inset-heavy-media-query-smlr
0.125rem 1rem
$ids-data-tables-cell-spacing-inset-medium-media-query-base
0.125rem 0.75rem
$ids-data-tables-cell-spacing-inset-medium-media-query-xs
0.25rem 0.75rem
$ids-data-tables-cell-spacing-inset-medium-media-query-smlr
0.5rem 1rem
$ids-data-tables-cell-spacing-inset-light-media-query-base
0.5rem 1rem
$ids-data-tables-cell-spacing-inset-light-media-query-xs
0.75rem 1rem
$ids-data-tables-cell-spacing-inset-light-media-query-smlr
1rem 1.5rem
$ids-data-tables-expandable-icon-open
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke-miterlimit='10' d='M10 19l6-6 6 6' stroke-linecap='square' stroke-width='1.5' stroke='%230054f0'/%3E%3C/svg%3E")
$ids-data-tables-expandable-icon-closed
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke-miterlimit='10' d='M22 13l-6 6-6-6' stroke-linecap='square' stroke-width='1.5' stroke='%230054f0'/%3E%3C/svg%3E")
$ids-data-tables-expandable-border-color
rgb(153,143,136)
$ids-data-tables-expandable-border-size
0.25rem
$ids-data-tables-expandable-button-padding
1rem 4rem
$ids-data-tables-filters-title-height
3rem
$ids-data-tables-striped-background-color-odd
rgba(110,98,94,0.1)
$ids-data-tables-hoverable-background-color
rgba(110,98,94,0.2)
$ids-data-tables-filled-background-color
rgb(232, 224, 217)
$ids-data-tables-sort-size
1rem
$ids-data-tables-sort-spacing-inline
0 0 0 0.5rem
$ids-data-tables-sort-icon-default-ascending
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-width='4' fill='none' stroke='%236e625e' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' stroke-linecap='butt' d='M16 30V2'/%3E%3Cpath d='M7 11l9-9 9 9'/%3E%3C/g%3E%3C/svg%3E%0A")
$ids-data-tables-sort-icon-default-descending
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-width='4' fill='none' stroke='%236e625e' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' stroke-linecap='butt' d='M16 2v28'/%3E%3Cpath d='M25 21l-9 9-9-9'/%3E%3C/g%3E%3C/svg%3E%0A")
$ids-data-tables-sort-icon-hover-initial
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-width='4' fill='none' stroke='%23331e11' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' stroke-linecap='butt' d='M16 2v28'/%3E%3Cpath d='M25 21l-9 9-9-9'/%3E%3C/g%3E%3C/svg%3E%0A")
$ids-data-tables-sort-icon-hover-ascending
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-width='4' fill='none' stroke='%23331e11' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' stroke-linecap='butt' d='M16 30V2'/%3E%3Cpath d='M7 11l9-9 9 9'/%3E%3C/g%3E%3C/svg%3E%0A")
$ids-data-tables-sort-icon-hover-descending
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-width='4' fill='none' stroke='%23331e11' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' stroke-linecap='butt' d='M16 2v28'/%3E%3Cpath d='M25 21l-9 9-9-9'/%3E%3C/g%3E%3C/svg%3E%0A")
$ids-data-tables-states-background-color-ok
rgb(181, 237, 232)
$ids-data-tables-states-background-color-warning
rgb(255, 224, 130)
$ids-data-tables-states-background-color-error
rgb(255, 201, 166)
$ids-data-tables-states-background-color-selected
rgba(0,84,240,0.1)
$ids-data-tables-states-border-color-unread
rgb(0, 84, 240)
$ids-data-tables-states-border-size-unread
0.25rem
$ids-data-tables-states-color-selected
rgb(0, 84, 240)
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.

15.0.1 (2022-12-09)

⚠ BREAKING CHANGES

  • Added button to comparison table expansion trigger, improve helper/aria HTML tags

for all tables

666329

  • Merged PR 98423: fix(table, comparison-table): improve A11Y of table and comparison table comp... (947545f), closes #666329

14.29.0 (2022-08-25)

Features

  • 🎸 Add another level of responsive data-tables (22960cb)

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)
  • update deps: package locks updates (38e7a90)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Features

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

Code Refactoring

Miscellaneous chores

  • 🤖 Add dev server (0ae562a)

  • 🤖 Build token documentation for Data Tables (6d0b18c)

  • Started to work on data tables (21a6ec4)

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

14.3.0 (2022-02-09)

Features

  • 🎸 Add better scrollbar to responsive tables (0b85349)

Bug Fixes

  • Use correct vars and mixins (f879b28)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

14.2.6 (2022-01-11)

Documentation Updates

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

14.1.4 (2021-11-24)

Documentation Updates

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ 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!

Bug Fixes

  • 🐛 Fix responsive table for key-value with condensed table (5824e14)

  • 🐛 Typo for usage of the word and class name description (9d0c747)

Documentation Updates

  • ✏️ Clean up documentation for data-tables (eb40e92)

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ Make variations tables more condensed (4344a3a)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

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

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Remove manual box-shadow on example (5cd6477)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Split out CSS and JS documentation and JS source (e99259a) , closes #467386

  • 💡 Use .filled on top-level table as well (cf11206)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

Bug Fixes

  • 🐛 Fix table border issue on webkit (6278788) . Use rem instead of pt

✅ Closes: 489008

13.9.2 (2021-09-30)

Bug Fixes

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

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

  • 🤖 Remove tab styling from data-tables, no longer needed (a1ae75d) , closes #459429

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

13.5.1 (2021-09-07)

Documentation Updates

  • ✏️ Add missing classnames to examples (91103ae)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

13.1.5 (2021-09-01)

Bug Fixes

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

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

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

12.3.0 (2021-05-19)

Documentation Updates

  • ✏️ Documentation fixes (ad1882a)

12.0.0 (2021-05-05)

⚠ 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

Features

  • 🎸 Extract components from selection control (50607a4) , closes #336508

  • 🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

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

  • 🐛 Update references (c08f107)

Documentation Updates

  • ✏️ Rearrange documentation structure (47ea594)

Code Refactoring

  • 💡 Remove dropdown-filter references (fedae26)

  • 💡 Rename and consolidate mixins (67cf470) , closes #268081

  • 💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508

  • 💡 Rename Footer to Global Footer (7cb7239) , closes #336508

  • 💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

  • 💡 Use Status Indicator instead of badge (ebb7cd2)

Miscellaneous chores

  • 🤖 Convert typography tokens from theo to SD (e48f255)

  • 🤖 Convert util tokens from theo to style-dictionary (99fb4f5)

  • 🤖 Finalize breakpoint token conversion (f50ea0d)

  • 🤖 Make sure all components are named with capital first (08e9a26)

  • 🤖 PR fixes (87bdedd)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

  • 🤖 Update all design token references (c640d15)

  • 🤖 Update all example references to old menu (81205ad)

  • 🤖 Update js (b1cc4a7)

  • 🤖 Update markup (03e4df0)

  • 🤖 Update references to util variables (b79ec36)

  • 🤖 Updating links (70f166e)

  • 🤖 Use updated classnames for text button (old tertiary) (694cf67)

rebuild (7edb430)

11.0.0 (2021-03-15)

Documentation Updates

  • ✏️ Add warning about the position: sticky bugs (40ac554)

  • 🤖 Rename Change Log to Changelog (d412e63)

  • 🤖 Remove all references to sketch (35fc554) , closes #339203

  • 🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

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

Code Refactoring

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

Documentation Updates

  • ✏️ Update docs regarding inline actions and sorting (71e2921) , closes #345482

  • 🤖 Update markup for search fields (e4f4b01)

  • reinstall packages (fcfacf4)

9.0.0 (2021-01-18)

⚠ BREAKING CHANGES

  • 🧨 Table toolbar structure

Bug Fixes

  • 🐛 Fix toolbar section in docs (77f2dfe) , closes #303471

  • 🐛 Table filter tag alignment (c18d374) , closes #303471

  • 🤖 Use a more distint class name for doc crosslink links (2694867)

7.1.0 (2020-11-16)

Features

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

6.43.3 (2020-11-03)

Miscellaneous chores

  • 🤖 Manually set version (e4d9ca6)

6.43.0 (2020-10-27)

Features

  • 🎸 Add new component: pagination (955b903) , closes #301223

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Features

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

Documentation Updates

  • ✏️ Ommit calendar tables from table sort feature (db249ce)

Miscellaneous chores

  • 🤖 Add what-input to demo and dev files (56801b7)

  • 🤖 Rename focus style mixins (e18b688)

6.35.2 (2020-10-06)

Documentation Updates

6.33.0 (2020-09-28)

Documentation Updates

  • ✏️ Adjust documentation for data-tables (335731a)

6.32.0 (2020-09-27)

Features

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

Documentation Updates

  • ✏️ Update documentation for data-tables (cb4e808) . Make it a bit more responsive

  • ✏️ Use an unique identifier for types grid (65b8b39)

6.31.0 (2020-09-25)

Features

  • 🎸 Add new component: Data-tables (cfbce03)

Bug Fixes

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

Documentation Updates

  • ✏️ Add documentation for data-tables (ab3a3ab)

Miscellaneous chores

  • 🤖 Add and tune preprocessor files (75377c0)

  • 🤖 Add demo files (3285ae1)

  • 🤖 Add eslint-env for data-tables test file (6e49d4e)

  • 🤖 Bootstrap (f69093c)

  • 🤖 Bootstrap (47352a7)

  • 🤖 COntinuing (3dd1e63)

  • 🤖 Reinstall data-tables deps (f9c70a9)

  • 🤖 Remove old doc files (a0cc4b7)

  • 🤖 Update dev files (1093b52)

  • 🤖 Update version for data-tables (e65fe02)

changes (13c3c5e)

Edit this section, Opens in new window
Contact us, Opens in new window