Provide Grid container similar to sap.f.GridContainer from SAP UI5

[Tejram-Sonwane]

Is your feature request related to a problem?

The SAP UI5 web componet for react does not have Grid container which can allow the positioning of items (Tiles, Cards, or others) in a two-dimensional mesh. The mesh consists of rows with the same height and columns with the same width. Those height and width sizes along with the gap size are configurable.

Describe the solution you'd like

Provide Grid Container which will same as sap.f.GridContainer from SAP UI5. It should have these features in build

• It should allow the positioning of items (Tiles, Cards, or others) in a two-dimensional mesh.

• It should allow the resizing of items (Tiles, Cards, or others) in a two-dimensional mesh.

• The mesh consists of rows with the same height and columns with the same width. Those height and width sizes along with the gap size are configurable.

• The control should also provide responsiveness and automatically aligns the items depending on the available space.

Describe alternatives you've considered

No response

Additional Context

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @Tejram-Sonwane

It should allow the resizing of items (Tiles, Cards, or others) in a two-dimensional mesh.

Could you elaborate on what do you mean with "resizing of items".

Apart from that, could you please let us know why either a CSS grid, the ResponsiveGridLayout component, or the Grid component (was mainly created for IE11 support and is now only maintained for backwards compatibility), are not sufficient?

[pavankowshik]

Hey @Lukas742

We were looking at a component which does the same thing as UI5's GridContainer does. The GridContainer from UI5 has support for drag and drop of grid items to re arrange them inside the grid. Example can be seen here.

https://sapui5.hana.ondemand.com/#/entity/sap.f.GridContainer/sample/sap.f.sample.GridContainerDragAndDrop

Resizing of items was an additional requirement we had in the project wherein we wanted to be able to resize the grid items vertically / horizontally like some of the open-source libraries do (Resizing of items is not present in UI5's GridContainer as well)

In the below example you can resize grid items numbered 0,2,3 etc. https://react-grid-layout.github.io/react-grid-layout/examples/01-basic.html

[Lukas742]

Hi all,

there will be no new React component developed here, as components should be available across all frameworks. If the request is still relevant, it’s best to create a feature request in the SAP/ui5-webcomponents repository instead.