How to Add Tablix to a JavaScript Reporting Application
Tags: webdev, devops, javascript, tutorial
Published: 2024-02-05 17:46:29

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-tablix-to-a-javascript-reporting-application
description: Learn how to add Tablix to a JavaScript reporting application. See more from ActiveReportsJS today.
---
Tablix controls, also known as a table matrix, is a powerful component commonly used in reporting and data visualization. Combining the features of tables and matrices makes it an excellent choice for organizing and presenting data in a structured format. A tablix control is especially valuable in scenarios where the data that you’re working with is complex, allowing users to create flexible reports with the ability to adapt to changing data conditions.

With ActiveReportsJS, adding a tablix control to your JavaScript report with the JavaScript Report Designer is simple. The control toolbox allows you to drag and drop the control right onto your report. With the built-in creation wizard, report designers can easily bind their data source to the tablix control and format the layout within minutes.

In this article, we’ll be covering how you can add and customize a tablix control in ActiveReportsJS, going over the following topics:

*   [Adding a Data Source and Tablix Control to Your Report](#adding)
*   [Binding a Data Source and Assigning Rows, Columns, Values, and Totals](#binding)
*   [Formatting the Tablix Cells Layout](#formatting)

## <a id="adding"></a>Adding a Data Source and Tablix Control to Your Report

The first thing we’ll need to do is add our data source to the JavaScript Report Designer. We’ll use this to pull in data from our OData source.

In the top-right hand corner of the JavaScript Report Designer, select the **Data** panel and click the **Add** button under the **Data Sources** section:

![Add DataSource](//cdn.mescius.io/umb/media/waqmpfno/datasource_add.png)

This will bring up a wizard that will allow us to point the JavaScript Report Designer to our OData data source:

![DataSource Complete](//cdn.mescius.io/umb/media/v2npnay0/datasource_complete.png?rmode=max&width=660&height=501)

Here, we’re setting our endpoint to [**<span>https://demodata.mescius.io/contoso/odata/v1</span>**](https://demodata.mescius.io/contoso/odata/v1 "https://demodata.mescius.io/contoso/odata/v1"); you can also use this link for testing purposes.

Next, we’ll add our **Data Set**; this will hold the data we’re retrieving. Click on the **Plus** button next to the data source that we just created to bring up the data set creation wizard:

![DataSet Creation](//cdn.mescius.io/umb/media/dpkjt1xv/dataset_creation.png?rmode=max&width=675&height=600)

Here, we need to set a few more properties. First, we need to set the Uri/path and the JSON Path; these will point to the specific location that we’re retrieving data from on our server and will filter what we’re going to display from that data:

![Table 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unekmhhwa04aim1zidvk.png)

We are also setting a parameter that will be passed to the server:

![Table 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk35pds61thf3hfkw2kb.png)

This will ensure that we retrieve these seven fields from our OData source.

Before we do anything else, we need to validate the data; this will allow the JavaScript Report Designer and Viewer to confirm that it can retrieve data from the source. Click the **validate** button, and if everything runs as expected, you should see the **Database Fields** property now has seven items in its array.

Before we click the **Save Changes** button, there’s one more thing that we need to do, and that’s setting up **Calculated Fields**. These will use the values that we’re retrieving to create new values. In the case of this report, we’ll be creating two calculated fields:

![Table 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sllgxtfut7ea2e2tjsbr.png)

For the **ProductCategory** calculated field, we use product keys to associate a numeric value with different strings: _Audio, Cameras, Cell Phones, Computers,_ and _TV and Video_. Meanwhile, the **SalesChannel** does the same thing, except the string values for this property are _Catalog, Online, Reseller,_ and _Store_.

With that complete, we can click the **Save Changes** button and have a completed data set!

Now, we can finally add our Tablix control to the report. To do so, drag and drop the **Tablix** component from the control toolbox on the right-hand side of the JavaScript Report Designer onto the report area. This will bring up the Tablix Creation Wizard:

![Tablix Wizard](//cdn.mescius.io/umb/media/swrj3x3a/tablix_wizard.png?rmode=max&width=721&height=501)

## <a id="binding"></a>Binding a Data Source and Assigning Rows, Columns, Values, and Totals

Now that we’re in the Tablix Creation Wizard, we can start assigning fields to various groups in the tablix. When creating a tablix in a report that has multiple data sources, you will also be required to select the source that you want to bind to the report; since we only have one data set, it is bound to the tablix by default.

For our tablix, we’re going to be using three of our data fields: **SalesChannel**, **ProductCategory**, and **SalesAmount**:

![Tablix Bound](//cdn.mescius.io/umb/media/hq0bukv2/tablix_bound.png?rmode=max&width=717&height=499)

The **SalesChannel** field will serve as our row group, **ProductCategory** as our column group, and then we’re actually including **SalesAmount** twice in our values. We’re using the **Aggregate** button next to each SalesAmount label to set each aggregate to **Sum**, and then next to the top label, we’re using the **DisplayAs** button to set it to display as **% Column Group Total**.

Now, when you view the report in the designer, it should look something like this:

![Designer Tablix](//cdn.mescius.io/umb/media/5qulwyj1/designer_tablix_first.png?rmode=max&width=655&height=498)

And when we click the **Preview** button, it will look something like this:

![Preview Designer Tablix](//cdn.mescius.io/umb/media/k2zpasmj/preview_first.png?rmode=max&width=746&height=169)

We’re displaying each of our sales channels (Store, Reseller, Online, and Catalog), as well as the total sales and percentages of each product that the sales channels contributed to.

As you can see, we now have all our values bound and displayed in the tablix component. However, the control looks messy, and the data we’re displaying isn’t formatted properly. In the next section, we’ll go over how you can format and customize the look of your tablix control.

## <a id="formatting"></a>Formatting the Tablix Cells Layout

Now that everything is displaying in our tablix, it's time to do some customization to make the control easier for users to discern the data being displayed.

The first thing that we’re going to do is remove the second row in our tablix: right-click on the row header and select the **Delete Row** option:

![Delete Row](//cdn.mescius.io/umb/media/s1coc1iw/delete_row.png)

Next, we will update the formatting of our **SalesAmount** values that are being displayed. Select the cells of the third column of the second and third rows:

![Currency Cells](//cdn.mescius.io/umb/media/kggcx3tp/currency_cells.png)

Now, inside the property panel, find the **Format** property and switch this to **Currency**. By default, this will set these cells to format the values as currency values, going to the second decimal place:

![Currency Formatting](//cdn.mescius.io/umb/media/flya2hf0/currency_formatting.png)

Next, select each of the row headers and, in the properties panel, change the **Height** property from **0.25** to **0.4**. Now, when you preview the report, you should see the following:

![Preview Formatting](//cdn.mescius.io/umb/media/nwxktb23/preview_second.png?rmode=max&width=754&height=182)

As you can see, everything looks much cleaner in the tablix control than before. However, there are still a few more things that we can do to improve the look and feel of the report.

Next, we will set up borders around each of the cells. Shift-click to select all of the cells of the table, and set the following properties under the **Border** section:

![Table 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uciiemyfh0ikexdcktx.png)

The next thing we’ll do is set the alignment of the text that we’re displaying. Set the following properties of each cell group as follows:

**Header Columns**

![Table 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk9qxcxad4jmao2yata7.png)

**Header Rows**

![Table 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itoijrus7wvqwfjr62mz.png)

**Data Cells**

![Table 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyej8s4sab1kt91xn9ko.png)

Finally, we will remove some unneeded text from a few cells. In the cell located at Row 1 Column 1, as well as the cell in Row 3 Column 2, delete the text within. We don’t need to display the **Sales Channel** text, and each of the values in Row 3 Column 2 will always add up to 100%, so we won’t need to display that either.

Now, when we preview the report, we should see the following:

![Final Preview](//cdn.mescius.io/umb/media/ujcjie10/preview_final.png?rmode=max&width=758&height=206)

## Conclusion

And that’s all there is to it! Of course, there is much more that you can do with the Tablix control in ActiveReportsJS' JavaScript Report Designer, but this should serve as a great starting point, as well as show how easy it is for you to use a tablix to format and display your data.