slickdart 0.2.0

  • Installing
  • Versions
  • 79


slick grid clone, for mobile,desktop devices

** Sort performance is not fast as javascript version

Parameter Description

  • When enable 'selectActiveRow' on row selection model and with CheckboxSelectColumn in first row click on first column out side of check box will uncheck other rows if multiple row selected


Known Constraint

  • using keyboard navigation on non-editable cell and goes out of viewport will not immediate update screen until it on editable area
  • Let forzen column editable cause display unsync in un-frozen area


Grid Options have it's own class instead of Map object, Can be ignore on construction

var opt = new GridOptions()
		        ..explicitInitialization= false
		        ..multiColumnSort= false;
var grid = new SlickGrid.fromOpt(el,data,[],opt);


Specify formatter in inital columns will auto collect formatter to GridOption's [FormatterFactory], if dynamic swap column, and need special formatter Function, using GridOption's [FormatterFactory],

Dynamic Row Height

limitation: visible row: when calculate numVisibleRows, when we apply dynamic row height, minimal dynamic row height must >= single row hight Current design

  • put '_height' on row object to specify pixel height
  • add {'dynamicHeight': true} option to turn on it
  • on sorting or change data, using resetDynHeight() to re-calculate height

Customer Element (need polyfill for IE)

Initial support customer element, see example: custom-elem.dart

Compatible with angular 1/2 dart

  • must specify height of cj-grid
  • accept customize option
import 'slick_custom.dart'
	.special-style-here {..}


  1. support row css styles, see example: metadata.dart, add dynamic height recalculate
  2. support col span and row span, see example: cell-span.1.dart

Filtered View

Use FilteredList.class in slick_util.dart to wrap data Example: ColumnFilter.dart

Header Row

Not to mix with checkbox select column Example: headerRow.dart

Dropdown Menu on Header Column

No shadow dom Example: gdoc-header.dart

  //add menu
  column.header = {'menu': {
          'items': [
              'iconImage': "../images/sort-asc.gif",
              'title': "Sort Ascending",
              'command': "sort-asc"
  HeaderMenu headerMenuPlugin=new HeaderMenu({});
  headerMenuPlugin.onBeforeMenuShow.subscribe((e, args) {
    List<MenuItem> menuList = args['menu'];
  headerMenuPlugin.onCommand.subscribe((e, args) {
<link rel="stylesheet" href="packages/slickdart/css/plugins-common.css" type="text/css" />
<link rel="stylesheet" href="packages/slickdart/css/plugins-gdoc-style.css" type="text/css" />
<link rel="stylesheet" href="packages/slickdart/css/slick.headermenu.css" type="text/css" />

Copy or Download Grid (only available in custom element: cj-grid)

Right click on grid that show download or copy option, Example: angular/popup.dart, custom-elem.dart

Follow steps:

  1. include zero-clipboard script
  2. add "download" attribute to grid tag
    <script src="packages/slickdart/plugin/copy/ZeroClipboard.min.js"></script>
  <cj-grid download='f.csv'></cj-grid>

Collapsing use case

Example: Bs3_tree.dart

Cell Selection

Support one selection area only, can not cross frozen area

    grid.SlickGrid sg = new grid.SlickGrid.fromOpt(el, data, column, opt);
    var cellSelectModel = new CellSelectionModel();
    cellSelectModel.onSelectedRangesChanged.subscribe((var e, args) {

Programming select rows



  • Commit Edit
// or
// or

  • enable text selection
new GridOptions()..enableTextSelectionOnCells=true;

Simulate Row Split

  • Add new css class with column padding left and right to zero, add cssClass in Column definition
      padding-left: 0px;
      padding-right: 0px;
new grid.Column.fromMap(
    {'field': "title",  'formatter': SplitFormatter})
  ..cssClass = 'nopad';
  • For each row, add _height to specify row height
  • Add customize formatter for target column
SplitFormatter(int row, int cell, int value, grid.Column columnDef, Map dataRow) {
  if (dataRow['_height'] != null && dataRow['_height'] > 90) {  
    return '''
        <div class="h40">
          bbbbbbb $value
          <span>$cell<span class='important'> $row
  } else {
    return value;

Add style to upper row

.h40 {
    height: 40px;
    display: block;
    background: yellow;
    word-wrap: break-word;
    white-space: normal;


  • [ ] keyboard navigation when focus on uneditable cell
  • [ ] adjust row height via mouse


dev mode

Version 0.2.0 (2018.08)

  • Enable row span
  • fix defaultColumnWidth in GridOption
  • fix row frozen with top panel

Version 0.2.0-beta.2

  • Add EvtArgs, EvtCallback

Version 0.1.8+9(2017/01)

  • fix detached state and show/hidden state

Version 0.1.8+8(2017/01)

  • fix editor exception
  • handle detached state and show/hidden state

Version 0.1.8+6(2017/01)

  • Recover rendering performance
  • handle detached state

Version 0.1.8+4(2016/12)

  • remove polymer tranformer dependency

Version 0.1.8+3(2016/11)

  • remove style before grid unsubscribe

Version 0.1.8+1(2016/09)

  • sunset zeroClipboard, using Clipboard.js
  • update editor sample, custom-elem sample

Version 0.1.8(2016/09)

  • add new grid option: autoCommitOnBlur and onActiveCellBlur Event object, see editor-sample.dart
  • add ignoreCase option for FilteredList and expose private members

Version 0.1.7+3(2016/08)

  • fix scrolling behavior (enable wheel event propagate to document when scroll to head/tail)

Version 0.1.7+2(2016/06)

  • add cell span

Version 0.1.7+1(2016/05)

  • fix missing plugin on custom element
  • add header icon example

Version 0.1.7(2016/05)

  • fix cross frozen area column resize

Version 0.1.7-beta.1(2016/05)

  • add cell selection
  • fix strong mode error
  • potential break change => obsolete formatFn, using TFormatter instead

Version 0.1.6+2(2016/04)

  • MouseWheel fix for no frozen column

Version 0.1.6+1(2016/04)

  • MouseWheel fix

Version 0.1.6(2016/03)

  • add scrollable on frozen column

Version 0.1.5+4(2016/03)

  • Update drag and drop handler on column header for firefox 42+

Version 0.1.5+3(2016/02)

  • update logging to 0.11 up
  • add sample to hide header on ColumnFilter.dart

Version 0.1.5+2 (2015/11/23)

  • fix CSSRule in dart sdk 1.3 (tonosama-atlacatl)
  • due to max height from getComputedStyle change to IEEE754 format, fix getMaxSupportedCssHeight method

Version 0.1.5+1 (2015/11/10)

  • fix dart sdk 1.3 (tonosama-atlacatl)

Version 0.1.5 (2015/11/08)

  • Add tree field example: Bs3_tree.dart
  • Add DoubleEditor and HierarchFilterList

Version 0.1.4 (2015/10/20)

  • custom element accept style over write via setStyle
  • custom element absorb style tag under content tag, e.g.: shadow-dom-height.html

Version 0.1.3+5 (2015/09/29)

  • parseInt fixed on style

Version 0.1.3+4 (2015/09/07)

  • polymer element embed grid (not slick custom element), and stylesheet fall into shadowdom

Version 0.1.3+2 (2015/07/21)

  • sort indicator in custom-elem, add cols attribute for sort event object on single column sort

Version 0.1.3+1 (2015/06/21)

  • reset data will clear selected row, see CheckBox.html

Version 0.1.3

  • Copy and Download, sample case: angular/popup.html, first grid of custom-elem.html

Version 0.1.2+2 (2015/06/13)

  • fix header_row, sample case: light-dom-height.html

Version 0.1.2+1 (2015/06/04)

  • hot fix for popup window(angular ui) to embed grid cause chrome 42,43 crash.

Version 0.1.2 (2015/05/25)

  • enable column reorder on non-frozen columns
  • no reorder by default , set _optoins.enableColumnReorder = true to turn on it
  • duplicated field may cause reorder fail
  • add simple integer editor

Version 0.1.1+4

  • adapt css change in dart 1.10
  • a noticable perfomance degrade in Chrome 42.02311.90 when have large horzontal columns2

Version 0.1.1+3

  • fix RowSelectionModel + dynamic height + column filter
  • can be test on ColumnFilter.dart

Version 0.1.1+2

  • fix RowSelectionModel + CheckboxSelectioncolumn with maximum single selected row
  • can be test on CheckBox.dart

Version 0.1.1+1

  • fix forceFitColumn

Version 0.1.1

  • move grid options to GridOptions (simplify grid preparation)
  • quick way to add “visibility” to columns. (thx to Alex Lopez)
  • add default border of grid in customer element type (may cause style broken change)

Version 0.1.0+9 (2015/2/10)

  • add add drop-down menus for header column (light dom only) , see example/gdoc-header.dart

Version 0.1.0+9 (2015/2/1)

  • add add drop-down menus for header column (light dom only) , see example/gdoc-header.dart

Version 0.1.0+8 (2015/1/31)

  • fix addColumn

Version 0.1.0+7 (2014/12/30)

  • add column row sample, refer headerRow.dart

Version 0.1.0+6, (2014/12/24)

  • delay shadow dom component render till element style is ready

Version 0.1.0+5, (2014/12/10)

  • add column css sample

# Bug Fixes

  • fix numeric parsing

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  slickdart: ^0.2.0

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:slickdart/plugin.dart';
import 'package:slickdart/slick.dart';
import 'package:slickdart/slick_custom.dart';
Version Uploaded Documentation Archive
0.2.0 Aug 26, 2018 Go to the documentation of slickdart 0.2.0 Download slickdart 0.2.0 archive
0.1.9 Oct 28, 2018 Go to the documentation of slickdart 0.1.9 Download slickdart 0.1.9 archive
0.1.8+9 Jan 17, 2017 Go to the documentation of slickdart 0.1.8+9 Download slickdart 0.1.8+9 archive
0.1.8+8 Jan 16, 2017 Go to the documentation of slickdart 0.1.8+8 Download slickdart 0.1.8+8 archive
0.1.8+6 Jan 15, 2017 Go to the documentation of slickdart 0.1.8+6 Download slickdart 0.1.8+6 archive
0.1.8+4 Dec 1, 2016 Go to the documentation of slickdart 0.1.8+4 Download slickdart 0.1.8+4 archive
0.1.8+3 Nov 15, 2016 Go to the documentation of slickdart 0.1.8+3 Download slickdart 0.1.8+3 archive
0.1.8+2 Nov 11, 2016 Go to the documentation of slickdart 0.1.8+2 Download slickdart 0.1.8+2 archive
0.1.8+1 Sep 27, 2016 Go to the documentation of slickdart 0.1.8+1 Download slickdart 0.1.8+1 archive
0.1.8 Sep 7, 2016 Go to the documentation of slickdart 0.1.8 Download slickdart 0.1.8 archive

All 58 versions...

Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7


Detected platforms: web

Platform components identified in package: html, js.

Health suggestions

Fix lib/src/meta_list.dart. (-3.45 points)

Analysis of lib/src/meta_list.dart reported 7 hints, including:

line 3 col 8: Unused import: 'dart:html'.

line 4 col 8: Unused import: 'dart:math'.

line 5 col 8: Unused import: 'dart:collection'.

line 6 col 8: Unused import: 'package:logging/logging.dart'.

line 7 col 8: Unused import: 'slick_core.dart'.

Fix lib/src/slick_grid.dart. (-1.49 points)

Analysis of lib/src/slick_grid.dart reported 3 hints:

line 186 col 7: The value of the field '_cj' isn't used.

line 218 col 7: The value of the field '_headerColumnHeightDiff' isn't used.

line 1692 col 12: Equality operator == invocation with references of unrelated types.

Fix lib/src/slick_util.dart. (-1.49 points)

Analysis of lib/src/slick_util.dart reported 3 hints:

line 243 col 14: Name types using UpperCamelCase.

line 244 col 20: Name types using UpperCamelCase.

line 304 col 30: Name types using UpperCamelCase.

Fix additional 13 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/plugin.dart (Run dartfmt to format lib/plugin.dart.)
  • lib/slick.dart (Run dartfmt to format lib/slick.dart.)
  • lib/slick_custom.dart (Run dartfmt to format lib/slick_custom.dart.)
  • lib/src/plugin/header_menu.dart (Run dartfmt to format lib/src/plugin/header_menu.dart.)
  • lib/src/row_height.dart (Run dartfmt to format lib/src/row_height.dart.)
  • lib/src/slick_cell_selection.dart (Run dartfmt to format lib/src/slick_cell_selection.dart.)
  • lib/src/slick_column.dart (Run dartfmt to format lib/src/slick_column.dart.)
  • lib/src/slick_core.dart (Run dartfmt to format lib/src/slick_core.dart.)
  • lib/src/slick_custom.dart (Run dartfmt to format lib/src/slick_custom.dart.)
  • lib/src/slick_dnd.dart (Run dartfmt to format lib/src/slick_dnd.dart.)
  • lib/src/slick_formatters.dart (Run dartfmt to format lib/src/slick_formatters.dart.)
  • lib/src/slick_selectionmodel.dart (Run dartfmt to format lib/src/slick_selectionmodel.dart.)
  • lib/src/util.dart (Run dartfmt to format lib/src/util.dart.)

Maintenance issues and suggestions

Fix analysis_options.yaml.

We were unable to parse analysis_options.yaml.

Maintain an example.

None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use slickdart.dart. Packages with multiple examples should use example/


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
logging >=0.11.0 <2.0.0 0.11.3+2
Dev dependencies
build_runner ^0.10.1
build_web_compilers ^0.4.2+2
test ^1.0.0