JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/datagrid/src/datagrid.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/datagrid/src/datagrid.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-res/ext/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
				<div id="grid" class="col-md-9"></div>
			</div>
		</div>
	</div>
</div>

CSS

body{
	padding: 50px;
	background-color: white;
}

.grid-content{
	overflow-y: hidden;
	margin: 10px;
}

.grid-init-code{
	min-width : 910px;
}

#grid {
	height: 300px;
	margin: 0 auto;
	padding: 0;
}

#grid td {
	border: solid 1px #888;
}

#grid .gridSelectedData {
	background-color: #1E90FF;
	color: white;
}

#grid input[type="checkbox"] {
	vertical-align: middle;
}

#grid .gridCell {
	text-align: center;
	white-space: nowrap;
}

#grid .gridHeaderRow {
	background-color: rgb(89, 87, 87);
	border-bottom-style: double;
	color : whitesmoke;
}

#grid .gridMainBox [data-h5-dyn-grid-property-name="name"] .gridCell {
	margin-left: 5px;
	text-align: left;
	white-space: nowrap;
}

#grid .gridMainBox [data-h5-dyn-grid-property-name="mail"] .gridCell {
	margin-left: 5px;
	text-align: left;
	white-space: nowrap;
}

#grid .gridMainBox [data-h5-dyn-grid-property-name="tel"] .gridCell {
	margin-left: 5px;
	text-align: left;
	white-space: nowrap;
}

.gridCellInfo{
	height: 400px;
	border: solid 1px;
	overflow-x: auto;
	white-space: pre;
}

.gridSortAscIcon > span {
	position: absolute;
    top: 3px;
    left: 13px;
}

.gridSortDescIcon > span {
	position: absolute;
    top: 3px;
    left: 13px;
}

JavaScript

/* jshint browser: true, jquery: true */
/*global h5*/

(function($) {
	'use strict';

	var datagrid = h5.ui.components.datagrid;
	var cellFormatter = datagrid.view.dom.cellFormatter;
	var changeHandler = datagrid.view.dom.changeHandler;

	function dumyAjax(param) {

		if (param.type === 'search') {
			return datagrid.util.delay(500, function() {
				return {
					fetchLimit: 300,
					fetchParam: param.param
				};
			});
			
		} else if (param.type === 'fetch') {
			var range = param.range;
			var dataArray = [];
			for (var i = 0, len = range.length; i < len; i++) {
				dataArray.push({
					id: String(i + range.index),
					name: "User #" + i,
					position: "Position " + i
				});
			}
			
			return datagrid.util.delay(500, function() {
				return {
					dataArray: dataArray
				};
			});

		} else if (param.type === 'commit') {
			return datagrid.util.delay(500, $.noop);
		}
	}

  var initParam = {
		  searcher: {
				type: 'lazy',
        param: {
					fetchUnit: 100
				}
			},
      mapper: {
      type: 'property',
      param: {
        direction: 'vertical',
        visibleProperties: {
          header: ['id'],
          main: ['name', 'position']
        },
        dataDirectionSize: {
          size: 25
        }
      }
    },

    // 表示形式とソートアイコンの設定
    view: {
      type: 'table',
      param: {
        cellClassDefinition: {},
        sortAscIconClasses: ['glyphicon glyphicon-sort-by-alphabet'],
        sortDescIconClasses: ['glyphicon glyphicon-sort-by-alphabet-alt']
      }
    },

    // 各カラム単位の設定
    properties: {
      id: {
        size: 70,
        sortable: true
      },
      name: {
        size: 100,
        sortable: true
      },
      position: {
        size: 110
      }
    }
  };

  var scrollGridController = {
    __name: 'datagrid.sample.ScrollGridController',

    __meta: {
      _gridController: {
        rootElement: '#grid'
      }
    },    
    _gridController: datagrid.GridController,

    __ready: function() {
			var...