var columnDefs = [
    {headerName: "ID", width: 50,
        valueGetter: 'node.id',
        cellRenderer: 'loadingRenderer'
    },
    {headerName: "Athlete", field: "athlete", width: 150},
    {headerName: "Age", field: "age", width: 90},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 210},
    {headerName: "Gold", field: "gold", width: 300},
    {headerName: "Silver", field: "silver", width: 400},
    {headerName: "Bronze", field: "bronze", width: 200},
    {headerName: "Menu", field: "", width: 100, pinned: 'right', cellRenderer: 'menuRenderer' }
  ];
  
  function MenuRenderer( params ) {
  }	

	MenuRenderer.prototype.init = function(params) {
		this.eGui = document.createElement('div');
		this.eGui.classList.add('menu');
		var menuElement = `
			<a href="#">  * </a> 
			<div class="menu--list"> 
			</div>
		`;
		this.eGui.innerHTML = menuElement;
	};

	MenuRenderer.prototype.getGui = function() {
		return this.eGui;
	};


  var gridOptions = {
    components:{
        loadingRenderer: function(params) {
            if (params.value !== undefined) {
                return params.value;
            } else {
                return '<img src="./loading.gif">'
            }
        },
		'menuRenderer': MenuRenderer

    },
    columnDefs: columnDefs,
	rowBuffer: 0,
	rowModelType: 'infinite',
	paginationPageSize: 100,
	cacheOverflowSize: 2,
	maxConcurrentDatasourceRequests: 2,
	infiniteInitialRowCount: 0,
	maxBlocksInCache: 2,
	//embedFullWidthRows:true, 
    onGridReady: function (params) {
      params.api.sizeColumnsToFit();
    }
  }

  // wait for the document to be loaded, otherwise,
  // ag-Grid will not find the div in the document.

  document.addEventListener("DOMContentLoaded", function() {
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
	
	 agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}).then(function(data) {
        var dataSource = {
            rowCount: null, // behave as infinite scroll
            getRows: function (params) {
                console.log('asking for ' + params.startRow + ' to ' + params.endRow);
                // At this point in your code, you would call the server, using $http if in AngularJS 1.x.
                // To make the demo look real, wait for 500ms before returning
                setTimeout( function() {
                    // take a slice of the total rows
                    var rowsThisPage = data.slice(params.startRow, params.endRow);
                    // if on or after the last page, work out the last row.
                    var lastRow = -1;
                    if (data.length <= params.endRow) {
                        lastRow = data.length;
                    }
                    // call the success callback
                    params.successCallback(rowsThisPage, lastRow);
                }, 500);
            }
        };

        gridOptions.api.setDatasource(dataSource);
    });
  });

/* Menu */
	.menu {
		z-index: 2 !important;
		position: fixed;
		top: 20%;
		left: 50%;
	}
	
	.menu a {
		text-decoration: none;
	}
	
	.menu .menu--list {
		display: none;
		position: absolute;
		top: 0;
		right: 0px;
		width: 100px;
		height: 50px;
		border: 1px solid red;
	}
	
	.ag-body-container .ag-row {
		z-index: 0;
	}

	.ag-ltr .ag-hacked-scroll .ag-pinned-right-cols-viewport {
		overflow: visible !important;
	}
	
	.ag-pinned-right-cols-viewport .ag-row:first-child .menu--list{
		display: block;
	}

	/* [Layout] */
  .fill-height-or-more {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
  }
  .fill-height-or-more > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .some-area > div {
    padding: 1rem;
  }
  .some-area > div:nth-child(1) {
    flex-grow:0;
    background: #88cc66;
  }
  .some-area > div:nth-child(2) {
    flex-grow: 0;
    background: #ec971f;
  }
  .some-area > div:nth-child(3) {
    position: relative;
    padding: 0;
    justify-content: stretch;
    align-content: flex-start;;
    flex-grow:1;
    background: #8cbfd9;
  }
  .some-area > div:nth-child(4) {
    flex-grow: 0;
	position: absolute;
    background: #ec971f;
  }
  .some-area > div h2 {
    margin: 0 0 0.2rem 0;
  }
  .some-area > div p {
    margin: 0;
  }
  .inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

  html, body {
    padding:0;
	margin: 0;
    height: 100%;
	overflow: hidden;
  }
  
  .ag-body-viewport {
	-webkit-overflow-scrolling: touch;
	}

<head>
  <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>
</head>

<html>
  <body>
  <section class="some-area fill-height-or-more">
    <div>
      Header
    </div>
    <div>
      Action bar
    </div>
    <div>
      <div class="inner">
        <div id="myGrid" style="height: 100%; width:100%; font-size: 1.4rem" class="ag-theme-fresh"></div>
      </div>
    </div>
  </section>
  </body> 	
</html>