How to show tooltip during user reordering columns as Demo shows.

As vaadin sampler shows, a tooltip comes out when user drag and drop a table column to reorder it.

Then I built a Vaadin web application with vaadin 7.1.7(and also 7.1.0) by maven, added a table and set the column reordering allowed. But no such tooltip comes out.

I compared the source code of vaadin demo with mine, found nothing different.

How can I add this effect on my table?

Thanks a lot!


I assume you mean the drag image of the column header? For me this seems to work on Vaadin 7.1.7. Are you using just the plain Table component with no custom theme?

Hi Teppo,

Thank you for your help. :slight_smile:

Here I try to describe my issue specifically by pictures as below:

This picture shown below is captured from vaadin sampler.

This picture is captured from my project.

I used the maven commandline to create my project.

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.7 -DgroupId=com.medavis -DartifactId=Vaadin7MavenPrj -Dversion=1.0 -Dpackaging=war

And then opened this project with Netbeans 7.4.

Project structure shows here:

The “mytheme.scss” and “styles.scss” shows here:

/* Import the reindeer theme. */
/* This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import "../reindeer/reindeer.scss";

/* This contains all of your theme. */
/* If somebody wants to extend the theme she will include this mixin. */
@mixin mytheme {
  /* Include all the styles from the reindeer theme */
  @include reindeer;

  /* Insert your theme rules here */


@import "addons.scss";
@import "mytheme.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in mytheme.scss */
.mytheme {
  @include addons;

  // Include mytheme theme styles in your theme
  @include mytheme;

The following code is my UI class:

public class MyVaadinUI extends UI {

    private static final String FNAME = "Firstname";
    private static final String LNAME = "Lastname";
    private static final String YEAR = "Year";
    private static String[] fieldNames = new String[]
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "com.rickqin.AppWidgetSet")
    public static class Servlet extends VaadinServlet {

    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();

        IndexedContainer idxCnt = createDummyDatasource();
        Table table = new Table("This is my table");
        table.setWidth(600, Unit.PIXELS);
        table.setContainerDataSource(idxCnt, Arrays.asList(fieldNames));
        table.setColumnHeader(FNAME, "名");
        table.setColumnHeader(LNAME, "姓");
        table.setColumnHeader(YEAR, "年");


    private static IndexedContainer createDummyDatasource() {
        IndexedContainer ic = new IndexedContainer();
        for (String p : fieldNames) {
            ic.addContainerProperty(p, String.class, "");

        String[] fnames = {"Peter", "Alice", "Joshua", "Mike", "Olivia",
            "Nina", "Alex", "Rita", "Dan", "Umberto", "Henrik", "Rene",
            "Lisa", "Marge"};
        String[] lnames = {"Smith", "Gordon", "Simpson", "Brown", "Clavel",
            "Simons", "Verne", "Scott", "Allison", "Gates", "Rowling",
            "Barks", "Ross", "Schneider", "Tate"};
        for (int i = 0; i < 1000; i++) {
            Object id = ic.addItem();
            ic.getContainerProperty(id, FNAME).setValue(fnames[(int) (fnames.length * Math.random())]
            ic.getContainerProperty(id, LNAME).setValue(lnames[(int) (lnames.length * Math.random())]
            ic.getContainerProperty(id, YEAR).setValue(String.valueOf(i));

        return ic;


I just wondering if others got the same case on this issue? JDK7, Vaadin7.1.7, built by maven as official instructions, JBoss7.1.1, Firefox 24, win7pro 64bit