Sensei Grid - Simple data grid library in JavaScript

Download   Demo

Sensei Grid is a simple data grid library written in JavaScript. The data grid is part of Datazenit, a web-based database administration tool.

Dependencies: jQuery and underscore.js/lodash.

Goals

• Simplicity: Sensei Grid will be a single purpose data grid without unrelated functionality.


• Small code base: Bloatware and dirty workarounds/hacks will be avoided as much as possible to keep the code base small and tidy.


• Extensibility: Even though Sensei Grid will be kept simple, we will put serious effort to make it easy to extend and customize.


• Stability: Sensei Grid is backed by Datazenit, meaning that the project is financially supported and will be constantly maintained and improved.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../lib/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../dist/css/sensei-grid.css"/>

<script src="../lib/jquery/dist/jquery.min.js"></script>
 <script src="../lib/lodash/dist/lodash.min.js"></script>
 <script src="../dist/sensei-grid.js"></script>
 <script src="../dist/sensei-editors.js"></script>

2. HTML

<div class="example"></div>

3. JAVASCRIPT

Define your data array. Each row is represented by an object.

var data = [
 id: 1, title: "test",
 id: 2, title: "foo bar",
];

Currently it is mandatory to define columns in a separate array for Sensei Grid to work

var columns = [
 name: "id", type: "string",
 name: "title", type: "string"
}

Initialize grid with data and columns

var grid = $(".example").grid(data, columns);

Register at least one editor (BasicEditor is bundled with Sensei Grid)

grid.registerEditor(BasicEditor);

Render data grid in .example container.

grid.render();

Sensei Grid - Simple data grid library in JavaScript