Tables

Code Examples

Tables are a set of columns and rows that lay out information. Use Tables for tabular data that is intended for comparison. If your data is only label value pairs, consider the Dictionary component instead.

Information

  • The Table patterns will squish the spacing to some degree, but will mostly preserve their width on narrow viewports.
  • Tables will become scrollable if the content overflows.
  • If your content does not fit well with this component on narrow viewports, you can switch to an alternate component.

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("table-primary-1", "table-primary-2", "table-secondary-1", etc).

Optional Properties

Class Description
.sprk-b-Table--striped Adds a background color to alternating rows. This can improve the readability of wide tables.

Column Comparison

This is the standard Table style. It is useful for comparing columns of data.

Angular

The Table component in spark-core-angular consists of one Angular component:

  • sprk-table

The component expects you to put table HTML inside it.

Column Heading Column Heading Column Heading
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<div class="sprk-b-TableContainer" data-id="table-1">
  <table class="sprk-b-Table sprk-b-Table--spacing-medium">
    <thead>
      <tr>
        <th>Column Heading</th>
        <th>Column Heading</th>
        <th>Column Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>
          
<sprk-table idString="table-1">
  <thead sprkTableHead>
    <tr>
      <th>Column Heading</th>
      <th>Column Heading</th>
      <th>Column Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</sprk-table>

Information

See below for available customization options:

Input Type Description
additionalClasses string Allows a string of classes to add, in addition to the Spark classes to the Table wrapper. Intended for overrides.
additionalTableClasses string Allows a string of classes to add to the Table, in addition to the Spark classes. Intended for overrides.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

Secondary Table

This is the secondary styling for the standard table.

Column Heading Column Heading Column Heading
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<div class="sprk-b-TableContainer" data-id="table-2">
  <table class="sprk-b-Table sprk-b-Table--secondary sprk-b-Table--spacing-medium">
    <thead>
      <tr>
        <th>Column Heading</th>
        <th>Column Heading</th>
        <th>Column Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>
          

Grouped Columns

This table has grouped subheadings.

Angular

The grouped column variant uses the same component structure column comparison.

Column Heading Column Heading Column Heading
SubHeading SubHeading SubHeading
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
<div class="sprk-b-TableContainer" data-id="table-3">
  <table class="sprk-b-Table sprk-b-Table--grouped-columns sprk-b-Table--spacing-medium">
    <thead>
      <tr>
        <th rowspan="2">Column Heading</th>
        <th colspan="3">Column Heading</th>
        <th rowspan="2">Column Heading</th>
      </tr>
      <tr>
        <th class="sprk-b-Table--grouped-column">SubHeading</th>
        <th class="sprk-b-Table--grouped-column">SubHeading</th>
        <th class="sprk-b-Table--grouped-column">SubHeading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
      </tr>
    </tbody>
  </table>
</div>
          
<sprk-table idString="table-3">
  <thead sprkTableHead>
    <tr>
      <th rowspan="2">Column Heading</th>
      <th colspan="3">Column Heading</th>
      <th rowspan="2">Column Heading</th>
    </tr>
    <tr>
      <th sprkTableGroupedColumn>SubHeading</th>
      <th sprkTableGroupedColumn>SubHeading</th>
      <th sprkTableGroupedColumn>SubHeading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
  </tbody>
</sprk-table>

Row Comparison

The Row Comparison table is useful for comparing rows of data.

Angular

The row comparison variant uses the same component structure column comparison.

Column Heading Column Heading Column Heading
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
Row Heading Data 1 Data 2 Data 3
<div class="sprk-b-TableContainer" data-id="table-4">
  <table class="sprk-b-Table sprk-b-Table--row-comparison sprk-b-Table--spacing-medium">
    <thead>
      <tr>
        <th class="sprk-b-Table__empty-heading"></th>
        <th>Column Heading</th>
        <th>Column Heading</th>
        <th>Column Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th>Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th>Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th>Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>
          
<sprk-table idString="table-2">
  <thead sprkTableHead>
    <tr>
      <th sprkTableEmptyHeading></th>
      <th>Column Heading</th>
      <th>Column Heading</th>
      <th>Column Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th sprkTableRowHeading>Row Heading</th>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <th sprkTableRowHeading>Row Heading</th>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <th sprkTableRowHeading>Row Heading</th>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <th sprkTableRowHeading>Row Heading</th>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</sprk-table>

Secondary Row Comparison

The Secondary Row Comparison table is useful for comparing simple labeled data with CTAs, such as a table of mortgage rates.

Row Heading Data Data
Row Heading Data Data
Row Heading Data Data
<div class="sprk-b-TableContainer" data-id="table-5">
  <table class="sprk-b-Table sprk-b-Table--secondary-row-comparison sprk-b-Table--spacing-medium">
    <tbody>
      <tr>
        <th>Row Heading</th>
        <td>Data</td>
        <td>Data</td>
        <td class="sprk-o-Stack sprk-o-Stack--end-column">
          <div class="sprk-o-Stack__item">
            <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
          </div>
        </td>
      </tr>
      <tr>
        <th>Row Heading</th>
        <td>Data</td>
        <td>Data</td>
        <td class="sprk-o-Stack sprk-o-Stack--end-column">
          <div class="sprk-o-Stack__item">
            <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
          </div>
        </td>
      </tr>
      <tr>
        <th>Row Heading</th>
        <td>Data</td>
        <td>Data</td>
        <td class="sprk-o-Stack sprk-o-Stack--end-column">
          <div class="sprk-o-Stack__item">
            <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>