Table

Examples

timeseries id name unit aggregations filters
com.ruxit.builtin:host.cpu idle CPU idle % min, max, sum, avg osType
com.ruxit.builtin:host.cpu system CPU system % min, max, sum, avg osType
com.ruxit.builtin:host.cpu.load CPU load % min, max, sum, avg osType

<table class="table">
  <thead>
    <tr>
      <th>timeseries id</th>
      <th>name</th>
      <th>unit</th>
      <th>aggregations</th>
      <th>filters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>com.ruxit.builtin:host.cpu idle</td>
      <td>CPU idle</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
    <tr>
      <td>com.ruxit.builtin:host.cpu system</td>
      <td>CPU system</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
    <tr>
      <td>com.ruxit.builtin:host.cpu.load</td>
      <td>CPU load</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
  </tbody>
</table>

    
timeseries id name unit aggregations filters
com.ruxit.builtin:host.cpu idle CPU idle % min, max, sum, avg osType
com.ruxit.builtin:host.cpu system CPU system % min, max, sum, avg osType
com.ruxit.builtin:host.cpu.load CPU load % min, max, sum, avg osType

<table class="table table--responsive">
  <thead>
    <tr>
      <th>timeseries id</th>
      <th>name</th>
      <th>unit</th>
      <th>aggregations</th>
      <th>filters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>com.ruxit.builtin:host.cpu idle</td>
      <td>CPU idle</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
    <tr>
      <td>com.ruxit.builtin:host.cpu system</td>
      <td>CPU system</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
    <tr>
      <td>com.ruxit.builtin:host.cpu.load</td>
      <td>CPU load</td>
      <td>%</td>
      <td>min, max, sum, avg</td>
      <td>osType</td>
    </tr>
  </tbody>
</table>

    

Introduction

The Groundhog table usually holds multiple columns of text. The table component is used to present information in a structured format.

Table versions

The Groundhog table appears in three versions:

Including a table

  1. To include a Groundhog table add a <table> element. Add other table elements like in the example. Include the necessary text.
    <table class="table">
    <thead>
     <tr>
       <th>header</th>
       <th>header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
       <td>content</td>
       <td>content</td>
     </tr>
    </tbody>
    </table>
    
  2. Add the necessary Groundhog classes to the elements class attribute.
    <table class="table">...</table>
    
  3. The table is ready to use

Available classes for table

class name effect
.table Base class for the table element
.table--responsive Sets the table to behave responsively