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 id="myGrid" style="width:600px;height:500px;"></div>
 

<!-- cell template -->
<script type="text/html" id="cell_template">
  <div class="cell-inner">
    
    <div class="cell-main">
        <span><b><%=name%></b></span><span>
      <%=total.toFixed(2)%></span><span>
      <%=performance.toFixed(2)%></span><span>
      <%=returns.toFixed(2)%></span><span>
      <%=benchmark.toFixed(2)%></span>
    </div>
    <div class="cell-detail">
          <span><b>Detail:</b></span><span>
      <%=total%></span><span>
      <%=performance%></span><span>
      <%=returns%></span><span>
      <%=benchmark%></span>
          
          </div>
  </div>
</script>

CSS

.slick-cell {
  background: white !important;
  border-color: transparent !important;
  line-height: 19px !important;
}

.cell-inner {
  background: #fafafa;
  border: 1px solid gray;

}

.cell-main, .cell-detail {
    display: table;
    width: 100%;
}

.cell-main span, .cell-detail span {
    display: table-cell;
    width: 100px;
}

.cell-detail {
    display: none;
    background: #fff;
}
.cell-inner:hover .cell-detail {
    display: block;   
}

.cell-detail span {
    color: red;
}

.cell-inner:hover {
  background: #f0f0f0;
}

.slick-cell:hover, .slick-row:hover{
    overflow: visible;
    z-index: 100;
}

JavaScript

// this demonstrates using an HTML template in a grid row instead of slick grid's default cell rendering

$(function() {   

    var grid;
    var data = [];
    
    // step 1: defined columns & grid options
    
    var columns = [
    {
        id: "manager",
        field: "name",
        name: "Manager",
        formatter: renderCell,
        cssClass: "contact-card-cell",
        colspan: '*', sortable: true},
    {
        id: "total",
        field: "total",
        name: "Total Score",
        width: 100, sortable: true},
    {
        id: "performance",
        field: "performance",
        name: "Manager Performance",
        width: 100, sortable: true },
    {
        id: "returns",
        field: "returns",
        name: "Returns",
        width: 100, sortable: true},
    {
        id: "benchmark",
        field: "benchmark",
        name: "Benchmark",
        width: 100, sortable: true}
    ];
    
    var options = {
        enableAddRow: false,
        enableCellNavigation: false,
        enableColumnReorder: false,
        multiColumnSort: true
    };
    
    // formatter for first column
    
    // uses templating engine; fast ways to spit out a bunch of  HTML with dynamic data
    var compiled_template = tmpl("cell_template");
    
    function renderCell(row, cell, value, columnDef, dataContext) {
        // if (row % 2 === 0) { 
        return compiled_template(dataContext);
        // } else {
        //   return value;  // this is what the default renderer does
        // }
    }
    
    
    // this makes sure the first cell always spans all columns
    data.getItemMetadata = function(row) {
        //if (row % 2 === 0) { 
            return {
                "columns": {
                    0: {
                        "colspan": "*"
                    }
                }
            };
       // }
    }
    
    
    // step 2: get (dummy) data
    
    for (var i = 0; i < 100; i++) {
        var d = (data[i] = {});

       ...