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>
<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>

<h3>contextRowMode: parent のページング機能</h3>
    <table id="treegrid1"></table>
    <br />
    <br />
    <h3>contextRowMode: breadcrumb のページング機能</h3>
    <table id="treegrid2"></table>

JavaScript

$(function () {
            var flatDS = [
                { "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller", "Title": "Vice President, Sales" },
                { "employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith", "Title": "Human resources" },
                { "employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio", "Title": "CFO" },
                { "employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan", "Title": "CTO" },
                // sub of ID 1
                { "employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling", "Title": "Sales Manager" },
                { "employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan", "Title": "Inside Sales Coordinator" },
                { "employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock", "Title": "Sales Representative" },
                { "employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama", "Title": "Sales Representative" },
                // sub of ID 4
                { "employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth", "Title": "Sales Representative" },
                { "employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis", "Title": "Sales Representative" },
                { "employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King", "Title": "Sales Representative" },
                // sub of ID 2
                { "employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis", "Title": "Chief Accountant" },
                { "employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida", "Title": "Accountant" },
                { "employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes", "Title": "Accountant" },
                // sub of ID 3
                { "employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia", "Title": "Software Architect" },
      ...