[Feature] Grid Widget for layouts

[somangshu]

Summary

A widget which can allow users to create a layout easily and help them make there applications responsive (for the grid content only).

• The users should be able to next multiple grids to create complex layout easily.
• The user should be able to set the number of sections inside the grid while nesting
• the grids inside should always inherit the parent height automatically

Example

Front conversations

[somangshu]

@riodeuno need to have a technical discussion around this

[momcilo-appsmith]

@somangshu do you know if we will be tackling this soon?

[somangshu]

@momcilo-appsmith that is right, We will need a technical discussion around this and then detail the PRD. We will take this up post that

[momcilo-appsmith]

@riodeuno @somangshu Should we have a discussion about this soon?

[momcilo-appsmith]

@somangshu If we were to build this widget we would also solve the issue linked below, right? #4138

[somangshu]

@momcilo-appsmith why do you say that, #4138 according to me is to show simple data in a tabular / list format.

[pranavkanade]

Feature request on intercom

[mnesarco]

Hi Friends,

Laying out a UI with absolute coordinates is is quite difficult and old fashioned. It is better to have basic Layout widgets to support responsiveness and to make the design process a lot more simple.

Some suggestions:

• RowLayout
• ColumnLayout
• GridLayout

[momcilo-appsmith]

@dilippitchika @somangshu @areyabhishek I think we should prioritize this issue soon. Would like to pick it up with our design team.

[dilippitchika]

[internal] Some initial research i did - https://www.notion.so/appsmith/Grid-widget-9fa1752c370e47339f5eec68a8794098
@shastry-gg

[shastryy]

[ Internal] Notion, Outlining work done on grid.

Parked until the responsive behaviour for 2d widgets are finalized, to avoid a platform change for a grid widget.

[n4l5u0r]

any updates on this ?

[michacassola]

I had asked about this in the community forum: https://community.appsmith.com/t/is-there-a-card-widget-or-horizontal-list-view/1685
Just so things are interlinked.

[somangshu]

@n4l5u0r @michacassola thanks for showing the interest here. This is still not prioritized, essentially we will be picking this up after shipping the responsiveness project.

While we triage this further, can you folks help us understand you use case?

[Charuru]

Yes please

[ashiqdcm]

I want a grid like widget shown in the image, with invisible buttons, which means i can do multiple selection and later i can build logic to get each selected items details using form widget, then build logic/calculations.

Need to be auto-layout supported for mobile devices too.

I see this is open since 2021, is there plan to get this into roadmap ?

[DeskYT]

Any updates?

[somangshu]

@ashiqdcm @DeskYT As pointed out before we will pick this up after the new responsive UI Building paradigm ships.

[ashiqdcm]

@ashiqdcm @DeskYT As pointed out before we will pick this up after the new responsive UI Building paradigm ships.

OK got it, nice to have high level timeline if that is there already.

[somangshu]

We expect this to be picked up post Q2 next year

[umeshdiwekarrapiddata]

Hey guys any updates on the grid layout under the list widget

[augustopena]

hi, any updates on this?

[somangshu]

Hey @augustopena @umeshdiwekarrapiddata we have recently launched the custom widget which could help you with your use case.
Otherwise the grid widget as a building block is getting planned under a major re-design of our editor coming this year.

[augustopena]

Thanks! there is any example/template of the code that I need to create this grid layout with the custom widget?

[tmedford]

@Nikhil-Nandagopal Is this something still on track for this year?

[rahulbarwal]

Hey @tmedford,
This will be prioritised in future, but unfortunately no plans at the moment. The closest thing right now is using list widget.

[tmedford]

@rahulbarwal If there was a technical design, I would consider building a widget. The complexities we have found are the strict tie to px placement and the fact that you can't have multiple drag/canvas points because the height calculation gets off with the different canvas.

[rahulbarwal]

@tmedford Can you share more about your use case?

[tmedford]

@rahulbarwal use case is to make something work for mobile and desktop screen where the widget know how to change the stacking, positioning of the sub canvas. So go from:
XX
To
X

Or
XXX
To
XX
X

Where each X represents a canvas. Similar to https://mui.com/material-ui/react-grid where each grid would be a collection of independent canvases with their own height. This is where we ran into problems given how appsmith determines height of parent when there could be N different sub canvases.

[ichik]

@tmedford Hi, lead design systems designer for Appsmith's widgets here. Would you be open to discussing your needs regarding this feature with us? You can schedule a call with me using this link, if none of those times works please do let me know.

[umeshdiwekarrapiddata]

Hey @tmedford, This will be prioritised in future, but unfortunately no plans at the moment. The closest thing right now is using list widget.

List widget we can use but it has some limitations. The height of the list is fixed, if we have more data in a single list item we need to scroll the data within the list but what we want is for it to adjust its height if we have more data