Filter Columns Component

Hi Guys,

Is It possible to do a component like this:

It would be a great thing to have filter and filter range. For example date > “value” && date <“OtherValue” or integer>“Value”.

Should be totally doable with Vaadin. The only thing not included in the core would be the SuperImmediateTextField (a textfield that sends all keystroke events to the server right after the keyup), which is available as an add-on.

my problem is paint the component. Do the table with textfield under the header of column like for the jquery component I mentioned before!

You can add text fields inside table cells if that’s what you’re asking…

I will try and I will put this component like add on is is It possible! Thx a lot!

If I have a table header with data type setted for ex. addContainerProperty(cell.getValue(),BigDecimal.class,null);

How can add a textfield if the column aspect a BigDecimal?

I experimented with this question a bit and it doesn’t seem to be possible to add a “column filter input row”
a table.

Well, it’s possible to add a filter input row in a table, with TextFields in it for giving the filter strings, and then adding filters. The actual data rows would also have TextFields (or other fields) as well, but in read-only mode. However, this causes some very strange infinite call loop. I guess that when you add a filter, it refreshes the visible part of the table by calling field factory, and this is kind of a problem as the filter row is then recreated, which causes a value change event, which starts the refresh again.

So something like this doesn’t seem to work:

final Table table = new Table("Table with column filters");
table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Born", Integer.class, null);

// Insert the filter row
final Integer filterItemId = new Integer(0);

// Insert this data
Object people[][]
 = {{"Galileo",  1564},
                     {"Monnier",  1715},
                     {"Väisälä",  1891},
                     {"Oterma",   1915},
                     {"Valtaoja", 1951}};

// Insert the data
for (int i=0; i < people.length; i++)
    table.addItem(people[ i ]
, new Integer(i+1));

table.setTableFieldFactory(new DefaultFieldFactory() {
    private static final long serialVersionUID = -5733607818421877225L;

    public Field createField(Container container, Object itemId,
            final Object propertyId, Component uiContext) {
        final TextField tf = new TextField();
        if (itemId != filterItemId)
        else {
            tf.addListener(new Property.ValueChangeListener() {
                private static final long serialVersionUID = -2710408149417521841L;

                public void valueChange(ValueChangeEvent event) {
                    IndexedContainer c = (IndexedContainer)
                    // Remove old filter
                    // Set new filter
                    String filter = (String) tf.getValue();
                    if (filter != null)
                        c.addContainerFilter(propertyId, filter, true, false);
        return tf;

Well, it looks good, but doesn’t work:

There might also be a problem that the filter could filter out the filter row… Well, probably not as the filter string always contains itself, I think. And then there’s the big issue that the filter row can easily be scrolled out of view.

Most of these issues could perhaps be solved, but it might be easier to have the filter row outside the table, above or below it. It could even be a table itself, and you could hide the header from either of the tables to make them look as one table. The problem with this solution would be column widths; you’d probably have to use fixed widths.

And yeah, SuperImmediateTextField is good for this case.


I think Apache Lucene can resolve the problem. If I can take the data columns I can index it in RAM and apply the filter with a free text search. With the ID of the result I could recreate the dataContainer of the table and reapply. In this manner I will obtain the table refresh with the new filtered container.

What you think about?

this thread
this example
for a workaround solution.

I am currently facing a similar issue of filtering values on a table following criterias like the available values of certain columns.

I came out with my own solution but there are some issues and before investing time on that I wanted to ask if it´s planned in the next releases a sort of default functionality to do filter items adding/removing filters starting from available values on column or even arbitrary strings inserted in text fields.

I searched in the add-on and I didn’t find any suitable solutions for my case.

Any suggestions?


I have started work on something like what you appear to have in mind, and expect to be done in about a month, as I want to use it in a real life project (as opposed to week-end education/recreation/creation)


i tried some thing may check and tell if it works ? emoticon

it worked for me you can also try

Where is the cool filter table? It is gone! I need it!!! :slight_smile: Please tell me, where I can find it.

Best regards, André