Xena Developer
SiteSign inDesign System
Search…
Introduction
The possibilities
Development
Get started
Samples
API documentation
User interface
Xena Design System
Use our stylesheet
Design Guide
Alerts and warnings
Buttons
Colors and fonts
Collapsible
Dropdowns
Forms
Icons
Layout
Modals
Navigation
Pagination
Panels
Tables
Other components
Powered By GitBook
Tables
Present and edit data in tables.

Basic tables

A table is always wrapped in <div class="table-responsive"> ... </div> The table element must have the class table.
Standard table.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>

Table rows

You can enrich the table by adding additional classes.
Decorated table rows.
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
<tbody>
<tr class="active">
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr class="info">
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="warning">
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr class="danger">
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr class="success">
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>

Context menu

Each row can have a context menu.
Table row with context menu open.
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td class="panel-table-button">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="disabled"><a href="#" class="disabled"><i class="fas fa-arrow-right"></i> Go to</a></li>
<li><a href="#"><i class="fas fa-trash"></i> Delete</a></li>
<li class="dropdown-function">
<div class="dropdown-form">
<label class="control-label">Betaler:</label>
<div class="form-group input-icon-group">
<div class="input-group">
<input class="form-control input-sm">
<a href="#" class="input-group-addon">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

Editible data

Edit data in table. For these text input fields to look right inside tables, you must apply some classes on the row and individual cells.
Table row with editable data.
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="table-edit-mode">
<td class="cell-edit-mode">
<div class="form-group">
<input type="text" value="Cell 1" class="form-control">
</div>
</td>
<td class="cell-edit-mode">
<div class="form-group">
<input type="text" value="Cell 2" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>
In case of checkboxes or radio buttons in tables, you do not need to apply cell-edit-mode.
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="table-edit-mode">
<td>
<input type="checkbox">
</td>
<td class="cell-edit-mode">
<div class="form-group">
<input type="text" value="Cell 2" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>

Expand rows

Table row expanded.
<div class="table-responsive">
<table class="table">
<colgroup>
<col style="width: 1%;">
<col style="width: auto;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td>
<button class="btn-unstyled"><i class="fas fa-chevron-up"></i></button>
</td>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr class="table-row-expand">
<td></td>
<td colspan="2" class="no-padding">
<p class="mini-headline">Headline</p>
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
​
Previous
Panels
Next
Other components
Last modified 1yr ago
Copy link
Outline
Basic tables
Table rows
Context menu
Editible data
Expand rows