JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid-theme.min.css">
<div id="jsGrid"/>

JavaScript

$(function() {
    var CustomField = function(config) {
        jsGrid.SelectField.call(this, config);
    };
 
    CustomField.prototype = new jsGrid.SelectField({
        editing: false, //NB! editing is disabled so we don't override 'editTemplate()'
    
        itemTemplate: function(value, item) {
        		return JSON.stringify(item);
        }
    });
 
    jsGrid.fields.customField = CustomField;

   	var clients = [
        { "Name": "Otto Clay" },
        { "Name": "Connor Johnston" },
        { "Name": "Lacey Hess" },
        { "Name": "Timothy Henson" },
        { "Name": "Ramona Benton" }
    ];
 
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",
 
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
 
        data: clients,
 
        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Custom Column", type: "customField" },
            { type: "control" }
        ]
    });
});