GWT Datagrid

[cbruno...@gmail.com]

I finally got around to bringing something like NSTableView from Cocoa to the web in pure GWT. Still a work in progress, this is something I wanted to get around to for the last 10 years:

- Millions of rows,

- Slick column reordering

- Row headers

- Various selection modes

I was able to get it done while pair programming with Claude.

https://datatable.cocoawerks.com

 Claude does well with Java and GWT. It works best when it can look at your project structure and add features that are not conceptually difficult but are tedious, especially accounting for edge cases.  Its able to even understand and flawlessly add or refactor changes to UiBinder. 

I plan to release this on GitHub once its done..need to add a DataSource and the ability to have editors. But please let me know if anyone is interested in a component like this.

 

[Alex Karg]

Yes. This can be interesting for us. We have our own extended gwt datagrid, which still lacks many features

Freundliche Grüsse,

Alexander Karg

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/157d3068-3cc1-457d-bc7b-09919103ed93n%40googlegroups.com.

[Jens]

Back in the days of IE6 I did something similar for long lists but without using canvas. Basically the developer had to define the item/cell height (or multiple heights if multiple item types exist in the list) so the height of the container/list and absolute position of items in that list could be calculated. Then it made sure to use the minimal amount of elements needed to fill the visible area and during scrolling elements were added/removed accordingly. So only 30 elements or so were used at a time.

That way the list could handle a lot ot items in IE6 at the cost of predefined static item heights while still sticking to the mental model of widgets. Later GWT introduced cell widgets which use HTML strings to use with innerHTML. Because of the string based nature I never really liked the API and still using the list made for IE6.

Using canvas to render the table is interesting and definitely fast but it also means styling is limited compared to CSS + HTML without reinventing the wheel for canvas. Something simple as a checkbox or button in a row matching the design system will be difficult.

Have you tried the DOM based approach I outlined above and it was too slow for your use case? But it is nice that AI can help to explore such side projects you would never start otherwise because of time.

-- J.

[cbruno...@gmail.com]

I did consider using the DOM to render the cells. The main reason I went with canvas (aside from speed) was wanted the neat column reordering effect where the contents of the cells moves with the dragged column. Definitely this implementation is not a general datatable (e.g. its not useful for rendering UI elements in the cells, just data that can be drawn as strings). The main motivation is to display data from a data set. 

[RobW]

Looking very useful - nice work

[Craig Mitchell]

Browsers have gotten a lot smarter.  I tried to do this about 8 years ago in a similar way with a fake tall div to handle the scroll, but asking for a div around 10 million pixels high caused the browser to struggle, so I ended up creating my own scrollbar.  It was a bit janky.

Yours is working great, and the browser doesn't seem to care about the tall div.  Well done!

[Vegegoku]

Nice works.
In domino-ui we thought initially of using the canvas approach but we didnt go that way because we needed to have something that is easy to customize and extends and support more types of components out of the box. I went with the approach to first implement virtual scrolling on a list of data that allowed other component to hook in and listen to scrolling events and based on that it knows what needs to be rendered and what needs to be removed. and it can handle selection  and search without a big overhead on the performance.

Here is a live Data table

https://dominokit.com/domino-ui/demo/v2/datatable/live-grid

and this one is for Simple Lists 

https://dominokit.com/domino-ui/demo/v2/data/data-list

Or for drop down lists

https://dominokit.com/domino-ui/demo/v2/data/data-select

And the plan is to expand on this to support more use cases. they all uses the virtual scrolling with a long div and can handle huge number of records.

[cbruno...@gmail.com]

I ran into this max div height also and the trick was to use virtual scrolling - remap the the physical scroll position to a logical one once a max height was exceeded.  

[cbruno...@gmail.com]

Domino ui looks great, I didnt see the data grid before but it looks like it solves it for using DOM nodes nicely. Is there documentation on theming specific components so as to integrate with a project not using a material ui theme? Not being a fan of material was always my hesitation with domino-ui.