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=&quot;#&quot; 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--1695" role="button" aria-pressed="false">
                    <input id="luci-button--1695" 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=&quot;#&quot; 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="1441" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="1441" 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="59879" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="59879" 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="89521" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="89521" 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="76952" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="76952" 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

Serial Number System Name AutoSupport
3084568 F3020-219-59 OFF | Action

Level 1 Heading

Paragraph Large Body Text (Default)

  • Unordered List Item
  • Unordered List Item
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

Serial Number System Name AutoSupport
3084568 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='#'>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="84926" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="84926" 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="98724" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="98724" 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="73125" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="73125" 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="46682" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="46682" 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.

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

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.

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="checkbox3952" class="luci-checkbox__label">
                                                        <input type="checkbox" name="options" id="checkbox3952" 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="checkbox84662" class="luci-checkbox__label">
                                                        <input type="checkbox" name="options" id="checkbox84662" 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="checkbox9870" class="luci-checkbox__label">
                                                        <input type="checkbox" name="options" id="checkbox9870" 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="checkbox56915" class="luci-checkbox__label">
                                                        <input type="checkbox" name="options" id="checkbox56915" 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>

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.

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

.luci-table--align-right

.luci-table

Right aligns all the content within the table.

.luci-table--align-center

.luci-table

Center aligns all the content within the table.

.luci-table__cell--align-center

<td> <th>

Center aligns data within a table cell.

.luci-table__cell--align-right

<td> <th>

Right aligns data within a table cell.

.luci-table__cell--align-left

<td> <th>

Left aligns data within a table cell.

.luci-table__row--selected

<tr>

Applies light gray background to a selected row.

.luci-table__row--is-expanded

<tr>

Applies light gray background to an expanded row and display: table-row to child rows.

.luci-table__row--child

<tr>

Applies display: none to row.

.luci-table__row--fadeout

<tr>

Applies light red background to a row and transitions to 0 opacity.

.luci-table__row--fadein

<tr>

Applies light green background to a row and transitions to 1 opacity.

.luci-table__row--edit-mode

<tr>

Applies light yellow background color to row.

.luci-table__cell--indent

<td>

Applies left padding to table cell.

.luci-table__cell--column-control

<td>

Applies left padding to table cell to accomodate header action button width.

.luci-table__cell--inline-edit-action, .luci-table__cell--inline-edit-button, .luci-table__cell--inline-edit-icon

<td>

Removes padding on cells with actions.