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==244'
      };
      $scope.gridConfig = {
        collection: 'bioactivity',
        schema: 'bioactivity',
        autoLoad: true,
        colNames: ['ID', 'Assay Name', 'Compound Name'],
        colModel: [
          { name: 'id' }, 
          { name: 'aidname' }, 
          { name: 'cmpdname' }
        ],
      };
    }
  ]
);