--- title: "Web Vision | Building Dataset Table| N3uron KB V1.22" slug: "web-vision-example-dataset-table" description: "Learn how to build a Dataset Table in N3uron Web Vision using tag expressions, grouped KPI columns, status colors, sorting, and historical sparklines." updated: 2026-10-08T10:34:53Z published: 2026-10-08T10:34:53Z canonical: "docs.n3uron.com/web-vision-example-dataset-table" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.n3uron.com/llms.txt > Use this file to discover all available pages before exploring further. # Building a Dataset Table This example builds a live equipment table with one row per machine, numeric KPI columns grouped under shared headers, a color-coded status, and two inline sparklines. The **Data** property holds one expression that returns a **list**, and each item in the list becomes one row. The row below is trimmed to the fields explained here; the full template also carries **availability**, **performance**, **quality**, **target**, and **good**: ```javascript [ {  asset: "FramePress_01",  area: "Assembly / AssemblyCell",  status:(tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/OEE.data.value")>=85?"OPTIMAL":(tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/OEE.data.value")>=75?"WATCH": "UNDER")),  oee:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/OEE.data.value"),  availability:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/Availability.data.value"),  performance:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/Performance.data.value"),  quality:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/Quality.data.value"),  rate:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/metric/Rate.data.value"),  target:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/metric/TargetRate.data.value"),  good:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/metric/GoodCount.data.value"),  total:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/metric/TotalCount.data.value"),  downtime:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/maintenance/Downtime_min.data.value"),  q:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/OEE.data.quality"),  ts:tag("/Acme/Plant01/Production/Assembly/AssemblyCell/FramePress_01/oee/OEE.data.ts"),  trend:dataset("Hist_FramePress"),  spark:dataset("Hist_FramePress")  },  // ... one object per machine ] ``` Each row is a set of **key: value** pairs. The key (**asset**, **oee**, **trend**, …) is a name you choose and is what a column's **Field** points to; the value is what the cell shows. Values can be fixed text, a live tag read with **tag()**, a calculated expression (the ternary operator **? :** is shorthand for "if / otherwise"), or a historical dataset from **dataset()** that a column draws as a mini-chart. This image from the **Data→Realtime** screen displays the structure of the tag model:![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(211).png) ## **Step-by-step configuration** 1. Add a **Dataset Table** component to the template. 2. In **Table → Data**, paste the expression that returns the array of rows (shown above). 3. Set **Table → Row key** to **asset** (the field that is unique for every row). This keeps each sparkline bound to the correct row after sorting. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(202).png) 4. Under **DataSets**, create one historical dataset per machine (e.g. **Hist_FramePress**) that the sparklines will use: **Tag** = the machine's OEE tag, **Node** = **This node**, **Date mode** = **Current** (**2 hours**), **Mode** = **Aggregated** (**Average**, **10 minutes**), and **Autoreload** = **300** s. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(203).png) 5. Under **Header Groups**, create four groups (leave **Parent group** blank so they are top-level): **Equipment**, **Live metrics**, **OEE decomposition**, and **2h history**. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(204).png) 6. Under **Columns**, add one column per value, mapping each column's **Field** to a label in the data and assigning its **Header group**, **Renderer**, and format: ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(205).png) | **Title** | **Field** | **Header group** | **Renderer** | **Format / Chart** | **Width** | | --- | --- | --- | --- | --- | --- | | Asset | asset | Equipment | text | %s | 150 | | Area | area | Equipment | text | %s | 205 | | Status | status | Live metrics | text | %s (+ Row & Cell color) | 90 | | Rate | rate | Live metrics | text | %.2f | 80 | | Target | target | Live metrics | text | %.2f | 80 | | Good pcs | good | Live metrics | text | %i | 92 | | Down min | downtime | Live metrics | text | %.1f | 92 | | OEE % | oee | OEE decomposition | text | %.2f | 78 | | Avail % | availability | OEE decomposition | text | %.2f | 78 | | Perf % | performance | OEE decomposition | text | %.2f | 78 | | Qual % | quality | OEE decomposition | text | %.2f | 78 | | Line | trend | 2h history | sparkline | line, window 24 | 145 | | Area | spark | 2h history | sparkline | area, window 24 | 145 | 7. On the **Status** column, add **Row & Cell color** filters so **OPTIMAL**, **WATCH**, and **UNDER** each get their own color. **OPTIMAL** will get the default background color. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(206).png) 8. Under **Sort**, set **Sort by** = **OEE %** and **Sort direction** = **Descending**. Set **Row height** = **54** and enable **Selection**, **Header**, and **Drag-orderable columns** as desired. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(207).png) ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(210).png) The result is a live, sortable OEE table where the numeric cells and the two sparklines refresh on their own as the tags update and the historical datasets autoreload. ![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/image(212).png) [Web Vision Full Product Details](https://n3uron.com/iiot-platform-modules/web-vision/)