Code Monkey home page Code Monkey logo

slickgrid-es6's Introduction

SlickGrid ES6

This is a clone of the 6pac fork of SlickGrid

Goals:

  • Make it easy to consume in Webpack/Babel/ES6 codebases
  • Make dependency consumption implicit and not reliant on globals
  • Attempt to keep things consistent and backwards compatible by exporting onto the global Slick object
  • Speed improvements where possible, move to requestAnimationFrame where makes sense
  • Create adapters for mobx / rxjs as DataViews

Changes completed as per 0.1.1:

The goal is to keep the grid API of the 6pac repository unchanged. Howe

  • converted to ES6
  • dropped IE8 support
  • jquery 3.1.0
  • dropped jquery-ui (replaced with interact.js)
  • dropped event.drag (replaced with interact.js)
  • move to LESS (SCSS soon)

Imgur

Installing and use

$ npm i slickgrid-es6 --save

In code:

import { Grid, Data, Formatters } from 'slickgrid-es6';
import { options, columns } from './grid-config';

const gridColumns = [{
  id: "%", 
  name: "% Complete", 
  field: "percentComplete", 
  formatter: Formatters.PercentCompleteBar
}, ...columns]; // some column def

const dataView = new Data.DataView();
dataView.setItems([ ... ]); // some data

const grid = new Grid('someid', dataView, columns, options);

To import stylesheets in LESS (for now):

// some vars like @grid-border-color: red;, see slick.grid.variables.less

@import "~slickgrid-es6/dist/slick.grid.less";
@import "~slickgrid-es6/dist/slick-default-theme.less";
...

Examples and development

Currently, the examples are being ported. You can start a webpack-dev-server with hot reload like this:

$ npm start

Then point your browser to http://localhost:8888/.

To create a new build for dist, run:

$ npm run build

Contributing

Any pull requests and help with this are appreciated - both from conversion stand point and from slickgrid bug fixes or feature additions.

Original mleibman README follows:

Find documentation and examples in the wiki.

Welcome to SlickGrid

SlickGrid is an advanced JavaScript grid/spreadsheet component

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
  • Support for millions of rows

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.