Document toolboxDocument toolbox

Table widgets

The table widget displays data as a simple table, distributed in columns and rows.

What data do I need for this widget?

Any kind of data will work, so you don't need any specific data fields or operations in your query.

Widget settings

To edit the widget settings, you must first be in Edit mode.

Click the widget title bar to open its settings. Alternatively, the settings are accessible via the Ellipsis icon → Properties. The widget settings are contained in three tabs, Data, Visual, and Raw.

The settings in the Data and Raw tabs are described in the Create a widget article. These are the Visual settings for the table widget:

Category

Setting

Description

Category

Setting

Description

Pagination

Pagination

In cases where you have a large amount of data, activate this option to separate the table content into different pages. Each page will contain a maximum of 100 events.

Top 

Enable to customize the data-sorting criteria and the maximum number of events shown in the table by enabling the filter options.

Top row limits

Set the maximum number of rows you want to display in the table. The top rows are defined by the sorting criteria in Sort by field and Sorting type. The default value is 10.

Sort by field

Sort the data table by selecting your desired column.

Sorting type

View your data in either Ascending (A to Z, 0 to 9) or Descending (Z to A, 9 to 0) order. The default value is Descending.

Columns

Expand this group of settings to customize the individual characteristics of each column.

Name

The name of the column. This will appear in the column header.

Hide

Activate this option to hide the column in the table.

Format

Select the format of the column values. The available options are:

  • Default - Standard format of the column values.

  • Date - Apply a date format.

  • Conditional - Create sets of conditions to modify the background color or show an icon for those column values that meet specific criteria.

  • Sparkline - Display a small, simple line chart representing the column data. This option only appears if you include a specific query pattern in your table widget. See details below.

  • Column - Represent data as a simple set of columns. This option only appears if you include a specific query pattern in your table widget. See details below.

Align items

Choose the desired alignment for the values within the column. You can choose between Left, Right, and Center.

Default layout

To set a default layout for any of the columns, enable the Activeboard's edit mode and click the header of the field that you want to sort. Any changes you make are automatically saved once you leave the edit mode and all users that access the Activeboard see the default layout. Any user can make changes to the headers when in view mode but these changes aren't saved once they leave the Activeboard.

Tips for using a table widget

Here are a few tips to get the most out of your table widget.

  • Layout: hover over the end of a column header and click the icon that appears to access the following setting options:

Pin column

Select this option to freeze the column, thus making it always visible while you use the vertical scroll bar of the table. Select between Pin left, Pin right or No pin.

Autosize this column

Apply the best width to fit the contents of the cells in the column.

Autosize all columns

Apply the best width to all the columns in the table.

Reset columns

Restore the original size of the columns.

  • Hide/show columns: hover over the end of a column header, select the icon that appears, then click the icon shown below to select the columns you want to display or hide in the table.

  • Filter: hover over the end of a column header and click the icon that appears, then select the filter icon. Search for the values you want to display in the search box and uncheck their boxes on the list to filter them out.

  • Sorting: you can click a column header to sort its content in ascending order, or click it again for a descending sort. Return to the original order by clicking the header again.

  • Column Resize: you can resize columns as required by dragging the delimiters in each column header.

  • Copy: select a cell or several ones, right-click them and select Copy to copy them to your clipboard. Select Copy with Headers to add the corresponding headers.

  • Export: right-click any cell and select Export → CSV Export to export the table content.

Query example

This is the source query used to generate the widget shown above:

query( from demo.ecommerce.data group every 5m by statusCode )

Add sparklines and column charts to a table widget

As mentioned above, the Sparkline and Column format options represent data as simple, embedded charts intended to check data trends at a glance. To make the Sparkline and Column options available, you must add the following query structure to your table widget:

 

sparkline(
query(),
query(),
["", ""],
["", ""]
)

 

You need to enter two different queries between brackets, preceded by sparkline. This allows you to represent values from two different queries (from the same or different data tables).

  • The first query must contain the grouping keys you want to represent as simple values. 

  • The second query must contain the values you want to represent as an embedded sparkline or column graph, so you need to aggregate the data (for example, including a count). Note that you can also add an aggregation to your first query.

  • After creating your table widget, you must click its header, select Visual, and go to the Columns category. There you must select Sparkline or Column in the Format setting of the required columns. 

  • Finally, you must include the names of the grouping fields and columns resulting from the aggregation between brackets.

Queries from different tables

If you use queries from two different tables when using the sparkline syntax, the grouping fields in both queries must have the same name. 

sparkline( query(from demo.ecommerce.data group every 0 by method, statusCode), query(from demo.ecommerce.data group every 1m by method, statusCode select count() as Sparkline select count() as Columns select min(bytesTransferred) as MinimumTransferredBytes), ["method", "statusCode"], ["Sparkline", "Columns", "MinimumTransferredBytes"] )

We have represented the count for each 1-minute group both as a sparkline and a column chart. Plus, we have included a column to represent the minimum number of bytes transferred for each group every minute. In this example, we use the first query to group the data in the method and statusCode columns and display the results in the table. The second query includes the values you want to display as embedded graphs in your table, which will display after we select either the Sparkline or Column setting options, as explained above.

sparkline( query(from demo.ecommerce.data group every 0 by statusCode, method), query(from web.all.access group every 5m by statusCode, method select count() as columnChart ), ["statusCode", "method"], ["columnChart"] )

In this example, we are displaying data from two different tables. We use the first query (demo.ecommerce.data) to group the data in the statusCode and method columns and display the results as values in the table. The second query (web.all.access) groups two fields with the same name as in the first query, and aggregates the data to add a count column (named columnChart), which we will represent as an embedded column chart.

Table widgets as inputs

Table widgets are uniquely equipped to do double-duty in your Activeboard as both widgets for the display of key data, and as inputs for filtering data in other widgets.

When used as a filter, you can select a cell in a table widget, and filter a different widget in the Activeboard based on the selected cell's value. Let's take the example of a table that simply lists the count of GET and POST requests over the Activeboard time range. When used as a filter, you can select the GET cell to make another widget only display its results where the HTTP method is GET. 

To do so, you need to edit the query of the other widget (not the table widget's query) to set the field name equal to the value of the cell you select in the table: 

Query script

Example

Sample widget query

Query script

Example

Sample widget query

$table_namespace.cellClicked

$Table1.cellClicked

Â