[Hack] RockGrid Tabulator edition

[Beluga]

Pinging the grid heads:  @bernhard @jmartsch @mel47  @dragan @szabesz

In short, I have modified RockGrid to work with Tabulator instead of ag-Grid. I left out ajax and plugins for now. I fully understand, if Bernhard is not interested in switching the "engine" of RockGrid, but at least it is food for thought and a proven alternate solution ?

The "HackGrid" can be found here: https://github.com/mestaritonttu/FieldtypeRockGrid/tree/tabulator

Longer story:

During the last week of November I ran into Tabulator by accident. It occurred to me "someone in the early days of RockGrid suggested some other solution". I searched the PW forums and found out that someone was szabesz and the solution was Tabulator! Now, the important thing here is that since the PW forum discussion (April 2018), Tabulator has seen significant changes. It got rid of jQuery & jQuery UI dependencies and added a ton of features.

Why have I decided to switch to Tabulator?

Lately ag-Grid has left a bad taste in my mouth
- the performance of its row autoheight sucks, so I had to work around it
- inside the autoheight workaround I had to add another workaround to avoid an infinite event triggering/listening loop
- the closed nature is showing its bad sides more and more, like not being able to see the content in their enterprise bug tracker

So what do we get with Tabulator?
- row autoheight that just works
- dropdown filter out of the box, so I don't need my awkward external filter
- features matching the enterprise version of ag-Grid, such as
http://tabulator.info/docs/4.1/select#setup-range
http://tabulator.info/docs/4.1/group
http://tabulator.info/docs/4.1/download#xlsx
http://tabulator.info/docs/4.1/tree
http://tabulator.info/examples/4.1#nested-tables
http://tabulator.info/docs/4.1/clipboard

What are the philosophical differences? In the words of the Tabulator main dev, ag-Grid focuses on being a fully functional spreadsheet while Tabulator goes more down the route of interactive table.

I would have announced this already nearly 3 weeks ago, but caught pneumonia ?

Use on the RockGrid side is really not much different. Mostly just using col.title instead of col.headerName. For some reason the grid.js stuff is lost (to get the field titles), but I did not have time to investigate.

[kongondo]

2 hours ago, Beluga said:

Why have I decided to switch to Tabulator?

I like Tabulator ?. I had a bit of a play with it some months ago, for some pet module I was working on.

[kongondo]

2 hours ago, Beluga said:

I would have announced this already nearly 3 weeks ago, but caught pneumonia ?

Glad you are feeling better ?.

[kongondo]

2 hours ago, Beluga said:

The "HackGrid" can be found here: https://github.com/mestaritonttu/FieldtypeRockGrid/tree/tabulator

Sounds to me like this is more of a fork than a hack ?.

[dotnetic]

Thank you, this is really great. I like that many enterprise features of ag-Grid are already included.

However I have some concerns/questions:

• Does it support server side validation when editing cells and the server returns that the input wasn't valid?
• Can you add buttons to each row, which will trigger different actions with the row data, for example, delete the row on the server?

Besides that it looks really great.

 

[dotnetic]

I tried switching a working RockGrid to your fork and came across some flaws:

As the plugins are autoloaded I got JavaScript errors in the console. So I removed the plugins folder.

I copied the code from the forum post, and some invisible unicode chars where copied with it. I had to find and remove them. It would be good if you add the code initialisation to the repo and the docs, from where it can be copied without errors.

I get an error `Uncaught ReferenceError: codesObj is not defined` which comes from

var dropdownParams = Object.assign({}, {"": ""}, codesObj);

another error `stats.js?t=1545509816:59 Uncaught (in promise) ReferenceError: afterFilter is not defined`

which comes from 

 grid.gridOptions.dataFiltered = function (filters, rows) {
        // filters - array of filters currently applied
        // rows - array of row components that pass the filters
        afterFilter(rows);
    };

After removing the plugins and the conflicting code and replacing all col.headerName with col.title, the grid still doesn't display correct, I think the stylesheets is missing.

I keep investing. LOL. I meant investigating. But I also invest in Ripple and other cryptos, so I wasn't wrong ?

[dotnetic]

OK, the styles don't load because the file tabulator_semantic-ui.css is missing.

$this->rg->assets->add($this->config->paths->siteModules . "FieldtypeRockGrid/lib/tabulator_semantic-ui$min.css");

 

[Beluga]

Sorry and thanks.

Fixed the semantic ui blunder (feel free to use any of the themes offered by Tabulator and hack the .module.php accordingly).

Added example to readme. The example references variables and functions that you do not have access to (codesObj, afterFilter). It is not meant to be used as-is, but as a reference. I can clarify this later in the example comments.

https://github.com/mestaritonttu/FieldtypeRockGrid/tree/tabulator

As said, this is a hack-in-progress and the start of a discussion, so I am ignoring the plugin errors right now.

Regarding your questions on server-side validation and buttons, I do not have answers. I can only point you to

http://tabulator.info/docs/4.1/validate

http://tabulator.info/docs/4.1/update

Perhaps you can build a custom validator that does what you want.

See the last entry "Delete Row" in the Update section.

[MrSnoozles]

Late to the party, but this looks really good at first sight. I recommended Ag-Grid to @bernhard back in the day, because imho it is much more powerful and at the same time easier to customize than the jQuery Datatables plugin he was using at the time (https://datatables.net/).

Now (again at first sight, I didn't deep-dive into Tabulator) this looks on a par with Ag Grid, feature-wise and easy-of-use-wise. A big plus I see is that it's completely MIT-licensed and there aren't any features hidden behind an enterprise licensing model. Have you come across any downsides when working with Tabular or any essential features that it lacks? 

[bernhard]

Hey @Beluga, thanks for your fork!

On 12/22/2018 at 1:21 PM, Beluga said:

I fully understand, if Bernhard is not interested in switching the "engine" of RockGrid, but at least it is food for thought and a proven alternate solution ?

You are right about that, but actually recently I was thinking of doing a rewrite of RockGrid anyhow. So tabulator might be a good thing to try! It looks great both from the features and from the documentation. RockGrid got a little messy in both areas, so a rewrite could make a lot of sense. Though I have some applications relying on RockGrid, so I can't drop aggrid for tabulator.

Would anybody of you guys would be willing to work on RockTabulator as a community/team project?

[Beluga]

I am willing to work on it ? I was just about to come back to this as I recently completed a couple of unrelated website rebuilds. I also want to resume my JavaScript studies (halfway through Eloquent JS at the moment).

I haven't ran into any downsides or lacking features yet, but the issue tracker might be an enlightening place in that regard.

[bernhard]

There's also a nice roadmap of tabulator: https://trello.com/b/rPZ0Yavc/tabulator-roadmap

Looking really nice so far!

[Beluga]

I got ajax working, it was pretty simple in the end. In RockGridItem.js:

    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var httpResult = JSON.parse(xhr.responseText);
        // Tabulator change
        var table = RockGrid.table;
        table.setData(httpResult);
        grid.getDOM().dispatchEvent(new Event('RockGridAjaxDone', {bubbles:true}));
      }
    };