JSFiddle - React, Tailwind, and code Playground

by Chris Maloney

HTML

<script src="https://www.ncbi.nlm.nih.gov/Structure/ngram.grid/scripts/vendor.17a38c04.js"></script>
<script src="https://www.ncbi.nlm.nih.gov/Structure/ngram.grid/scripts/scripts.c4e77020.js"></script>
<script src="https://www.ncbi.nlm.nih.gov/Structure/ngram.grid/scripts/templates.5d3363b8.js"></script>
<link rel="stylesheet" href="https://www.ncbi.nlm.nih.gov/Structure/ngram.grid/styles/vendor.bf280c25.css">
<link rel="stylesheet" href="https://www.ncbi.nlm.nih.gov/Structure/ngram.grid/styles/main.09f0c578.css">
<div class="app" 
     ng-app=TestApp 
     ng-controller='gridController'>
  <grid-table query='query'
              config='gridConfig'></grid-table>
</div>

CSS

div.app {
  padding: 20px;
}
.red{
  color:red;
}
.blue{
  color:blue;
}

JavaScript

angular.module('TestApp', ["ngramApp"])
.controller('gridController', 
  ['$scope', function($scope) {
    $scope.query = {
      matching: 'cid==2244',
    };
    $scope.gridConfig = {
      autoLoad: true,
      collection: 'bioactivity',
      schema: 'bioactivity',
      colNames: ['ID', 'Assay Name', 'Compound Name', 'Activity'],
      colModel: [
        { name: 'id',
          index: 'id',
          width: 50,      // optional
          align: 'right',
          sortable: false
        }, 
        { name: 'aidname',
          index: 'aidname',
          sortable: false,
          width: 200,
          search: false
        }, 
        { name: 'cmpdname',
          index: 'cmpdname',
          sortable: false,
          search: false,
          width: 70,
          align: 'right'
        }, 
        { name: 'actvty',
          index: 'actvty',
          width: 30,
          search: false,
          align: 'right',
          sortable: true,
        }
      ]
    };
  }]);