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>
Documentation for this component is still in development
With component
A table can be created using the Triton Table props columns and data.
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.
Playground
| Node ID | Logical Network | Host name | Type | Description |
|---|---|---|---|---|
| 16385 | Floatel Test | n16386-nndf-001 | Router | Cisco809-Common |
| 16385 | Noble Drilling | n16386-nndf-001 | Router | Cisco809-Common |
| 16385 | Common | n16386-nndf-001 | Router | Cisco881 |
API
Properties
| 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 | - |
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<HTMLTritonMenuItemElement> | Emitted when the content of the menu item is selected | - |
Slots
Main
takes any kind of markup element
<triton-table>
<div></div>
</triton-table>