GridPlus

This is a grid library which is based on slickgrid. Inspired by slickgrid-es6, and thanks to JLynch7 who implement a frozen columns patch.

GridPlus wants to be a new library, not a extension. It is based on current frozen slickgrid source code and will never update slickgrid version. So, developer do not need to know more about slickgrid, they just need to know the apis of gridplus.

install

npm install --save gridplus

usage

with webpack:

import 'gridplus/dist/gridplus.css'
import GridPlus from 'gridplus'

let grid = new GridPlus(selector, data, columns, options, events)
// table will be rendered

// now I want to update the table view
grid.update(newData)
// or update columns
grid.update(oldData, newColumns)

// destroy
grid.destroy()

selector

Selector of a HTML element, or a DOM Node.

data

The rows data to print in grid table.

format 1

The most normal flat style:

[
  {
    name: 'tom',
    age: 12,
  },
  {
    name: 'lily',
    age: 13,
  },
]

format 2

Tree, has children:

[
  {
    title: 'group 1',
    children: [
      {
        title: 'item 1',
      },
      {
        title: 'item 2',
      },
    ],
  },
  {
    ...
  },
]

For this, you should set options.treeDataKey to be children. Theoretically, there is no limit of deepth.

columns

Columns defination, define each column's name, field to use, formatter...

[
  {
    name: 'col 1', // required
    field: 'name', // required
    sortable: false,
    // other options read https://github.com/6pac/SlickGrid/wiki/Column-Options.
  },
  ...
]

options

Set options for gird.

{
  checkboxSelectorField: 'name', // optional, whether to show first checkbox selector column
  treeDataKey: 'children', // optional, which field of a data row will be tree chidlren
  treeToggleField: 'name',  // required if treeDataKey is set, which field to prepend expand/collapse icon
  treeSelectChildren: true, // optional, when use tree mode, whether to select its children rows when select a parent row
  treeDefaultCollapsed: false, // optional, whether to collapse tree by default
  frozenColumn: 0, // optional, if you want to froze column, this stands for the amount from left
  frozenRow: 0, // optional, if you want to froze row, this stands for the amount from top
}

Read more from here.

events

Bind events for grid and DataManger. (DataManager is DataView of slickgrid.)

{
  onScroll({ scrollLeft, scrollTop }) {
    console.log(scrollLeft, scrollTop)
  },
  onClick({ row, cell }) {

  }
}

Read more from here and here.

methods

After initialize, you can use some methods:

update(data, columns)

Update data view or columns defination.

grid.update(newData) // update rows
grid.update(oldData, newColumns) // update columns, data is required

destroy()

Destroy the grid.

API

If you have used slickgrid, this may be helpful. If you do not know, ignore this part.

slickgrid & DataManager

There is a way to entry slickgrid instance by:

let grid = new GridPlus(...)
let { SlickGrid, DataManager } = grid

Here SlickGrid is an instance of SlickGrid core, DataManager is an instance of SlickGrid.DataView.

SlickGrid has now option.multiSortColunms.

DataManager has a new api setItemMetadata to instead re-write getItemMetadata.

Editors

import { Editors } from 'gridplus'
let { TextEditor, IntegerEditor, FloatEditor, setDatePicker, DateEditor, YesNoSelectEditor, CheckboxEditor, PercentCompleteEditor, LongTextEditor } = Editors

Plugins

import { Plugins } from 'gridplus'
let { AutoTooltips, CellCopyManager, CellRangeDecorator, CellRangeSelector, CellSelectionModel, CheckboxSelectColumn, HeaderButtons, RowMoveManager, RowSelectionModel } = Plugins

Formatters

import { Formatters } from 'gridplus'
let { PercentCompleteFormatter, PercentCompleteBarFormatter, YesNoFormatter, CheckmarkFormatter } = Formatters

tips

1> table size is based on its container, so, you should give a certain size to your grid container:

<div id="grid" style="width: 500px; height: 400px;"></div>

<script>
let grid = new GridPlus('#gird', data, columns, options, events)
</script>

After you resize your container, you should call resize method:

<script>
grid.resize()
</script>

2> frozenColumn option is different from JLynch7's. JLynch7's frozenColumn is from -1, mine is from 0.

3> sort rule: multiple sortable. When you click on column header, it will roll asc->desc->null. When a column is sorted, and you click on another column header, multiple sort will work.