Hi, I tried to implement an example,
link: https://mleibman.github.io/SlickGrid/examples/example9-row-reordering.html
Many mistakes when I move.

npm install --global vue-cli
vue init webpack my-project
cd my-project

in package.json add dependencies:
"slickgrid-es6": "^2.1.0"
and devDependencies:

    "less": "^2.5.3",
    "less-loader": "^2.2.1"

npm install

create assets/slick.less:

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

HelloWorld.vue:

<template>
  <div class="hello">
    <div id="myGrid"
    class="slickgrid-container"
    style="width:600px;height:500px;"></div>
  </div>
</template>

<script>
import { Grid } from 'slickgrid-es6'
import '../assets/slick.less'

export default {
  name: 'HelloWorld',
  data () {
    return {
      grid: {}
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      var columns = [
        {id: 'title', name: 'Title', field: 'title'},
        {id: 'duration', name: 'Duration', field: 'duration'}
      ]
      var options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        enableTextSelectionOnCells: true
      }
      var data = []
      for (var i = 0; i < 500; i++) {
        data[i] = {
          title: 'Task ' + i,
          duration: '5 days'
        }
      }
      this.grid = new Grid('#myGrid', data, columns, options)
    })
  }
}
</script>

<style scoped>
</style>

npm run dev

And text is not can be selected in cells. Please check it.

Hi, recreated example SlickGrid — example-grouping, and got the error:

TypeError: _slickgridEs.Data.GroupItemMetadataProvider is not a constructor

in

let groupItemMetadataProvider = new Data.GroupItemMetadataProvider(); // <---- 
        dataView = new Data.DataView({
            groupItemMetadataProvider: groupItemMetadataProvider,
            inlineFilters: true
        });
        grid = new Grid(id, data, columns, options);

        grid.registerPlugin(groupItemMetadataProvider);

Im think, Slick.groupitemmetadataprovider.js is missing.

Seems to be a bug in interact.js 1.2.6 that's been fixed on master since April.

The Plugins module is not exported correctly in the distribution (minified) object and has value undefined. I think it's because of the relative path used inside the index.js on the Export

export Plugins from '../plugins';

When importing everything

import * as all from 'slickgrid-es6';
console.log(all);

Console output

Object {Slick: Object, Editors: Object, Formatters: Object, Data: Object, Plugins: undefined…}

Perhaps it might be better to move the Plugins folder inside the src and use absolute path?

The last column in the table (on the far right) is cut off and not visible.
I'm not sure if this is something you would repair or if I should pursue 6pak's project for this.

Here is an example reproducible environment:
https://github.com/subtext916/slickissue

Here's a good menu:

and here's an example of the problem:

Hi.

It looks like there is a wrong class name GroupItemMetadataProvider, it should be GroupMetaDataProvider.

After upgrading to 2.0.1, I'm getting the following exception every time the mouse enters the grid:

I'm testing with Chrome 56 on macOS Sierra.

Are others seeing this? Is this a known issue / are there workarounds?

I can create a small reproducible example to demonstrate if it would help.

I tried to pass the tabel into new window as a child.
The alignment and resize failed.
(Since it is rendering in different dom then begging passed to another Dom for display it's failing to work)

I love to use slickgrid for years. Nice work!

For a recent React project, we want to use it, but management doesn't want to include jQuery into the project.

So I want to know if there is any plan to remove jQuery from dependency list? Or what can I do for this?
Many thanks!

Hi, i tried to implement slickgrid es6 to my project.
My data show up on the page but there is no style.

Here is my code base.

package.json

index.html

index.js

style.less

Project structure

Tell me where is my mistake.
Thank you.

I am using slickgrid-es6 for a new project; working great so far -- many thanks for the work to modernize and package this up!

For my specific project, I'd really like to freeze the first column. After reading through docs / examples I attempted to simply change new Slick.Grid(...) to new Slick.FrozenGrid(...) in my code. The code ran without exceptions, but the grid was no longer rendered. A bit of digging suggested this is because I am using grid.resizeCanvas(). It looks like FrozenGrid is based on a fork of an older version of SlickGrid that didn't support canvas resizing in the same way...

Before I invest too much time into adapting to this older grid style, two quick questions:

1. Is it known / documented anywhere at what point FrozenGrid / X-SlickGrid forked from SlickGrid and what features will be missing? I'm a bit concerned that better resizing won't be the only missing feature / bug fix if I use FrozenGrid instead of Grid...
2. Any plan / hope / interest in merging the frozen row / columns features back in to the main Slick.Grid? The repository for X-Slickgrid credits JLynch's earlier fork for this feature, so maybe this could be merged in independently of the rest of X-SlickGrid?

I am potentially up for helping with this if there's interest and depending on what's involved.

Thanks

Examples 4, 5, 6 and 8 seem to be broken. None of the funtionality related to headers (Buttons, Filters, Menu) seem to work.
Is this a known issue?
I just cloned the repository and ran 'npm install', 'npm start'.
There are no error in the JS-console.

In file slick-frozen.grid.js

function getActiveViewportNode
is wrong

it calls
setActiveViewPortNode(element);
but it should call
setActiveViewportNode(element);

So

    function getActiveViewportNode(element)
    {
        setActiveViewportNode(element);
        //setActiveViewPortNode(element);

        return $activeViewportNode[0];
    }

Are there plans to add slickgrid controls referenced here https://github.com/mleibman/SlickGrid/tree/master/controls? I did a quick search in this repo and could not find them.

Hi,

My requirement is like a tree with expand, collapse and checkbox functionality.
Done with display of tree with expand and collapse functionality .
Need help in implementation of checbox functionality so that it covers below scenarios

parent node selected then all child nodes must be selected.
2)parent node unchecked then all child nodes must be unchecked.
if parent has 3 child node, out of which 1 child node is checked and 2 are unchecked then parent node must be in intermediate state of checkbox. Like half selected.
if user manually unchecked all child node then parent node must be unchecked.
Below is tree structure

• rootNode
  --child1
  --child2
  ---childOFChild2
  Followed below link for tree implementation.
  https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example5-collapsing.html

Any help would be GREAT..

This is due to refactor away from jquery-ui and code from 6pac plugin being incompatible with the same from x-slickgrid.

needs converting of the logic that looks at active canvas node from here:
https://github.com/ddomingues/X-SlickGrid/blob/master/plugins/slick.cellrangeselector.js#L54

If there a basic react example, for basic Editing ?
I'm running the sources with no problem. But while trying to use the control in a different app I'm having issues importing scss etc..

When destroy()ing the grid, I'm getting the following error:

unrecognized expression: unsupported pseudo: ui-sortable
    at Function.Sizzle.error (jquery.js:1580)
    at PSEUDO (jquery.js:1927)
    at matcherFromTokens (jquery.js:2476)
    at Sizzle.compile (jquery.js:2630)
    at Sizzle.select (jquery.js:2716)
    at Sizzle (jquery.js:884)
    at Function.Sizzle.matchesSelector (jquery.js:1543)
    at Function.jQuery.filter (jquery.js:2895)
    at winnow (jquery.js:2877)
    at jQuery.fn.init.filter (jquery.js:2928)

I am running into a problem running this example with SlickGrid http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html. If inlineFilter: true is set in the DataView ctor and setFilter is called then the compileFilter function runs and attempts to set the displayName and name of the annoymouns function. The error returned from the browser is

Unhandled rejection TypeError: Cannot assign to read only property 'name' of function 'function anonymous(_items,_args
/*``*/) {

Hi there,

I realize this issue was touched on in #37, but I don't think the comment thread there provided a sufficient solution; especially since the repo description states "for use under npm and Babel / Rollup builds."

Even under the official usage

import {Grid} from 'slickgrid-es6';

I am getting the error:
[!] Error: 'Grid' is not exported by node_modules/slickgrid-es6/dist/slick.es6.min.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

From what I understand, it seems slick.es6.min.js does not explicitly export the expected modules (i.e. export { Grid, Data, Formatters, etc.} ). I'm new to the development world and not familiar with Webpack, so I don't know how you'd setup the npm release with these being explicitly exported in the slick.es6.min.js file.

One work around could be to remove the src/ directory from the .npmignore so that those of us using Rollup could point the node module to those files for export in our config. It may be a bit much to ask, but better yet you actually convert the entire build to Rollup. It should be relatively straightforward and is justified here and here. Let me know what you think.

Cheers,
Josh

There is function
queuePostProcessedRowForCleanup(cacheEntry, postProcessedRow, rowIdx)
(in file slick.grid.js)

It gets called in

    // ////////////////////////////////////////////////////////////////////////////////////////////
    // Interactivity

    function handleMouseWheel(e)
    [...]
    queuePostProcessedRowForCleanup(zombieRowCacheFromLastMouseWheelEvent,
                        zombieRowPostProcessedFromLastMouseWheelEvent);

It's missing the rowIdx parameter, and it's not setting a default-value anywhere...

This is my first test SlickGrid program in React SlickGrid-es6.

import {Grid, Data} from 'slickgrid-es6';
import data from "../example-data";

const columns = [
  { id: "title", name: "Title", field: "title", maxWidth: 100, minWidth: 80 },
  { id: "duration", name: "Duration", field: "duration", resizable: false },
  { id: "%", name: "% Complete", field: "percentComplete" },
  { id: "start", name: "Start", field: "start" },
  { id: "finish", name: "Finish", field: "finish" },
  { id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
];

const options = {
  enableCellNavigation: true,
  enableColumnReorder: true,
  forceFitColumns: !true,
  frozenColumn: 0,
  frozenRow: 1
};

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

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

export default grid;

When I try to import the grid into my App, I am getting the following error:
TypeError: Cannot read property 'defaultView' of undefined
getStyles

node_modules/jquery/dist/jquery.js:5472
5469 | // Support: IE <=11 only, Firefox <=30 (#15098, #14150)
5470 | // IE throws on elements created in popups
5471 | // FF meanwhile throws on frame elements through "defaultView.getComputedStyle"

5472 | var view = elem.ownerDocument.defaultView;
| ^ 5473 |
5474 | if (!view || !view.opener) {
5475 | view = window;

Can some help me how to fix this error?

Hello,
I believe I found an issue with multiple grids and column reordering.
Basically, I am finding that if I have 2 tables, only one of them updates its rows when I reorder the columns.

I haven't gone through the code extensively, but my immediate assumption is that the code is using a class name selector and not looking to see if there are more than one table (like document.querySelector vs. document.querySelectorAll)

I should also note that I am attempting to wrap this library inside a web component so that it can be re-used over and over again.

Hello and thanks for this great package, I can now use it with great success in Aurelia since you created it in ES6 format which is awesome.

However, I use it with SASS and since you only have the LESS files available, I had to convert them all from LESS to SASS. On your main page, you mention that you might use SASS in the future, are you still interested in having SASS files? If so, I could make a PR (tell me in which folder you want them).

I also created a Bootstrap theme (with a separate file for the SASS variables), it's based on this old live demo with a couple of variances. Let me know if you want it as well.

I couldnt find code support the spreadsheet or copy paste , Please let me know if thats supported.

Perhaps I'm doing something wrong, but I can't seem to use this library in my Rollup.js project.

I create a pretty simple test project, and simply try to do:
npm i slickgrid-es6

I then try to create a simple file that I use rollup to build and I add the following:

import {Grid} from 'node_modules/slickgrid-es6/';
console.info(Grid);

I get the following:
✖ 1 problem (1 error, 0 warnings)

[!] Error: 'Grid' is not exported by node_modules/slickgrid-es6/dist/slick.es6.min.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module