Table View

Edit on GitLab

Table View is used for displaying data in a read-only data grid. Compared to spreadsheet tables (Worksheet, Table, and SQL Report) which are used for editing data, Table View is used for displaying data in a nicely formatted way.

The component has built-in features for selection, sorting, filtering, formatting, and custom renderers.

How to create a Table View object

TbV

Actions

Load Data

Call this action to load or refresh data.

Events

Cell Action Link Tapped

This event is raised when the user clicks a cell in an Action Link column. The @Event payload contains the following data:

Note! The “Data” property contains the fields and values of the clicked row, so it will be different for each Table View instance, depending on how the data source is defined.

{
    "Data": {
        "CustomerID": "C1",
        "CustomerName": "Customer 1",
        …        
    },
    "Sender": {
        "ColumnName": "name of the column of the clicked cell",
        "ActionName": "ActionLink"
    },
    "Selection": {
        "Rows": [],
        "Cells": []
    }
}

Custom Context Menu Action Executed

This event is raised a user clicks a context menu item. The @Event payload contains the following data:

Note! The “Data” property contains the fields and values of the clicked row. The Selection property contains the fields and values of the currently selected rows. These objects will be different for each Table View instance, depending on how the data source is defined.

{
    "Data": {
        "CustomerID": "C1",
        "CustomerName": "Customer 1",
        …
    },
    "Sender": {
        "ColumnName": "name of the column of the clicked cell",
        "ActionName": "name of the context menu item action"
    },
    "Selection": {
        "Rows": [
            {
                "RowData": {
                    "CustomerID": "C1",
                    "CustomerName": "Customer 1",
                    …                   
                },
                "Columns": [
                    "CustomerID",
                    "CustomerName",
                    …
                ]
            }
        ],
        "Cells": [
            {
                "RowData": "C1",
                "Column": "CustomerID"
            },
            {
                "RowData": "Customer 1",
                "Column": "CustomerName"
            }, 
        ]
    }
}

Custom

This event can be raised from custom renderers, for example if you render clickable content in cells.
The @Event payload contains a Data object which is provided by the renderer.

Example: The custom renderer raises a custom event passing an object with a key and value property.

function(eventArgs, services){
  …
    btn.onclick = () => services.eventDispatcher.raiseCustomEvent({key: “hello”, value: ”world”});
    …    
}
The @Event payload will contain the following data:
{
    “Data”: {
        “key”: “hello”,
        “value”: “world”
     }
}

Selection Changed

This event is raised when the row selection is changed by the user, for example when a user selects or deselects a row. The @Event payload contains the following data:

Note! The “Data.SelectedItems and Data.ChangedItems” objects contain the fields and values of the clicked selected rows, so it will be different for each Table View instance, depending on how the data source is defined.

{
    "Data": {
        "SelectedItems": [
            {
                "CustomerID": "C1",
                "CustomerName": "Customer 1",
                …
        ],
        "ChangedItems": [
          {
                "CustomerID": "C1",
                "CustomerName": "Customer 1",
                …                
            }
        ],
        "Action": "select” | “deselect"
    }
}

The Action specifies whether the user selected or deselected a row. Valid values are “select” and “deselect”

The SelectedItems contains the currently selected items.
The ChangedItems contains the items which were affected by the last change (select or deselect).

Row Clicked

This event is raised when the user clicks on a row. The @Event payload contains the following data:

Note! The “Data.RowData” property contains the fields and values of the clicked row, so it will be different for each Table View instance, depending on how the data source is defined.


{
    "Data": {
        "RowData": {
            "CustomerID": "c3",
            "CustomerName": "Customer 3",
             …            
        }
    }
}

Table View

Actions

Events

Videos