Table sorting/filtering/searching; dynamically-addable UI subcomponents


I’m evaluating the features that different web application frameworks like Vaadin offer. Your product sounds very promising (and the potential to not have to mess with JS is almost enough to win me over) but I do need to make sure I can find in Vaadin some particular behaviors that I’m looking for:

  1. Does Vaadin allow you to add all of: sorting / filtering / searching, to columns in a table? It would need to be quite flexible with the operations that can be applied to columns, including such bizarre things as: a) letting you type in a date (in a popup over the column header) and filter on it; b) letting me “trap” the sort/filter/search requests on the server-side and take custom table-updating action on them (including changing the table’s entire contents); c) allowing me to insert arbitrary content into cells – like a custom image based on the underlying value for that property; d) when I click on a column header, can I make Vaadin show a nice dropdown with the available (built-in and custom) column operations?

  2. For some of the web forms that I’ll need to create, I will need the UI to potentially dynamically add more components to the form depending on what the user enters elsewhere in the form (e.g. to make additional fields slide out). a) does Vaadin allow such dynamic changes in a form’s content? I need to potentially let the user dynamically add an infinite number of new sub-components to a form, with validators for each and all. b) can it be made to perform custom UI-updating actions when, for example, a new value gets selected in a dropdown (i.e., react to a selected-value-changed event, as in ASP)?.

  3. If some of the above functionality is not available out-of-the-box and I need to implement it – like adding a new column operation – how much work will it be? Suppose I want to add an imaginary operation “sift” to a column (whatever it may do), will it be much work to also update the Vaadin UI, i.e. to make Vaadin list the “sift” option when you click on the column’s header?

  4. When writing Vaadin-using Java code, how can I clearly distinguish between which code gets converted into JS and sent off to the client and which code doesn’t – i.e. code whose “internals” I can know for sure will not be potentially so “compomised”, by leaving the black-box of the J2EE container?

Apologies in advance if anything out of what I’ve written sounds basic; I have already spent some time scouring the manual and am playing with the samples but, alas, haven’t found specific-enough/definitive answers to these questions. I will appreciate if you can answer them also in point-form, and maybe with links to appropriate examples or documentation references…

Many thanks in advance! Hope your framework can be the one for us.


a) Sorting by any column is supported. Filtering is supported on data source level, but you can not add components to the table headers - instead you typically add them above the Table.

b) Doing a custom data source implementations is fully supported and quite common thing to do with Vaadin - this allows you to do almost anything with table data. For example you could implement Lucene based data storage source that filters through millions of items instantly and connect it to a table.

c) Yes. You can insert any components in the table cells. You can even generate the inserted components on the fly while user is scrolling the table connected to your custom data source.

d) No. Column headers can not catch click events.

a) Yes. you can hide/show/add/remove fields from form.
b) Yes. Any field with setImmediate(true) sends values back to server and you can do any modifications other fields or any parts of UI.

It looks to me that all the other features you request are available, but adding new components to table column headers is not. Adding a component to table headers is possible by extending table implementation (both the GWT based widget in browser-side as well as the Table class in server-side), but as Table is a complex component this addition could be quite challenging to do.

Only client-side widgets are converted to javascript. They are always placed in a Java package with “.client.” in the package name.