Table

In groundhog since v0.1.1

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:

Standard table table
Responsive table table--responsive
The expandable table

Including a table

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>

Add the necessary Groundhog classes to the elements class attribute.
```
<table class="table">...</table>
```
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