---
title: "Table"
slug: "table-widget"
updated: 2026-09-18T07:27:08Z
published: 2026-09-18T07:27:08Z
canonical: "learn.servitly.com/table-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

Display statistical results in a table, where rows and columns are defined by how the results are grouped.

The Table widget gives users an at-a-glance view of aggregated data, such as the number of things per customer or the number of alerts per customer by month. A single table can combine multiple statistics, so different information can be compared side by side, and a Total row summarizes the values of each column.

![Table](https://components-manager.servitly.com/components/Table_1/IMAGES/_screenshot?owner=AG_Servitly)

## How Data Is Arranged

The table layout is driven by the Group By property of the statistic. The first grouping defines the rows, so each distinct value (for instance, each country) becomes a row. The optional second grouping defines the columns, so each distinct value becomes a column. When no grouping is specified, the table shows one row per statistic with its value.

When the underlying objects are distributed over time, such as alerts, events, or work sessions, you can also group by `HOUR`, `DAY`, `MONTH`, or `YEAR`. For example, you can list customers as rows and months as columns to see how the count of customers evolve across months.

## Multiple Statistics

A table can include more than one statistic. The results of all statistics are merged into a single table, with rows based on the categories of the first grouping, and each statistic contributing its own values. This lets users compare different information in the same view, for instance the number of work sessions and the number of outcome pieces for each customer’s machine, without switching between widgets.

## Totals

The table includes a Total row at the bottom, summarizing the values of each column.

> NOTE Totals are calculated and automatically displayed only for columns based on a COUNT or SUM aggregation. For statistics using AVG, MIN, MAX, or LAST, the Total cell is left empty, since adding up these values would not produce a meaningful result. If no columns support the total value, the Total row is hidden.

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

// single statistic
<table-widget [title]="'Machines by Model'" headerFilter="dictionary:{'showIcon':false,'showValue':false,'showLabel':true}" queryFieldRef="query">
        <statistic resource="THING" aggregation="COUNT" [groupBy]="['productModel.name', 'properties.connected_machine']" sortDirection="ASC"></statistic>
</table-widget>

// multiple statistics
<table-widget [title]="'Distribution by Country'">
        <statistic label="Things" resource="THING" [groupBy]="['customer.country']" sortDirection="DESC"></statistic>
        <statistic label="Customers" resource="CUSTOMER" [groupBy]="['country']" sortDirection="DESC"></statistic>
</table-widget>        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Table `&lt;table-widget&gt;`

| *Category Column Header* | The label to be used as category column header. **Name**: categoryHeader **Type**: STRING \| Optional `categoryHeader="abc"` |
| --- | --- |
| *Category Filter* | The filter used to transform category names (first column in case of group-by). **Name**: categoryFilter **Type**: FILTER \| Optional `categoryFilter="dateFormat"` |
| *Export Enabled* | The boolean flag indicating whether the data export is enabled. **Name**: exportEnabled **Type**: BOOLEAN \| Optional **Default Value**: *false* `[exportEnabled]="true"` |
| *Header Filter* | The filter used to transform header names in case of double group-by. **Name**: headerFilter **Type**: FILTER \| Optional `headerFilter="dateFormat"` |
| *Show Headers* | The flag that indicates whether to display the table column headers. **Name**: showHeaders **Type**: BOOLEAN \| Optional **Default Value**: *true* `[showHeaders]="false"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Table'"` |
| *Value Filter* | The filter used to transform values. **Name**: valueFilter **Type**: FILTER \| Optional `valueFilter="dateFormat"` |
| **Data** |
| *Default Period* | The default period to use when computing statisticts. **Name**: period **Type**: PERIODS \| Optional `period="LAST_30_DAYS"` |
| *Period Filter Enabled* | The boolean flag indicating whether the embedded period filter is available. **Name**: filterEnabled **Type**: BOOLEAN \| Optional **Default Value**: *false* `[filterEnabled]="true"` |
| *Period Variable* | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. **Name**: periodRef **Type**: STRING \| Optional `periodRef="abc"` |
| *Query Variable* | The id of the page's <things-filter-field> used for searching. **Name**: queryFieldRef **Type**: STRING \| Optional `queryFieldRef="abc"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| **Sub Elements** |
| [*Statistic*](/docs/table-widget/#statistic) | The statistic whose values are to be displayed in the table. |

#### Statistic `&lt;statistic&gt;`

| *Aggregation* | The function used to aggregate data. **Name**: aggregation **Type**: ENUM \| Optional **Values**: *AVG*, *COUNT*, *MAX*, *MIN*, *SUM*, *LAST* `aggregation="AVG"` |
| --- | --- |
| *Averaged By* | The count used to average the statistic results (e.g. Average alert count by thing). **Name**: averagedBy **Type**: ENUM \| Optional **Values**: *thingCount* `averagedBy="thingCount"` |
| *Group By* | The property used to group results. For instance: customer.country. In the case where the underlying objects are temporally distributed you can also aggregate by HOUR, DAY, MONTH and YEAR. **Name**: groupBy **Type**: GROUP_BY \| Optional `groupBy="customer.name"` |
| *~~Include Zero Values~~* | The flag indicating whether to include or not the alerts with zero occurrences. **Name**: includeZeroValues **Type**: BOOLEAN \| Optional **Default Value**: *false* > [!CAUTION] > DEPRECATED > > This feature is no longer supported. `[includeZeroValues]="true"` |
| *Label* | The alternative label to be used forto display the statistic in the table as category or header. **Name**: label **Type**: STRING \| Optional `label="Nr. of Events"` |
| *~~Name~~* | The statistic whose results(s) must be loaded by the widget. **Name**: name **Type**: STATISTIC \| Required > [!CAUTION] > DEPRECATED > > Use the Resource, and select the Aggregation and Property to aggregate. `name="alertCount"` |
| *Property* | The object property whose values must be aggregated. **Name**: property **Type**: PROPERTY \| Optional `property="propName"` |
| *Resource* | The resource from which to retrieve the items to be used to calculate the statistic. **Name**: resource **Type**: ENUM \| Required **Values**: *ACTION*, *ALERT*, *EVENT*, *CUSTOMER*, *LOCATION*, *PARTNER*, *THING*, *USER*, *WORK_SESSION* **Default Value**: `resource="ACTION"` |
| *Sorting* | The sort direction used to order categories by value (default none). **Name**: sortDirection **Type**: ENUM \| Optional **Values**: *ASC*, *DESC* `sortDirection="ASC"` |
| *Status* | Define whether to include alerts that are still active, or have been activated in a period. **Name**: activationType **Type**: ENUM \| Optional **Values**: *ACTIVE*, *ACTIVATED* `activationType="ACTIVE"` |
| *Value Filter* | The name of the filter used to transform and display values. **Name**: filter **Type**: FILTER \| Optional `filter="fooBarFilter"` |
| **Data** |
| *Max Result Count* | The number of maximum returned results (default all results are returned). **Name**: limit **Type**: INTEGER \| Optional `limit="123"` |
| *Period Variable* | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. **Name**: periodRef **Type**: STRING \| Optional `periodRef="period"` |
| *Query* | The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. **Name**: query **Type**: QUERY \| Optional **Predicates**: *beginsWith*, *eq*, *neq*, *gt*, *gte*, *isEmpty*, *isNotEmpty*, *lt*, *lte*, *like*, *notLike* `[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"` |

## Full Syntax Example

```xml

<table-widget    
    [title]="'Table'"
    [showHeaders]="false"
    [exportEnabled]="true"
    categoryHeader="abc"
    headerFilter="dateFormat"
    categoryFilter="dateFormat"
    valueFilter="dateFormat"
    [filterEnabled]="true"
    period="LAST_30_DAYS"
    periodRef="abc"
    queryFieldRef="abc"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <statistic        
            label="Nr. of Events"
            resource="ACTION"
            activationType="ACTIVE"
            aggregation="AVG"
            groupBy="customer.name"
            property="propName"
            sortDirection="ASC"
            averagedBy="thingCount"
            filter="fooBarFilter"
            name="alertCount"
            [includeZeroValues]="true"
            periodRef="period"
            query="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"
            limit="123"></statistic>
</table-widget>
```