Table
The Table component is used to display information in a structured way. Tables are divided into rows and columns, with the first row and column explaining what the content of that row or column contains. They are useful for giving an overview of raw information to the users, but can have the drawback of being overly information dense.
Basic Usage
<triton-table></triton-table>
<TritonTable/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-table></triton-table>
</body>
</html>
Variants
With component
A table can be created using the Triton Table props columns and data.
Pass an array of TableColumn objects to the columns property to describe the header of the table.
Pass an array of TableData objects to the data property to describe the cells of the table.
<triton-table
[columns]="[
{
dataIndex: 'nodeId',
key: 'nodeId',
title: 'Node ID',
},
...
]"
[data]="[
{
key: 1,
nodeId: '16385',
logicalNetwork: 'Floatel Test',
hostName: 'n16386-nndf-001',
type: 'Router',
description: 'Cisco809-Common'
},
...
]"
>
</triton-table>
With classnames
The second options is to add a triton-table tag around a w3 standard HTML Table.
This options can be used for more detailed management of the table.
| Advice | Guidance | Other Words |
|---|---|---|
| Contribute to Triton | Use these docs pages | Find us on Teams |
| Get in touch with us! | Share these docs pages | Check out the Triton Wiki |
<triton-table>
<table>
<tr>
<th>Advice</th>
<th>Guidance</th>
<th>Other Words</th>
</tr>
<tr>
<td>Contribute to Triton</td>
<td>Use these docs pages</td>
<td>Find us on Teams</td>
</tr>
<tr>
<td>Get in touch with us!</td>
<td>Share these docs pages</td>
<td>Check out the Triton Wiki</td>
</tr>
</table>
</triton-table>
Context Menu
By setting the render-actions-style property on the table to context-menu the table will render as such.
<triton-table render-actions-style="context-menu"
[columns]="[...]"
[data]="[...]">
</triton-table>
Playground
API
Properties
triton-table
| Property | Description | Type | Default |
|---|---|---|---|
actions | Describe action buttons to show in each table row | TableRowAction[] | - |
columns | Describe columns to show in the table. Table headers | TableColumn[] | - |
data | The full set of table data to be displayed in the table | TableData[] | - |
identification-property-name | The name of the property of the TableData item used for identificationUsed to set the data-indentificator attribute ot each row DIV element | string | 'key' |
render-actions-style | Set the kind of rendering type for actionsIf is set to icons, actions will be rendered as iconsIf is set to context-menu, actions will be rendered as triton-menu-items in triton-drop-down | context-menu icons | 'icons' |
show-hover-effect | Allow hover over effect for table rows | boolean | - |
triton-table-cell
| Property | Description | Type | Default |
|---|---|---|---|
cell-type | If header is given the cell will render as th, else it will render as td | data header | - |
colspan | Specifies the number of columns a cell should span | number | - |
headers | Specifies one or more header cells a cell is related to | string | - |
rowspan | Sets the number of rows a cell should span | number | - |
triton-table-group
| Property | Description | Type | Default |
|---|---|---|---|
group-type | set the type of the table group | body colgroup foot head | 'body' |
triton-table-row
| Property | Description | Type | Default |
|---|
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atRowClick | CustomEvent<CustomEvent<any>> | Emitted when a table row is clicked. | - |
| atRowMouseOut | CustomEvent<CustomEvent<any>> | Emitted when the mouse goes out of a table row. | - |
| atRowMouseOver | CustomEvent<CustomEvent<any>> | Emitted when the mouse goes over a table row. | - |
| atDropdownStateChange | CustomEvent<boolean> | Emit boolean when state of the dropdown change | - |
| atClick | CustomEvent<void> | The default click behavior of the button | - |
| atSelect | CustomEvent<string> | Emit when the key prop changes | - |
| atClick | CustomEvent<void> | The default click behavior of the button | - |
| selectedItemContent | CustomEvent<MouseEvent> | Emitted when the content of the menu item is selected | - |
Slots
Main
takes any kind of markup element
<triton-table>
<div></div>
</triton-table>