Table Column formatting

General
1

Can someone show me an example of how to format a numeric column in a com.vaadin.ui.Table as a currency column?

Thank You

Peter

2

You could use Table’s addGeneratedColumn method for that, but it would be a lot better if your container would provide properties with already formatted values.

For example, if you are using BeanItemContainer, you should override its getContainerProperty method and wrap the result of super.getContainerProperty in PropertyFormatter for the specific column (given as propertyId). Haven’t tried it, but it should work.

3

If you like to do simple things like right align numbers in a table column try that.


table.setCellStyleGenerator(new Table.CellStyleGenerator(){
    public String getStyle(Object itemId, Object propertyId) {
        if(propertyId == null) {
            return "row-style-extra-css-class-for-trs-in-table-i-think-but-not-relevant-for-your-use-case"
        }
        //now produce you extra custom css class name
        return table.getContainerProperty(itemId, propertyId).getType() == Integer.class ?
                "numeric" : ""
    }
});

Invent some layout for this column and place it into the styles.css of you theme.


 .v-table-cell-content-numeric {
      text-align: right;
 }

greets
stefan

4

I’d recommend to subclass Table.ColumnGenerator and provide your own formatting in there (ie. by passing NumberFormat instance at constructor). Then use Table.addGeneratedColumn(“myColumn”, myColumnGenerator). That and custom css style for right align. I am convinced pretty much every real-life usage of Table (except the trivial ones) will end up using “dreaded” generated column feature anyway. Without use of generated column you can’t provide such elementary thing like cell tooltip.

Something like this:


	public static class PriceColumnGenerator implements Table.ColumnGenerator {
		protected NumberFormat formatter;

		public PriceColumnGenerator() {
			super();
			this.formatter = null;
		}

		public PriceColumnGenerator(final NumberFormat formatter) {
			super();
			this.formatter = formatter;
		}

		@Override
		public Component generateCell(final Table source, final Object itemId, final Object columnId) {
			final Item item = source.getItem(itemId);
			final Property prop = item.getItemProperty(columnId);

			// Do not attempt to render NaN values
			final Property p = new BeanItem<Object>(prop.getValue()).getItemProperty("naN");
			if (p != null && p.getValue().equals(Boolean.TRUE)) {
				return null;
			}

			final String text = this.formatValue(prop.getValue());
			final Label label = new Label(text);
			label.addStyleName("mydecimalstyle");
			label.setDescription(text);
			return label;
		}

		protected String formatValue(final Object value) {
			if(this.formatter != null) {
				return this.formatter.format(value);
			}
			return "" + value;
		}
	}

Personally don’t like the concept of pre-formatting values beforehand in data model (and bloat business model that way). Makes much better sense to do it in presentation/render code where it naturally belongs.

Tomas

5

Thank you, this works nice!

6

how would one use this having an Bean(Item)Container?
What I want is more sth like >>setColumnFormatter(“myColumn”, myColumnGenerator)<< which is more straight forward than use the formatPropertyValue and check for each colId.

When I call the addGeneratedColumn method on ID’s added automatically by the container I get an exception…
I read a bit about this in the forum and as I understood, the suggestions are to create a “copy column” which is formatted. Did I get this right? or is there an other solution?