Slickgrid :

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<div id='container'>
    <div id="myGrid" style="width:600px;height:300px;"></div>
</div>

JavaScript

function apply() {
      var grid, data = [];

      var options = {
          editable: true,
          enableAddRow: true,
          enableCellNavigation: true,
          asyncEditorLoading: false,
          autoEdit: true,
          forcefitColumns: false,
          frozenColumn: 2
      };

      var columns = [{
          id: "title",
          name: "Title",
          field: "title",
          width: 120,
          cssClass: "cell-title",
      }, {
          id: "desc",
          name: "Description",
          field: "description",
          width: 100,
      }, {
          id: "duration",
          name: "Duration",
          field: "duration",
      }, {
          id: "percent",
          name: "% Complete",
          field: "percentComplete",
          width: 80,
          resizable: false,
      }, {
          id: "start",
          name: "Start",
          field: "start",
          minWidth: 60,
      }, {
          id: "finish",
          name: "Finish",
          field: "finish",
          minWidth: 60,
      }, {
          id: "effort-driven",
          name: "Effort Driven",
          width: 80,
          minWidth: 20,
          maxWidth: 80,
          cssClass: "cell-effort-driven",
          field: "effortDriven",
      }];

      //addCalendar(columns);

      for (var i = 0; i < 5000; i++) {
          var d = (data[i] = {});

          d["title"] = "Task " + i;
          d["description"] = "This is a sample task description.\n  It can be multiline";
          d["duration"] = "5 days";
          d["percentComplete"] = Math.round(Math.random() * 100);
          d["start"] = "01/01/2009";
          d["finish"] = "01/05/2009";
          d["effortDriven"] = (i % 5 == 0);
      }

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

apply()