MaterialDataTable - Work in Progress!

BenDol commented 8 years ago

Hey guys! I have been working with @dlaunen on developing a MaterialDataTable over the past couple of weeks and have put together a proof of concept based on some requirements. Here is a quick demonstration of the PoC in its current state:

material-grid-poc

This is what I have put together as a proof of concept so far. Things to note from this demonstration:

Supports subsets of data using sticky subheaders to categorize them, it will also support the standard table without any subsets.
Supporting column toggling via the material dropdown widget.
Ability to expand the rows out for any extra information on that row.
Ability to select a row (single or multiple selection will be supported).
Ability to show a progress indicator on the grid.

A key feature that has not been added to this PoC is infinite scrolling. The ability to scroll through large amounts of data reusing the rows that are visible in the users viewport, the data table will provide an event that will fire to retrieve data from your datasource asynchronously using start (start index for new data) and count (amount of data to load from the start value) which depends on how much data will be loaded on the fly as you scroll. Since this doesn't continuously load new table row elements it keeps the DOM very light weight as you reuse the existing rows in view. Giving the smooth user experience we expect to see in modern web applications.

I have added standard Material components inside the rows and subheaders to show that we can and will mesh well with material design components. A big part of this data table is its responsive design, we are focusing on the presentation of data and as demonstrated, the ability to group data. The current proof of concept shows basic mobile support that will be controlled 100% using CSS styling (minus subheader recalculations).

material-grid-mobile-poc

It is important when designing this for 'small' devices that touch compatibility is built in as out of the box functionality. The proof of concept demonstrates this too.

material-grid-mobile-touch-poc

We are aiming to fill the 'data table gap' that GWT currently has at the moment. The standard GWT DataGrid is really outdated now-a-days and there is little out there at the moment that actually provides any flexible data display. You can take a look at the current requirements we have put together for the first release (might be one or two items missing, will update it later).

Anyway, thought I'd share what's on the way with GWT Material! Would love to hear any thoughts on this. A release date for this component isn't set into a particular version of gwt-material just yet, but it will be on the roadmap in the near future.

Thanks!

dlaunen commented 8 years ago

kevzlou7979 commented 8 years ago

@BenDol Really Cool!!!

pedjapesic commented 8 years ago

This is really great news !

Few questions:

How would this Grid fit with the future version of GWT 3.0 ?
Will this support Tree structures (in the future) ?
Will this support some kind of inline editing (in the future) ?

Anyway, great job guys !

BenDol commented 8 years ago

GWT 3.0 plans to drop its Widget library and in turn you will lose the Widget base class. However they did mention this will simply be separated out into another dependency that can be imported if its still required. If the user isn't wanting to import that dependency which is most likely the future of GWT development this table will need to be reworked with along with the whole of gwt-material components. That is of course assuming I decide to base the MaterialDataTable widget on ComplexWidget like we currently do. We plan for this component to make full use of JsInterop which means it will only be available for GWT 2.8.0+ which takes it a step in the right direction for gwt-material and might actually mean we don't need to use ComplexWidget at all for this component. My design work will start to shed more light on this as I really want to future proof this as much as I can.
We have actually discussed this briefly and we decided that a tree structure widget will most likely be added as a separate widget as it aims to accomplish a different requirement all together.
Inline editing is something that we definitely want to support in the future after its 1.0 release.

Thanks for the great questions @remarkNS hope this answered them well enough.

pedjapesic commented 8 years ago

Thanks for answers @BenDol.

Yes, I think it would be good idea to stay future proof as much as possible, I think that all things mentioned that will be dropped (by Google guys) will really be dropped. I do not have a filling that any company will take the lead in that direction (supporting or altering widget, UIBinder etc). We will have long 2.8 support but that's about it. Vaadin have really nice grid (material designed) that is polymer based so they will be future proof that's for sure. They are moving to WebComponents direction which seems to be the future.
Agree completely.
The only thing I do not like in vaadin grid is their inline editing. I hope you will make a better one.

Great job again ! Looking forward to see THE GRID I WAS LOOKING FOR in the action ;-)

jonl-percsolutions-com commented 8 years ago

Responsive design is great, but at some point someone will need the table to scroll. In those instances we might want to lock one or two of the columns for scrolling. What is the possibility of adding that feature?

dlaunen commented 8 years ago

Are you referring to horizontal scrolling? This is something that we were looking at, MailChimp has a very nice implementation of horizontal scrolling, it is on the road map for the data table, but not for the v1.0 release.

jonl-percsolutions-com commented 8 years ago

Yes, horizontal scrolling. Good to know its on the roadmap. Have a data table with that as a requirement and been looking for a replacement.

manolo commented 8 years ago

@remarkNS, just a clarification vaadin grid is not polymer based, actually it's a widget for GWT and you can use it in two different ways:

Importing vaadin-widgets.jar as any other GWT library (see example at https://github.com/Artur-/grid-api). Note that this is valid for any classic GWT project.
And as a vaadin component in pure vaadin framework projects

Additionally, and taking advantage of the new JsInterop, the grid can be exported and used from any JS. This is the approach used for the vaadin-grid (http://github.com/vaadin/vaadin-grid) to produce a polymer element.

So, instead of having to develop a new grid for GWT/GWTMaterial you could import just the vaadin-widgets.jar, inherit 'com.vaadin.Vaadin' module, and you have a modern Grid. Styling it to look Material-Design is not hard since you could take the polymer vaadin-grid as reference.

pedjapesic commented 8 years ago

Ah sorry, so it's gwt widget -> vaadin-grid, I thought for some reason that it's vice versa. Anyway, as I said already, I really like vaadin grid. I believe few things are still missing like: support of grouping and hierarchy (tree grid) and different type of inline editing (editing per cell not like the current one per row). Thanks for pointing this out.

manolo commented 8 years ago

Yes, the confusion might be because of the vaadin-gwt-polymer-elements library which is able to wrap any polymer component, even the vaadin-grid element, closing all the loop gwt > js > polymer > gwt.

There are some plans to add new features to the Grid at least I heard the grouping one but no idea about the timing. The tree might be more difficult due to the design of the grid to deal with performance because it's thought to handle thousand hundreds of rows. There is a nice presentation talking of the internals of the vaadin gwt grid at https://www.youtube.com/watch?v=Yi8ioIHTnZw

pedjapesic commented 8 years ago

Yes probably this loop confused me a bit, I didn't know where it starts ;-)

ghost commented 8 years ago

@BenDol Any idea when we have some code for MaterialDataTable? Would be keen to try it out. Thanks

BenDol commented 8 years ago

@pedro-tavares Right now I can't give an estimation as to when some code will be available, but it will be targeting GWT 2.8.0 and hopefully there will be something ready once the first 2.8.0 RC is out. We will see how it goes!

ghost commented 8 years ago

@BenDol Something new on this? :)

masterdany88 commented 8 years ago

Cool

masterdany88 commented 8 years ago

It will be greate if table could extend to fit whole screen. In Gwt DataGrid You have to manually set the size, which cause to have to be ugly: 2 scroll bars (for table and for page) or smaller, but then wasted space.

BenDol commented 8 years ago

Proud to announce that the GMD Table is now available for community use! It has been set up as a separate library for the time being (could eventually be moved into the GMD library when 2.0 is released). All of the features mentioned in my original post have been implemented, so check it out for yourself now!

The sample project demonstrates how to use the table showing majority of its features. There is also a demo you can look at sampling the gwt-material-table-sample project. InfiniteTable & StandardTable

Demo

The data table is based on GWT 2.8.0-SNAPSHOT using java 8 (yay lamdas!).

It will be great to receive feedback from the community! Hopefully it will improve things for the GMD developers, giving you all a complex data table for modern web application development.

You can also note that we are now utilizing JSInterop, giving us direct access to the JQuery javascript library (see GWT Material JQuery). This is a step in the right direction for GMD as a whole and will allow us to do some really neat things in the very near future!

kyr0 commented 8 years ago

@BenDol Actually incredibly cool!! :) It is even responsible -- wonderful! Thank's a lot for the release and sharing the code base with us! This release solves a big show stopper in our project. I will right now download and integrate it. The only two missing features for us are:

Column filtering
Horizontal column re-ordering

Do you already have some architectural ideas in mind, how to implement those? My open questions are now:

Column filters:

Setting the widget to use as filter per column
Setting the datatype to use as filter per column
Where to display filter boxes (e.g. in a row right below a header?)
How to apply the filter configuration to a data source

Horizontal re-ordering:

Drag & Drop maybe? In the column menu (up-down, down-up) or maybe (more user-friendly) in the header (left-to-right, right-to-left)

Thanks again and best, Aron

MarcoCucchi commented 8 years ago

Great job @BenDol!!! Is it possible to implement the column resizing by user?

BenDol commented 8 years ago

@kyr0 Can you explain the column filtering a bit more? It current;y can toggle columns visible/hidden, but I get the sense you are talking about something different. As for horizontal reordering, this is something that is in the pipe-line for the future of the data table.

@MarcoCucchi Column resizing is definitely something that can be added. It would be great if the community could give back to the project and help out with some of these features. But yes this is something that is also in the pipe-line.

Also thanks and glad it will help!

kyr0 commented 8 years ago

@BenDol

Can you explain the column filtering a bit more?

Yes, the idea is to have something like this:

Column filters

It would allow the user to enter a value for that the column's content is filtered for.

If a filter widget is set for a column, it could be rendered e.g. inside of the column's header (below the title) or e.g. in a row right below a header / sub-header. The size of the widgets would be 100% of the columns width (also resizing when the column width changes); the height would be the organic height of the filters widget.

The filter values could be read on filter widget change (ValueChangeEvent) and set on the data provider instance. The data provider then reloads the current page. Those filter values could also be persistent and remembered on pagination, sorting etc. events (depending on the impl. of the data provider).

To allow a first attempt of an implementation, it would be already sufficient, if we could put widgets in column headers (to be rendered below the header's title, like the image above shows) , because then, all the custom column filter logic could be implemented in user-land code (or as a plugin for the MaterialTable).

For a most simple implementation (leaving a lot to be impl. in user-land) it would be sufficient if the API of MaterialDataTable would support:

public void insertColumn(int beforeIndex, Column<T, ?> col, MaterialWidget header);
public MaterialWidget getColumnHeader(int index);

With this feature supported, a user could filter for data of interest, per column.

Thanks and best, Aron

BenDol commented 8 years ago

@kyr0 Sounds like a good feature for sure, perhaps you could file this on the issue tracker here that can be marked as a feature request. Again as mentioned in the post above it would be great to see the community contribute to the data table too and perhaps these features could be contributed :+1:

Also of course this is something you can implement outside the table, as for implementing this within the headers of the table that is where the customization can be added. In fact the way its designed this shouldn't be too hard to achieve already. Obviously the data table wouldn't be in charge of the tables data filtration since that would be more for the user to define and handle.

kyr0 commented 8 years ago

@BenDol Thank you, I filed the feature request.. :)

Also of course this is something you can implement outside the table

Okay, I see :) I will start integrating the MaterialTable into our code base now and implement the support for custom MaterialWidgets in column headers. I will come up with my implementation as soon as I have something working here :)

pedjapesic commented 8 years ago

Amazing job done Ben.

Looks great, works great, few visual bugs here and there but nothing serious, some things could probably be optimised (row detail rendering) but overall first impression is: Great!

Remark

masterdany88 commented 8 years ago

Great

ManOfGod commented 8 years ago

@BenDol I hope the new Data Table supports context menu. And can also support infinite scroll adapter or somthing like that beside paging for mobile.

BenDol commented 8 years ago

@ManOfGod It does all that you have mentioned.

ManOfGod commented 8 years ago

@BenDol Yes I've tried it already and its a beast, but it seems to have some problems with MaterialButton Icons.

masterdany88 commented 8 years ago

Can this library be used with gwt 2.7 and gmd 1.6? I am getting an error:

binding: locale=default
Compiling module pl.korbeldaniel.cms.dev
   Ignored 80 units with compilation errors in first pass.
Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.
   Tracing compile failure path for type 'gwt.material.design.client.ui.table.MaterialDataTable'
      [ERROR] Errors in 'jar:file:/home/korbeldaniel/.m2/repository/com/github/gwtmaterialdesign/gwt-material-table/1.0-SNAPSHOT/gwt-material-table-1.0-SNAPSHOT.jar!/gwt/material/design/client/ui/table/MaterialDataTable.java'
         [ERROR] Line 148: Lambda expressions are allowed only at source level 1.8 or above
         [ERROR] Line 156: Lambda expressions are allowed only at source level 1.8 or above
         [ERROR] Line 220: Lambda expressions are allowed only at source level 1.8 or above
         [ERROR] Line 117: Lambda expressions are allowed only at source level 1.8 or above
         [ERROR] Line 236: The method $this() is undefined for the type MaterialDataTable<T>
         [ERROR] Line 239: body cannot be resolved
         [ERROR] Line 176: Lambda expressions are allowed only at source level 1.8 or above
         [ERROR] Line 251: The method $this() is undefined for the type MaterialDataTable<T>
   [ERROR] Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly
   Unification traversed 479 fields and methods and 369 types. 7 are considered part of the current module and 7 had all of their fields and methods traversed.
[ERROR] Compiler returned false

I would like to add it to my current project, but I am afraid of beta versions of GWT and GMD. Is it stable enought for production?

kevzlou7979 commented 8 years ago

Unfortunately no, because it uses GMD 2.0 and there JsInterop implementation inside of it

On Fri, Jul 29, 2016, 9:25 PM Daniel Korbel notifications@github.com wrote:

Can this library be used with gwt 2.7 and gmd 1.6?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/GwtMaterialDesign/gwt-material/issues/205#issuecomment-236179318, or mute the thread https://github.com/notifications/unsubscribe-auth/AC_iF7z6_cc82Tmz9sUkrFmcq0bjaEHXks5qaf83gaJpZM4G2elr .

imanbingi commented 7 years ago

I have setup FieldUpdater for CheckBox fields in MaterialTable but fieldupdater is never called when checkbox is checked/unchecked by user. Any help is appreciated.

sameepsinghania commented 7 years ago

@BenDol Hi Ben. Is horizontal scrolling implemented or still in the road map?

GwtMaterialDesign / gwt-material

MaterialDataTable - Work in Progress! #205