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;
}

JavaScript

angular.module('TestApp', ["ngramApp"])
  .controller('gridController', ['$scope', '$timeout', function($scope) {
    $scope.query = {
      matching: 'cid==2244'
    };
    $scope.gridConfig = {
      collection: 'bioactivity',
      schema: 'bioactivity',
      autoLoad: true,
      colNames: ['ID', 'Assay Name', 'Compound Name'],
      colModel: [{
        name: 'id'
      }, {
        name: 'aidname'
      }, {
        name: 'cmpdname'
      }]
    };

  }]);