JSFiddle - React, Tailwind, and code Playground

by webxl

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.editors.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.formatters.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/controls/slick.columnpicker.css">
<script src="http://mleibman.github.com/SlickGrid/controls/slick.columnpicker.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.com/SlickGrid/images/tick.png"></script>
<div style="position:relative">
  <div style="width:600px;">
    <div class="grid-header" style="width:100%">
      <label>SlickGrid</label>
      <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel"
            onclick="toggleFilterRow()"></span>
    </div>
    <div id="myGrid" style="width:100%;height:500px;"></div>
  </div>

  <div class="options-panel">
    <b>Search:</b>
    <hr/>
    <div style="padding:6px;">
      <label style="width:200px;float:left">Show tasks with % at least: </label>

      <div style="padding:2px;">
        <div style="width:100px;display:inline-block;" id="pcSlider"></div>
      </div>
      <br/>
      <label style="width:200px;float:left">And title including:</label>
      <input type=text id="txtSearch" style="width:100px;">
     ...

CSS

.cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      text-align: center;
    }

    .cell-selection {
      border-right-color: silver;
      border-right-style: solid;
      background: #f5f5f5;
      color: gray;
      text-align: right;
      font-size: 10px;
    }

    .slick-row.selected .cell-selection {
      background-color: transparent; /* show default selected row background */
}

img[src='../images/tick.png'] {
content:' ';        
}

img[src='../images/tick.png']:before {
content: ' ';
display: inline-block;
height: 17px;
width: 15px;
background-image: url('http://mleibman.github.com/SlickGrid/images/tick.png');
position: relative;    
}

JavaScript

var dataView;
var grid;
var data = [];
var columns = [
  {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false },
  {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
  {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true},
  {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true},
  {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
  {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
  {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true}
];

var options = {
  editable: true,
  enableAddRow: true,
  enableCellNavigation: true,
  asyncEditorLoading: true,
  forceFitColumns: false,
  topPanelHeight: 25
};

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

function requiredFieldValidator(value) {
  if (value == null || value == undefined || !value.length) {
    return {valid: false, msg: "This is a required field"};
  }
  else {
    return {valid: true, msg: null};
  }
}

function myFilter(item, args) {
  if (item["percentComplete"] < args.percentCompleteThreshold) {
    return false;
  }

  if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) {
    return false;
  }

  return true;
}

function percentCompleteSort(a, b) {
  return a["percentComplete"] - b["percentComplete"];
}

function...