Simple and lightweight data grid in JS/HTML
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. The example in this repository also uses Twitter Bootstrap for default styles.
Demo: http://datazenit.com/static/sensei-grid/examples/index.html
The simplest way to get all necessary files is via bower: bower install sensei-grid
.
If you don't want to use bower, just download an archive from the latest release page or clone the whole repository.
When you have obtained a copy of Sensei Grid, you must include all dependecies, sensei-grid.js and sensei-grid.css.
Sensei Grid depends on jQuery and lodash/underscore.js. For your convenience all dependecies can be found in lib/
folder.
Warning: By default Sensei Grid does not apply any styles to the table. It means that you need to create your own stylesheet or you can just use bootstrap.css as shown in the example below.
<link rel="stylesheet" type="text/css" href="dist/css/sensei-grid.css"/>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css"/>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="dist/sensei-grid.js"></script>
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();
By default Sensei Grid is bundled with several grid editors that can be registered for a data grid.
List of available editors:
Planned for the upcoming releases: