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 Subcomponents
Please use this variant of the Triton Table. Other variants will not be maintained going forward.
<TritonTableRow>
<TritonTableCell>James</TritonTableCell>
<TritonTableCell>06.06.1993</TritonTableCell>
<TritonTableCell>The born of a miracle <TritonSwitch/> </TritonTableCell>
</TritonTableRow>
<triton-table>
<triton-table-row>
<triton-table-cell cellType="header">Name</triton-table-cell>
<triton-table-cell cellType="header">Date</triton-table-cell>
<triton-table-cell cellType="header">Content</triton-table-cell>
</triton-table-row>
<triton-table-row>
<triton-table-cell>James</triton-table-cell>
<triton-table-cell>06.06.1993</triton-table-cell>
<triton-table-cell>The born of a miracle <triton-switch></triton-switch> </triton-table-cell>
</triton-table-row>
</triton-table>
Data Driven
Warning: Data driven tables will not be maintained in future versions of Triton. We advise against using them.
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>
Playground
API
Properties
TritonTable
| 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 | - |
TritonTableCell
| 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 | - |
TritonTableGroup
| Property | Description | Type | Default |
|---|---|---|---|
group-type | set the type of the table group | body colgroup foot head | 'body' |
Events
Main Component
| 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>