JSFiddle - React, Tailwind, and code Playground

by rosaricla

HTML

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <script src="http://jquery-211js-site0.orionhub.org:8000/jquery-2.1.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>

  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://buttonsdatatablescss-site.orionhub.org:8000/buttons.dataTables.css" rel="stylesheet">

    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">



</head>

<body>
      <div class="ibox-content">
              <table id="mytable01" class="dataTables-example">
              <thead>
                <tr >
                  <th style="text-align:center;">Chromosome</th>
                  <th style="text-align:center;">Start</th>
                  <th style="text-align:center;">End</th>
                  <th  style="text-align:center;"  >Reference</th>
                  <th  style="text-align:center;" >Alternative</th>
                  <th style="text-align:center;">Function (refGene)</th>
                  <th style="text-align:center;">Gene (refGene)</th>
                  <th style="text-align:center;">OMIM information</th>
                  <th style="text-align:center;">Gene Detail (refGene)</th>
                  <th style="text-align:center;">Exonic Function (refGene)</th>
                  <th style="text-align:center;">Aminoacid Change (refGene)</th>
                  <th style="text-align:center;">Aminoacid Change 2 (refGene)</th>
                  <th style="text-align:center;">avsnp150</th>
                 ...

CSS

.many_buttons {width: 200px;}

JavaScript

$(document).ready(function(){
             var table = $("#mytable01").DataTable({
              "scrollX": true,
                dom: '<"html5buttons"B>lTfgitp',

                buttons: [
                   {
                extend: 'colvisGroup',
                text: 'phastCons100way <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>',
                show: [ 1,2,3 ],
            },
            {
                  extend: 'colvisGroup',
                  text: '<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>',
                  hide: [ 1,2,3 ],
              }

                ]

            });
        });