Date formatting in a Table

Hi!

I know how to format a Date on a Form (using FieldFactory and DateField’s resolution).

But how do I do the same formatting in a Table? The default format is way too long… Can I use some property on the Table, or should I format the Date to a String before I add it to the Table and change that column’s type from Date.class to String.class?

I guess the simplest way to fix this is to change it to a String, just as you said. You could go for GeneratedColumns too but I guess that is a little overkill.

I do not see any downsides in changing the column to a string. I for one very seldom call upon the values of a specific column. I just put the object that has all the references in the row as row id, and after that you get all the original values by getting the row id.

Hi!

I wouldn’t go changing the original data type in the container unless you are doing something very simple with default containers like indexed container.

The simplest option is to override Table a bit. When rendering the content table pipes property values through method called formatPropertyValue which can safely be overridden. By default it pretty much does object.toString(). And example to format date to “YYYY-MM-DD” below.


        Table t = new Table() {

            @Override
            protected String formatPropertyValue(Object rowId, Object colId,
                    Property property) {
                Object v = property.getValue();
                if (v instanceof Date) {
                    Date dateValue = (Date) v;
                    return "Formatted date: " + (1900 + dateValue.getYear())
                            + "-" + dateValue.getMonth() + "-"
                            + dateValue.getDate();
                }
                return super.formatPropertyValue(rowId, colId, property);
            }

        };

Another option is to override your date column with ColumnGenerator. This may be good option if you want to format your property value more versatile. For example you might want to turn email addresses into links.

cheers,
matti

Thanks for both answers. ATM I applied Jens’ method, but I think in the long run I’ll try Matti’s version as well.

For the record:

Mattis version works when the user sorts the rows w.r.t. the date, while changing the Date-datatype to a String only works correctly for certain date formats (YYYY-MM-DD and such), since the column now sorts as a String.

/Jonatan

Hi,

since getYear() getMonth() etc are deprecated, you can also use


return new SimpleDateFormat("yyyy-MMMM-dd").format(dateValue);

instead of


return "Formatted date: " + (1900 + dateValue.getYear())
                            + "-" + dateValue.getMonth() + "-"
                            + dateValue.getDate();

Regards,
Sopot

Another way to modify the date format in table is to override the Converter class and set your custom converter to the table object.

Here is the example code.

table.setConverter(YourDateColumnID, new StringToDateConverter(){

@Override

public DateFormat getFormat(Locale locale){

return new SimpleDateFormat(“yyyy-MMMM-dd”);

}

});

The solution of David Lee is perfect!!! Thank you!

I also used David Lee’s solution, it does exactly what I need, thank you!

I also successfully applied the same technique to remove the grouping separator from a column containing a year:

table.setConverter("YEAR", new StringToIntegerConverter() { @Override public NumberFormat getFormat(Locale locale){ return new DecimalFormat("0000"); } }); It works like a charm :slight_smile:

Thumbs up for david lee’s solution. Worked for me too, and i reckon it’s the most suitable solution to the problem.

Hi all,
the converter seems to be the appropiate way to do stuff like that. The formatPropertyValue was in my opinion the Vaadin 6 way to do it. But how is it possible to access the current rowId, coldId or Property which are available in the formatPropertyValue but are not available in the converter? Especially the property! This contains the current value. My use case is I want to style a column depending on an other attribute in the object. So far i use the propertyFormatValue to add a FontIcon to the current value and i use a cellstyleGenerator to add the FontFamily. But i want to use the converter because I want to change to Grid and there you don’t have the formatPropertyValue. Is it possible to add a font Icon to the css so that i can use only my cell style generator?