Loading...

Table View

Table View

Table View is used for displaying data in a read-only data grid. Compared to spreadsheet tables (Worksheet, Table, and SQL Report) which is used for editing data, Table View is used for displaying data in a user-friendly and nicely formatted way. The component has built-in features for selection, sorting, filtering, formatting, and custom renderers.


TbV

Data

Use a SQL query to define the data set that is displayed in a Table View. You can load data from any database table or view it in the Solution database. To enable access control, use filters that reference dimensions using the same syntax that you are using to create SQL Reports.

You can also use macros to create highly dynamic queries using C#.


Data Grid layout and behavior

The Data Grid tab in the Table View designer is where you create the layout and behavior by adding columns from the data set and setting properties for selection, paging, and filtering.

Before you can create the layout, run the (Data Source) SQL query so that you can easily add columns to the data grid from the data set.


Columns

To configure a column, select it from the Columns list and edit its properties in the Properties window.


How to create dynamic and localized column captions

If you need a dynamic column caption, or you need to support localization, use the Caption Expression to create a C# expression that returns a string.


Example

This caption expression translates the text associated with the "AccountID" text code to the language of the currently logged-in user:

Localize("AccountID")

How to render the custom cell content

Use the Renderer column property to define a JavaScript function that returns the HTML element to render in the cell.


Example

This example shows how to use a custom renderer to render a SVG into a cell:

function(eventArgs, services){
const importancePct = (eventArgs.value / 10) * 100;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "30px");
const newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("width", importancePct + '%');
newRect.setAttribute("height", "100%");
newRect.setAttribute("fill", importancePct > 50 ? 'green' : 'yellow');
svg.appendChild(newRect);
return svg;
}

How to format cells

You can format numeric and date/datetime cells using the Format String or Formatter property.


How to define context menu actions

You can define custom actions pr column that the user can execute. Custom actions are defined with the Context Menu Actions property.

When a user executes an action, the action can be acted upon in the Workbook by handling the "Custom Context Menu Action executed" event of the Table View component. In the event handler, you can access the following properties of the @Event object.


TbV


{
Data: {}, // the row object of the cell that was clicked
Selection:{
Rows: [{
Columns: [], // array of column names of the row (keys)
RowData: {ColumnName: cellValue, ...} // each key and value of the row
}], // All the selected rows
Cells: [{ RowData: "cell value", Column: "name of the column"}, ... ] // All the selected cells
},
Sender:{
ActionName: "the name of the context menu action that was executed",
ColumnName: "the name of the column"
}
}

How to filter on one or more columns

To enable filtering on one or more columns, set the Enable filter property to the true for each column that you want to filter on. This will add a filtering option for the column to the filter bar at the top of the Table View component in the Workbook.

The filter options for a column are based on its data type. For example, a numeric column can be filtered using numeric operators such as less than or greater than, while a text column can be filtered by equals, contains, starts with, and so on. If you want to instead enable the user to pick from a list of values in the column, use the Filter Type property and switch from Default to Select.


How to pin columns to left or right

You can pin columns to left or right using the Fixed State property.


Videos