Introducing Easy-grid: simple, vanilla-js and html-layout free datagrid plugin.

I needed some js-plugin for datagrid in one of my latest projects. Those free packages that I found were either heavyweight or tightly binded to html table layout. And yeap, I’ve just decided to make my own :)

Let me introduce easy-grid(github):

  • easy to use
  • easy to extend
  • light-weight and with readable (I hope) code
  • using template engine
  • independent from jQuery and html-layout

Now, when we’ve finished with promo text, lets talk about the code. First, what means “html-layout free”? I’m strongly convinced that all the logic of data operations should be separated from representation that’s why all that easy-grid knows about representation — it is that there is some template to render data. I used lodash library for templating. East grid initialize template engine and pass data as arguments. One more interesting thing that not only data from server rendered via template but all the plugin — as a result you can easily change appearance of control buttons, pagination, search etc.

To make it works you should adhere to some conventions:

  • use data-action attribute to define trigger element in template;
  • use method listen() to bind some action to trigger element;
  • use fire() to dispatch your custom events;
  • use existing getters and setters to modify data.

Note, that easy-grid is designed for work with server-side processing only. There are lot of similar plugins to make pretty tables from another sources. To start work with easy grid you should define data-template, which will be used to render data, data-url to make request and data-target to insert rendered result into DOM. After that just type:

var MyEasyGrid = new EasyGrid('#my-grid');

..or maybe you want change some default options?

EasyGrid.prototype.defaults.pluginPaginationTrigger = 'click';
var MyEasyGrid = new EasyGrid('#my-grid');

..or maybe you want to change some options manually and refresh grid without fetching data from server?

var MyEasyGrid = new EasyGrid('#my-grid');

Out of the box, easy-grid powered with pagination, simple filters and search, and changing number of displayed items. Just create html-element with:

data-action-go-first - on click will go to first page.

data-action-go-previous- on click will go to previous page.

data-action-go-next- on click will go to next page.

data-action-go-to- on click will go to page that was defined in data-page attribute at the DOM-element that event was triggered on.

data-action-go-last - on click will go to last page.

data-action-limit - to change limit option.

Pagination, search, limit and simple filters are provided as plugins, the core itself (unminified and with docs) takes only 300+ rows. As a backend developer I like to keep private methods really private, so I used philipwalton/privateParts to make some of our properties really private. Learn more about package.

To create your own plugins read the docs. Of course easy-grid provided under MIT license, so you are free to use it. If you have found some bugs or just want to talk — make issue or contact via email.