Bolt Design System

Table Element Numeric Formatting

An example of a Table Element with numeric data styling.

Important Notes:

Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.

Twig: Use the format prop to style the table in numeric format.

HTML: Add a e-bolt-table--numeric class to the <table> to style the table in numeric format.

Demo

Regular Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Numeric Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Twig

{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Pts',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Reb',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Ast',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Stl',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Blk',
      header: true,
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row1 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Michael Jordan',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '70',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '10',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '1',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Toni Kukoc',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '21',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '15',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '10',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '3',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '4',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Steve Kerr',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '20',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '0',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set footer %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Total',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '91',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '27',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '32',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '13',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '5',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  format: 'numeric',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  footer: {
    content: footer,
  },
} only %}

HTML

<table class="e-bolt-table e-bolt-table--numeric">
  <thead>
    <tr>
      <td></td>
      <th>Pts</th>
      <th>Reb</th>
      <th>Ast</th>
      <th>Stl</th>
      <th>Blk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Michael Jordan</th>
      <td>70</td>
      <td>10</td>
      <td>2</td>
      <td>5</td>
      <td>1</td>
    </tr>
    <tr>
      <th>Toni Kukoc</th>
      <td>21</td>
      <td>15</td>
      <td>10</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <th>Steve Kerr</th>
      <td>5</td>
      <td>2</td>
      <td>20</td>
      <td>5</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>91</td>
      <td>27</td>
      <td>32</td>
      <td>13</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>