JSFiddle - React, Tailwind, and code Playground

by Ryoto Saito

HTML

<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/slick-default-theme.css">
<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/controls/slick.columnpicker.css">
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/firebugx.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery-1.7.min.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.autotooltips.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/controls/slick.columnpicker.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.formatters.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.editors.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="myGrid" style="width:100px;height:100px;"></div>

JavaScript

(function($) {
  // register namespace
  $.extend(true, window, {
    "Extends": {
      "Editors": {
        "Select": SelectEditor
      },
      "Formatters": {
        "Select": SelectFormatter
      }
    }
  });

  function SelectEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function() {
      var option_str = "";
      for (key in args.column.options) {
        option_str += "<OPTION value='" + key + "'>" + args.column.options[key] + "</OPTION>";
      }
      $select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
      $select.appendTo(args.container);
      $select.focus();
    };

    this.destroy = function() {
      $select.remove();
    };

    this.focus = function() {
      $select.focus();
    };

    this.loadValue = function(item) {
      defaultValue = item[args.column.field];
      $select.val(defaultValue);
    };

    this.serializeValue = function() {
      return $select.val();
    };

    this.applyValue = function(item, state) {
      item[args.column.field] = state;
    };

    this.isValueChanged = function() {
      return ($select.val() != defaultValue);
    };

    this.validate = function() {
      return {
        valid: true,
        msg: null
      };
    };

    this.init();
  }

  function SelectFormatter(row, cell, value, columnDef, dataContext) {
    return columnDef.options[value];
  }

})(jQuery);


var grid;
var data = [];
var my_options = {
  "a": "AAA",
  "b": "BBB",
  "c": "CCC"
};
var columns = [{
  id: "select",
  name: "Select",
  field: "select",
  formatter: Extends.Formatters.Select,
  editor: Extends.Editors.Select,
  options: my_options
}];
var options = {
  editable: true
};


$(function() {
  data[0] = {
    select: "a"
  };
  data[1] = {
    select: "b"
  };
  data[2] = {
    select: "c"
  };

  grid = new Slick.Grid("#myGrid", data, columns, options);

});