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/external/knockout-latest.js"></script>
<script src="https://jp.igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.grid.knockout-extensions.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>

<table style="width: 100%">
        <tr>
            <td style="width:50%"> 
                <fieldset>
                    <legend>親の最初の行</legend>
                    
                    <table class="config-tbl">
                        <tr>
                            <td>
                                <b>社員 ID:</b>
                            </td>
                            <td>
                                <span id="idEditor" data-bind="text: Records()[0].EmployeeID, valueUpdate: 'input'"></span>
                            </td>
                        </tr>
                        <tr>
                  ...

CSS

.config-tbl tr td:first-child {
            text-align: right;
            margin-right: 2px;
            color: #444;
            font-family: "Segoe UI",Arial,sans-serif;
            font-size: 1em;
        }
        .config-tbl input {
            border: solid 1px #ccc;
            color: #444;
            font-family: "Segoe UI",Arial,sans-serif;
            font-size: 1.1em;
        }

JavaScript

$(function () {
var customerOrdersModel, modifiedDataSource = {}, Records = [], db = northwind.results;

        $(function () {

            for (var i = 0; i < db.length; i++) {
                var currentItem = {};
                currentItem["EmployeeID"] = db[i].EmployeeID;
                currentItem["FirstName"] = db[i].FirstName;
                currentItem["LastName"] = db[i].LastName;
                currentItem["City"] = db[i].City;
                currentItem["Country"] = db[i].Country;
                var orders = db[i].Orders.results.splice(0,10);
                for (var j = 0; j < 10; j++) {
                    orders[j].RecordsOrderDate = normalizeDate( orders[j].OrderDate );
                }
                currentItem["Orders"] = orders;
                Records.push(currentItem);
            }

            modifiedDataSource["Records"] = Records;
            customerOrdersModel = ko.mapping.fromJS( modifiedDataSource );
            ko.applyBindings(customerOrdersModel);
        });

        function normalizeDate(date) {
            // Note: dataSource in grid requires Date object for a column with dataType:"date".
            if (!date)
                return null;
            if (date.getTime)
                return date;
            if (!date.substring)
                return null;
            if (date.indexOf("(") > 0)
                return new Date(parseInt(date.substring(date.indexOf("(") + 1, date.lastIndexOf(")"))));
            return Date.parse(date);
        }
});