Data Tables organize data into rows of items and columns of item attributes. Tables make structured data easy to scan, sort, analyze, and interact with.
A data table contains a header row at the top that lists column names, followed by rows for the data. Only use a data table if you need three or more columns of data and two or more rows of data.
| Customer Name | Hostname | Model | OS Version | Serial Number | System Age (Years) | Platform EOA Date |
|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 | 7 | 4/06/2017 |
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" tabindex="0"> Customer Name</th>
<th scope="col" tabindex="0"> Hostname</th>
<th scope="col" tabindex="0"> Model</th>
<th scope="col" tabindex="0"> OS Version</th>
<th scope="col" tabindex="0"> Serial Number</th>
<th scope="col" tabindex="0"> System Age (Years)</th>
<th scope="col" tabindex="0"> Platform EOA Date</th>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td> 2 </td>
<td> </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 7 </td>
<td> 2/03/2017 </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Strive to keep header labels short and succinct. Note that columns will be fluid and based largely upon the data values within that column.
By default, table content is left aligned. However modifier classes can be used to adjust based upon the needs of the data (e.g., numerical values are often right aligned).
| Left Aligned | Center Aligned | Right Aligned |
|---|---|---|
| Left Aligned | Center Aligned | Right Aligned |
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class="luci-table__cell--align-left" scope="col" tabindex="0"> Left Aligned</th>
<th class="luci-table__cell--align-center" scope="col" tabindex="0"> Center Aligned</th>
<th class="luci-table__cell--align-right" scope="col" tabindex="0"> Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--align-left"> Left Aligned </td>
<td class="luci-table__cell--align-center"> Center Aligned </td>
<td class="luci-table__cell--align-right"> Right Aligned </td>
</tr>
</tbody>
</table>
</div>If column sorting is available, default the table sort to the most important data set and reveal that sort in the column header, as detailed below. If the user clicks on a column that is already sorted, reverse the sort order.
|
Customer Name
|
Hostname
|
Model
|
OS Version
|
Serial Number
|
System Age (Years)
|
Platform EOA Date
|
|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 | 7 | 4/06/2017 |
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Customer Name
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Hostname
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Model
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="descending" tabindex="0">
<div class="luci-table__header-cell-sort luci-table__header-cell-sort--selected " role="button">OS Version
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Serial Number
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">System Age (Years)
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Platform EOA Date
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td> 2 </td>
<td> </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 7 </td>
<td> 2/03/2017 </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Checkboxes should accompany each row if the user can select or manipulate multiple rows of data.
|
Customer Name
|
Hostname
|
Model
|
OS Version
|
Serial Number
|
System Age (Years)
|
Platform EOA Date
| |
|---|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | 2 | ||
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 | 7 | 2/03/2017 | |
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 | 7 | 4/06/2017 |
<div class="luci-table luci-table__table--hover">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" class="luci-table__header-select">
<span class="luci-form__checkbox">
<label for="71279" class="luci-checkbox__label">
<input type="checkbox" name="options" id="71279" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</th>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Customer Name
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Hostname
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Model
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">OS Version
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Serial Number
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">System Age (Years)
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Platform EOA Date
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--select">
<td>
<span class="luci-form__checkbox">
<label for="6118" class="luci-checkbox__label">
<input type="checkbox" name="options" id="6118" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td> 2 </td>
<td> </td>
</tr>
<tr class="luci-table__row--select luci-table__row--selected">
<td>
<span class="luci-form__checkbox">
<label for="46815" class="luci-checkbox__label">
<input type="checkbox" name="options" id="46815" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 7 </td>
<td> 2/03/2017 </td>
</tr>
<tr class="luci-table__row--select luci-table__row--selected">
<td>
<span class="luci-form__checkbox">
<label for="43913" class="luci-checkbox__label">
<input type="checkbox" name="options" id="43913" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Place status icons (e.g., warning, alerts) in line within a row, left aligned to the corresponding data point.
|
Customer Name
|
Hostname
|
Model
|
OS Version
|
Serial Number
|
System Age (Years)
|
Platform EOA Date
| |
|---|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 |
2
|
||
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 |
7
|
2/03/2017
|
|
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 |
7
|
4/06/2017
|
<div class="luci-table luci-table__table--hover">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" class="luci-table__header-select">
<span class="luci-form__checkbox">
<label for="31319" class="luci-checkbox__label">
<input type="checkbox" name="options" id="31319" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</th>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Customer Name
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Hostname
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Model
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">OS Version
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Serial Number
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">System Age (Years)
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Platform EOA Date
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--select">
<td>
<span class="luci-form__checkbox">
<label for="3836" class="luci-checkbox__label">
<input type="checkbox" name="options" id="3836" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td>
<div class="luci-table__cell-status">
<svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
<use xlink:href="/icons/luci.svg#warning"> </use>
</svg>
<span class="luci-table__cell-status-text">2</span>
</div>
</td>
<td> </td>
</tr>
<tr class="luci-table__row--select luci-table__row--selected">
<td>
<span class="luci-form__checkbox">
<label for="50584" class="luci-checkbox__label">
<input type="checkbox" name="options" id="50584" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td>
<div class="luci-table__cell-status">
<span class="luci-table__cell-status-text">7</span>
</div>
</td>
<td>
<div class="luci-table__cell-status">
<svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
<use xlink:href="/icons/luci.svg#warning"> </use>
</svg>
<span class="luci-table__cell-status-text">2/03/2017</span>
</div>
</td>
</tr>
<tr class="luci-table__row--select luci-table__row--selected">
<td>
<span class="luci-form__checkbox">
<label for="11427" class="luci-checkbox__label">
<input type="checkbox" name="options" id="11427" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td>
<div class="luci-table__cell-status">
<span class="luci-table__cell-status-text">7</span>
</div>
</td>
<td>
<div class="luci-table__cell-status">
<svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
<use xlink:href="/icons/luci.svg#warning"> </use>
</svg>
<span class="luci-table__cell-status-text">4/06/2017</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>When there are multiple actions possible for an item, add an icon and pop-over to reveal actions.
|
Customer Name
|
Hostname
|
Model
|
OS Version
|
Serial Number
|
System Age (Years)
|
Platform EOA Date
| Actions |
|---|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | 2 |
|
|
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 | 7 | 2/03/2017 |
|
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 | 7 | 4/06/2017 |
|
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Customer Name
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Hostname
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Model
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">OS Version
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Serial Number
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">System Age (Years)
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Platform EOA Date
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" tabindex="0"> Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td> 2 </td>
<td> </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 7 </td>
<td> 2/03/2017 </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>When there are a large number of columns available, provide users with the option to show or hide columns. Allow the user to show and hide columns via an icon and popover placed adjacent to the right-hand border of the table header row, as depicted below.
|
Customer Name
|
Hostname
|
Model
|
OS Version
|
Serial Number
|
System Age (Years)
|
Platform EOA Date
| Actions |
Show/Hide Columns
|
|---|---|---|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | 2 |
|
||
| Sample Name | Test 2 | FAS3170 | 7.3.4 | 700000208098 | 7 | 2/03/2017 |
|
|
| Sample Name | Test 3 | FAS3170 | 7.3.2 | 700000212609 | 7 | 4/06/2017 |
|
<div class="luci-table luci-table--toggle">
<table class="luci-table__table">
<thead>
<tr>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Customer Name
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Hostname
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Model
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">OS Version
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Serial Number
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">System Age (Years)
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" aria-sort="none" tabindex="0">
<div class="luci-table__header-cell-sort " role="button">Platform EOA Date
<svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
<use xlink:href="/icons/luci.svg#sort"> </use>
</svg>
</div>
<th scope="col" tabindex="0"> Actions</th>
<th class="luci-table__header-toggle" scope="col" tabindex="0">
<div class="luci-popover luci-popover--wide luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#add"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__heading">Show/Hide Columns</div>
<div class="luci-popover__body">
<form class="luci-form" action="#" method="post">
<div class="luci-form__field-group">
<span class="luci-form__checkbox">
<label for="checkbox9203" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox9203" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox40927" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox40927" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Serial Number</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox7276" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox7276" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Cluster Name</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox91499" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox91499" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Remote Cluster Serial Number</span>
</label>
</span>
</div>
</form>
</div>
<div class="luci-popover__action">
<button class="luci-button luci-button--primary luci-button--small"> Submit </button>
</div>
</div>
</div>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td> 2 </td>
<td> </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 7 </td>
<td> 2/03/2017 </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> Sample Name </td>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
<td>
<div class="luci-table__cell-action" role="button">
<div class="luci-popover luci-popover--left luci-table__icon-action">
<button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#more"> </use>
</svg>
</span>
</button>
<div class="luci-popover__content">
<div class="luci-popover__body">
<ul class="luci-popover__list">
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Edit Details </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> View History </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Decomission </a>
</li>
<li class="luci-popover__list-item">
<a href="#" class="luci-link"> Add Attachments </a>
</li>
<li class="luci-popover__list-item">
<span> Not a Link </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
<td> </td>
</tr>
</tbody>
</table>
</div>| Class | Applies to | Outcome |
|---|---|---|
|
|
|
Right aligns all the content within the table. |
|
|
|
Center aligns all the content within the table. |
|
|
|
Center aligns data within a table cell. |
|
|
|
Right aligns data within a table cell. |
|
|
|
Left aligns data within a table cell. |
|
|
|
Applies a background to a selected row. |