JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

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="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="exampleInputEmail1">件数</label>
          <select class="form-control" id="paging">
            <option>5</option>
            <option selected>10</option>
            <option>20</option>
            <option>50</option>
          </select>
        </div>    
      </div>
    </div>
  </div>
  <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;
}

.editedCell {
    background-color: #FFA;
}

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',
			paging: {
				enable: true,
				pageSize: 10
			}
		},
    mapper: {
      type: 'property',
      param: {
        direction: 'vertical',
        visibleProperties: {
          header: ['id'],
          main: ['name', 'position', 'score', 'select']
        },
        dataDirectionSize: {
          size: 25
        }
      }
    },

    // 表示形式とソートアイコンの設定
    view: {
      type: 'table',
      param: {
        cellClassDefinition: {
					editedCell: function(cell) {
								return cell.editedValue !== cell.originalValue;
          }        
        },
        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: {
        formatter: cellFormatter.input('text'),
        changeHandler: changeHandler.edit()
      },
      score: {
				formatter: cellFormatter.input('text'),
        changeHandler: changeHandler.edit(parseInt)
      },
      select: {
      	formatter: cellFormatter.select(['Option1', 'Option2', 'Option3']),
        changeHandler: changeHandler.edit()
      }
    }
  };

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

    __meta: {
      _gridController: {
        rootElement: '#grid'
      }
    },    
    _gridController: datagrid.GridController,
		_dataSearcher: null,
    __ready: function() {
      
      // サンプルデータ生成
      var ary = [];
      for (var i = 1; i < 1000; i++) {
        ary.push({
          id: i.toString(),
          name: "User #" + i,
   ...