JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<script src="http://johannsen.us/slick.grid.js"></script>
<div class="result">
    <div class="row">
        <div class="grid">
            <div id="sA" class="slick"></div>
        </div>
    </div>
</div>

CSS

div.result
{
    background-color:#ccc;
    display:table;
}

div.row
{
    display:table-row;
}

div.grid
{
    background-color: Blue;
    color: White;
    display:table-cell;
    vertical-align:top;
    margin: 0px;        
}

JavaScript

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    syncColumnCellResize: true,
    forceFitColumns: false,
    enableTextSelectionOnCells: true,
    topPanelHeight: 25,
    autoHeight: true
};

var dataViewA;
var gridA;
var columnsA = [
    { id: "idA1", name: "", field: "A1", width: 150 },
    { id: "idA2", name: "", field: "A2", width: 150 }
    ];
      
      
var dataA = [{ A1 : "Aaaaa", A2: "Aaaaa2" }];

dataViewA = new Slick.Data.DataView({ inlineFilters: true });
gridA = new Slick.Grid("#sA", dataViewA, columnsA, options);
$('#sA').data('slickgrid', gridA);

dataViewA.beginUpdate();
dataViewA.setItems(dataA);
dataViewA.endUpdate();

gridA.updateRowCount();
gridA.render();