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/apiviewer.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>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div style="height:300px;">
        <table id="grid"></table>
    </div>
    <div>
        <fieldset id="gridOptions" class="explorer">
            <legend>グリッド API 設定</legend>
            <input type="button" id="buttonDataBind" value="データバインド"></input>
        </fieldset>

        <fieldset id="filteringOptions" class="explorer">
            <legend>フィルター設定</legend>
            <div id="filterColumn"></div>
            <div id="conditionList"></div>
            <div id="exprTextEditor"></div>
            <div id="exprNumericEditor"></div>
            <div id="exprDateEditor"></div>
            <br />
            <input type="button" id="buttonFilter" value="フィルター"></input>
        </fieldset>

        <div style="clear:both;"></div>

        <fieldset id="pagingOptions" class="explorer">
            <legend>ページング設定</legend>
            <label for="pageIndexList">ページ インデックスの選択:</label>
            <div id="pageIndexList"></div>
            <label for="PageSizeSelect">ページ サイズの選択:</label>
            <div...

CSS

fieldset.explorer {
            float: left;
            width: 45%;
        }

JavaScript

$(function () {

            // Used to show output in the API Viewer at runtime,
            // defined in external script 'apiviewer.js'
            var apiViewer = new $.ig.apiViewer();

            /*----------------- Method & Option Examples -------------------------*/

            // process events of buttons and editors
            $("#buttonDataBind").igButton({
                labelText: $("#buttonDataBind").val(),
                click: function (e) {
                    $("#grid").igGrid("dataBind");
                }
            });

            $("#buttonFilter").igButton({
                labelText: $("#buttonFilter").val(),
                click: function (event) {
                    var expr = $("#exprTextEditor").igTextEditor("value") ||
                        $("#exprNumericEditor").igNumericEditor("value") ||
                        $("#exprDateEditor").data('igDateEditor').value(),
                      condition = $("#conditionList").igCombo("selectedItems")[0].data["cond"],
                    columnDataSource = $("#filterColumn").igCombo("option", "dataSource"),
                    filterColumn = $("#filterColumn").igCombo("selectedItems")[0].data.column;
                    if (expr !== null && expr !== undefined) {
                        $("#grid").igGridFiltering("filter", ([{ fieldName: filterColumn, expr: expr, cond: condition }]));
                    } else {
                        $("#grid").igGridFiltering("filter", []);
                    }
                }
            });

            $("#filterColumn").igCombo({
                width: "120px",
                textKey: "text",
                valueKey: "column",
                dataSource: [
                    { text: "従業員 ID", column: "EmployeeID", type: "number" },
                    { text: "名前", column: "FirstName", type: "string" },
                    { text: "名字", column: "LastName", type: "string" },
                    { text: "役職", column: "Title", type:...