gwtdatagridcelltable

GWT - What layout can help for expense report by quarter

I need to create a quarterly expense report and I am confused what layout and widgets would be useful here 

    Quarter 1   Quarter 2   Quarter 3

Expense 1
Expense 2
Expense 3

I understand Celltable and DataGrids, but not sure If I can have data mappings of objects in the format as above. Mainly because these tables work with objects at a row level.

I have an object with data of the entire column instead. Any ideas/ suggestions here ?

Solution

  • You have many options to choose from. The most obvious one is a FlexTable, but you can also simply put three floating FlowPanels next to each other.

    With GWT you should use HTML for your layouts as much as possible unless you need some specific functionality from a widget.

    EDIT:

    Alternatively, you can use a DataGrid with a single row, where each cell is a custom cell that renders your object.

    Finally, you can use DataGrid as a regular DataGrid - just modify the logic of what is displayed in each cell. For example, a cell can render like this:

        final TextColumn<Integer> quarterColumn = new TextColumn<Integer>() {
        @Override
        public String getValue(Integer row) {
            int column = myDataGrid.getColumnIndex(quarterColumn);
            QuarterObject object = quarterObjects(column - 1);
            return object.getExpense(row - 1);
        }
    };

    Then you simply populate your DataProvider with an array of Integers from 1 to the number of records in your QuarterObject.