ui-grid and CSS flex

by Julien Roche

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.resize-columns.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.auto-resize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.infinite-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.4.11/ui-grid.selection.js"></script>
<body>
  <div class="main">
    <div class="main__title">A header</div>
    <div class="main__content">
      <div class="main__content__grid"
        ui-grid="gridOptions"
        ui-grid-auto-resize
        ui-grid-resize-columns
        ui-grid-selection
        ui-grid-infinite-scroll></div>
    </div>
  </div>
</body>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  display: flex;
}

.main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 1rem 1rem 1rem 1rem;
}

.main__title {
  background-color: purple;
  color: white;
  height: 3rem;
  flex: 0 0 auto;
}

.main__content {
  border: 1px solid blue;
  display: flex;
  flex: 1 1 auto;
  position: relative;
}

.main__content__grid {
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  right: 0px;
  top: 0px;
}

Babel + JSX

angular
	.module('myApp', [
    'ui.grid',
    'ui.grid.autoResize',
    'ui.grid.infiniteScroll',
    'ui.grid.resizeColumns',
    'ui.grid.selection'
  ])
  .run(function ($rootScope, $interval) {  
  	$rootScope.gridOptions = {
      enableMinHeightCheck: false, // very important
    	enableSorting: true,
      enableColumnResizing: false,
      enableColumnMenus: false,
      enableRowHeaderSelection: false,
      multiSelect: false,
      enableFiltering: false,
      enableGridMenu: false,
      infiniteScrollRowsFromEnd: 25,
      infiniteScrollUp: false,
      infiniteScrollDown: true,
      enableHorizontalScrollbar: 2,
      rowHeight: 40,
      columnDefs: [
      	{
        	'field': 'firstName',
          'displayName': 'The First Name',
          'width': '33%'
        },
        {
        	'field': 'lastName',
          'displayName': 'The Last Name',
          'width': '33%'
        },
        {
        	'field': 'company',
          'displayName': 'The Company Name',
          'width': 350
        },
        {
        	'field': 'employed',
          'displayName': 'Employed status',
          'width': 350
        }
      ],
    	data:  [
        {
            firstName: "Cox",
            lastName: "Carney",
            company: "Enormo",
            employed: true
        },
        {
            firstName: "Lorraine",
            lastName: "Wise",
            company: "Comveyer",
            employed: false
        },
        {
            firstName: "Nancy",
            lastName: "Waters",
            company: "Fuelton",
            employed: false
        },
        {
            firstName: "Cox",
            lastName: "Carney",
            company: "Enormo",
            employed: true
        },
        {
            firstName: "Lorraine",
            lastName: "Wise",
            company: "Comveyer",
            employed: false
        },
        {
            firstName: "Nancy",
            lastName: "Waters",
            company:...