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