backgrid_es6

Backgrid ES6

This repo contains an ES6 version of Backgrid.js, allowing for ES6 imports and tree shaking.

This package is made by deconstructing Backgrid sources, rewriting and separating it into modules and reassembling them using Rollup.

It also bundles ES6 versions of the extensions:

• backbone.paginator
• backgrid-paginator
• backgrid-sizeable-columns

Dependencies

To use this library, your project sould already have

• jQuery
• Underscore
• Backbone

They aren't explicitly listed as dependencies in package.json (for npm nor jspm), because you might want to use other drop in replacements for these dependencies (for example, lodash@^3 instead of Underscore, backbone_es6 instead of Backbone, or jquery.slim.js build instead of jquery.min.js).

Install

Install with npm as

	npm install --save-dev backgrid_es6

or install using JSPM as

jspm install npm:backgrid_es6

Usage

This package provides two scripts.

• dist/ig_backgrid.es6.js in ES6 format, listed as jsnext:main and module properties in package.json
• dist/ig_backgrid.js in UMD format, listed as main in package.json

Usage as ES6 Module

If you're already using ES6 modules in your code (and you should), then import this library as

import {Backgrid} from 'backgrid_es6/ig_backgrid.es6.js';

Usage as UMD (AMD, CommonJS, Global)

If you're still using AMD or CommonJS syntax, then you should use ig_backgrid.js which is in UMD format:

var Backgrid = require('backgrid_es6)';

The UMD format is a 100% compatible drop-in replacement for official Backgrid.js.

Using it with JSPM

If you installed Backgrid ES6 with JSPM, backgrid_es6 will be mapped automatically to backgrid.es6.js, so AMD usage would need you to point directly to backgrid.js:

define([
  'backgrid_es6/backgrid.js'
],function(Backgrid) {

  ...your code...

});

But, if you're transpiling (using plugin-babel) you could use AMD syntax as:

define([
  'backgrid_es6'
],function(Backgrid) {

  // Please note that you need to check for the "default" export
  Backgrid = 'default' in Backgrid ? Backgrid.default : Backgrid;

  ...your code...

});

or

import {Backgrid} from 'backgrid_es6';

Documentation

As this project is meant to be a full compatible drop-in replacement for Backgrid.js, the same docs apply.