JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
<script src="http://angular-ui.github.io/ng-grid/lib/ng-grid.debug.js"></script>
<h2>Pipelines</h2>
<div ng-app="myApp">
    <div ng-controller="PipelineController">
        <div class="grid-style" ng-grid="gridOptions">
            replace me
        </div>
    </div>
</div>

CSS

.ngGrid {
  background-color: #fdfdfd;
}
.ngGrid input[type="checkbox"] {
  margin: 0;
  padding: 0;
}
.ngGrid input {
  vertical-align: top;
}
.ngGrid.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.ngViewport {
  overflow: auto;
  min-height: 20px;
}
.ngViewport:focus {
  outline: none;
}
.ngCanvas {
  position: relative;
}
.ngVerticalBar {
  position: absolute;
  right: 0;
  width: 0;
}
.ngVerticalBarVisible {
  width: 1px;
  background-color: #d4d4d4;
}
.ngHeaderContainer {
  position: relative;
  overflow: hidden;
  font-weight: bold;
  background-color: inherit;
}
.ngHeaderCell {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: inherit;
}
.ngHeaderCell.pinned {
  z-index: 1;
}
.ngHeaderSortColumn {
  position: absolute;
  overflow: hidden;
}
.ngTopPanel {
  position: relative;
  z-index: 1;
  background-color: #eaeaea;
  border-bottom: 1px solid #d4d4d4;
}
.ngSortButtonDown {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-color: gray transparent;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  height: 0;
  width: 0;
}
.ngNoSort {
  cursor: default;
}
.ngHeaderButton {
  position: absolute;
  right: 2px;
  top: 8px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  z-index: 1;
  background-color: #9fbbb4;
  cursor: pointer;
}
.ngSortButtonUp {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-color: gray transparent;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  height: 0;
  width: 0;
}
.ngHeaderScroller {
  position: absolute;
  background-color: inherit;
}
.ngSortPriority {
  position: absolute;
  top: -5px;
  left: 1px;
  font-size: 6pt;
  font-weight: bold;
}
.ngHeaderGrip {
  cursor: col-resize;
  width: 10px;
  right: -5px;
  top: 0;
  height:...

JavaScript

var myApp = angular.module('myApp',['ngGrid']);

myApp.controller('PipelineController', function ($scope) {
 
 $scope.pipelineList = [
     {
         Area: "Area 1", 
         Region: "Region1", 
         LegalName: "Legal name 1", 
         Country: "Country 1",
         Address: "Address 1"
     }
 ];
    
    $scope.columnDefs =
       [
            { field: 'Area', displayName: 'Area', width: '15%' },
            { field: 'Region', displayName: 'Region', width: '20%' },
            { field: 'LegalName', displayName: 'Legal Name', width: '25%' },
            { field: 'Country', displayName: 'Country', width: '15%' },
            { field: 'Address', displayName: 'Address', width: '25%' }
       ];

    
 $scope.gridOptions = {
        data: 'pipelineList',
        columnDefs: [
            { field: 'Area', displayName: 'Area', width: '15%' },
            { field: 'Region', displayName: 'Region', width: '20%' },
            { field: 'LegalName', displayName: 'Legal Name', width: '25%' },
            { field: 'Country', displayName: 'Country', width: '15%' },
            { field: 'Address', displayName: 'Address', width: '25%' }
        ]
    };
        
});