Get started with 6pac-slickgrid CDN

MIT licensed

6pac-SlickGrid: Efficient data grid in JS, with rendering and sorting capabilities.

Tags:
  • slickgrid
  • grid

Stable version

Copied!

How to start using 6pac-slickgrid CDN


$(document).ready(function() {
  // Define the data model
  function DataModel() {
    this.data = [
      { id: 1, name: "John Doe", age: 30 },
      { id: 2, name: "Jane Doe", age: 25 },
      { id: 3, name: "Bob Smith", age: 45 }
    ];
  }

  DataModel.prototype.getLength = function() {
    return this.data.length;
  };

  DataModel.prototype.getItem = function(id) {
    return this.data[id];
  };

  // Initialize SlickGrid
  var dataModel = new DataModel();
  var columns = [
    { id: "id", name: "ID", minWidth: 50 },
    { id: "name", name: "Name", minWidth: 100 },
    { id: "age", name: "Age", minWidth: 50 }
  ];

  var grid = new Slick.Grid("#myGrid", dataModel, columns, {
    enableCellNavigation: true,
    enableRowSelection: true,
    enableSorting: false,
    dragAndDrop: true
  });

  // Load the drag-and-drop plugin
  $("head").append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-grid@5.8.2/css/slick-grid.css">');
  $("head").append('<script src="https://cdn.cdnhub.io/6pac-slickgrid/5.8.2/lib/jquery.event.drag-2.3.0.js"></script>');
  $("head").append('<script src="https://cdn.jsdelivr.net/npm/slick-grid@5.8.2/slick.grid.draganddrop.js"></script>');

  // Initialize the drag-and-drop plugin
  Slick.Grid.plugin.registerPlugin(Slick.Grid.Plugins.DragAndDrop, Slick.Grid.Plugins.DragAndDrop.defaults);
  grid.registerPlugin(new Slick.Grid.Plugins.DragAndDrop());

  // Render the grid
  grid.render();
});
Copied!
Copied!
Copied!
Copied!

All versions