JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>

JavaScript

var data = [ 
             { "status_id": 1, "status_name": "Pending"}, 
             { "status_id": 2, "status_name": "Ready"}, 
             { "status_id": 3, "status_name": "Processing"}, 
             { "status_id": 4, "status_name": "Unavailable"},
             { "status_id": 5, "status_name": "Ready"}, 
           ];

Ext.define("StatusModel", {
    extend: 'Ext.data.Model',
    fields: ['status_id', 'status_name']
});

Ext.create('Ext.data.Store', {
    storeId:'statusStore',
    model: "StatusModel",
    groupField: 'status_id',
    data: data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
    groupHeaderTpl: ['{this.formatname([values.rows[0].data.status_name],[values.rows[0].data.status_id])}',
    {formatname:function(x,y){return x + y;}}]});

Ext.create('Ext.grid.Panel', {
    title: 'Status',
    store: Ext.getStore('statusStore'),
    columns: [
        { text: 'Id',     dataIndex: 'status_id' },
        { text: 'Name', dataIndex: 'status_name', flex: 1}
    ],
    features: [groupingFeature],
    renderTo: Ext.getBody()
});