JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

Ext.onReady(function() {
    Ext.override(Ext.view.DropZone, {
        onNodeOver: function(nodeData, source, e, data) {
            if (data && data.records && data.records[0]) {
                // The check should be better specified, e.g. a female with the name 'Malena' would be recognized as male!
                if (nodeData.innerHTML.indexOf(data.records[0].get('sex')) < 0) {
                    return this.dropNotAllowed;
                }
            }
            return this.callOverridden([nodeData, source, e, data]);
        },
        onContainerOver: function(source, e, data) {
            return this.dropNotAllowed;
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        width: 300,
        height: 250,
        renderTo: Ext.getBody(),
        
        store: Ext.create('Ext.data.Store', {
            fields: [ 'name', 'sex' ],
            groupField: 'sex',
            data: [
                { name: 'Howard',    sex: 'Male' },
                { name: 'Edward',    sex: 'Male' },
                { name: 'Bernard',    sex: 'Male' },
                { name: 'Susana',    sex: 'Female' },
                { name: 'Adriana',    sex: 'Female' },
                { name: 'Elana',    sex: 'Female' }
                
            ]
        }),
        
        columns: [
            { header: 'Name',    dataIndex: 'name',    flex: 1 },
            { header: 'Sex',    dataIndex: 'sex',    hidden: true,    tdCls: 'sexcol' }
        ],
        
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop'
            }
        },
        
        features: [{ftype:'grouping'}]
    });
});