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 OS Version Serial Number System Age (Years) Platform EOA Date
Sample Name Test 1 FAS2554 8.2.4P4 701517001122 2
Sample Name Test 2 FAS3170 7.3.4 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609 7 4/06/2017
Copied to clipboard
<div class="luci-table">
    <table class="luci-table__table">
        <thead>
            <tr>
                <th scope="col" tabindex="0"> Customer Name</th>
                <th scope="col" tabindex="0"> Hostname</th>
                <th scope="col" tabindex="0"> Model</th>
                <th scope="col" tabindex="0"> OS Version</th>
                <th scope="col" tabindex="0"> Serial Number</th>
                <th scope="col" tabindex="0"> System Age (Years)</th>
                <th scope="col" tabindex="0"> Platform EOA Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td> </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
            </tr>
        </tbody>
    </table>
</div>

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" tabindex="0"> Left Aligned</th>
                <th class="luci-table__cell--align-center" scope="col" tabindex="0"> Center Aligned</th>
                <th class="luci-table__cell--align-right" scope="col" tabindex="0"> Right Aligned</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="luci-table__cell--align-left"> Left Aligned </td>
                <td class="luci-table__cell--align-center"> Center Aligned </td>
                <td class="luci-table__cell--align-right"> Right Aligned </td>
            </tr>
        </tbody>
    </table>
</div>

Column Sort

If column sorting is available, default the table sort to the most important data set and reveal that sort in the column header, as detailed below. If the user clicks on a column that is already sorted, reverse the sort order.

Customer Name
Hostname
Model
OS Version
Serial Number
System Age (Years)
Platform EOA Date
Sample Name Test 1 FAS2554 8.2.4P4 701517001122 2
Sample Name Test 2 FAS3170 7.3.4 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609 7 4/06/2017
Copied to clipboard
<div class="luci-table">
    <table class="luci-table__table">
        <thead>
            <tr>
                <th scope="col" aria-sort="none" tabindex="0">
                    <div class="luci-table__header-cell-sort " role="button">Customer Name
                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#sort"> </use>
                        </svg>
                    </div>
                    <th scope="col" aria-sort="none" tabindex="0">
                        <div class="luci-table__header-cell-sort " role="button">Hostname
                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#sort"> </use>
                            </svg>
                        </div>
                        <th scope="col" aria-sort="none" tabindex="0">
                            <div class="luci-table__header-cell-sort " role="button">Model
                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                </svg>
                            </div>
                            <th scope="col" aria-sort="descending" tabindex="0">
                                <div class="luci-table__header-cell-sort  luci-table__header-cell-sort--selected " role="button">OS Version
                                    <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#sort"> </use>
                                    </svg>
                                </div>
                                <th scope="col" aria-sort="none" tabindex="0">
                                    <div class="luci-table__header-cell-sort " role="button">Serial Number
                                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                            <use xlink:href="/icons/luci.svg#sort"> </use>
                                        </svg>
                                    </div>
                                    <th scope="col" aria-sort="none" tabindex="0">
                                        <div class="luci-table__header-cell-sort " role="button">System Age (Years)
                                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                <use xlink:href="/icons/luci.svg#sort"> </use>
                                            </svg>
                                        </div>
                                        <th scope="col" aria-sort="none" tabindex="0">
                                            <div class="luci-table__header-cell-sort " role="button">Platform EOA Date
                                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                                </svg>
                                            </div>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td> </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
            </tr>
        </tbody>
    </table>
</div>

Item Select

Checkboxes should accompany each row if the user can select or manipulate multiple rows of data.

Customer Name
Hostname
Model
OS Version
Serial Number
System Age (Years)
Platform EOA Date
Sample Name Test 1 FAS2554 8.2.4P4 701517001122 2
Sample Name Test 2 FAS3170 7.3.4 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609 7 4/06/2017
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="610" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="610" value="on">
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </th>
                <th scope="col" aria-sort="none" tabindex="0">
                    <div class="luci-table__header-cell-sort " role="button">Customer Name
                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#sort"> </use>
                        </svg>
                    </div>
                    <th scope="col" aria-sort="none" tabindex="0">
                        <div class="luci-table__header-cell-sort " role="button">Hostname
                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#sort"> </use>
                            </svg>
                        </div>
                        <th scope="col" aria-sort="none" tabindex="0">
                            <div class="luci-table__header-cell-sort " role="button">Model
                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                </svg>
                            </div>
                            <th scope="col" aria-sort="none" tabindex="0">
                                <div class="luci-table__header-cell-sort " role="button">OS Version
                                    <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#sort"> </use>
                                    </svg>
                                </div>
                                <th scope="col" aria-sort="none" tabindex="0">
                                    <div class="luci-table__header-cell-sort " role="button">Serial Number
                                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                            <use xlink:href="/icons/luci.svg#sort"> </use>
                                        </svg>
                                    </div>
                                    <th scope="col" aria-sort="none" tabindex="0">
                                        <div class="luci-table__header-cell-sort " role="button">System Age (Years)
                                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                <use xlink:href="/icons/luci.svg#sort"> </use>
                                            </svg>
                                        </div>
                                        <th scope="col" aria-sort="none" tabindex="0">
                                            <div class="luci-table__header-cell-sort " role="button">Platform EOA Date
                                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                                </svg>
                                            </div>
            </tr>
        </thead>
        <tbody>
            <tr class="luci-table__row--select">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="34448" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="34448" value="on">
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td> </td>
            </tr>
            <tr class="luci-table__row--select luci-table__row--selected">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="63501" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="63501" value="on" checked>
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
            </tr>
            <tr class="luci-table__row--select luci-table__row--selected">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="90257" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="90257" value="on" checked>
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
            </tr>
        </tbody>
    </table>
</div>

Inline Status Icons

Place status icons (e.g., warning, alerts) in line within a row, left aligned to the corresponding data point.

Customer Name
Hostname
Model
OS Version
Serial Number
System Age (Years)
Platform EOA Date
Sample Name Test 1 FAS2554 8.2.4P4 701517001122
2
Sample Name Test 2 FAS3170 7.3.4 700000208098
7
2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609
7
4/06/2017
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="79290" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="79290" value="on">
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </th>
                <th scope="col" aria-sort="none" tabindex="0">
                    <div class="luci-table__header-cell-sort " role="button">Customer Name
                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#sort"> </use>
                        </svg>
                    </div>
                    <th scope="col" aria-sort="none" tabindex="0">
                        <div class="luci-table__header-cell-sort " role="button">Hostname
                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#sort"> </use>
                            </svg>
                        </div>
                        <th scope="col" aria-sort="none" tabindex="0">
                            <div class="luci-table__header-cell-sort " role="button">Model
                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                </svg>
                            </div>
                            <th scope="col" aria-sort="none" tabindex="0">
                                <div class="luci-table__header-cell-sort " role="button">OS Version
                                    <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#sort"> </use>
                                    </svg>
                                </div>
                                <th scope="col" aria-sort="none" tabindex="0">
                                    <div class="luci-table__header-cell-sort " role="button">Serial Number
                                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                            <use xlink:href="/icons/luci.svg#sort"> </use>
                                        </svg>
                                    </div>
                                    <th scope="col" aria-sort="none" tabindex="0">
                                        <div class="luci-table__header-cell-sort " role="button">System Age (Years)
                                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                <use xlink:href="/icons/luci.svg#sort"> </use>
                                            </svg>
                                        </div>
                                        <th scope="col" aria-sort="none" tabindex="0">
                                            <div class="luci-table__header-cell-sort " role="button">Platform EOA Date
                                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                                </svg>
                                            </div>
            </tr>
        </thead>
        <tbody>
            <tr class="luci-table__row--select">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="73190" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="73190" value="on">
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td>
                    <div class="luci-table__cell-status">
                        <svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#warning"> </use>
                        </svg>
                        <span class="luci-table__cell-status-text">2</span>
                    </div>
                </td>
                <td> </td>
            </tr>
            <tr class="luci-table__row--select luci-table__row--selected">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="53613" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="53613" value="on" checked>
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td>
                    <div class="luci-table__cell-status">
                        <span class="luci-table__cell-status-text">7</span>
                    </div>
                </td>
                <td>
                    <div class="luci-table__cell-status">
                        <svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#warning"> </use>
                        </svg>
                        <span class="luci-table__cell-status-text">2/03/2017</span>
                    </div>
                </td>
            </tr>
            <tr class="luci-table__row--select luci-table__row--selected">
                <td>
                    <span class="luci-form__checkbox">
                        <label for="14863" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="14863" value="on" checked>
                            <span class="luci-checkbox__button"></span>
                        </label>
                    </span>
                </td>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td>
                    <div class="luci-table__cell-status">
                        <span class="luci-table__cell-status-text">7</span>
                    </div>
                </td>
                <td>
                    <div class="luci-table__cell-status">
                        <svg class="luci-icon luci-icon--size-sm luci-icon-warning" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#warning"> </use>
                        </svg>
                        <span class="luci-table__cell-status-text">4/06/2017</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Inline Actions

When there are multiple actions possible for an item, add an icon and pop-over to reveal actions.

Customer Name
Hostname
Model
OS Version
Serial Number
System Age (Years)
Platform EOA Date
Actions
Sample Name Test 1 FAS2554 8.2.4P4 701517001122 2
Sample Name Test 2 FAS3170 7.3.4 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609 7 4/06/2017
Copied to clipboard
<div class="luci-table">
    <table class="luci-table__table">
        <thead>
            <tr>
                <th scope="col" aria-sort="none" tabindex="0">
                    <div class="luci-table__header-cell-sort " role="button">Customer Name
                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#sort"> </use>
                        </svg>
                    </div>
                    <th scope="col" aria-sort="none" tabindex="0">
                        <div class="luci-table__header-cell-sort " role="button">Hostname
                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#sort"> </use>
                            </svg>
                        </div>
                        <th scope="col" aria-sort="none" tabindex="0">
                            <div class="luci-table__header-cell-sort " role="button">Model
                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                </svg>
                            </div>
                            <th scope="col" aria-sort="none" tabindex="0">
                                <div class="luci-table__header-cell-sort " role="button">OS Version
                                    <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#sort"> </use>
                                    </svg>
                                </div>
                                <th scope="col" aria-sort="none" tabindex="0">
                                    <div class="luci-table__header-cell-sort " role="button">Serial Number
                                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                            <use xlink:href="/icons/luci.svg#sort"> </use>
                                        </svg>
                                    </div>
                                    <th scope="col" aria-sort="none" tabindex="0">
                                        <div class="luci-table__header-cell-sort " role="button">System Age (Years)
                                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                <use xlink:href="/icons/luci.svg#sort"> </use>
                                            </svg>
                                        </div>
                                        <th scope="col" aria-sort="none" tabindex="0">
                                            <div class="luci-table__header-cell-sort " role="button">Platform EOA Date
                                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                                </svg>
                                            </div>
                                            <th scope="col" tabindex="0"> Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td> </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

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 an icon and popover placed adjacent to the right-hand border of the table header row, as depicted below.

Customer Name
Hostname
Model
OS Version
Serial Number
System Age (Years)
Platform EOA Date
Actions
Show/Hide Columns
Sample Name Test 1 FAS2554 8.2.4P4 701517001122 2
Sample Name Test 2 FAS3170 7.3.4 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 7.3.2 700000212609 7 4/06/2017
Copied to clipboard
<div class="luci-table luci-table--toggle">
    <table class="luci-table__table">
        <thead>
            <tr>
                <th scope="col" aria-sort="none" tabindex="0">
                    <div class="luci-table__header-cell-sort " role="button">Customer Name
                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#sort"> </use>
                        </svg>
                    </div>
                    <th scope="col" aria-sort="none" tabindex="0">
                        <div class="luci-table__header-cell-sort " role="button">Hostname
                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                <use xlink:href="/icons/luci.svg#sort"> </use>
                            </svg>
                        </div>
                        <th scope="col" aria-sort="none" tabindex="0">
                            <div class="luci-table__header-cell-sort " role="button">Model
                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                </svg>
                            </div>
                            <th scope="col" aria-sort="none" tabindex="0">
                                <div class="luci-table__header-cell-sort " role="button">OS Version
                                    <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#sort"> </use>
                                    </svg>
                                </div>
                                <th scope="col" aria-sort="none" tabindex="0">
                                    <div class="luci-table__header-cell-sort " role="button">Serial Number
                                        <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                            <use xlink:href="/icons/luci.svg#sort"> </use>
                                        </svg>
                                    </div>
                                    <th scope="col" aria-sort="none" tabindex="0">
                                        <div class="luci-table__header-cell-sort " role="button">System Age (Years)
                                            <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                <use xlink:href="/icons/luci.svg#sort"> </use>
                                            </svg>
                                        </div>
                                        <th scope="col" aria-sort="none" tabindex="0">
                                            <div class="luci-table__header-cell-sort " role="button">Platform EOA Date
                                                <svg class="luci-icon luci-icon--size-xs luci-icon-sort" aria-hidden="true">
                                                    <use xlink:href="/icons/luci.svg#sort"> </use>
                                                </svg>
                                            </div>
                                            <th scope="col" tabindex="0"> Actions</th>
                                            <th class="luci-table__header-toggle" scope="col" tabindex="0">
                                                <div class="luci-popover luci-popover--wide luci-popover--left luci-table__icon-action">
                                                    <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                                        <span class="luci-button__inner">
                                                            <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                                                <use xlink:href="/icons/luci.svg#add"> </use>
                                                            </svg>
                                                        </span>
                                                    </button>
                                                    <div class="luci-popover__content">
                                                        <div class="luci-popover__heading">Show/Hide Columns</div>
                                                        <div class="luci-popover__body">
                                                            <form class="luci-form" action="#" method="post">
                                                                <div class="luci-form__field-group">
                                                                    <span class="luci-form__checkbox">
                                                                        <label for="checkbox20048" class="luci-checkbox__label">
                                                                            <input type="checkbox" name="options" id="checkbox20048" value="on" checked>
                                                                            <span class="luci-checkbox__button"></span>
                                                                            <span class="luci-checkbox__label-text">Serial Number</span>
                                                                        </label>
                                                                    </span>
                                                                    <span class="luci-form__checkbox">
                                                                        <label for="checkbox54510" class="luci-checkbox__label">
                                                                            <input type="checkbox" name="options" id="checkbox54510" value="on">
                                                                            <span class="luci-checkbox__button"></span>
                                                                            <span class="luci-checkbox__label-text">Cluster Serial Number</span>
                                                                        </label>
                                                                    </span>
                                                                    <span class="luci-form__checkbox">
                                                                        <label for="checkbox1811" class="luci-checkbox__label">
                                                                            <input type="checkbox" name="options" id="checkbox1811" value="on">
                                                                            <span class="luci-checkbox__button"></span>
                                                                            <span class="luci-checkbox__label-text">Cluster Name</span>
                                                                        </label>
                                                                    </span>
                                                                    <span class="luci-form__checkbox">
                                                                        <label for="checkbox21552" class="luci-checkbox__label">
                                                                            <input type="checkbox" name="options" id="checkbox21552" value="on">
                                                                            <span class="luci-checkbox__button"></span>
                                                                            <span class="luci-checkbox__label-text">Remote Cluster Serial Number</span>
                                                                        </label>
                                                                    </span>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <div class="luci-popover__action">
                                                            <button class="luci-button luci-button--primary luci-button--small"> Submit </button>
                                                        </div>
                                                    </div>
                                                </div>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td> 8.2.4P4 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td> </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td> </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td> 7.3.4 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td> </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td> 7.3.2 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
                <td>
                    <div class="luci-table__cell-action" role="button">
                        <div class="luci-popover luci-popover--left luci-table__icon-action">
                            <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
                                <span class="luci-button__inner">
                                    <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                                        <use xlink:href="/icons/luci.svg#more"> </use>
                                    </svg>
                                </span>
                            </button>
                            <div class="luci-popover__content">
                                <div class="luci-popover__body">
                                    <ul class="luci-popover__list">
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Edit Details </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> View History </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Decomission </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <a href="#" class="luci-link"> Add Attachments </a>
                                        </li>
                                        <li class="luci-popover__list-item">
                                            <span> Not a Link </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td> </td>
            </tr>
        </tbody>
    </table>
</div>

Class 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

.luci-table__row--select

Applies a background to a selected row.