Indigo Design System v1.2.0

Data Tables

Data tables display data points in rows and columns.

Overview

Data tables organize complex data for the user. Users can then use the tables to manipulate, filter, and compare data to meet their needs.

Data tables will vary in size, depending on the amount of data they need to show. But using the same design ensures consistency across all USAC products.

Design and Implementation

Rows

Alternate between gray and white for the background color of rows. This allows for easy reading across long rows and between rows.

Columns

Keep a 1px white space between each column to delineate between columns.

Download
Action
2013 1000000001 13380361 13527 Approved cdgriffith@frontier.com 2/09/2015 file-pdf
2013 1000003923 13395911 26516 Approved egoodknight@uasave.com 2/26/2015 file-pdf
2014 14533391 14533391 13920 Approved swalls@espyservices.com 2/16/2015 file-pdf
2013 1000003940 13380231 27890 Approved egoodknight@uasave.com 2/09/2015 file-pdf
html
copy-2 Copy to Clipboard 
<div class="indi-data-table">
    <table class="indi-data-table__table">
        <thead>
            <tr>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">Fund Year</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">RHC Invoice</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">FRN</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link
                  indi-data-table__column-heading--sort-link-is-active indi-data-table__column-heading--sort-link-is-descending">
                        <span class="indi-data-table__column-heading-label">HCP#</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">Status</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">Authorized Personal Email</span>
                    </button>
                </th>
                <th scope="col">
                    <button class="indi-data-table__column-heading indi-data-table__column-heading--sort-link">
                        <span class="indi-data-table__column-heading-label">Submitted Date</span>
                    </button>
                </th>
                <th scope="col">
                    <div class="indi-data-table__column-heading">Download</div>
                </th>
                <th scope="col">
                    <div class="indi-data-table__column-heading">Action</div>
                </th>
            </tr>
        </thead>
        <tr>
            <td>2013</td>
            <td>1000000001</td>
            <td>13380361</td>
            <td>13527</td>
            <td>Approved</td>
            <td>cdgriffith@frontier.com</td>
            <td>2/09/2015</td>
            <td>
                <a href="#" class="indi-data-table__action">
                    <svg class="indi-icon indi-icon--large" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/indi_icons.svg#file-pdf"></use>
                    </svg>
                </a>
            </td>
            <td>
                <ul class="indi-data-table__action-list">
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Deny</button>
                    </li>
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Approve</button>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2013</td>
            <td>1000003923</td>
            <td>13395911</td>
            <td>26516</td>
            <td>Approved</td>
            <td>egoodknight@uasave.com</td>
            <td>2/26/2015</td>
            <td>
                <a href="#" class="indi-data-table__action">
                    <svg class="indi-icon indi-icon--large" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/indi_icons.svg#file-pdf"></use>
                    </svg>
                </a>
            </td>
            <td>
                <ul class="indi-data-table__action-list">
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Deny</button>
                    </li>
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Approve</button>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2014</td>
            <td>14533391</td>
            <td>14533391</td>
            <td>13920</td>
            <td>Approved</td>
            <td>swalls@espyservices.com</td>
            <td>2/16/2015</td>
            <td>
                <a href="#" class="indi-data-table__action">
                    <svg class="indi-icon indi-icon--large" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/indi_icons.svg#file-pdf"></use>
                    </svg>
                </a>
            </td>
            <td>
                <ul class="indi-data-table__action-list">
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Deny</button>
                    </li>
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Approve</button>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2013</td>
            <td>1000003940</td>
            <td>13380231</td>
            <td>27890</td>
            <td>Approved</td>
            <td>egoodknight@uasave.com</td>
            <td>2/09/2015</td>
            <td>
                <a href="#" class="indi-data-table__action">
                    <svg class="indi-icon indi-icon--large" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/indi_icons.svg#file-pdf"></use>
                    </svg>
                </a>
            </td>
            <td>
                <ul class="indi-data-table__action-list">
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Deny</button>
                    </li>
                    <li class="indi-data-table__action-item">
                        <button class="indi-data-table__action">Approve</button>
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</div>

Padding

Pad $indi-space-inset-default above and below the text in both rows and columns.

Sorting

Sorting allows users to reorder the contents in a table by clicking on a sortable column. Only one column can sort the table at a time.

If a column is sortable, the header should look clickable (i.e., be blue like a link). If a column isn’t sortable, the header should be gray.

Download
Action

To indicate which column is currently sorting the table, use the green stroke that spans the column width below the header text. In addition, an arrow indicating the correct sorting direction should appear. If clicked, the arrow will flip to indicate the alternate sorting direction.

Use Guidelines

Use when

  • Displaying large amounts of data in a tabular way.
  • Organizing and comparing multiple data points.

Don’t Use When

  • The number of columns exceeds the space on the page.
  • You can display the data in any other way using charts, graphs, or other data visualizations.

Editorial

  • Avoid lengthy column headers.
  • Introduce a data table with a clear introduction or instructions.
  • Links and icons can live in cells.
  • Don’t put buttons in a cell.
  • Present data in a human, readable format. Do not display underscores, symbols, or characters that are meant for the computer to read.

Accessibility

  • Always use <th> tags with a proper <scope> attribute in table headers when displaying data. The data tables component is designed for columns so use <th scope="col">.