Data Tables
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.
Basic Data Table
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 | Serial Number | System Age (Years) | Platform EOA Date |
|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 700000212609 | 7 | 4/06/2017 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Customer Name </th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Age (Years) </th>
<th class="" scope="col"> Platform EOA Date </th>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </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>
<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>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Header Labels
Strive to keep header labels short and succinct. Note that columns will be fluid and based largely upon the data values within that column.
Text Cell Content Alignment
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 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--align-left" scope="col"> Left Aligned </th>
<th class=" luci-table__cell--align-center" scope="col"> Center Aligned </th>
<th class=" luci-table__cell--align-right" scope="col"> 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>Table Controls
Table controls are actions that can be applied to one or many selected rows, or to the entire table. Table controls display immediately above or below the table. They may include pagination, filters, search, single or multi-select actions (e.g., delete) or table-wide actions (e.g., add row).
| Customer Name | Hostname | Model | Serial Number | System Age (Years) | Platform EOA Date |
|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 700000212609 | 7 | 4/06/2017 |
Table Control Examples
| Customer Name | Hostname | Model | Serial Number | System Age (Years) | Platform EOA Date |
|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 700000212609 | 7 | 4/06/2017 |
Copied to clipboard
<div class="luci-table">
<div class="luci-table__controls">
<div class="luci-table__controls-col">
<div class="luci-form__field-group luci-form__field-group--inline">
<span class="luci-form__checkbox">
<label for="checkbox-1" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox-1" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Filter Name A</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox-2" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox-2" value="on">
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Filter Name B</span>
</label>
</span>
</div>
</div>
<div class="luci-table__controls-col luci-table__controls-col--align-right">
<button class="luci-button luci-button--primary"> Add Row </button>
</div>
</div>
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Customer Name </th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Age (Years) </th>
<th class="" scope="col"> Platform EOA Date </th>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </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>
<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>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>
<ul class="luci-pagination luci-pagination--right-aligned">
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--previous luci-pagination__link--disabled">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back">
</use>
</svg> Previous <span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</div>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1
</div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2
</a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward">
</use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>| Customer Name | Hostname | Model | Serial Number | System Age (Years) | Platform EOA Date |
|---|---|---|---|---|---|
| Sample Name | Test 1 | FAS2554 | 701517001122 | 2 | |
| Sample Name | Test 2 | FAS3170 | 700000208098 | 7 | 2/03/2017 |
| Sample Name | Test 3 | FAS3170 | 700000212609 | 7 | 4/06/2017 |
Copied to clipboard
<div class="luci-table">
<div class="luci-table__controls">
<div class="luci-table__controls-col">
<div class="luci-button-group">
<button class="luci-button luci-button--secondary luci-button--small 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#delete">
</use>
</svg>
<span class="luci-button__text"> Delete </span>
</span>
</button>
<button class="luci-button luci-button--secondary luci-button--small 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#download">
</use>
</svg>
<span class="luci-button__text"> Download </span>
</span>
</button>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--59749" role="button" aria-pressed="false">
<input id="luci-button--59749" type="checkbox" class="luci-button__input" name="icon-toggle">
<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#favorite">
</use>
</svg>
<span class="luci-button__text"> Favorite </span>
</span>
</label>
</div>
</div>
<div class="luci-table__controls-col luci-table__controls-col--align-right">
<button class="luci-button luci-button--primary"> Download CSV </button>
</div>
</div>
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Customer Name </th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Age (Years) </th>
<th class="" scope="col"> Platform EOA Date </th>
</tr>
</thead>
<tbody>
<tr>
<td> Sample Name </td>
<td> Test 1 </td>
<td> FAS2554 </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>
<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>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>
<ul class="luci-pagination luci-pagination--right-aligned">
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--previous luci-pagination__link--disabled">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back">
</use>
</svg> Previous <span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</div>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1
</div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2
</a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward">
</use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>Row Controls
Row controls are actions or information that apply to a single row of data.
Row Status Icons
Display status icons (e.g., warnings, alerts) in a row, left aligned to the corresponding data point.
| Customer Name | Serial Number | System Age (Years) | Platform EOA Date | |
|---|---|---|---|---|
| Sample Name | 701517001122 |
2
|
||
| Sample Name | 700000208098 |
7
|
2/03/2017
|
|
| Sample Name | 700000212609 |
7
|
4/06/2017
|
Copied to clipboard
<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="38944" class="luci-checkbox__label">
<input type="checkbox" name="options" id="38944" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</th>
<th class="" scope="col"> Customer Name </th>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Age (Years) </th>
<th class="" scope="col"> Platform EOA Date </th>
</tr>
</thead>
<tbody>
<tr class=" luci-table__row--select">
<td>
<span class="luci-form__checkbox">
<label for="371" class="luci-checkbox__label">
<input type="checkbox" name="options" id="371" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </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="6493" class="luci-checkbox__label">
<input type="checkbox" name="options" id="6493" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </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="85845" class="luci-checkbox__label">
<input type="checkbox" name="options" id="85845" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </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>Tree Table (Nested Rows)
Use a tree table to show and hide child rows attached to a parent row. Click the chevron icon at the beginning of each row to show or hide child data.
| Serial Number | OS Version | AutoSupport |
|---|---|---|
| 3084568 | 7.2.6 | OFF | Action |
| Child Row | 4.0.1 | OFF | Action |
| Grandchild Row | 4.0.1 | OFF | Action |
| 450000021310 | 7-8.2P2 MODE:S | OFF | Action |
| Child Row | 4.0.1 | OFF | Action |
| JWM-066599 | 7.3.7 | OFF | View |
| Child Row | 4.0.1 | OFF | Action |
| 3085354 | 7.3.1 | OFF | View |
| Child Row | 4.0.1 | OFF | Action |
| 310091511 | 7.3.4R | OFF | Action |
| Child Row | 4.0.1 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> OS Version </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>3084568</a>
</td>
<td> 7.2.6 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class="luci-table__row--expandable luci-table__row--child">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>Child Row</a>
</td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--indent"> Grandchild Row </td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>450000021310</a>
</td>
<td> 7-8.2P2 MODE:S </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--indent">
<a href='#'>Child Row</a>
</td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>JWM-066599</a>
</td>
<td> 7.3.7 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--indent">
<a href='#'>Child Row</a>
</td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>3085354</a>
</td>
<td> 7.3.1 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--indent">
<a href='#'>Child Row</a>
</td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>310091511</a>
</td>
<td> 7.3.4R </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--indent">
<a href='#'>Child Row</a>
</td>
<td> 4.0.1 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
</tbody>
</table>
</div>Expandable Rows
Use expandable rows to show and hide child data attached to a parent row. Click the chevron icon at the beginning of each row to show or hide child data. The expandable row container can display diverse types of child data. Below are a few examples.
Child Data - Text
Copied to clipboard
<div class="luci-table luci-table--expandable-rows">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Name </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>3084568</a>
</td>
<td> F3020-219-59 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td colspan="3">
<div class='luci-long-form-text'>
<h1>Level 1 Heading</h1>
<p>Paragraph Large Body Text (Default)</p>
<ul>
<li><strong>Unordered</strong> List Item</li>
<li><strong>Unordered</strong> List Item</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>Child Data - Charts and Graphs
| Serial Number | System Name | AutoSupport |
|---|---|---|
| 450000021310 | F3020-219-59 | OFF | Action |
|
||
Copied to clipboard
<div class="luci-table luci-table--expandable-rows">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Name </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>450000021310</a>
</td>
<td> F3020-219-59 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td colspan="3">
<img style='width: 425px; border: solid 1px #D7D7D7; box-shadow: 0 4px 0 #F2F2F2; margin: 0 0 12px; padding: 12px;' src='http://luci.netapp.com/images/luci-charts-graphs-utilization-standard-default.png' />
</td>
</tr>
</tbody>
</table>
</div>Child Data - Forms
Copied to clipboard
<div class="luci-table luci-table--expandable-rows">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Name </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button>
<a href='#'>3084568</a>
</td>
<td> F3020-219-59 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr class=" luci-table__row--child">
<td colspan="3">
<form style='width: 425px' class='luci-form luci-form--compressed' action='#' method='post'>
<div class='luci-form__field-group'>
<label for='first_name' class='luci-form__label'>First Name</label><input type='text' name='firstName' id='first_name' class='luci-form__input'>
</div>
<div class='luci-form__field-group'>
<label for='last_name' class='luci-form__label'>Last Name</label><input type='text' name='lastName' id='last_name' class='luci-form__input'>
</div>
<div class='luci-form__field-group'>
<span class='luci-form__checkbox'>
<label for='optin' class='luci-checkbox__label'><input type='checkbox' name='optin' id='optin' value='on'>
<span class='luci-checkbox__button'></span>
<span class='luci-checkbox__label-text'>Yes, I authorize NetApp and to use my personal data.</span>
</label>
</span>
</div>
<button class='luci-button luci-button--primary'>Get It Now</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>Row Select
Use checkboxes to denote that one or more rows can be selected. To select or unselect a row, check the row’s checkbox. To select or unselect all rows, check the checkbox in the column header.
| Customer Name | Serial Number | System Age (Years) | Platform EOA Date | |
|---|---|---|---|---|
| Sample Name | 701517001122 | 2 | ||
| Sample Name | 700000208098 | 7 | 2/03/2017 | |
| Sample Name | 700000212609 | 7 | 4/06/2017 |
Copied to clipboard
<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="82143" class="luci-checkbox__label">
<input type="checkbox" name="options" id="82143" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</th>
<th class="" scope="col"> Customer Name </th>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> System Age (Years) </th>
<th class="" scope="col"> Platform EOA Date </th>
</tr>
</thead>
<tbody>
<tr class=" luci-table__row--select">
<td>
<span class="luci-form__checkbox">
<label for="84103" class="luci-checkbox__label">
<input type="checkbox" name="options" id="84103" value="on">
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </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="80021" class="luci-checkbox__label">
<input type="checkbox" name="options" id="80021" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </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="81887" class="luci-checkbox__label">
<input type="checkbox" name="options" id="81887" value="on" checked>
<span class="luci-checkbox__button"></span>
</label>
</span>
</td>
<td> Sample Name </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 7 </td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Row Actions
Row actions are accessed via a menu. Row actions include edit, delete, freeze, add attachment, etc. The action menu can be placed at the beginning or end of the row, but not both. Action menus must have a minimum of two items.
| Hostname | Model | OS Version | Serial Number | AutoSupport | |||
|---|---|---|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | OFF | Action | |||
| Test 3 | FAS3170 | 7.3.2 | 700000212609 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--inline-edit-action" scope="col">
</th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 1 </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 2 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 3 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>| Hostname | Model | OS Version | Serial Number | AutoSupport | |||
|---|---|---|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | OFF | Action | |||
| Test 3 | FAS3170 | 7.3.2 | 700000212609 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-action" scope="col">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--inline-edit"> Test 1 </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu luci-menu--left">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit"> Test 2 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu luci-menu--left">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit"> Test 3 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu luci-menu--left">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>If a table has nested rows, a row action can include add child row or add child details.
| Hostname | Model | OS Version | Serial Number | AutoSupport | |||
|---|---|---|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 3 Child | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | OFF | Action | |||
| Test 2 Child | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 3 | FAS3170 | 7.3.2 | 700000212609 | OFF | Action | |||
| Test 3 Child | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--inline-edit-action" scope="col">
</th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
</tr>
</thead>
<tbody>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button> Test 1
</td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class=" luci-table__cell--indent"> Test 3 Child </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button> Test 2
</td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class=" luci-table__cell--indent"> Test 2 Child </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr class="luci-table__row--expandable">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--indent">
<button class="luci-button luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small">
<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#expand">
</use>
</svg>
</span>
</button> Test 3
</td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr class=" luci-table__row--child">
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class=" luci-table__cell--indent"> Test 3 Child </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>If a table has three or fewer row actions, you can choose to use icons for specific row actions. Icons can be placed at the beginning or end of a row, but not both.
| Hostname | Model | Serial Number | AutoSupport | |||||
|---|---|---|---|---|---|---|---|---|
| Test 1 | FAS2554 | 701517001122 | OFF | Action | |||||
| Test 2 | FAS3170 | 700000208098 | OFF | Action | |||||
| Test 3 | FAS3170 | 700000212609 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--inline-edit-icon" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-icon" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-icon" scope="col">
</th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-edit">
<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#edit">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-delete">
<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#delete">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-clone">
<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#clone">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit"> Test 1 </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-edit">
<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#edit">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-delete">
<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#delete">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-clone">
<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#clone">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit"> Test 2 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td>
<a href="#">700000208098</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-edit">
<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#edit">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-delete">
<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#delete">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-icon">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-clone">
<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#clone">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit"> Test 3 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td>
<a href="#">700000212609</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>Inline Edit
Rows can be edited inline. In edit mode, all editable fields are displayed. The user may use the icon buttons to commit or cancel the edit. Alternatively, the user may press Enter to commit or ESC to cancel the edit.
| Hostname | Model | OS Version | Serial Number | AutoSupport | |||
|---|---|---|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | OFF | Action | |||
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | OFF | Action | |||
| Test 3 | FAS3170 | 7.3.2 | 700000212609 | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--inline-edit-action" scope="col">
</th>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
<th class=" luci-table__cell--inline-edit-button" scope="col">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 1 </td>
<td class="luci-table__cell--inline-edit"> FAS2554 </td>
<td class="luci-table__cell--inline-edit"> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 2 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="luci-table__cell--inline-edit-action">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-edit"> Edit row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-delete"> Delete row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action luci-table__action--inline-clone"> Clone row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze row </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Add child row </a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td class="luci-table__cell--inline-edit"> Test 3 </td>
<td class="luci-table__cell--inline-edit"> FAS3170 </td>
<td class="luci-table__cell--inline-edit"> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td class="luci-table__cell--inline-edit-radio">
<span>OFF</span> | <a href='#'>Action</a>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-success">
<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#success">
</use>
</svg>
</span>
</button>
</td>
<td class="luci-table__cell--inline-edit-button">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-close">
<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#close">
</use>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>Column Controls
Column controls are actions that apply to a single column of data.
Column Sort
If column sorting is available, default the table sort to the most important data set. To sort a data column, click on the header of the column you want to sort. If a user clicks on a column that is already sorted, reverse the sort order.
| Hostname | Model | OS Version | Serial Number | Platform EOA Date |
|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | |
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | 2/03/2017 |
| Test 3 | FAS3170 | 7.3.2 | 700000212609 | 4/06/2017 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table table-sortable-columns-examples">
<thead>
<tr>
<th class=" luci-table__header-cell-sort--sorting" scope="col" aria-sort="true" tabindex="0">
<span class="luci-table__sort-label"> Hostname </span>
</th>
<th class=" luci-table__header-cell-sort--sorting" scope="col" aria-sort="true" tabindex="0">
<span class="luci-table__sort-label"> Model </span>
</th>
<th class=" luci-table__header-cell-sort--sorting" scope="col" aria-sort="true" tabindex="0">
<span class="luci-table__sort-label"> OS Version </span>
</th>
<th class=" luci-table__header-cell-sort--sorting" scope="col" aria-sort="true" tabindex="0">
<span class="luci-table__sort-label"> Serial Number </span>
</th>
<th class=" luci-table__header-cell-sort--sorting" scope="col" aria-sort="true" tabindex="0">
<span class="luci-table__sort-label"> Platform EOA Date </span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td>
</td>
</tr>
<tr>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td> 2/03/2017 </td>
</tr>
<tr>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td> 4/06/2017 </td>
</tr>
</tbody>
</table>
</div>Resizable Columns
To provide users the ability to resize columns, display a rule and resize pointer on hover in the column header. The user can click and drag the column boundary left or right to resize. On drop, the column is resized.
| Serial Number | Product Family | OS Version | AutoSupport |
|---|---|---|---|
| 3084568 | FAS | 7.2.6 | OFF | Action |
| 450000021310 | FAS | 7-8.2P2 MODE:S | OFF | Action |
| JWM-066599 | FAS | 7.3.7 | OFF | View |
| 3085354 | OnCommand | 7.3.1 | OFF | View |
| 310091511 | FAS | 7.3.4R | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table luci-table__table--resizable-columns" id="table-resizable-columns-example">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> Product Family </th>
<th class="" scope="col"> OS Version </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href='#'>3084568</a>
</td>
<td> FAS </td>
<td> 7.2.6 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr>
<td>
<a href='#'>450000021310</a>
</td>
<td> FAS </td>
<td> 7-8.2P2 MODE:S </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr>
<td>
<a href='#'>JWM-066599</a>
</td>
<td> FAS </td>
<td> 7.3.7 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr>
<td>
<a href='#'>3085354</a>
</td>
<td> OnCommand </td>
<td> 7.3.1 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr>
<td>
<a href='#'>310091511</a>
</td>
<td> FAS </td>
<td> 7.3.4R </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
</tbody>
</table>
</div>Reorder Columns
To provide users the ability to reorder columns, display a drag cursor on hover in the column header. The user can click and drag the column left or right to reorder. While dragging a selected column, display the dragging cursor, ghost the column header, and highlight the drop target when the user hovers over a new column location. On drop, reorder the columns. A user cannot reorder a column that contains actions or an action menu.
| Serial Number | Product Family | OS Version | AutoSupport |
|---|---|---|---|
| 3084568 | FAS | 7.2.6 | OFF | Action |
| 450000021310 | FAS | 7-8.2P2 MODE:S | OFF | Action |
| JWM-066599 | FAS | 7.3.7 | OFF | View |
| 3085354 | OnCommand | 7.3.1 | OFF | View |
| 310091511 | FAS | 7.3.4R | OFF | Action |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table luci-table__table--resizable-columns" id="table-reorderable-columns-example">
<thead>
<tr>
<th class="" scope="col"> Serial Number </th>
<th class="" scope="col"> Product Family </th>
<th class="" scope="col"> OS Version </th>
<th class=" luci-table__header-no-sort" scope="col"> AutoSupport </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href='#'>3084568</a>
</td>
<td> FAS </td>
<td> 7.2.6 </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr>
<td>
<a href='#'>450000021310</a>
</td>
<td> FAS </td>
<td> 7-8.2P2 MODE:S </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
<tr>
<td>
<a href='#'>JWM-066599</a>
</td>
<td> FAS </td>
<td> 7.3.7 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr>
<td>
<a href='#'>3085354</a>
</td>
<td> OnCommand </td>
<td> 7.3.1 </td>
<td> OFF | <a href='#'>View</a>
</td>
</tr>
<tr>
<td>
<a href='#'>310091511</a>
</td>
<td> FAS </td>
<td> 7.3.4R </td>
<td> OFF | <a href='#'>Action</a>
</td>
</tr>
</tbody>
</table>
</div>Show and Hide Columns
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 a menu. A user cannot hide a column that contains actions or an action menu.
| Hostname | Model | OS Version | Serial Number | |
|---|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 | |
| Test 2 | FAS3170 | 7.3.4 | 700000208098 | |
| Test 3 | FAS3170 | 0.4.2 | 700000212609 | |
| Test 4 | FA83170 | 3.2.9 | 701900212609 | |
| Test 5 | FAS3123 | 7.3.2 | 738000212609 |
Copied to clipboard
<div class="luci-table luci-table--toggle">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Hostname </th>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
<th class=" luci-table__header-toggle" scope="col">
<div class="luci-menu luci-menu--left">
<button class="luci-button luci-button--icon-only luci-button--small luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item luci-list-group__item--heading"> Show/Hide Columns </li>
<li class="luci-list-group__item">
<form class="luci-form" action="#" method="post">
<div class="luci-form__field-group">
<span class="luci-form__checkbox">
<label for="checkbox55464" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox55464" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Hostname</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox50114" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox50114" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Model</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox43171" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox43171" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">OS Version</span>
</label>
</span>
<span class="luci-form__checkbox">
<label for="checkbox96031" class="luci-checkbox__label">
<input type="checkbox" name="options" id="checkbox96031" value="on" checked>
<span class="luci-checkbox__button"></span>
<span class="luci-checkbox__label-text">Serial Number</span>
</label>
</span>
</div>
</form>
</li>
</ul>
</div>
<div class="luci-menu__action">
<button class="luci-button luci-button--primary luci-button--small"> Submit </button>
</div>
</div>
</div>
</tr>
</thead>
<tbody>
<tr>
<td> Test 1 </td>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
<td>
</td>
</tr>
<tr>
<td> Test 2 </td>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
<td>
</td>
</tr>
<tr>
<td> Test 3 </td>
<td> FAS3170 </td>
<td> 0.4.2 </td>
<td>
<a href="#">700000212609</a>
</td>
<td>
</td>
</tr>
<tr>
<td> Test 4 </td>
<td> FA83170 </td>
<td> 3.2.9 </td>
<td>
<a href="#">701900212609</a>
</td>
<td>
</td>
</tr>
<tr>
<td> Test 5 </td>
<td> FAS3123 </td>
<td> 7.3.2 </td>
<td>
<a href="#">738000212609</a>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>Column Search
Searchable columns display a search field below the column header and above the first row of data.
To search a column a user first keys three or more characters. A drop down opens and displays matching search results. To clear the search, click the x icon.
| Model | OS Version | Serial Number |
|---|---|---|
|
|
|
|
| FAS2554 | 8.2.4P4 | 701517001122 |
| FAS3170 | 7.3.4 | 700000208098 |
| FAS3170 | 7.3.2 | 700000212609 |
| FAS2554 | 8.2.4P4 | 701517001122 |
| FAS3170 | 7.3.4 | 700000208098 |
| FAS3170 | 7.3.2 | 700000212609 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class="" scope="col"> Model </th>
<th class="" scope="col"> OS Version </th>
<th class="" scope="col"> Serial Number </th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--searchable">
<div class="luci-form__combo-box">
<div class="luci-form__combo-box-wrapper">
<input type="text" name="comboBox" id="comboBox" class="luci-form__input luci-form__combo-box-input">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-form__combo-box-close">
<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#close">
</use>
</svg>
</span>
</button>
<svg class="luci-icon luci-form__combo-box-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#expand">
</use>
</svg>
</div>
<div class="luci-form__combo-box-menu">
<ul class="luci-list-group luci-form__combo-box-list">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List</mark> item 1 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 2 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Lis</mark>t item 3 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 4</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Li</mark>st item 5 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 6</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 7</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 8 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>9 Link</mark>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>10 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>11 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 1</mark>2 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 13 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 14 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1<mark>5 Link</mark>
</a>
</li>
</ul>
</div>
</div>
</td>
<td class="luci-table__cell--searchable">
<div class="luci-form__combo-box">
<div class="luci-form__combo-box-wrapper">
<input type="text" name="comboBox" id="comboBox" class="luci-form__input luci-form__combo-box-input">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-form__combo-box-close">
<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#close">
</use>
</svg>
</span>
</button>
<svg class="luci-icon luci-form__combo-box-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#expand">
</use>
</svg>
</div>
<div class="luci-form__combo-box-menu">
<ul class="luci-list-group luci-form__combo-box-list">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List</mark> item 1 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 2 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Lis</mark>t item 3 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 4</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Li</mark>st item 5 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 6</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 7</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 8 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>9 Link</mark>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>10 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>11 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 1</mark>2 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 13 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 14 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1<mark>5 Link</mark>
</a>
</li>
</ul>
</div>
</div>
</td>
<td class="luci-table__cell--searchable">
<div class="luci-form__combo-box">
<div class="luci-form__combo-box-wrapper">
<input type="text" name="comboBox" id="comboBox" class="luci-form__input luci-form__combo-box-input">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-form__combo-box-close">
<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#close">
</use>
</svg>
</span>
</button>
<svg class="luci-icon luci-form__combo-box-icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#expand">
</use>
</svg>
</div>
<div class="luci-form__combo-box-menu">
<ul class="luci-list-group luci-form__combo-box-list">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List</mark> item 1 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 2 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Lis</mark>t item 3 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 4</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>Li</mark>st item 5 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 6</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 7</mark> Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link">
<mark>List ite</mark>m 8 Link
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>9 Link</mark>
</a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>10 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item <mark>11 Lin</mark>k </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List <mark>item 1</mark>2 Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 13 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List it<mark>em 14 </mark>Link </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link"> List item 1<mark>5 Link</mark>
</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
</tr>
<tr>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
</tr>
<tr>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
</tr>
<tr>
<td> FAS2554 </td>
<td> 8.2.4P4 </td>
<td>
<a href="#">701517001122</a>
</td>
</tr>
<tr>
<td> FAS3170 </td>
<td> 7.3.4 </td>
<td>
<a href="#">700000208098</a>
</td>
</tr>
<tr>
<td> FAS3170 </td>
<td> 7.3.2 </td>
<td>
<a href="#">700000212609</a>
</td>
</tr>
</tbody>
</table>
</div>Column Actions
Column actions are accessed from a menu. Column actions include hide, freeze, etc. Place the action menu before the column header. Action menus must have a minimum of two items.
| Hostname | Model | OS Version | Serial Number |
|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 |
| Test 2 | FAS3170 | 7.3.4 | 700000208098 |
| Test 3 | FAS3170 | 7.3.2 | 700000212609 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--column-control" scope="col">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze column </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Hide column </a>
</li>
</ul>
</div>
</div>
</div> Hostname
</th>
<th class=" luci-table__cell--column-control" scope="col">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze column </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Hide column </a>
</li>
</ul>
</div>
</div>
</div> Model
</th>
<th class=" luci-table__cell--column-control" scope="col">
<div class="luci-menu">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze column </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Hide column </a>
</li>
</ul>
</div>
</div>
</div> OS Version
</th>
<th class=" luci-table__cell--column-control" scope="col">
<div class="luci-menu luci-menu--left">
<button class="luci-button luci-button--icon-only luci-button--small luci-button--flat luci-menu__trigger" aria-expanded="false" aria-haspopup="true">
<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-menu__content luci-container--light" role="menu" aria-hidden="true">
<div class="luci-menu__body luci-menu__body--no-padding">
<ul class="luci-list-group">
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Freeze column </a>
</li>
<li class="luci-list-group__item">
<a href="#" class="luci-list-group__element luci-list-group__element--link luci-list-group__element--table-inline-action"> Hide column </a>
</li>
</ul>
</div>
</div>
</div> Serial Number
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--column-control"> Test 1 </td>
<td class="luci-table__cell--column-control"> FAS2554 </td>
<td class="luci-table__cell--column-control"> 8.2.4P4 </td>
<td class="luci-table__cell--column-control">
<a href="#">701517001122</a>
</td>
</tr>
<tr>
<td class="luci-table__cell--column-control"> Test 2 </td>
<td class="luci-table__cell--column-control"> FAS3170 </td>
<td class="luci-table__cell--column-control"> 7.3.4 </td>
<td class="luci-table__cell--column-control">
<a href="#">700000208098</a>
</td>
</tr>
<tr>
<td class="luci-table__cell--column-control"> Test 3 </td>
<td class="luci-table__cell--column-control"> FAS3170 </td>
<td class="luci-table__cell--column-control"> 7.3.2 </td>
<td class="luci-table__cell--column-control">
<a href="#">700000212609</a>
</td>
</tr>
</tbody>
</table>
</div>If a column has only one action, you can use an icon instead of a menu.
| Hostname | Model | OS Version | Serial Number |
|---|---|---|---|
| Test 1 | FAS2554 | 8.2.4P4 | 701517001122 |
| Test 2 | FAS3170 | 7.3.4 | 700000208098 |
| Test 3 | FAS3170 | 7.3.2 | 700000212609 |
Copied to clipboard
<div class="luci-table">
<table class="luci-table__table">
<thead>
<tr>
<th class=" luci-table__cell--column-control" scope="col">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--toggle-icon" data-toggle-icon-on="lock" data-toggle-icon-off="lock-open">
<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#lock-open">
</use>
</svg>
</span>
</button> Hostname
</th>
<th class=" luci-table__cell--column-control" scope="col">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--toggle-icon" data-toggle-icon-on="lock" data-toggle-icon-off="lock-open">
<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#lock">
</use>
</svg>
</span>
</button> Model
</th>
<th class=" luci-table__cell--column-control" scope="col">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--toggle-icon" data-toggle-icon-on="lock" data-toggle-icon-off="lock-open">
<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#lock-open">
</use>
</svg>
</span>
</button> OS Version
</th>
<th class=" luci-table__cell--column-control" scope="col">
<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-button--toggle-icon" data-toggle-icon-on="lock" data-toggle-icon-off="lock-open">
<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#lock">
</use>
</svg>
</span>
</button> Serial Number
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="luci-table__cell--column-control"> Test 1 </td>
<td class="luci-table__cell--column-control"> FAS2554 </td>
<td class="luci-table__cell--column-control"> 8.2.4P4 </td>
<td class="luci-table__cell--column-control">
<a href="#">701517001122</a>
</td>
</tr>
<tr>
<td class="luci-table__cell--column-control"> Test 2 </td>
<td class="luci-table__cell--column-control"> FAS3170 </td>
<td class="luci-table__cell--column-control"> 7.3.4 </td>
<td class="luci-table__cell--column-control">
<a href="#">700000208098</a>
</td>
</tr>
<tr>
<td class="luci-table__cell--column-control"> Test 3 </td>
<td class="luci-table__cell--column-control"> FAS3170 </td>
<td class="luci-table__cell--column-control"> 7.3.2 </td>
<td class="luci-table__cell--column-control">
<a href="#">700000212609</a>
</td>
</tr>
</tbody>
</table>
</div>Class Reference
| 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 light gray background to a selected row. |
|
|
|
Applies light gray background to an expanded row and |
|
|
|
Applies |
|
|
|
Applies light red background to a row and transitions to 0 opacity. |
|
|
|
Applies light green background to a row and transitions to 1 opacity. |
|
|
|
Applies light yellow background color to row. |
|
|
|
Applies left padding to table cell. |
|
|
|
Applies left padding to table cell to accomodate header action button width. |
|
|
|
Removes padding on cells with actions. |