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: 'cat_id'},
    {
        name: 'cat_name'}]
});


store.loadData(myData);

var ClassifiedCategories = Ext.extend(Ext.grid.EditorGridPanel, {
    initComponent: function() {
        this.store = this.initialConfig.store;
        //add an empty row at top
        this.store.on('load', this.addCategory, this);
        Ext.apply(this, {
            clicksToEdit: 1,
            listeners: {
                afteredit: function(e) {
                    this.addCategory();
                },
                scope: this
            }
        });
        ClassifiedCategories.superclass.initComponent.call(this);
    },

    //adds an empty row and insert a record to store
    addCategory: function() {
        var Category = this.getStore().recordType;
        var cat = new Category({
            cat_id: null,
            cat_name: ""
        });

        this.stopEditing();
        this.store.insert(0, cat);
        this.startEditing(0, 0);

        return cat;
    }
});
var grid = new ClassifiedCategories({
    store: store,
    columns: [
    {
        header: "cat_name",
        width: 75,
        sortable: true,
        dataIndex: 'cat_name',
        editor: Ext.form.TextField
    }],
    stripeRows: true,
    height: 300,
    width: 200,
    viewConfig: {
        forceFit: true
    },
    //bbar: [{
    //    text: 'add',
    //    handler: function(){
   //         grid.addCategory();
   //     }
  //  }]
});
grid.render(Ext.getBody());