README
SlickGrid ES6
This is a clone of the two biggest forks of SlickGrid - 6pac fork and X-SlickGrid, both of which have been converted to align with this project's goals and build strategy, both ready to be used out of the box[1]
NEW See it running in a create-react-app here: https://dimitarchristoff.github.io/slickgrid-example/
The main goals are:
- Make it easy to consume in a modern ES2016 codebase
- Transpile down to ES5
- Keep the existing SlickGrid API for both grids
- Make dependency consumption implicit and not reliant on globals
- Remove reliance on
Slick.
object namespace, everything just exports and needs to be imported, no moreSlick.Editors
etc. - Remove
jquery-ui
from deps list - replaced with Interact.js
[1] Yes, there are some compatibility issues, such as drag and reorder of columns with X-SlickGrid's frozenRows from frozen to none.
NB: Going forward, the 6pac version may be dropped.
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);
Full list of exports you can de-structure:
Slick
- returns the original namespace (Slick.core
- events etc)Grid
- returns 6pac's SlickGridFrozenGrid
- returns X-SlickGrid (frozen rows/columns)Data
- returns theSlick.Data
modelPlugins
- returns the default plugins converted/tweakedEditors
- returns the original pre-defined default editorsFormatters
- returns the original pre-defined default cell formatters
To import stylesheets in SCSS:
// some vars like $grid-border-color: red;, see slick.grid.variables.scss
@import "~slickgrid-es6/dist/slick.grid.scss";
@import "~slickgrid-es6/dist/slick-default-theme.scss";
...
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.
Changelog
3.0.3
- Fix of the Frozen (X-SlickGrid) keyboard scrolling problem here https://github.com/ddomingues/X-SlickGrid/issues/21
3.0.2
- SCSS tweaks
3.0.0
- Moved to SCSS
2.0.4
- Fixed critical bug with Data and
setFilter
2.0.3
- Fixed query-ui legacy exception on
grid.destroy()
2.0.2
- Fixed critical break in Interact.js with PointerEvent and new Chrome 51+
2.0.1
- Fixed
.npmrc
to still ship images for custom builds
2.0.0
- Skipped 1.0.0 due to previously published tag
- Changed webpack build
- BREAKING: deprecated UMD exports
- BREAKING: deprecated reliance on globals (eg. Slick.Formatters)
- Fixed some formatters and plugins
- Slight tweaks to LESS files
0.4.1
- Enabled grouped headers code, including resize and reorder
0.3.0
- Added X-SlickGrid to exports, available via
Slick.FrozenGrid
orimport { FrozenGrid as Grid } from 'slickgrid-es6'
- Added validator support for some editors
- Fixed plugins yet to be converted
0.2.3
- moved to using
slick.frozen.grid.js
from X-SlickGrid for FrozenRows/Columns feature, converted to ES6 and with deprecated jquery-ui - Styling fixes, moved to
box-sizing: border-box
for.slick-cell
- Updated examples to use React but grid has no dependency on React
0.1.1
:
Changes completed as per 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)
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