datazenit / sensei-grid

Simple and lightweight data grid in JS/HTML

Sensei Grid

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 and Screenshot

Demo: http://datazenit.com/static/sensei-grid/examples/index.html

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.

Installation

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>

Basic Usage

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();

Bundled editors

By default Sensei Grid is bundled with several grid editors that can be registered for a data grid.

List of available editors:

• BasicEditor - simple text field to edit basic data
• BooleanEditor - checkbox editor for boolean values (true/false)
• TextareaEditor - large text field for editing large text
• SelectEditor - dropdown select box to choose a value from a list
• DateEditor - datetime editor to choose a specific date from a calendar, provided by pickadate.js
• DisabledEditor - sample editor that can't be edited
• [new] AutocompleteEditor - text field with autocomplete support, based on typeahead.js

Blog posts

• Work and open source #2: Sensei Grid
• First public release of Sensei Grid
• Sensei Grid Roadmap
• Sensei Grid Daily Overview

Roadmap

Planned for the upcoming releases:

• Delete/duplicate row keyboard shortcut
• New row support
• Event callbacks (e.g., save, load, render)
• Field types (e.g., string, int, float)
• Optional column definition (if the structure of data is simple, assume default column settings)
• Firefox compatibility issues
• More configuration parameters for grid
• Example editor for specific field types (an example select box editor can be found in examples/example.js)
• Touch support for mobile devices
• Column sorting callbacks
• Column resizing (to be discussed)
• Implement undo/redo (to be discussed)

sensei-grid's Issues

Can not type some letters

"z","y" - letters that I can not type in cell. (also on another language).
Temp fix: delete "90, 89" from "var codes = [8, 9, 13, 27, 37, 38, 39, 40, 90, 89, 68];" but it disables undo/redo actions.

Custom date format

Any idea on an implementation for this?

Undo does not work after delete

Plus, think its a good idea to have OS X style undo (⌘ + Shift + Z)

Support non-string columns

Not all values in a td can be represented as a string. E.g. I built a multi tag selector like the one you saw on stackoverflow.com.

In plugin.saveEditor there's line

if (normalizeLineEndings(val) !== normalizeLineEndings($td.text()))

If the val is something like ['tag1', 'tag2'] there would be an error.

Data from last column missing

When row:save (by pressing tab) event fires from the last column the value is missing from the data variable. Note if enter is pressed then the value is there.

From the example note the count column

If tab is pressed
author: "Bob"
body: ""
count: ""
created_at: ""
id: NaN
is_admin: "true"
status: ""
title: ""

If enter is pressed
author: "Bob"
body: ""
count: "55"
created_at: ""
id: NaN
is_admin: "true"
status: ""
title: ""

I'm wondering if I could use the editor:save event since it has the value?

Help with saving a row

When I save a cell into base I use editor:save event

grid.events.on("editor:save", function (data, $cell) {
console.info("Column:", '@'+grid.getCellColumn($cell)+'@');
jQuery.ajax({
type: "POST",
url: "upd.php",
dataType:"text",
data:'ID='+grid.getRowData(grid.getCellRow($cell))["ID"]+'&Val='+grid.activeEditor.getValue()+'&Pole='+grid.getCellColumn($cell)+'&Text='
});
});

What is the best solution to save a new row to DB? When I add a new row I type something cell by cell. So it use editor:save event instead others.

Feature Suggestion: Add the ability for a SelectEditor to have differing values for value vs text.

For Example, I want the value of the cell to be the ID(value) of the selected item, but I want it to display the text of that selected item in the cell.

Ideas:

1. Add a second array of data. Something like SelectValuesArray: [1,2,3,4,5]
2. Change the data format of the SelectEditor to be something like:
   [
   {value:5,text:'Words'},
   {value:10, text:'More Words'}
   ]

I am going to start exploring how this could work in my personal Fork.

How to get the html or json code with format

Hi, I'm consulting what method is used to get the html code of the whole grid with editor.

I tried with the method
$ ("#Grid"). Grid (). GetGridData ()
but it only returns the text without formatting and if I insert an image it does not appear.

As I should do to capture all the elements.

Thanks and regards.

Bug after last update

Please try to click on different cells. It do multiple selection.

Suggestion: Make sensei-grid a standalone library (rather than jQuery plugin)

Hey guys, I love this idea and how lightweight this is, but I wanted to ask whether it is necessary for sensei-grid to be a jQuery plugin?

Does this:

$('#example').grid(data, columns)

add much value over this?

var container = document.getElementById('example')
grid(container, data, columns)

It seems like overall the JavaScript community is moving towards more standalone modules like this rather than jQuery plugins and just wanted to get your thoughts.

Suggestion for Select options having a different key and display

I can think of these two:

Option 1

var authors = {"values": [
    {"value": "1", "display": "Bob"}, 
    {"value": "2", "display": "John"}
]};

Option 2

var authors = {
    "display": ["Bob", "John", "Alice", "Jane"],
    "values": ["1", "TWO", "3", "4"]
};

I would like your thoughts before messing around and creating a PR

Undo support

How about undo operation support with keyboard shortcuts? :)

Is this project still active?

First of all thanks for this awesome project Ive been using it in internal CRUD project and so far so good.

But last release is from last year, last commit from many months ago.

Are devs still actively working on this?

If not what are better alternatives?

Add/remove/change columns

Thanks for this great library.

It seems like the biggest missing feature at the moment is an API for the user to change the columns: to edit the column header, to add columns, or to delete columns.

I was wondering if there were any plans for adding such APIs and/or UI. Obviously it can be implemented by simply reloading the entire table with modified data and column objects, but this would be an ugly user experience and it would be nice to have some widgets, etc. that were as slickly implemented as the rest of what you've done here.

Is this anything you're thinking of doing?

HTML code in cell

Hi! I need to show HTML (link or ) instead a simple text. Is it possible?

Sorting does not work

Subj.

bower install error

bower jquery#~3.10.1 ENORESTARGET No tag found that was able to satisfy ~3.10.1

Suggestion: Ability to lock thead and columns

If you have a big datasheet that you want to edit, you may want to keep an ID-column to your left that's always visible.

And for the same reason, if you're further down the sheet, you may want to see the column names aswell.

Example on pinned column schema:
{ "name": "id", "type": "int", "pinned": true }

Is it possible to delete a row?

Hi! Thanks for the great project. I can not find how to delete a row ( Can you help pls

File/Image features

This is a great project. was wondering if you thought about supporting other widgets such as files/images ?

Add new

How about "Add new row" functionality?

Cell "read only"

Do you think you will add an option "read only" for certain cells ? It will be very interesting !