List component

[caroliss]

Description

First version of listcomponent with sorting and pagination.

Related Issue(s)

• closes New component: List #578

Functional requirements (from #578)

• The component can be configured with a static data source, much like existing options/code lists.
• The component can be configured with a dynamic data source (fetched from backend). The source data must have a logical structure (i.e. an array of objects, where the object keys indicate the column name, and the object values refer to the cell content/text)
• The List component can be configured to use pagination. In this case, if the data source is fetching from the backend, app-frontend-react only keeps the current page of data in memory, and re-fetches the data when navigating between pages.
• Columns in the component can be configured as sortable. If data is fetched from backend, the sort column and direction is passed to the backend via query parameters such that it can handle the sorting implementation.
• For static data defined in the layout file, sorting can only work on alphabetically sorting strings.
• A row in the List component can be configured as being selectable. This means a radio button will show up as the first column in the table view, and clicking that radio will use the data model bindings to put one or more cells of data from the list data into the data model.
• A row in the List component can be configured to as behaving as a multi-select. This means a checkbox will show up as the first column in the table view. If this is used instead of a radio button, the data model binding should be interpreted as a list data model binding (as used for attachments), i.e. it will store data in an array. It might also be required to interpret the data model binding as a group binding (i.e. prefilling/populating a repeating group structure).
• Some columns should be possible to hide. This can be useful when you want the backend to send an internal reference number you want to populate into the data model when selecting a row, but you don't want to show that column/data to the user.
• The JsonSchema definition for the column definition in the List component should be as similar to the column definition for repeating groups as possible, to avoid having multiple ways to describe the visual properties of tables.
• The List component should work nicely on mobile
• Keyboard navigation
• Screen reader support
• Configuration options for which value(s) in the data model bindings should be used when presenting the chosen row(s) in a Summary component referencing the List
• Support for the component in repeating groups, using the Summary value in the table header
• Support for 'required'
• Proper/intuitive validation messages when no row is selected
• Support for 'readOnly'?
• Add query parameter for search connected to a data model parameter (aka 'mapping')
• Bugfix: Handlechange is called in a loop, sometimes causing race condition when you have multiple datamodel bindings. Sometimes only one of the datamodelbindings are saved correctly.

Other tasks (from #578)

• Define a data structure to be used to describe the data/rows, and implement support for this in Altinn/app-lib-dotnet
• Create issue(s) for implementing support for this component in Altinn Studio
• Automatic tests (preferably by adding to our Cypress test suite)
• Documentation

[olemartinorg]

Would you mind merging from our main now that #711 is done, so that we can run automated tests and prepare for merging these changes? 🥳

[olemartinorg]

🥇