JSFiddle - React, Tailwind, and code Playground

by Mohamed Shaaban

HTML

<div>

    <script type="text/x-kendo-tmpl" id="books-grid-template">
        <div id="books-grid"
             data-role="grid"
             data-bind="source: booksDS, events :{dataBound : dataBound}"
             data-height="300"
             data-filterable="true"
             data-sortable="true"
             data-pageable="{ refresh : true }"
             data-resizable="true"
             data-navigatable="true"
             data-selectable="true"
             data-editable="popup"
             data-toolbar="['create']"
             data-columns="[
                            { title : 'Code', field : 'code', hidden : true },
                            { title : 'Name', field : 'name' },
                            { title : 'ISBN', field : 'ISBN' },
                            { title : 'Author', field : 'author', template : '#= author.name #' },
                            { title : 'Available', field : 'available' },
                            { title : '&nbsp;', width: 170, command : ['edit', 'destroy'] }
                        ]"
                >
        </div>
    </script>

    <div style="width: 100%; min-height: 500px; height: 100%;" id="libraries-grid"
        data-role="grid"
        data-bind="source: librariesDS, events: {detailInit : detailInit}"
        data-height="500"
        data-filterable="true"
        data-sortable="true"
        data-pageable="{ refresh : true }"
        data-resizable="true"
        data-navigatable="true"
        data-selectable="true"
        data-editable="popup"
        data-toolbar="['create']"
        data-detail-template="books-grid-template"
        data-columns="[
            { title : 'Code', field : 'code', width: 100 },
            { title : 'Name', field : 'name' },
            { title : '&nbsp;', width: 170, command : ['edit', 'destroy'] }

        ]"
        >
    </div>

</div>