Skip to main content
5.0.0Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.0

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.

NameDateContent
  <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

PropertyDescriptionTypeDefault
actionsDescribe action buttons to show in each table rowTableRowAction[]-
columnsDescribe columns to show in the table. Table headersTableColumn[]-
dataThe full set of table data to be displayed in the tableTableData[]-
identification-property-nameThe name of the property of the TableData item used for identificationUsed to set the data-indentificator attribute ot each row DIV elementstring'key'
render-actions-styleSet 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-downcontext-menu icons'icons'
show-hover-effectAllow hover over effect for table rowsboolean-

TritonTableCell

PropertyDescriptionTypeDefault
cell-typeIf header is given the cell will render as th, else it will render as tddata header-
colspanSpecifies the number of columns a cell should spannumber-
headersSpecifies one or more header cells a cell is related tostring-
rowspanSets the number of rows a cell should spannumber-

TritonTableGroup

PropertyDescriptionTypeDefault
group-typeset the type of the table groupbody colgroup foot head'body'

Events

Main Component

NameTypeDescriptionExtra
atRowClickCustomEvent<CustomEvent<any>>Emitted when a table row is clicked.-
atRowMouseOutCustomEvent<CustomEvent<any>>Emitted when the mouse goes out of a table row.-
atRowMouseOverCustomEvent<CustomEvent<any>>Emitted when the mouse goes over a table row.-

Slots

Main

takes any kind of markup element

<triton-table>
<div></div>
</triton-table>

Details

Depends on