Is it possible to make ng-grid responsive?

Question

I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.

I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.

Is there anyway to make ng-grid responsive?

Cuffs

Answer 1

I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.

You can wrap a ng-grid with this same class and achieve the identical behavior:

<div class="table-responsive">
  <div class="gridStyle" ng-grid="gridOptions">

  </div>
</div>

If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).

Cuffs

I'm wondering why this works. 'ngGrid' doesn't use tables. This solution seems very sketchy to me. – Delcine

You should be able to page inspect the differences with and without to see how it is rendered and which styles are applied to highlight how it works/behaves. – Cuffs

The question remains: Why are you using .table-responsive for a collections of divs (ngGrid)? – Delcine

I believe the reason this works upon further investigation is because if you look at Bootstrap's CSS file for table-responsive, the main styles are HTML element agnostic, and thus the restyling to make responisve is working on both a <div> or obviously a <table>. There are more styles to be applied if it is a <table>. Would I love it if a div-responsive or ng-grid-responsive class existed? Sure, but they don't and when applying this it does work. If it bothers you, I'd recommend to refactor the stylings non-specific to a <table> element and apply them to your own class. – Cuffs