JSFiddle - React, Tailwind, and code Playground

HTML

<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Nyckeltal
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" id="example" width="100%">
                        <thead>
                            <tr>
                                <th width="10%"></th>
                                <th width="15%">Perspektiv</th>
                                <th width="15%">Nyckeltal</th>
                                <th width="15%">Tidsperiod</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr id="@item.ID">
                                    <td class="details-control"></td>
                                    <td>@item.Name</td>
                                    <td>@item.Address</td>
                                    <td>@item.Town</td>
                                </tr>
                            }
                        </tbody>

                    </table>
                </div>

            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<script>

    function format(d) {
        return '<tr><td></td><td></td><td></td><td>' + d.tidsperiod_1 +
            '</td>' + '<td><input type="text" value="' + d.värde_1 + '"class="form-control default-cursor" readonly></td><td></td><td></td>'
            + '</tr><tr>' +
            '<td></td><td></td><td></td><td>' + d.tidsperiod_2 +
            '</td>' + '<td><input type="text" value="' + d.värde_2 + '"class="form-control default-cursor" readonly></td><td></td><td></td>';

    }




    var editor;
   ...