JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://mleibman.github.com/SlickGrid/slick.dataview.js"></script>
<div id="grid" style="width: 100%; "></div>

JavaScript

var dataView;
var grid;
var columns = [
    { id: "product", name: "Product", field: "product", minWidth: 300, maxWidth: 300 },
    { id: "optA", name: "Opt A", field: "optA", minWidth: 300, maxWidth: 300 },
    { id: "optB", name: "Opt B", field: "optB", width: 300 },
    { id: "optC", name: "Opt C", field: "optC", minWidth: 300, maxWidth: 300 }
  ];

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

var data = [];
data[0] = { id: "0", product: "Apples", optA: "This is a rather long option", optB: "10", optC: "Green" }
data[1] = { id: "1", product: "Oranges", optA: "Something interesting", optB: "15", optC: "Organic" }
data[2] = { id: "2", product: "Duels", optA: "Solo shot first", optB: "42", optC: "Really!" }
    
dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#grid", dataView, columns, gridOptions);
$('#grid').data('slickgrid', grid);
dataView.setItems(data);
grid.updateRowCount();
grid.render();