JSFiddle - React, Tailwind, and code Playground

by Aditya Shrivastava

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div class="container-fluid">
    <div class="row well">
        <h3 class="heading" style="margin-left:10px;">Dashboard</h3>
        <br>
        <br>
            <table id="application-list" style="">
            </table>
        <br>
    </div>
</div>

JavaScript

var applicationGrid = $("#application-list"),
    myData = [{
            id: 10,
            internship_url: "dummy",
            title: "title1",
            company: "company1",
            created_at: "2014-07-27",
            expire_date: "2018-12-31",
            internship_status: "bla bla",
            application_count: 12,
            follow: "f1"
        },
        {
            id: 20,
            internship_url: "dummy",
            title: "title2",
            company: "company1",
            created_at: "2014-07-21",
            expire_date: "2018-12-31",
            internship_status: "bla bla",
            application_count: 123,
            follow: "f2"
        },
        {
            id: 20,
            internship_url: "dummy",
            title: "title3",
            company: "company1",
            created_at: "2014-07-29",
            expire_date: "2018-12-31",
            internship_status: "bla bla",
            application_count: 10,
            follow: "f3"
        },
    ];

$(window).on("resize", function() {
    var newWidth = applicationGrid.closest(".ui-jqgrid").parent().width();
    applicationGrid.jqGrid("setGridWidth", newWidth, true);
});

applicationGrid.on("jqGridAfterLoadComplete", function () {
    $(window).triggerHandler("resize");
}).jqGrid({
    data: myData,
    colNames: ['Internship Title', 'Company', 'Applied On', 'Application Status', 'Internship Status', '# Applications', 'Follow up'],
    colModel: [
        {
            name: 'title',
            width: 350
        },
        {
            name: 'company',
            width: 200
        },
        {
            name: 'created_at',
            width: 120,
            align: 'center',
            sorttype: 'date'
        },
        {
            name: 'status',
            width: 120,
            edittype: 'textarea'
        },
        {
            name: 'internship_status',
            width: 120,
            edittype: 'textarea'
        },
        {
          ...