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

Configurable Variables

Variable Default Description
$table-padding-small $space-inset-s The small table padding.
$table-padding-medium $space-inset-m The medium table padding.
$table-padding-large $space-inset-l The large table padding.
$table-cell-alignment center The table cell alignment.
$table-stripe-color $gray The table stripe color.
$table-row-border-width 1px The width of the bottom border on table rows.
$table-row-border-style solid The style of the bottom border on table rows.
$table-row-border-color $gray The color of the bottom border on table rows.
$table-header-background-color $black The background color of the table header.
$table-header-font-color $white The font color of the table header.
$table-header-font-size $font-size-body-one The font size of the table header.
$sprk-table-header-font-weight $font-weight-body-one The font weight of the table header.
$table-header-border-spacing 2px The width of the right border on the table header.
$table-header-border-color $white The color of the right border on the table header.
$table-empty-heading-background-color $white The background color of empty table headers.
$table-secondary-header-background-color $white The background color of secondary table headers.
$table-secondary-header-font-color $black The font color of secondary table headers.
$table-secondary-header-text-alignment left The text alignment of secondary table headers.
$table-secondary-cell-text-alignment left The text alignment of secondary table cells.
$table-secondary-header-border-spacing 0 The width of the right border on the secondary table header.
$table-secondary-header-border-color 0 The color of the right border on the secondary table header.
$table-grouped-header-background-color $black The background color of the header in the grouped columns table variant.
$table-grouped-header-font-size $font-size-body-four The font size of the header in the grouped columns table variant.
$table-grouped-header-font-weight normal The font weight of the header in the grouped columns table variant.
$table-secondary-row-comp-row-spacing 0 15px Sets the distance between the borders of adjacent cells in the secondary row comparison table (horizontal | vertical).
$table-secondary-row-comp-border-width 1px The width of the borders in the secondary row comparison table cells.
$table-secondary-row-comp-border-style solid The style of the borders in the secondary row comparison table cells.
$table-secondary-row-comp-border-color $gray The color of the borders in the secondary row comparison table cells.

Class Modifiers

Class Description
.sprk-b-Table--secondary Sets styles for the secondary table variant.
.sprk-b-Table--grouped-columns Sets styles for the grouped column table variant.
.sprk-b-Table--row-comparison Sets styles for the row comparison table variant.
.sprk-b-Table--secondary-row-comparison Sets styles for the secondary row comparison table variant.
.sprk-b-Table--spacing-small Sets the spacing of the table to the small table spacing variable.
.sprk-b-Table--spacing-medium Sets the spacing of the table to the medium table spacing variable.
.sprk-b-Table--spacing-large Sets the spacing of the table to the large table spacing variable.
.sprk-b-TableHighlight Sets a highlight style on a specific table cell.
.sprk-b-Numerical To be used on a specific cell. Sets the text alignment to the right.
.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>