Dynamic Data Grid
Overview
Data Grid with variable columns. No more list view in list views!
Features
- Data Grid, with variable number of columns.
- Render cell content: attribute, text or user custom to build your onw cell content, including editable inputs.
- Empty row content message.
- Empty cell objects can be omitted when "Optimize cell paging" is disabled.
- On click action on row, column and or cells
- Choose the default styling of the Data Widget Grid 2 widget, or render it as a plain HTML table without any styling.
- Options for pagination for Row, Column or non.
- Structure mode preview in the Studio Pro.
Use cases
- Time writing form; a table where the rows represent users, and the column is week. Depending on the project, you might have 1 to 10 weeks, and you can show the table with one widget.
- Resource Planning: Where the user can select the period (columns), and the rows are the resource, the cells show the sum of the planned week.
- Pivot tables; sum and group data.
- Timeslots; postal service shows a timeslot for delivery.
- Access Matrix; row represents a user, the columns are services, a cell can be a checkbox.
- Excel-like sheets with any columns/rows.
Technically, you can build it with a list view in a list view, however:
- The headers are never appropriately aligned with the cells (Styling).
- Page in the studio pro is hard to understand. (Developer experience)
- The rendering is slow, as column data is loaded after row data. (Performance)
- List views in list views are not accessible for a screenreader. (Accesibility)
Documentation
Dynamic Data Grid
Data Grid with variable columns. (Matrix or Table)
No more nested list views, lightning fast rendering!
Features
- Data Grid, with variable number of columns.
- Render cell content: attribute, text or user custom to build your onw cell content, including editable inputs.
- Empty row content message.
- Empty cell objects can be omitted when "Optimize cell paging" is disabled.
- On click action on row, column and or cells
- Choose the default styling of the Data Widget Grid 2 widget, or render it as a plain HTML table without any styling.
- Options for pagination for Row, Column or non.
Benefits
- Choose the default styling of the Data Widget Grid 2 widget, or render it as a plain HTML table without any styling.
- Structure mode preview in the Studio Pro. Easy to configure.
- Accessible for screen readers.
- Small widget <14Kb.
- Fast rendering, the data is loaded parallel and can be paged
Usage
See attached images for each step:
1. Create a data model with a Row, Column and Cell entity.
2. Place the widget on the page.
3. Select the Cell as the data source, Column and Row relation.
4. Add some Data.
Notes
The option "Optimize cell paging" can only be used when each row/column has a cell, and the sorting of the cells and rows/columns
are equal, using data source Database or XPath. A warning is written in the console log when an empty cell is rendered when the optimized cell paging is enabled.
"Optimize cell paging" does not work well with adding and removing data from the grid, which might cause a cell to shift into the wrong column/row.
Demo project
View https://testtable-sandbox.mxapps.io/