JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="list"></table>

CSS

.circle {
    width:10px;
    height:10px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:red;
}

JavaScript

$(document).ready(function () {
    var mydata = [{
        id: "1",
        total: "210.00"
    }, {
        id: "2",
        total: "320.00"
    }, {
        id: "3",
        total: "430.00"
    }, {
        id: "4",
        total: "210.00"
    }],
        grid = $("#list");

    grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Inv No', 'Total', ''],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 70,
            align: 'center',
            sorttype: 'int'
        }, {
            name: 'total',
            index: 'total',
            width: 120,
            formatter: 'number',
            align: 'right'
        }, {
            name: "actionBtn",
            width: 100
        }],
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        sortorder: 'desc',
        caption: 'Just simple local grid',
        height: '100%',
        gridComplete: function () {
            var ids = $("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var rowId = ids[i],
                    activeBtn = "<div class='circle'></div>";
                $("#list").jqGrid('setRowData', rowId, {
                    actionBtn: activeBtn
                });
            }
        }
    });
});