The Grid-Layout component is complete! This is the last one I had on my to-do list to fully replace and enhance previous ProUI capabilities.
Grid Layout component will have two operation modes: ✅️Renderer and ✅️Layouter. In this video, layouter mode is featured. You can dynamically add objects to the Grid Layout, and the component will determine its position instantly. Insert objects directly in the specified cell, change the padding, columns and rows size, and when to render columns or rows first.
This component offers more flexibility and capabilities than the old Gridview component provided by ProUI.
Layotur mode: Easily arranges objects in the grid.
Renderer mode: Takes the data and the metadata to render objects from a json payload. Also has paging capabilities.
**Renderer Mode **is featured in this video. It uses a JSON file with a meta-data key to determine what type of object must be rendered.
File Structure
- data is an array of JSON objects containing the information that will be rendered. Each record in the array can be setup freely, depending on the dev needs.
- meta-data describes how each row must be rendered.
- default-object describes the object to be created by default, whenever no entry in the object-list field is found, that corresponds to any of the rows in the data array
- object-list describes how each row must be rendered. When null or empty, the Grid-Layout renderer will create the default object.
** Data Listener Behavior **
To properly render each cell in the grid, a new behavior was introduced called data-listener. It reacts to data-render request from the component, passes the information and lets you decide what to do with it.
I'll start working on the documentation and preparing the alpha-closed invitation.