Table custom

The following documentation supports application developers to build their own tables from scratch with our standard styling whilst allowing for maximum control over functionality and logic. This approach keeps tables flexible, visually aligned and optimises performance.

Import table-custom.css stylesheet to start building.

Usage example

Other components from this design system can be added as needed into custom built tables.

Name
Status
Country
City
Next stop
Mary Departed Australia Sydney Opera house
Nyra Departed New Zealand Rotorua Haka River
Nick Delayed Australia Melbourne Melbourne Art Museum 
<style>
  @import url("/dist/themes/table-custom.css");
</style>

<table>
  <thead>
    <tr class="bold-background">
      <th>
        <sl-checkbox indeterminate></sl-checkbox>
      </th>
      <th>
        <div class="content-center">
          Name
          <sl-icon class="sortable" name="fas-sort"></sl-icon>
        </div>
      </th>
      <th>
        Status
      </th>
      <th>
        <div class="content-center">
          Country
          <sl-icon class="sortable" name="fas-sort"></sl-icon>
        </div>
      </th>
      <th>
        <div class="content-center">
          City
          <sl-icon class="sortable" name="fas-sort"></sl-icon>
        </div>
      </th>
      <th>
        Next stop
      </th>
    </tr>
  </thead>
  <tbody class="hoverable">
    <tr>
      <td>
        <sl-checkbox checked></sl-checkbox>
      </td>
      <td>Mary</td>
      <td><sl-badge variant="success">Departed</sl-badge></td>
      <td>Australia</td>
      <td>Sydney</td>
      <td>Opera house</td>
    </tr>
    <tr class="subtle-background">
      <td>
        <sl-checkbox checked></sl-checkbox>
      </td>
      <td>Nyra</td>
      <td><sl-badge variant="success">Departed</sl-badge></td>
      <td>New Zealand</td>
      <td>Rotorua</td>
      <td>Haka River</td>
    </tr>
    <tr>
      <td><sl-checkbox></sl-checkbox></td>
      <td>Nick</td>
      <td><sl-badge variant="warning">Delayed</sl-badge></td>
      <td>Australia</td>
      <td>Melbourne</td>
      <td>Melbourne Art Museum</td>
    </tr>
  </tbody>
</table>

Table header

Background

By default, white background colour is set. Otherwise, neutral subtle and bold background colours are available with the class="subtle-background" and class="bold-background" with <tr> tag.

Default Default Default
Subtle Subtle Subtle
Bold Bold Bold 
<table>
  <thead>
    <tr>
      <th>
        Default
      </th>
      <th>
        Default
      </th>
      <th>
        Default
      </th>
    </tr>
  </thead>
</table>
<table>
  <thead>
    <tr class="subtle-background">
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
    </tr>
  </thead>
</table>
<table>
  <thead>
    <tr class="bold-background">
      <th>
        Bold
      </th>
      <th>
        Bold
      </th>
      <th>
        Bold
      </th>
    </tr>
  </thead>
</table>

<style>
  th {
    width: 200px;
  }
</style>

Border

Default and subtle background header cells have optional border by adding border-bottom class attribute to the <tr> tag.

Bold background header cells don’t have the option for border except white right side border, using border-right. This border is also available for subtle background header cells.

Bottom border colour is customisable for use cases such as adding more emphasis depending on the context, using --hds-color-border: your-colour.

Default Default Default
Subtle Subtle Subtle
Subtle Subtle Subtle
Bold Bold Bold
Green border Green border Green border 
<table class="demo-table">
  <thead>
    <tr class="border-bottom">
      <th>
        Default
      </th>
      <th>
        Default
      </th>
      <th>
        Default
      </th>
    </tr>
  </thead>
</table>
<table class="demo-table">
  <thead>
    <tr class="subtle-background border-bottom">
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
    </tr>
  </thead>
</table>
<table class="demo-table">
  <thead>
    <tr class="subtle-background border-right">
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
      <th>
        Subtle
      </th>
    </tr>
  </thead>
</table>
<table class="demo-table">
  <thead>
    <tr class="bold-background border-right">
      <th>
        Bold
      </th>
      <th>
        Bold
      </th>
      <th>
        Bold
      </th>
    </tr>
  </thead>
</table>
<table class="demo-table">
  <thead>
    <tr class="subtle-background border-bottom" id="border-colour">
      <th>
        Green border
      </th>
      <th>
        Green border
      </th>
      <th>
        Green border
      </th>
    </tr>
  </thead>
</table>

<style>
#border-colour.border-bottom {
  --hds-color-border: var(--hds-color-border-success);
}
</style>

Padding

By default, top and bottom padding is set to 12px. Padding for all four sides can be controlled using the header-padding class and --hds-tablecustom-cell-header-padding token.

Label
Label 
<table>
  <thead>
    <tr>
      <th class="subtle-background">
        Label
      </th>
    </tr>
    <tr>
      <th class="subtle-background header-padding demo-border" style="--hds-tablecustom-cell-header-padding: 2px 50px">
        Label
      </th>
    </tr>
  </thead>
</table>
<style>
  .demo-border {
    border: 1px dotted navy;
  }
</style>

Label overflow

By default, the label will truncate if it is longer than space allows.

However, truncation can be turned off by adding overflow as class attribute to <th> if label needs to wrap the second line instead.

Default default default default label Second second second second line label 
<table>
  <thead>
    <tr>
      <th class="demo-width">
        Default default default default label
      </th>
      <th class="overflow">
        Second second second second line label
      </th>
    </tr>
  </thead>
</table>

<style>
  .demo-width {
    max-width: 200px;
  }
</style>

Content alignment

This stylesheet does not have control over element placement, but the rule of thumb is the content in header columns are aligned left by default.

Use div tag with the class attribute content-center can align its content vertically to center.

City fantastic fantastic fantastic view 
<table>
  <thead>
    <tr>
      <th class="header-col overflow">
        <div class="content-center">
          City fantastic fantastic fantastic view
          <sl-icon name="fas-sort"></sl-icon>
        </div>
      </th>
    </tr>
  </thead>
</table>

Sortable

This is for styling only. The sorting feature is not included.

Sorting content for the column can either be ascending (up) or descending (down). Column sorting is optional by using class attribute sortable for cursor and color styling.

Default
Ascending
Descending
Bold
Ascending
Descending 
<table>
  <thead>
    <tr class="subtle-background">
      <th>
        <div class="content-center">
          Default
          <sl-icon class="sortable" name="fas-sort"></sl-icon>
        </div>
      </th>
      <th>
        <div class="content-center">
          Ascending
          <sl-icon class="sortable"  name="fas-sort-up"></sl-icon>
        </div>
      </th>
      <th>
        <div class="content-center">
          Descending
          <sl-icon class="sortable" name="fas-sort-down"></sl-icon>
        </div>
      </th>
    </tr>
  </thead>
  <thead>
    <tr class="bold-background">
      <th>
        <div class="content-center">
        Bold
        <sl-icon class="sortable" name="fas-sort"></sl-icon>
        </div>
      </th>
      <th>
        <div class="content-center">
          Ascending
          <sl-icon class="sortable" name="fas-sort-up"></sl-icon>
        </div>
      </th>
      <th>
        <div class="content-center">
          Descending
          <sl-icon class="sortable" name="fas-sort-down"></sl-icon>
        </div>
      </th>
    </tr>
  </thead>
</table>

Table body

In this section, you will find information about font sizes, alignment, subtext slot, borders, text overflow, states, background color and padding.

Font sizes

By default, text content will be set at base size (14px), otherwise it can be controlled with CSS.

e.g. table summary uses xl size (18px) for main-text.

Text
Text 
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

<table>
  <tbody style="font-size: var(--hds-font-size-body-xl);">
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

<style>
  td {
    width: 200px;
  }
</style>

Alignment

Text is aligned to left by default or right by adding align-right class.

Text
Text 
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
    <tr>
      <td class="align-right">
        Text
      </td>
    </tr>
  </tbody>
</table>

Subtext slot

Subtext slot is placed below main text. Use <div class="text-container"> and <span class="subtext"> for this style.

Text Description
Text Description 
<table>
  <tbody>
    <tr>
      <td>
        <div class="text-container">
          Text
          <span class="subtext">Description</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align-right">
        <div class="text-container">
          Text
          <span class="subtext">Description</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Borders

Borders are off by default. To add them to a body cell, apply the appropriate border class to any of its four sides: border-top, border-left, border-right, or border-bottom.

Pick your choice of border, then add --hds-color-border: your-colour to the style if you want to override the border colour and keep it customisable.

Top border
Left border
Right border
Bottom border here
Top border
Left border
Right border
Bottom border here 
<table>
  <tbody>
    <tr>
      <td class="border-top">
        Top border
      </td>
    </tr>
    <tr>
      <td class="border-left">
        Left border
      </td>
    </tr>
    <tr>
      <td class="border-right">
        Right border
      </td>
    </tr>
    <tr>
      <td class="border-bottom">
        Bottom border here
      </td>
    </tr>
    <tr><td></td></tr>
    <tr>
      <td class="border-top border-green">
        Top border
      </td>
    </tr>
    <tr>
      <td class="border-left border-green">
        Left border
      </td>
    </tr>
    <tr>
      <td class="border-right border-green">
        Right border
      </td>
    </tr>
    <tr>
      <td class="border-bottom border-green">
        Bottom border here
      </td>
    </tr>
  </tbody>
</table>
<style>
.border-green.border-top {
  --hds-color-border: var(--hds-color-border-success);
}

.border-green.border-left {
  --hds-color-border: var(--hds-color-border-success);
}

.border-green.border-right {
  --hds-color-border: var(--hds-color-border-success);
}

.border-green.border-bottom {
  --hds-color-border: var(--hds-color-border-success);
}
</style>

Text overflow

By default, the text will truncate if it is longer than space allows.

However, truncation can be turned off by adding overflow as class attribute to <td> if text needs to wrap the second line instead.

A long body of text here A long body of text here 
<table>
  <tbody>
    <tr class="border-bottom">
      <td style="max-width: 150px">
        A long body of text here
      </td>
      <td class="overflow">
        A long body of text here
      </td>
    </tr>
  </tbody>
</table>

Background colour

By default, white background colour is set using the --hds-cell-color-bg token. Subtle background colours can be applied to cells to indicate alternating rows or highlight specific content by using subtle-background class attribute with <tr> or <td>

If you wish to use your own color, --hds-cell-color-bg and --hds-cell-color-bg-subtle tokens are available for custom.

Text Text Text Text
Text Text Text Text
Custom Custom Custom Custom 
<table>
  <tbody>
    <tr class="subtle-background">
      <td>
        Text
      </td>
      <td>
        Text
      </td>
      <td>
        Text
      </td>
      <td>
        Text
      </td>
    </tr>
    <tr>
      <td class="subtle-background">
        Text
      </td>
      <td>
        Text
      </td>
      <td>
        Text
      </td>
      <td class="subtle-background">
        Text
      </td>
    </tr>
    <tr>
      <td>
        Custom
      </td>
      <td class="custom-background">
        Custom
      </td>
      <td>
        Custom
      </td>
      <td class="custom-background">
        Custom
      </td>
    </tr>
  </tbody>
</table>
<style>
  .custom-background {
    --hds-cell-color-bg: var(--hds-color-bg-danger-subtle);
  }
</style>

States

Hover state can be applied to rows to help with focusing on table content.

Hover me Hover me Hover me
Hover me Hover me Hover me 
<table>
  <tbody class="hoverable">
    <tr>
      <td>
        Hover me
      </td>
      <td>
        Hover me
      </td>
      <td>
        Hover me
      </td>
    </tr>
    <tr class="subtle-background">
      <td>
        Hover me
      </td>
      <td>
        Hover me
      </td>
      <td>
        Hover me
      </td>
    </tr>
  </tbody>
</table>

Padding

The default padding is 8px on the top and bottom. To control padding on all four sides, use the class attribute cell-padding and style="--hds-tablecustom-cell-padding: your-value-px".

Text
Text 
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
    <tr>
      <td class="cell-padding demo-border" style="--hds-tablecustom-cell-padding: 2px;">
        Text
      </td>
    </tr>
  </tbody>
</table>
<style>
  .demo-border {
    border: 1px dotted navy;
  }
</style>

Table footer have the same styling as table header other than Sortable. The use of <tfoot> is recommended.

By default, white background colour is set. Otherwise, neutral subtle and bold background colours are available with the class="subtle-background" and class="bold-background" with <tr> tag.

Default Default Default
Subtle Subtle Subtle
Bold Bold Bold 

<table>
  <tfoot>
    <tr class="border-bottom">
      <td>
        Default
      </td>
      <td>
        Default
      </td>
      <td>
        Default
      </td>
    </tr>
  </tfoot>
</table>
<table>
  <tfoot>
    <tr class="subtle-background border-bottom">
      <td>
        Subtle
      </td>
      <td>
        Subtle
      </td>
      <td>
        Subtle
      </td>
    </tr>
  </tfoot>
</table>
<table>
  <tfoot>
    <tr class="bold-background">
      <td>
        Bold
      </td>
      <td>
        Bold
      </td>
      <td>
        Bold
      </td>
    </tr>
  </tfoot>
</table>

Padding

By default, top and bottom padding is set to 12px. Padding for all four sides can be controlled using the footer-padding class and --hds-tablecustom-cell-footer-padding token.

Label
Label 
<table>
  <tfoot>
    <tr>
      <th>
        Label
      </th>
    </tr>
    <tr>
      <td class="footer-padding demo-border" style="--hds-tablecustom-cell-footer-padding: 15px 30px">
        Label
      </td>
    </tr>
  </tfoot>
</table>
<style>
  .demo-border {
    border: 1px dotted navy;
  }
</style>