# Get Started With Tabular Reports

Learn how you can create a tabular report using ActiveReportsJS.

## Content

### Introduction

A tabular report is the most straightforward way to visualize your data with ActiveReportsJS. The most basic tabular report is organized in a multicolumn, multirow fashion, with an ordered set of fields in columns and each data record displayed in a row. In addition, a tabular report can group, sort, and filter the data based on pre-defined conditions or user input. Examples of tabular reports are inventory lists, product catalogs, activity reports, and many others.

In this tutorial, we build the Product List report from the ground up, providing experience with the typical report designing process. By the end, you will be able to do the following:

* Create a new report
* Bind the report to the REST API with multiple endpoints
* Create a [table data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) to display the subset of the data
* Apply formatting to the table columns
* Display the general report information in the table header
* Group the data within the table
* Use the [Lookup](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/miscellaneous#lookup) function to display the data from multiple data sets
* Display column headers and summary fields in the group header and the group footer, respectively
* Filter the data within the table
* Apply conditional formatting to the table rows
* Add interactive sorting for the table columns

Upon completion of all tutorial steps, the final report will look like this: [live demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs).

### Prerequisites

The following content assumes that you have the Standalone Report Designer running. Visit the [tutorial](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App) for detailed information. A stable internet connection is also required to access the [Demo Data Hub](https://demodata.mescius.io).

### Creating a New Report

In the standalone report designer, click the [File menu](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#file-menu) and select the [Continuous Page Layout](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#continuous-page-layout) template for a newly created report. Click anywhere on the gray area around the report layout to load the report properties in the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). In the `Margins` section, set the `Style` property to `Narrow` to change the [report page](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties#page-settings) margins size.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch creating a new report in action
DOC-SUMMARY-TAG-CLOSE
![CreatingNewReport](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/CreatingNewReport.f83244.gif)
DOC-DETAILS-TAG-CLOSE

### Data Binding

[Data Binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) establishes a connection between a report and the data it displays. In this tutorial, we use the [MESCIUS Demo REST API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=Restful%20NorthWind) that replicates the well-known Northwind database. It contains the sales data for a fictitious company called Northwind Traders, which imports and exports specialty foods worldwide.

### Adding Data Source

You can think of the [Northwind REST API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=Restful%20NorthWind) as the "database" that you can connect to using its root URL `https://demodata.mescius.io/northwind/api/v1`, and that has multiple "tables" which presented with endpoints such as [/Products](https://demodata.mescius.io/northwind/api/v1/Products), [/Customers](https://demodata.mescius.io/northwind/api/v1/Customers), and [/Orders](https://demodata.mescius.io/northwind/api/v1/Orders). You can create a Report DataSource that establishes the connection to such a "database" using the following steps.

* Open the [Data panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#data-panel) of the property inspector and click the `Add` button.
* In the Data Source editor dialog, type `Northwind` in the NAME field and `https://demodata.mescius.io/northwind/api/v1` in the ENDPOINT field.
* Click the `Save Changes` button

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.8ab38d.png)

### Adding Data Sets

Data Sets represent one or more endpoints of the Data Source. For the Product List report, we need to have access to the data from the [/Products](https://demodata.mescius.io/northwind/api/v1/Products) and [/Categories](https://demodata.mescius.io/northwind/api/v1/Categories) endpoints of the Northwind Data Source that we added in the previous section. Use the following steps to add the `Products` data set:

* Click the `+` icon near `Northwind` in the Data panel.
* In the Data Set Editor dialog, type `Products` in the NAME field, `/Products` in the Uri/Path field, and `$.*` in the [Json Path](https://goessner.net/articles/JsonPath/) field.
* Click the `Validate` button.
* Ensure that the `DataBase Fields` section displays `[10 items]` text.
* Click the `Save Changes` button

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the Products data set in action
DOC-SUMMARY-TAG-CLOSE
![AddingDataSet](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingDataSet.66142f.gif)
DOC-DETAILS-TAG-CLOSE
Next, add the `Categories` data set with the same approach:

* Click the `+` icon near `Northwind` in the Data panel.
* In the Data Set Editor dialog, type `Categories` in the NAME field, `/Categories` in the Uri/Path field, and `$.*` in the [Json Path](https://goessner.net/articles/JsonPath/) field.
* Click the `Validate` button.
* Ensure that the `DataBase Fields` section displays `[3 items]` text.
* Click the `Save Changes` button

### Adding Table Data Region

The simplest way to visualize the data in a tabular report is to use [Table Data Region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table). There several ways to [add a new table](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#adding-a-table) into the report. We will use the quick way for this tutorial:

* Expand the "Products" data set in the Data panel using the chevron-down icon
* Click the "Select fields" icon near the "Products" data set name
* Select `productName`, `unitPrice`, `unitsInStock`, `unitsOnOrder`, and `reorderLevel` fields
* Drag and Drop selected fields into a top left corner of a report layout

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the Table Data Region in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingTable.gif)
DOC-DETAILS-TAG-CLOSE
The newly created table has five [columns](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-columns), one per each selected field, the [header row](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-header) that displays the field names, and the [detail row](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#details) that shows the values of the fields. You can [preview](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#preview-button) the report output and notice that detail rows display the selected field values for all the products from the data sets, and the table header repeats on each page and show field names.

### Formatting Table Columns

Go back to the report design and click anywhere inside the table to display the [columns and rows handlers](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer) and the group editor.
Click the first column's handler and set its width to `2.5in` in the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). Similarly, set the second column's width to `1.1in` and to `1.3in` for the rest of the columns. Thus, the table width will be equal to `7.5in` and fit the report's printable area defined by the report [page size and margins](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties#page-settings).

Click the table cell that displays the `{unitPrice}` text and set its ` Format` property to `Currency` in the properties panel.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch setting the last column's width and the \`\`\`{unitPrice}\`\`\` formatting in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/FormattingColumns.gif)
DOC-DETAILS-TAG-CLOSE
You can preview the report output and notice that product names in the first column fit into a single line and the unit price displays as a currency due to column formatting.

### Displaying the Report Title in the Table Header

The default table header row shows the column headers. We will replace them with the report title and add column headers later.

* Go back to the report design and click anywhere inside the table to display the columns and rows handlers.
* Click the first row handler and set its `Height` to `0.6in` in the Property inspector.
* Switch to the `TEXTBOX` tab in the Property inspector. You can now modify the properties of all the table cells of the selected row.
* Click the green box on the right side of the `Value` property and select `Reset`. This action removes the default text of the table cells.
* Set the `Vertical Align` to `Middle`, `Text Color` to `#3da7a8`, `Font Size` to `22pt` in the Properties panel.
* Double click the top-left cell of the table and type `Product List`

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch modifying the table header in action
DOC-SUMMARY-TAG-CLOSE
![AddingReportTitle](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingReportTitle.cb2bdf.gif)
DOC-DETAILS-TAG-CLOSE
You can preview the report output and notice that each page now displays the `Product List` report title.

### Adding Table Grouping

There are multiple product categories in the Northwind database - Beverages, Seafood, Meat, etc. Each record on the `Products` dataset has the `categoryId` field. Thus, we can group the products by their category. There are two ways to add a grouping into the table data region. We use the quick way for this tutorial:

* Go back to the report design and expand the "Products" data set in the Data panel using the chevron-down icon
* Click anywhere inside the table to display the [Group editor](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer).
* Drag and drop the `categoryId` field to the Group Editor's `<New Group>` highlighted area.
* Select the newly appeared `Table1_categoryId` item in the group editor
* Switch to the `Properties` tab of the Property Inspector
* Set the `Page Break` property of the grouping to `Between` so that each group starts on the new page

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding grouping in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingGrouping.gif)
DOC-DETAILS-TAG-CLOSE
Notice that the table now has two additional rows - the [group header](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#group-header) and the [group footer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#group-footer). The former displays the `{categoryId}` value in its first column, the latter is empty for now, but we will use it later for summary values.

You can preview the report output and notice that it produces eight pages. Each page represents the product category, prints its Id in the beginning, and follows with its products.

### Displaying fields from multiple data sets

Displaying the category Id is not very informative, so let's display the category name instead. The `Products` data set does not contain the `categoryName` field, but the `Categories` data set does. We will use the [Lookup](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/miscellaneous#lookup) function to resolve the category name by its Id:

* Go back to the report design and click anywhere inside the table to display the columns and rows handlers.
* Click the second row handler(group header) and set its `Height` to `0.6in` in the Property inspector.
* Switch to the `TEXTBOX` tab in the Property inspector. You can now modify the properties of all the table cells of the selected row.
* Click the green box on the right side of the `Value` property and select `Reset`. This action removes the default text of the table cells.
* Set the `Font Size` property to `16pt`, `Font Weight` to `Bold`, and `Vertical Align` to `Middle`

Note: steps above are very similar to those we used for [Displaying Report Title in the Table Header](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/get-started-with-/Tutorial-1-Tabular-Report#displaying-report-title-in-the-table-header). You can check the animated guideline in that section.

* Click the first table cell of the group header row. Press the `Ctrl`(Windows) or `Cmd`(Mac OS) key and click four following cells on the right side to apply multi-selection.
* Right-click the selection and choose the `Cells/Merge Cells` menu. See [merging cells in a table](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#merged-cells) for more information.
* Double click the merged cell and type `{Lookup(categoryId, categoryId, categoryName, "Categories")}`. This function takes the value of the first argument in the current scope - the `categoryId` of the current group - finds the row with the same `categoryId` value in the `Categories` data set and returns the corresponding `categoryName` value.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch setting merging cells and using the Lookup function in action.
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingLookup.gif)
DOC-DETAILS-TAG-CLOSE
You can preview the report output and notice that each page now displays the category name, and it visually differs from product rows.

### Displaying column headers

Previously, we removed the default table header, and currently, the table does not display the column headers. Now, we will use the additional group header row for column headers.

* Go back to the report design and click anywhere inside the table to display the columns and rows handlers.
* Right-click the second row handler(group header) and select the `Row/Insert Row Below` in the context menu. The group header now has two rows.
* Click the newly added row handler and set its `Height` property to `0.5in` in the property inspector
* Switch to the `TEXTBOX` tab in the Property inspector. You can now modify the properties of all the table cells of the selected row.
* Set the `Border Width` property to `0.25pt`
* Expand the `Border Style` editor using the icon on its right side and set the `Bottom Border Style` property to `Solid`
* Set the `Border Color` property to `Gainsboro`
* Set the `Text Color` property to `#3da7a8`, the `Font Weight` to `Bold`, and the `Vertical Align` to `Middle`
* Double click the first cell of the newly added row, type `Product Name`
* Double click the second cell of the newly added row, type `Unit Price`, then click the `Right Text Align` button on the toolbar
* Double click the third cell of the newly added row, type `Units In Stock`, then click the `Right Text Align` button on the toolbar
* Double click the 4th cell of the newly added row, type `Units On Order`, then click the `Right Text Align` button on the toolbar
* Double click the 5th cell of the newly added row, type `Reorder Point`, then click the `Right Text Align` button on the toolbar

You can preview the report output and notice that each page now displays accurately aligned column headers.

### Displaying field summaries

Table Data Region supports a wide variety of field summaries. The product list report will display totals for `Units In Stock` and `Units On Order` fields in the group footer.

* Go back to the report design and click anywhere inside the table so that it displays the columns and rows handlers
* Click the last row's handler and set its `Height` property to `0.5in` in the property inspector
* Switch to the `TEXTBOX` tab in the Property inspector. You can now modify the properties of all the table cells of the selected row
* Set the `Border Width` property to `0.25pt`
* Expand the `Border Style` editor using the icon on its right side and set the `Top Border Style` property to `Solid`
* Set the `Border Color` property to `Gainsboro`
* Set the `Font Weight` property to `Bold`, and the `Vertical Align` property to `Middle`
* Double click the first cell of the group footer row, type `Total`
* Double click the third cell of the newly added row, type `{Sum(unitsInStock)}`, then click the `Right Text Align` button on the toolbar
* Double click the 4th cell of the newly added row, type `{Sum(unitsOnOrder)}`, then click the `Right Text Align` button on the toolbar

You can preview the report output and notice that each group now displays totals of units in stock and units on order in the footer.

### Filter Table Data

Some products are marked `discontinued` and the `Products` dataset has the corresponding flag for each Product record in the Northwind database. We will filter out the discontinued products so that the table would not display them.

* Go back to the report design and click anywhere inside the table so that it displays the [root handler](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer)
* Click the root handler to load the table's properties into the property inspector
* Click the `+Add...` link in the [Filters Editor](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#filters-editor)
* Click the `+Add...` button and select `discontinued` in the popup menu
* Click the text area on the right side of the `=` sign and type `False`

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding filters in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingFilters.gif)
DOC-DETAILS-TAG-CLOSE
You can preview the report output and notice that some products do not appear anymore.

### Adding conditional formatting to the data rows

In the Northwind database, product records have the `reorderLevel` field that indicates the number of product units in stock required to replenish that particular product. This last column of the table that we built so far displays the value of the `reorderLevel` for each product. We will now highlight the products that reached the reorder point with a background color that associates with `warning`

* Go back to the report design and click anywhere inside the table so that it displays the columns and rows handlers
* Click the fourth row's handler and set its `Height` property to `0.4in` in the property inspector
* Switch to the `TEXTBOX` tab in the Property inspector. You can now modify the properties of all the table cells of the selected row.
* Set the `Background Color` property to `{IIF(unitsInStock <= reorderLevel, "MistyRose", "Transparent")}` \- this expression is using the [IIF function](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/program-flow#iif) to conditionally apply the background color to all the table cells of the selected row.
* Set the `Vertical Align` to `Middle`

You can preview the report output and notice that products that reached the reorder point are now highlighted with the `MistyRose` color.

### Adding interactive sorting

Table Data Region supports two types of data sorting:

* Design-time sorting - the report author, decides on how the data should be sorted
* Interactive sorting - the report readers determine how to sort the data at preview time

We will add the interactive sorting for all but `Reorder Point` table columns that we built so far for the product list report.

* Go back to the report design
* Click the first cell of the third table row that displays the `Product Name` text, find the `User Sort` section in the Properties panel, and set the `Sort Expression` to `{productName}` using the selector on the right side of the editor.
* Similarly, set the `Sort Expression` to `{unitPrice}`, `{unitsInStock}`, `{unitsOnOrder}` for the second, third, and fourth cells of the third table row, respectively.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the interactive sort for the Product Name column
DOC-SUMMARY-TAG-CLOSE
![AddingInteractiveSort](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingInteractiveSort.5a115a.gif)
DOC-DETAILS-TAG-CLOSE
You can preview the report output and notice that the column headers now display the `Sort` icon. You can click this icon to sort the product by their name, unit price, amount of units in stock, and units on order. Sorting data within each group is independent of other groups.

The final version of report is available at the [demo web-site](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs).