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.loader.js"></script>
<script src="https://jp.igniteui.com/data-files/adventureworks.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>
<table id="grid"></table>
JavaScript
$(function () {
$.ig.loader({
scriptPath: "https://cdn-na.infragistics.com/igniteui/latest/js/",
cssPath: "https://cdn-na.infragistics.com/igniteui/latest/css/",
resources: "igGrid.Sorting",
ready: function () {
$("#grid").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "ID", key: "ProductID", dataType: "number" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "数値", key: "ProductNumber", dataType: "string" },
{ headerText: "原価", key: "StandardCost", dataType: "number" }
],
dataSource: adventureWorks,
height: "400px",
features: [
{
name: "Sorting",
type: "local",
mode: "multiple"
}
]
});
}
});
});