JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<script src="http://www.softmax.es/extJS/adapter/ext/ext-base.js"></script>
<script src="http://www.softmax.es/extJS/ext-all.js"></script>
<link rel="stylesheet" href="http://www.softmax.es/extJS/resources/css/ext-all.css">
<script src="http://rolando.searchrev.com/js/extjs-grid-filtering-2.2/grid/filter/Filter.js"></script>
<script src="http://rolando.searchrev.com/js/extjs-grid-filtering-2.2/grid/filter/FlexiStringFilter.js"></script>
<script src="http://rolando.searchrev.com/js/extjs-grid-filtering-2.2/grid/GridFilters.js"></script>
<script src="http://rolando.searchrev.com/js/extjs-grid-filtering-2.2/menu/FlexiStringMenu.js"></script>
<script src="http://rolando.searchrev.com/js/extjs-grid-filtering-2.2/menu/EditableItem.js"></script>

JavaScript

Ext.onReady(function(){
    var
    record = Ext.data.Record.create([
        {name: 'field_a', mapping: 1},
        {name: 'field_b', mapping: 2},
        {name: 'field_c', mapping: 3},
        {name: 'field_d', mapping: 4}
    ]),
    reader = new Ext.data.ArrayReader({
        id: 0
    },record),
    store = new Ext.data.Store({
        reader: reader,
        data: [
            [1,"field1a","field1b","field1c","field1d"],
            [2,"field2a","field2b","field2c","field2d"],
            [3,"field3a","field3b","field3c","field3d"],
            [4,"field4a","field4b","field4c","field4d"],
            [5,"field5a","field5b","field5c","field5d"],
            [6,"field6a","field6b","field6c","field6d"],
            [7,"field7a","field7b","field7c","field7d"],
            [8,"field8a","field8b","field8c","field8d"],
            [9,"field9a","field9b","field9c","field9d"]
        ]
    }),
    filters = new Ext.grid.GridFilters({
        local: true,
        filters:[
            {type: 'flexiString', dataIndex: 'field_a'},
            {type: 'flexiString', dataIndex: 'field_b'},
            {type: 'flexiString', dataIndex: 'field_c'}
        ]
    }),
    grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            {dataIndex: 'field_a', header: "Field A"},
            {dataIndex: 'field_b', header: "Field B"},
            {dataIndex: 'field_c', header: "Field C"},
            {dataIndex: 'field_d', header: "Field D"},
        ],
        viewConfig: {
            forceFit: true
        },
        height: 300,
        frame:true,
        plugins: filters
    });
});