CSS ComponentThe latest version of this package is: 17.0.30-alpha.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.

View repository View package

$ npm i @ids-core/data-tables@17.0.30-alpha.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

Edit this section

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.

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

Name	Age	Position
John	38	Hitman
John	38	Hitman
John	38	Hitman
John	38	Hitman

<table class="if table [heavy|medium|light]">
  …
</table>

Edit this section

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"
        defaultChecked
        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

Name	Age	Position	Office	Start date	Salary
John Wicker	38	Hitman	London	01.01.1971	833 000
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis.
John Wicker	38	Hitman	London	01.01.1971	833 000
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis.
John Wicker	38	Hitman	London	01.01.1971	833 000
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis.
John Wicker	38	Hitman	London	01.01.1971	833 000
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis.
John Wicker	38	Hitman	London	01.01.1971	833 000
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis.

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

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>

Contextual Menu ComponentLearn more about the Contextual Menu Component

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:

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

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

Header	Header	Header	Header
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

<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

Header	Cell	Cell	Cell
Header	Cell	Cell	Cell
Header	Cell	Cell	Cell

<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

Header	Header
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

<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

Header	Cell	Cell	Cell
Header	Cell	Cell	Cell
Header	Cell	Cell	Cell

<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

	Header	Header
Header	Cell	Cell
Header	Cell	Cell
Header	Cell	Cell
	Header	Header
Header	Cell	Cell
Header	Cell	Cell
Header	Cell	Cell

<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

Name	Age	Position
John Wicker	38	Hitman
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur.
John Wicker	38	Hitman
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur.

<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

W3C WAI-ARIA Authoring Practices Table Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.
W3C Tutorial - Table Concepts covers the usage of various tables, headers, and captions.

Edit this section

Responsive

Mobile table version 1

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

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

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

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

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

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

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

This table is displayed as a scrollable table in mobile view

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 4

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

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 5

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

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

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.

Edit this section

Tokens

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

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

🎸 Add CSS Variables to Data Tables (ef1a93e) , closes #580520

Bug Fixes

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

Code Refactoring

💡 Convert examples to MDX (ecdcbf9) , closes #581527

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

🤖 Bootstrap (6822f5b)

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)

use correct versions (f1b5deb)

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

✏️ Update documentation (df10528) , closes #513841
Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
rebuild and reinstall (f9fb687)

reinstall (885c74b)

14.1.4 (2021-11-24)

Documentation Updates

Add missing demo pages (b31c285)
fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

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

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

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

🐛 Update repository urls (3dae3a3) , closes #465976

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

🐛 Update demo and dev files (828c7b3) , closes #466052
🤖 Use correct order for diff (cc6a4fd)

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

✏️ Fix typo (4412ad0)

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

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Table of Contents

Usage

Default markup

Sizing

Behaviours

Interactions

Pointer

Sorting

Expandable

Toolbar

Bulk actions

Inline actions

Modifiers

Striped

Highlight row

Unread row

Interactive row

Hoverable

Filled headers

Sticky

Status

Table container

Table title

Accessibility

Considerations

Identify column and row headers

Resources

Responsive

Mobile table version 1

Mobile table version 1

Mobile table version 2

Mobile table version 2

Mobile table version 3

Mobile table version 3

Mobile table version 4

Mobile table version 5

Mobile table version 5

Tokens

Data Table tokens

Changelog

Change Log

15.0.1 (2022-12-09)

⚠ BREAKING CHANGES

14.29.0 (2022-08-25)

Features

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Features

Bug Fixes

Code Refactoring

Miscellaneous chores

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.3.0 (2022-02-09)

Features

Bug Fixes

14.2.6 (2022-01-11)

Documentation Updates

14.2.2 (2021-12-10)

Code Refactoring

14.1.4 (2021-11-24)

Documentation Updates

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Bug Fixes

Documentation Updates

Code Refactoring

Miscellaneous chores

13.11.0 (2021-10-19)

Features

Bug Fixes

13.9.2 (2021-09-30)