JSFiddle - React, Tailwind, and code Playground

by Barry Carter

HTML

<script src="rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/6pac/SlickGrid/master/slick.grid.css">
<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="https://rawgit.com/6pac/SlickGrid/master/lib/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://rawgit.com/6pac/SlickGrid/master/lib/jquery.event.drag-2.3.0.js"></script>
<script src="https://rawgit.com/6pac/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgit.com/6pac/SlickGrid/master/slick.grid.js"></script>
<script src="https://rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>


<div id="g1" class="list" data-bind="slickgrid: users, slickgridConfig: gridConfig" style="height: 500px"></div>

JavaScript

ko.bindingHandlers.slickgrid = {

        init: function(element, valueAccessor, allBindings, viewModel)
        {
            var config = allBindings.get('slickgridConfig');
            var grid = new Slick.Grid(element, [], config.columns, config.options);
            $(element).data('slickgrid', grid);

            var handleWindowResize = function() {
                grid.resizeCanvas();
            };

            $(window).on('resize', handleWindowResize);

            if (config.afterInit) {
                config.afterInit(grid);
            }

            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                if (config.beforeDestroy) {
                    config.beforeDestroy();
                }
                $.removeData(element, 'slickgrid');
                grid.destroy();
                $(window).off('resize', handleWindowResize);

            });
        },

        update: function(element, valueAccessor, allBindingsAccessor, viewModel)
        {
            var items = ko.unwrap(valueAccessor());
            var grid = $(element).data('slickgrid');
            grid.setData(_.isArray(items) ? items : []);
            grid.render();
        }
    };


function ViewModel()
{
		var self = this;
    this.gridConfig = {
        columns: [{
            id: 'username',
            name: 'Username',
            field: 'username',
            width: 150
        }, {
            id: 'email',
            name: 'E-Mail',
            field: 'email',
            width: 150
        }, {
            id: 'email1',
            name: 'E-Mail',
            field: 'email',
            width: 150
        }, {
            id: 'email2',
            name: 'E-Mail',
            field: 'email',
            width: 150
        }, {
            id: 'email3',
            name: 'E-Mail',
            field: 'email',
            width: 150
        }, {
            id: 'email4',
            name: 'E-Mail',
            field: 'email',
           ...