JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {

    var defaultDepartment = 'ZZZZZZ';
    
    Ext.define('Model1', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'seniority',  type: 'string'},
            {name: 'department',  type: 'string'}
        ]
    });
    
var store = Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    model: 'Model1',    
    groupField: 'department',
    data: {'employees':[
        { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
        { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
        { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
        { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
        { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" },
        { "name": "John Doe",       "seniority": 5 }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'employees'
        }
    }
});
    
    Ext.define('Ext.grid.feature.OptionalGrouping', {

        extend:  Ext.grid.feature.Grouping ,
    
        alias: 'feature.optionalgrouping',
    
        showSummaryRow: true,
        
        groupTpl: [
        '{%',
            'var me = this.groupingFeature;',
            'me.setupRowData(values.record, values.recordIndex, values);',
            'values.needsWrap = values.isFirstRow || values.summaryRecord;',
            'values.recordIndex += me.skippedRows;',
        '%}',
        '<tpl if="needsWrap">',
            '<tr data-boundView="{view.id}" data-recordId="{record.internalId}" data-recordIndex="{[values.isCollapsedGroup ? -1 : values.recordIndex]}" class="{[values.itemClasses.join(" ")]} ' + Ext.baseCSSPrefix + 'grid-wrap-row">',
                '<td class="' + Ext.baseCSSPrefix + 'group-hd-container" colspan="{columns.length}">',
                    '<tpl if="isFirstRow">',
                       ...