Data Tables

Data tables organize structured data in a two-dimensional structure of a row’s properties associated with columnar properties or interactions.

Header Cell Header Cell Header Cell
Data Cell Data Cell Data Cell
<table class="comet-data-table">
    <tr>
        <th>Header Cell</th>
        <th>Header Cell</th>
        <th>Header Cell</th>
    </tr>
    <tr>
        <td>
            <a href="#">Data Cell</a>
        </td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
</table>
                
<table class="comet-data-table">
	<tr>
		<th>Header Cell</th>
		<th>Header Cell</th>
		<th>Header Cell</th>
	</tr>
	<tr>
		<td><a href="#">Data Cell</a></td>
		<td>Data Cell</td>
		<td>Data Cell</td>
	</tr>
</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.

Style

  • Display a row’s primary row (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 header row for a label above each named data column, although columns of interactions do not require a label.
  • Separate rows using a hairline border.