How to Add Tablix to a JavaScript Reporting Application

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
• Binding a Data Source and Assigning Rows, Columns, Values, and Totals
• Formatting the Tablix Cells Layout

Ready to Start Adding Tablix to Your Applications? Download ActiveReportsJS Today!

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:

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

Here, we’re setting our endpoint to 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:

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:

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

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:

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:

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:

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:

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

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.

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:

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:

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:

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:

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:

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

Header Rows

Data Cells

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:

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.

Ready to Start Adding Tablix to Your Applications? Download ActiveReportsJS Today!