# Table Learn how to use the Table report item in ActiveReportsJS. ## Content A `Table` report item is a [data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions) that visualizes the bound data in a multicolumn, multirow fashion, with an ordered set of fields in columns and each data record displayed in a row. The intersection of a row and column is a `Table Cell` that contains [data visualizers](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers) such as a [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) or [Image](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/Image). `Merged Cells` span multiple columns or rows. In addition, a Table can group, sort, and filter the data based on pre-defined conditions or user input. You can use the `Table` data region to build a `Tabular Report`. Visit the [Get Started With Tabular Reports](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/get-started-with-/Tutorial-1-Tabular-Report) tutorial for more information. ### Adding a Table You can add a `Table` to a report by either double-click the corresponding item in the [Toolbox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#toolbox) or drag-and-drop it into a report page area. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding a Table via the Toolbox in action DOC-SUMMARY-TAG-CLOSE ![AddingTable](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingTable.490eb2.gif) DOC-DETAILS-TAG-CLOSE Alternatively, you can select data set fields in the [Data panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#data-panel) and drag-and-drop them into a report page. The newly created table is automatically bound to the data set and displays the selected fields' captions and values. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding a Table via the Data panel 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 ### Table Designer The following diagram depicts the default structure of the `Table Designer` that appears if you click anywhere inside its bounding box. ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Table/table-designer.png) ### General Table Configuration You can use one of two methods to load the general table configuration into the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel) * Select the `Table` item in the [report explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer). * Click the `Root handler` in the table [designer](/activereportsjs/docs/v6.1/#table-designer). DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch modifying the general configuration of a Table 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 The general configuration includes [Base Report Item properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [Data Region properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#common-properties), [Visibility](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#visibility), [Page Break](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#page-break), and the following specific properties. * Sometimes, the [table footer](/activereportsjs/docs/v6.1/#table-footer) could appear by itself on the top of the page. You can turn on the `Prevent Orphaned Footer` switch to move a previous row to the next page so that it appears together with a "lonely" footer. * The `Keep together` flag determines whether a `Table` always appears on a single page if it fits. * The `New Section` flag indicates whether a `Table` has its page numbering. Check the [Global References](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/references#page-numbering) documentation for more information. * The `Frozen Rows` and `Frozen Columns` numeric properties indicate how many rows and columns should remain visible when a report reader scrolls a table that does not fit into a visible area of the [Report Viewer component](/activereportsjs/docs/v6.1/GettingStarted/QuickStart). ### Table Columns A `Column` is a vertical group of `Cells` within a `Table`. If you add a table via the `Toolbox`, it has three columns by default. If you use data set fields to create a table, then it has one column per field. You can add new columns or delete existing ones with the context menu that opens if you right-click a [column handler](/activereportsjs/docs/v6.1/#table-designer). The `Column` configuration includes the following properties. * The `Auto Width` property determines whether the column width can be automatically adjusted to take up the available space if one or more other columns are dynamically hidden. Check the [live demo](/activereportsjs/demos/Reports/AutoTableColumnWidth/purejs) to see this feature in action. There are two values for this property: * `None` \- a column width is not automatically adjusted\. * `Proportional` \- a column width is automatically adjusted to take up the available space\. If there are several columns that have the `Auto Width` property set to `Proportional`, then the available space is divided equally among them. * The `Width` in [Length units](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#length) determines the width of table cells within a row. The total width of columns equals the table width. * The [Visibility](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#visibility) property defines static or dynamic visibility of a column at preview-time. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding a column and setting its width in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithFixedReports/SettingColumnsWidth.gif) DOC-DETAILS-TAG-CLOSE If you left-click the `Column handler`, it automatically selects all the report items in the column's cells. The `Properties panel` shows the additional tab that lets you modify properties of all these report items simultaneously. In the most common scenario, the additional tab is called `TEXTBOX` and changes all the column's textboxes' properties. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the TEXTBOX tab of column properties in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Table/ColumnTextBoxTab.gif)) DOC-DETAILS-TAG-CLOSE ### Table Rows A `Row` is a horizontal group of `Cells` within a `Table`. Several row types serve different purposes but share common properties. * The `Height` in [Length units](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#length) determines the initial height of table cells within a row. However, cells can grow or shrink in height at preview-time. Check the `CanGrow` and `CanShrink` properties of a [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) report item for more information. * The `Action` property determines the [interactive action](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity) that occurs when a report reader clicks any `Report Item`, such as `TextBox`, contained in the row cells at preview time. * The [Visibility](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#visibility) property defines static or dynamic visibility of a row at preview-time. You can add new rows or delete existing ones with the context menu that opens if you right-click a [row handler](/activereportsjs/docs/v6.1/#table-designer). DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding a row into the Table Footer in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithFixedReports/AddingExtraRows.gif) DOC-DETAILS-TAG-CLOSE If you left-click the `Row handler`, it automatically selects all the report items in the row's cells. The `Properties panel` shows the additional tab that lets you modify properties of all these report items simultaneously. In the most common scenario, the additional tab is called `TEXTBOX` and changes all the rows's textboxes' properties. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the TEXTBOX tab of row properties in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingConditionalFormatting.gif) DOC-DETAILS-TAG-CLOSE ### Table Header The `Table Header` row appears at the beginning of a table. Also, if its `Repeat On New Page` switch is on, it prints on every page taken by the table content. You could use the header row to display the title or the logo of a tabular report. For instance, the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) contains the `Product List` [textbox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) in the first cell of the header row. A table may have several header rows. ### Group Header The `Group Header` row appears at the beginning of a [group instance](/activereportsjs/docs/v6.1/#table-grouping). Also, if its `Repeat On New Page` switch is on, it prints on every page taken by the table content. You could use a group header row to display the group's field value or summary value. For instance, `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) groups products by category and has the group header that prints on every page and contains the textbox displaying the category name. A group may have several header rows. ### Details The `Details` row repeats for each [bound data set](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#data-set-name) record that passed through the [data set filters](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding#data-set-filters) and [data region filters](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#common-properties). For instance, in the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs), the details row displays the name, price, and other product fields in the corresponding columns. Discontinued products are filtered out. If a table has the [grouping](/activereportsjs/docs/v6.1/#table-grouping) configured, then the details row appears between the header and footer of the enclosing [group instance](/activereportsjs/docs/v6.1/#table-grouping). A table may have more than one detail row. For instance, the [Table With Image](/activereportsjs/demos/Reports/TableWithImage/purejs) example has four detail rows. ### Group Footer The `Group Footer` row appears at the end of a [group instance](/activereportsjs/docs/v6.1/#table-grouping). Also, if its `Repeat On New Page` switch is on, it prints on every page taken by the table content. You could use the group footer row to display summary values. For instance, in the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs), the table's group footer row displays the `Unit in Stocks` and `Units in Order` grouping totals in the corresponding columns. A group may have several footer rows. ### Table Footer The `Footer` row appears at the end of a table. Also, if its `Repeat On New Page` switch is on, it prints on every page taken by the table content. You could use the footer rows to display grand totals. For instance, the table in the `Get Started With Fixed Layout Reports ` [demo](/activereportsjs/demos/Reports/GetStartedWithFixedReports/purejs) has three footer rows displaying the invoice totals. ### Table Cells A `Table Cell` is the intersection of a row and column. By default each table cell contains a [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) report item. However, you can replace it with other data visualizers, such as an [Image](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/Image) by drag-and-drop the corresponding item from the `Toolbox` into the cell. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding an Image into a table cell in action DOC-SUMMARY-TAG-CLOSE ![AddingImageInCell](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingImageInCell.69ff34.gif) DOC-DETAILS-TAG-CLOSE In addition, table cells could contain [nested data regions](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#nested-data-regions). For instance, the table in the `List within Table` [demo](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs) contains the [List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) report item in the third `Details` row. ### Merged Cells `Merged Cells` span multiple columns or rows. You can merge adjacent cells horizontally or vertically. The horizontal merging requires cells to be on the same row. The vertical merging requires cells to be on the same row type. For example, the table in the [Table With Image](/activereportsjs/demos/Reports/TableWithImage/purejs) demo has the vertically merged details cells in the first column. To merge cells, select them holding the `Ctrl` button on Windows or `Cmd` on Mac OS, then right-click the selection and choose the `Cells > Merge Cells` item in the context menu. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch cell merging in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithDrillDownReport/SettingTableHeader.gif) DOC-DETAILS-TAG-CLOSE ### Table Grouping The `Table` allows you to group `Details` rows by one or multiple criteria. For instance, the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) groups the product rows by category. We recommend using the `Group Editor` in the table [designer](/activereportsjs/docs/v6.1/#table-designer) to configure grouping. ### Adding Groups You can use one of two methods to add a table group. * Right-click anywhere inside the table's bounding box and select the `Group -> Insert Group` item in the context menu. * Drag and drop a field that you want to group by from the [data panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#data-panel) to the `Group Editor`. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding grouping by drag-and-drop 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 ### Insert child or parent groups You can arrange rows in a table with several nested groups. To insert a child group, right-click the parent group name in the `Group Editor` and select the `Group -> Insert Group` item in the context menu. Alternatively, you can drag-and-drop a field from the data panel to the group editor that indicates the position of a newly added group relative to existing groups with the `` placeholder. Also, you could delete a group or remove or add its [header](/activereportsjs/docs/v6.1/#group-header) or [footer](/activereportsjs/docs/v6.1/#group-footer) by using the corresponding items of the context menu. ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Table/group-context-menu.png) ### Group Configuration The `Group Editor` enumerates group names that you can click to load their configuration into the [properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). * The `Group Name` is the group `Id` displayed in the group editor. * The `Group Expressions` is the [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) of [bound field references](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/references#data-set-fields) or more advanced expressions. Distinct values of group expressions generate `Group Instances` that consist of optional `Group Header` and `Group Footer` and the `Details` rows. For instance, the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) has the `{categoryId}` group expression. Consequently, the table generates 7 group instances, one per product category. * The `Parent` [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) determines the parent group in a recursive hierarchy. The common use-case for using this property is displaying tree-like data, where the relationship between parent and child is represented by dataset fields. For instance, the [Interactive Hierarchy](https://www.grapecity.com/activereportsjs/demos/Reports/InteractiveHierarchy/purejs) demo displays the retail chain, where each `Store` record has the `EntityKey` and the `ParentEntityKey` fields. The former is in the Table's Detail `Group Expressions`, and the latter is in the `Parent` expression. * The `Label` [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) determines the text of a group instance link in the [Report Map](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity#report-map). * The [Filters Editor](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#filters-editor) of a group allows you to filter out certain group instances. ### Group Layout Configuration * Sometimes, the `Group Footer` row could appear by itself on the top of the page. You can switch on the `Prevent Orphaned Footer` flag to move the last `Details` row of the group instance to the next page so that it appears together with a "lonely" group footer. * The `Keep together` flag ensures that the group instance always appears on a single page if it fits. * The `Page Break` property determines the location of page breaks generated by group instances. * `None` \- no page breaks are generated\. * `Start` \- each group instance inserts the page break before the `Group Header` or the first `Details` row. * `End` \- each group instance inserts the page break after the `Group Footer` or the last `Details` row. * `StartAndEnd` \- the combination of the `Start` and `End` options. * `Between` \- each group instance starts on the new page\. The `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) uses this option. * The [Visibility](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#visibility) property determines static or dynamic visibility of group instances. The `Get Started With Drill-Down Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithDrillDownReports/purejs) sets the dynamic visibility of the `Product` group to implement the drill-down interactivity. * The `New Section` flag determines whether each group instance has its page numbering. Check the [Global References](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/references#page-numbering) documentation for more information. ### Details grouping In addition, you can group the `Details` rows without adding a group. The `
` does not have the header and footer but reduces the number of `Details` rows to one row per distinct grouping value. You can edit the Details Group properties by left-clicking the corresponding item in the group editor. Almost all the properties described above are available. ### Sorting Details Rows You can set the order of the table's details rows appearance using the [data region sorting configuration](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#common-properties). You could also allow a report reader to arrange the details rows at preview-time by setting the [User Sort](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox#user-sort) configuration of a TextBox that will host the `sort icon`. For example, the `Product Name` textbox in the `Get Started with Tabular Reports` [demo](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs) has the `Sort Expression={productName}` in the `User Sort` section of the Properties panel. Consequently, at preview-time, the `sort icon` appears on the right side of the text and enables a reader to sort products by name. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to sorting at preview-time in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Table/InteractiveSorting.gif) DOC-DETAILS-TAG-CLOSE Since the `Product Name` textbox resides in the [group header](/activereportsjs/docs/v6.1/#group-header), products within each category can be sorted independently. To affect all the details rows within the table, the `Sort Target` property in the `User Sort` configuration should be set to `Table1`. ### Sorting Group Instances The `Sort Expressions` property of a table's group is the [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) of items that allows you to sort group instances. Each item consists of the [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) and the sort direction. For instance, in the `Interactive Sorting` [demo](/activereportsjs/demos/Reports/InteractiveSorting/purejs), the group has the `{country}` sort expression and ascending order. Consequently, countries appear alphabetically at preview time. You could also allow a report reader to arrange grouping instances at preview-time by setting the [User Sort](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox#user-sort) configuration of a TextBox that will host the `sort icon`. In the `Interactive Sorting` demo the `CountryHeader` textbox in the group header has the `Sort Expression={country}, Sort Expression Scope=CountryGroup, Sort Target=CustomersTable` configuration to achieve that.