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
Ext.override(Ext.grid.header.Container, {
/**
* Returns an array of menu CheckItems corresponding to all immediate children of the passed Container which have been configured as hideable.
*/
getColumnMenu: function(headerContainer) {
var menuItems = [];
/* CATEGORY 1 */
var itemsOneMenu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Item 1.1',
checked: true,
checkHandler: this.onColumnCheckChange
},{
text: 'Item 1.2',
checked: false,
checkHandler: this.onColumnCheckChange
}]
});
categoryOneMenuItem = Ext.create('Ext.menu.Item', {
text: 'Category 1',
hideOnClick: false,
menu: itemsOneMenu
});
/* CATEGORY 2 */
var itemsTwoMenu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Item 2.1',
checked: true,
checkHandler: this.onColumnCheckChange
},{
text: 'Item 2.1',
checked: false,
checkHandler: this.onColumnCheckChange
}]
});
categoryTwoMenuItem = Ext.create('Ext.menu.Item', {
text: 'Category 2',
hideOnClick: false,
menu: itemsTwoMenu
});
menuItems.push(categoryOneMenuItem,categoryTwoMenuItem);
return menuItems;
}
});
var data = [
{
id: 1,
name: 'Twingo',
manufacturer: {
id: 1,
name: 'Renault'
}
},
{
id: 2,
name: 'Scenic',
manufacturer: {
id: 1,
name: 'Renault'
}
},
{
id: 2,
name: 'Corsa',
manufacturer: {
id: 1,
...