CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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.30-alpha.8
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 windowUsage
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>
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>
Toolbar
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
Name | Age | Position | Office | Salary | Availability | ||
---|---|---|---|---|---|---|---|
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 | 83312 000 |
<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:
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 | |
John Wicker | 38 | Hitman | London | 833 000 | |
Expandable | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 83312 000 | |
Wicked Witch | 62 | Beheader | Moscow | 622 430 | |
Black Widow | 34 | Undercover Agent | Copenhagen | 1 351 400 | |
Deadpool | ?? | Pain in the ass | ?? | Free | |
Spawn | 43 | Demon | New York | Free |
โฆ
<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>
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 th
s:
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 th
s:
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 |
---|---|---|---|
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"> </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.
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 |
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 PDFMobile 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 PDFThe 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 |
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. |
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. |
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) |
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
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
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
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
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
reinstall (afce1f2)
reinstall (67f3140)
14.2.6 (2022-01-11)
Documentation Updates
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
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 fromif-design-system
toids-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)
-
โ๏ธ 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
-
๐ก 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)
reinstall (da80dba)
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
bootstrap (d23e139)
13.1.5 (2021-09-01)
Bug Fixes
12.14.1 (2021-08-12)
Miscellaneous chores
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
-
๐ค 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
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
-
๐ค Use a more distint class name for doc crosslink links (2694867)
7.1.0 (2020-11-16)
Features
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
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)