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 class="row">
				<div class="col-md-9">
				  <p id="event">
          </p>
				</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: 400px;
	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;

  var initParam = {
    searcher: {
      type: 'all'
    },
    mapper: {
      type: 'property',
      param: {
        direction: 'vertical',
        visibleProperties: {
          header: ['_selectCheckBox', '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: {
			_selectCheckBox: {
				size: 25,
				enableResize: false,
				toValue: function(data, cell) {
					return cell.isSelectedData;
				},
				formatter: cellFormatter.checkbox(true),
				changeHandler: changeHandler.selectData()
			},
      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 ary = [];
      for (var i = 1; i < 1000; i++) {
        ary.push({
          id: i.toString(),
          name: "User #" + i,
          position: "Position " + i
        });
      };
      var dataSource = datagrid.createDataSource({
        idProperty: 'id',
        type: 'local',
        param: ary
      });

      //データグリッド初期化
      this._gridController.activate(dataSource, initParam);

      datagrid.util.delay(1000,...