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
$sprk-table-padding-small $sprk-space-inset-s The small table padding.
$sprk-table-padding-medium $sprk-space-inset-m The medium table padding.
$sprk-table-padding-large $sprk-space-inset-l The large table padding.
$sprk-table-cell-alignment center The table cell alignment.
$sprk-table-stripe-color $sprk-gray The table stripe color.
$sprk-table-row-border-width 1px The width of the bottom border on table rows.
$sprk-table-row-border-style solid The style of the bottom border on table rows.
$sprk-table-row-border-color $sprk-gray The color of the bottom border on table rows.
$sprk-table-header-background-color $sprk-black The background color of the table header.
$sprk-table-header-font-color $sprk-white The font color of the table header.
$sprk-table-header-font-size $sprk-font-size-body-one The font size of the table header.
$sprk-table-header-font-weight $sprk-font-weight-body-one The font weight of the table header.
$sprk-table-header-border-spacing 2px The width of the right border on the table header.
$sprk-table-header-border-color $sprk-white The color of the right border on the table header.
$sprk-table-empty-heading-background-color $sprk-white The background color of empty table headers.
$sprk-table-secondary-header-background-color $sprk-white The background color of secondary table headers.
$sprk-table-secondary-header-font-color $sprk-black The font color of secondary table headers.
$sprk-table-secondary-header-text-alignment left The text alignment of secondary table headers.
$sprk-table-secondary-cell-text-alignment left The text alignment of secondary table cells.
$sprk-table-secondary-header-border-spacing 0 The width of the right border on the secondary table header.
$sprk-table-secondary-header-border-color 0 The color of the right border on the secondary table header.
$sprk-table-grouped-header-background-color $sprk-black The background color of the header in the grouped columns table variant.
$sprk-table-grouped-header-font-size $sprk-font-size-body-four The font size of the header in the grouped columns table variant.
$sprk-table-grouped-header-font-weight normal The font weight of the header in the grouped columns table variant.
$sprk-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).
$sprk-table-secondary-row-comp-border-width 1px The width of the borders in the secondary row comparison table cells.
$sprk-table-secondary-row-comp-border-style solid The style of the borders in the secondary row comparison table cells.
$sprk-table-secondary-row-comp-border-color $sprk-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.

React

The SprkTable component expects columns and rows to be passed into props and will be rendered. The "name" key of the column will match the rows key.

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>
<SprkTable
 additionalTableClasses="sprk-b-Table--spacing-medium"
 idString="table-1"
 columns={columns}
 rows={rows}
>
  </SprkTable>

  <script>
    const columns = [{
        name: 'data1',
        header: 'Column Heading'
      },
      {
        name: 'data2',
        header: 'Column Heading'
      },
      {
        name: 'data3',
        header: 'Column Heading'
      }
    ];
    const rows = [{
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
    ]
  </script>

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.

Information

See below for available customization options:

Prop Type Description
variant string Determines what variant of table is going to be rendered. If no variant is set, Column Comparison is the default. If you would like pass your own markup, you can use the "html" variant. Expects one of the following: secondary, grouped, rowComparison, secondaryRowComparison, html
additionalContainerClasses 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.
columns array Expects an array of objects that defines the number of columns. See below for column object details.
rows array Expects an array of objects that defines the rows of data. See below for row object details.

The column object represents a column that can be supplied to the table.

Key Sample Value Description
name column1 The name of the column that will be used to match the row.
header Column Heading The text that will be displayed in the column header.
colspan 3 If present, will be added to determine the colSpan of the column.
rowspan 2 If present, will be added to determine the rowSpan of the column.

The row object represents a row that can be supplied to the table.

Key Sample Value Description
column1 Data 1 The key will determine what column the row data is rendered in and the value is the rendered.

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>
          
<SprkTable
 variant="secondary"
 additionalTableClasses="sprk-b-Table--spacing-medium"
 idString="table-2"
 columns={columns}
 rows={rows}
>
  </SprkTable>

  <script>
    const columns = [{
        name: 'data1',
        header: 'Column Heading'
      },
      {
        name: 'data2',
        header: 'Column Heading'
      },
      {
        name: 'data3',
        header: 'Column Heading'
      },
    ]
    const rows = [{
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
      {
        data1: "Data 1",
        data2: "Data 2",
        data3: "Data 3"
      },
    ]
  </script>

Grouped Columns

This table has grouped subheadings.

Angular

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

React

The grouped column variant uses a two-dimensional array to determine the columns and subheadings. Rows expects a two-dimensional array and the data will render in the order that it is provided.

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>
<SprkTable
 variant="grouped"
 additionalTableClasses="sprk-b-Table--spacing-medium"
 idString="table-3"
 columns={columns}
 rows={rows}
>

  </SprkTable>

  <script>
    const columns = [
      [{
          header: 'Column Heading',
          rowspan: 2
        },
        {
          header: 'Column Heading',
          colspan: 3
        },
        {
          header: 'Column Heading',
          rowspan: 2
        },
      ],
      [{
          header: 'SubHeading'
        },
        {
          header: 'SubHeading'
        },
        {
          header: 'Subheading'
        },
      ]
    ]
    const rows = [
      ["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"],
    ]
  </script>

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.

React

The row comparison variant expects an additional row object key of 'rowHeading'.

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>
<SprkTable
 variant="rowComparison"
 additionalTableClasses="sprk-b-Table--spacing-medium"
 idString="table-5"
 columns={columns}
 rows={rows}
>
  </SprkTable>

  <script>
    const columns = [{
        name: 'data1',
        header: "Column"
      },
      {
        name: 'data2',
        header: 'Column'
      },
      {
        name: "data3",
        header: 'Column'
      },
    ]
    const rows = [{
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        data3: "Data"
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        data3: "Data"
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        data3: "Data"
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        data3: "Data"
      },
    ]
  </script>

Secondary Row Comparison

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

React

The secondary row comparison variant expects an additional row object key of 'rowHeading'. The button key expects a SprkButton component. The header key in the column prop is not necessary.

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>
          
<SprkTable
 variant="secondaryRowComparison"
 additionalTableClasses="sprk-b-Table--spacing-medium"
 idString="table-5"
 columns={columns}
 rows={rows}
>
  </SprkTable>

  <script>
    const columns = [{
        name: 'data1'
      },
      {
        name: 'data2'
      }
    ]
    const rows = [{
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        button: <SprkButton variant="secondary">Learn More</SprkButton>
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        button: <SprkButton variant="secondary">Learn More</SprkButton>
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        button: <SprkButton variant="secondary">Learn More</SprkButton>
      },
      {
        rowHeading: 'Row Heading',
        data1: "Data",
        data2: "Data",
        button: <SprkButton variant="secondary">Learn More</SprkButton>
      },
    ]
  </script>