JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js"></script>

JavaScript

var myData = [
    ['J', 'MD'],
    ['A', 'VA'],
    ['S', 'DC'],
    ['M', 'DE'],
    ['B', 'NJ'],
    ['N', 'CA'],
    ['S', 'RT'],
    ['S', 'CG']
    ];

var store = new Ext.data.ArrayStore({
    fields: [{
        name: 'msgId'},
    {
        name: 'cat_name'}]
});

var fnMessageDetails = function(id){
    alert(id);
};


store.loadData(myData);

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
    {
        header: "cat_name",
        width: 75,
        sortable: true,
        dataIndex: 'msgId'
    },
        {
            header: 'info',
            xtype: 'templatecolumn',
            tpl: '<a href="#">View Message Details</a>',
            listeners: {
                click: function(col, grid, row){
                    fnMessageDetails(grid.store.getAt(row).get('msgId'));
                    return false;
                }
            }
        }],
    stripeRows: true,
    height: 300,
    width: 400,
    viewConfig: {
        forceFit: true
    },
    //bbar: [{
    //    text: 'add',
    //    handler: function(){
   //         grid.addCategory();
   //     }
  //  }]
});
grid.render(Ext.getBody());