Skip to content

4.2 List

The List component is used to design listing forms, providing an efficient way to display organized sets of data and enabling interaction with them.

These forms can include actions that indicate specific operations to be performed between different forms, improving the management and navigation capabilities for users.

The data in the List is presented through a Datatable, a component used to organize and visualize tabular datasets in a structured manner. The Datatable is associated with a repository defined in the "repo" attribute, allowing direct data binding for presentation.

Additionally, the Datatable offers advanced functionalities, such as the ability to filter and sort data based on predefined criteria. This enhances efficiency in searching and visualizing information, enabling users to interact effectively with the presented data.

Customization options like adjusting the number of visible rows and selecting entity properties provide flexibility to tailor the Datatable to various presentation and content needs, allowing for a more personalized user experience.

Attribute Default Value Type Description
id null String Unique identifier for the component. If not defined, the default id will be formId#list.
name null String Descriptive name of the form group.
description null String Description of the form group. 
<main id="formDatatable" name="Datatable" repo="provinciaRepo">
    <list id="provincias" name="Provincias" description="Listado de provincias">
        <datatable id="datatableProvincia">
            <column id="column_c_provincia_id" headerText="Cod. Provincia" filtering="true" ordering="true" value="${entity.c_provincia_id}">
                <filter property="c_provincia_id" matching="contains" valueExpression="${this.column_c_provincia_id}"/>
                <order property="c_provincia_id"/>
            </column>
            <column id="column_d_provincia" headerText="Provincia" filtering="true" ordering="true" value="${entity.d_provincia}">
                <filter property="d_provincia" matching="contains" valueExpression="${this.column_d_provincia}"/>
                <order property="d_provincia"/>
            </column>
        </datatable>
    </list>
</main>

Image 1 Image 2

4.2.1 Datatable

See 4.8. Datatable

4.2.2 Buttonbar

See 4.20. Buttonbar