# List Learn how to use the List report item in ActiveReportsJS. ## Content A `List` report item is a [data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions) that visualizes the bound data by producing a series of sections containing [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) arranged in a free-form layout fashion. You can use a `List` as a [nested data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#nested-data-regions) to display a collection of items within a single data record. For example, the [List within Table demo](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs) uses the `List` inside the Products [Table](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) to show the price history. You could also use a `List` to visualize your data in a grid-like fashion, as in the [Multi-Column List Demo](/activereportsjs/demos/Reports/MultiColumnList/purejs). ### Adding a List You can add a `List` into 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 to the parent container, such as a [Table Cell](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-cells). ### Configuring List Layout The `List` data region displays a series of sections, with each section representing a record from a bound dataset. The appearance of these sections can be controlled by the `Grow Direction` property, which has the following options: * `Column` – This option arranges the sections in a grid-like pattern, first filling the columns across the page from left to right, and then moving down to the next row. The `Rows or Columns Count` property determines how many columns should appear on each row. The picture below shows the list with the `Column` layout and three columns: ![image](https://cdn.mescius.io/document-site-files/images/40c0de91-31f7-4416-bb70-2273def0ec30/image.ccd9ab.png) * `ColumnReverse` – Similar to `Column`, this option also arranges sections in a grid-like pattern. However, columns are filled from right to left, and then the layout moves to the next row. The picture below shows the list with the `ColumnReverse` layout and three columns: ![image](https://cdn.mescius.io/document-site-files/images/40c0de91-31f7-4416-bb70-2273def0ec30/image.f9f253.png) * `Row` – This option arranges the sections in a simple top-to-bottom, left-to-right manner. The `Rows or Columns Count` property determines how many rows should appear on each column. The picture below shows the list with the `Row` layout and three rows: ![image](https://cdn.mescius.io/document-site-files/images/40c0de91-31f7-4416-bb70-2273def0ec30/image.a4f9ac.png) * `RowReverse` – This option arranges the sections in a bottom-to-top, left-to-right manner. The `Rows or Columns Count` property determines how many rows should appear on each column. The picture below shows the list with the `RowReverse` layout and three rows: ![image](https://cdn.mescius.io/document-site-files/images/40c0de91-31f7-4416-bb70-2273def0ec30/image.9f3a36.png) In both `Continuous Layout` and `Fixed Layout`, the list content is moved to the next page when it reaches the limits of the `page size` or the `fixed size` of the list, respectively. You can find more information about the layout types on the [Layout type page](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts) ### List Designer The `List` designer determines the content and style of the `Section` that 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, the `PriceHistory` list in the [List within Table](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs) contains two [textboxes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) that display the date period and price from `ProductListPriceHistories` dataset records. The general list configuration that consists of the [Base Report Item properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#base-properties) and [Data Region properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#common-properties) is combined with the `Section` properties in the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). ### Section Configuration The `Section` configuration includes [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-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. * The `Consume White Space` flag indicates whether section instances should eliminate the whitespace if there is more available space than the content takes. * The `Keep together` flag ensures that the section instance always appears on a single page if it fits. * The `Action` property determines the [interactive action](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity) that occurs when a report reader clicks within the space occupied by a section. ### List Grouping You can group data records within the `List` so that its section appears once per a grouping value. It could be useful for displaying hierarchical data structures. You can find the example of this approach in the [Nested Lists example](/activereportsjs/demos/Reports/NestedDataRegions/purejs). The group configuration includes the following properties. * The `Group Name` is the group `Id`. * 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 `grouping values`. * The `Label` [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) determines the text of a grouping value link in the [Report Map](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity#report-map). The [Nested Lists example](/activereportsjs/demos/Reports/NestedDataRegions/purejs) uses this property. * The [Filters Editor](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#filters-editor) allows you to filter out certain grouping values. For example, if we want to exclude the `Nintendo` publisher from the `Nested Lists example` output, then we can add the following filter for the `Group` of the `Publishers` list. ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/List/group-filter.png) * The `New Section` flag determines whether each grouping value has its page numbering. Check the [Global References](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/references#page-numbering) documentation for more information.