UI ELEMENTS

Tables

Tabular data display

Basic principles

Ink provides a way to give styling and interaction to tabular data, without interfering with the HTML table element default behaviour.

CSS CLASSES
Class name Description
ink-table The table root class.
alternating Sets a darker darker background color on odd number rows.
hover Highlights table rows when the mouse pointer hovers a row.
bordered Applies borders to all table cells.
red
green
blue
orange
grey
black
yellow 		Sets a background color on a table row
  • : This class must be used for the tables to work.

Usage

  • Css classes:
  • ink-table

To add Inks style rules to your tables, begin by adding the ink-table css class to your table elements:

<table class="ink-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

This will result in a table that gets our default table style, that looks like this:

Example

ID Name
1 John
2 Will
3 Steve

As you can see, by default table headings have centered text, so if you wish to change the text alignment you can use on of our content alignment css classes: 

<table class="ink-table">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Resulting in:

Example

ID Name
1 John
2 Will
3 Steve

Alternating row colors

  • Css classes:
  • alternating

Adding the alternating css class to your table will add a darker background color to every odd numbered row. This can be useful to distinguish between rows, in large and, or complex tables.

<table class="ink-table alternating">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Like so:

Example

ID Name
1 John
2 Will
3 Steve

Highlighting table rows

  • Css classes:
  • hover

Adding the hover css class to the table will cause table rows to be highlighted with a background color when hovered. Mouse pointer is set to the hand pointer.

<table class="ink-table hover">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Example

ID Name
1 John
2 Will
3 Steve

Borders

  • Css classes:
  • bordered

The bordered class adds borders around all table cells, headings and footers.

<table class="ink-table bordered">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Example

ID Name
1 John
2 Will
3 Steve

Row colors

  • Css classes:
  • red
  • green
  • blue
  • orange
  • grey
  • black
  • yellow

You can use one of Inks base colors as the background for a table row by adding one of the above classes:

<table class="ink-table hover">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="red">
      <td>1</td>
      <td>John</td>
    </tr>
    <tr class="blue">
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr class="green">
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Example

ID Name
1 John
2 Will
3 Steve

Combining multiple styles

  • Css classes:
  • red
  • green
  • blue
  • orange
  • grey
  • black
  • yellow

If necessary, you can combine all of the above options:

<table class="ink-table bordered hover alternating">
  <thead>
    <tr>
      <th class="align-left">ID</th>
      <th class="align-left">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="orange">
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Will</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>

Example

ID Name
1 John
2 Will
3 Steve