Comet Data Tables

Due Date	Status	Assignment Name	Type	Class	Teacher
12/31/2017	Not Started	Assignment 1	Full Video	Example Class	Example Teacher
12/31/2017	Not Started	Assignment 2	Board	Example Class	Example Teacher
12/30/2017	Started	Assignment with a long name	Assignment	Example Class	Example Teacher
12/29/2017	Not Started	Assignment 4	Animation	Example Class with a long name	Example Teacher

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<table class="comet-data-table students-assignments-table">
    <thead class="comet-data-table__head">
        <tr class="comet-data-table__row">
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Due Date</a>
            </th>
            <th class="comet-data-table__header">
                Status
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Assignment Name</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Type</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Class</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Teacher</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/31/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 1</a>
            </td>
            <td class="comet-data-table__cell">Full Video</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/31/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 2</a>
            </td>
            <td class="comet-data-table__cell">Board</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/30/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#" class="comet-data-table__link">Assignment with a long name</a>
            </td>
            <td class="comet-data-table__cell">Assignment</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/29/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 4</a>
            </td>
            <td class="comet-data-table__cell">Animation</td>
            <td class="comet-data-table__cell">Example Class with a long name</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
    </tbody>
</table>

Copy to Clipboard Press Ctrl + C to copy

<table class="comet-data-table students-assignments-table">
    <thead class="comet-data-table__head">
        <tr class="comet-data-table__row">
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Due Date</a>
            </th>
            <th class="comet-data-table__header">
                Status
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Assignment Name</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Type</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Class</a>
            </th>
            <th class="comet-data-table__header">
                <a href="" class="comet-data-table__header-link">Teacher</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/31/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 1</a>
            </td>
            <td class="comet-data-table__cell">Full Video</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/31/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 2</a>
            </td>
            <td class="comet-data-table__cell">Board</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/30/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#" class="comet-data-table__link">Assignment with a long name</a>
            </td>
            <td class="comet-data-table__cell">Assignment</td>
            <td class="comet-data-table__cell">Example Class</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
        <tr class="comet-data-table__row">
            <td class="comet-data-table__cell" data-label="Due Date">12/29/2017</td>
            <td class="comet-data-table__cell" data-label="Status">Not Started</td>
            <td class="comet-data-table__cell" data-label="Assignment Name">
                <a href="#">Assignment 4</a>
            </td>
            <td class="comet-data-table__cell">Animation</td>
            <td class="comet-data-table__cell">Example Class with a long name</td>
            <td class="comet-data-table__cell" data-label="Teacher">Example Teacher</td>
        </tr>
    </tbody>
</table>
                
Macro params reference

Guidelines

Use when a data structure includes two or more columns of data. For a single data column, use a List Group instead.

Structure

Display a row’s primary cell (often, as a link) as the left-most data column
Display interactive columns (such as a checkbox for row selection) on the far left.
All data tables contain a heading row for a label above each named data column, although columns of interactions do not require a label.
Adding a <caption> element with a brief description can assist screenreader users understand the purpose of a table. The <caption> tag should go directly after the <table> tag. This is not required if there is descriptive text directly before or after the table.

Responsive functionality

Table headings <th> must be inside a .comet-data-table__head element to function responsively. The .comet-data-table__head element is hidden by default and displayed on larger viewports.
Table cells without a data-label are hidden by default and shown on larger viewports. The data-label attribute functions as the title for a cell on smaller viewports.

Editorial

Exceedingly long data should be truncated to prevent cells from expanding too large

Style

Separate rows using a hairline border.