JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<br />
	<h3>単一のセル選択</h3>
	
	<table id="cellSelectionGrid"></table>
	<br />
	<h3>複数の行選択</h3>
	
	<table id="rowSelectionGrid"></table>
	<h3>デフォルトの行セレクター</h3>
	
	<table id="defaultRowSelectors"></table>
	<br />
	<h3>チェックボックス付きの行セレクター</h3>
	
	<table id="cbRowSelectors"></table>
	<br />
	<h3>行番号</h3>
	
	<table id="rowNumbering"></table>

JavaScript

$(function () {
			/*----------------- Instantiation -------------------------*/
			createCellSelectionGrid();
			createRowSelectionGrid();
			createDefaultSelectorsGrid();
			createCboxSelectorsGrid();
			createRowNumberingGrid();
		});

		function createCellSelectionGrid() {
			$("#cellSelectionGrid").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
						{
							name: "Responsive",
							enableVerticalRendering: false,
							columnSettings: [
								{
									columnKey: "Title",
									classes: "ui-hidden-tablet"
								},
								{
									columnKey: "Address",
									classes: "ui-hidden-tablet"
								}
							]
						},
						{
							name: "Selection",
							mode: "cell",
							multipleSelection: false,
							touchDragSelect: false,
							multipleCellSelectOnClick: false
						},
						{
							name: "Paging",
							pageSize: 5,
							type: "local",
							inherit: true
						}
				],
				columns: [
				  { key: "EmployeeID", headerText: "社員 ID", dataType: "number", width: "0%", hidden: true },
				  { key: "LastName", headerText: "名字", dataType: "string", width: "10%" },
				  { key: "FirstName", headerText: "名前", dataType: "string", width: "10%" },
				  { key: "Title", headerText: "役職", dataType: "string", width: "20%" },
				  { key: "Address", headerText: "住所", dataType: "string", width: "20%" },
				  { key: "City", headerText: "市/州", dataType: "string", width: "10%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						autoGenerateColumns: false,
						width: "100%",
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "注文 ID", dataType: "number", width: "0%", hidden: true },
							{ key: "Freight", headerText: "輸送", dataType: "string", width: "15%" },
							{ key: "ShipName", headerText: "配送先", dataType: "string", width: "20%"...