IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
568 stars 159 forks source link

IGX Grid - Grid Gap between rows and columns #14301

Open hmkelleyUAN opened 1 month ago

hmkelleyUAN commented 1 month ago

Is your feature request related to a problem? Please describe.

I would like to make grids that have spacing between the rows and columns where it also remains responsive - this can be achieved with CSS only somewhat; The overrides lead to columns getting cut off, and the possibility of even more added complexity as more grids are built with additional features will likely cause problems for the grids down the road. Because of how Javascript resizes the grids, and various hidden overflows obscure the content, it doesn't work with the overrides very well. This is frustrating because my team and I want a clear indication of where each 'cell' in a given grid is and the ability to show all of its content in a responsive way.

Describe the solution you'd like

The ability to add a parameter to control a grid gap for rows and columns, or the ability to set an earlier point for the scroll bar to appear would probably solve this issue. It would be better overall if the grid did not need css overrides for the gaps between rows and columns to be set because it leads to so many issues.

Describe alternatives you've considered

I was working with CSS overrides and forcing the grid to work that way is possible, but it leads to issues, both performance and appearance wise. I asked this question on the support portal previously, and it was suggested that I make this item into a feature request because of the complexity the grids have.

Additional context

I've attached a picture of the result my team and I are shooting for. We would like this to be responsive for mobile sizes, and we don't mind if the grid needs to scroll to do so.

grid screenshot