Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Tables

Code Examples

Spark-Core

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.

Column Comparison

When the data is meant to be compared column to column. This is the standard Table style.

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">
  <table class="sprk-b-Table sprk-b-Table--spacing-medium sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <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>
  <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.

Grouped Columns

When there is a need to group headings together.

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">
  <table class="sprk-b-Table sprk-b-Table__grouped-columns sprk-b-Table--spacing-small sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <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>
  <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

When the data is meant to be compared row to row.

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">
  <table class="sprk-b-Table sprk-b-Table--row-comparison sprk-b-Table--spacing-medium sprk-b-Table--striped-even sprk-b-Table--bordered-columns sprk-b-Table--bordered-columns-inside">
    <thead class="sprk-b-Table__head">
      <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 class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <th class="sprk-b-Table__row-heading">Row Heading</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>
          
<sprk-table>
  <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>
sparkdesignsystem@quickenloans.com