Table
The table component is used to display all the information in a data set.
This component is used to gather information and specific data in an organized way and to be able to carry out actions on each of them if necessary.
We use as a base Datatables changing its style with the characteristics of our design system.
Table page header
This component have also an Input and a Button in case you want to include a search component on it.
<div class="header">
<h1>Title</h1>
<div class="tools">
<input type="text" class="search">
<button class="pbtn btn-primary">Search</button>
</div>
</div>Table navigation
<div class="table-container">
<table class="datatable">
<thead>
<tr>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th class="column-buttons" data-orderable="false"></th>
</tr>
</thead>
<tbody style="display:none;"></tbody>
</table>
</div>Table
This component arranged one above the other forms a table and gathers information. Each one have an action button included.
<div class="table-container">
<table class="datatable" id="table">
<tbody>
<!-- I'm a table, you can duplicate me as many times as you need -->
<tr>
<td>
<div class="cell-content">
<span class="tag tag-light-green">Light Green</span>
</div>
</td>
<td>
<div class="cell-content" data-text="Property name">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content btn-container">
<button class="pbtn btn-secondary btn-icon">
<span class="material-symbols-outlined">more_horiz</span>
</button>
</div>
</td>
</tr>
<!-- this is my end -->
</tbody>
</table>
</div>Table with page header, navigation and pagination
<div class="header">
<h1>Title</h1>
<div class="tools">
<input type="text" class="search">
<button class="pbtn btn-primary">Search</button>
</div>
</div>
<div class="table-container">
<table class="datatable" id="full-table">
<thead>
<tr>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th>
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th data-orderable="false">
<div class="cell-content">Label</div>
</th>
<th class="column-buttons" data-orderable="false"></th>
</tr>
</thead>
<tbody>
<!-- I'm a table, you can duplicate me as many times as you need -->
<tr>
<td>
<div class="cell-content">
<span class="tag tag-light-green">Light Green</span>
</div>
</td>
<td>
<div class="cell-content" data-text="Property name">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content">
<span>Property name</span>
</div>
</td>
<td>
<div class="cell-content btn-container">
<button class="pbtn btn-secondary btn-icon">
<span class="material-symbols-outlined">more_horiz</span>
</button>
</div>
</td>
</tr>
<!-- this is my end -->
</tbody>
</table>
</div>General guidelines
- The title of the table should make it clear to the user what the data has in common and what it is used for in the user interface.
- A description can be added below the title to provide more information about the data or its source.
- Column headings should be limited to one or two words that describe the data in that column.
- Inline actions are functions that can be performed on a specific table. Each table is accompanied by a dropdown that contains actions specifically related to that table.
- Use the same table height for table and header tables.
Structure
1
Page Header: It is optional. It shows the title of the table page and has a possible input search component.
2
Navigation: Clearly order the content of that individual table or column.
3
Table: Can be configured to display different types of data including tags to show states.
4
Action Button: Allows user take actions, for example delete, edit, copy, etc.
5