Primefaces static and dynamic columns in datatable

Question

I am using Primefaces 5.0 to create a dynamic datatable.

My DataObject has some required fields and a List of optional "tupel" (key-value pair). The optional list may vary in size. Therefore I need a dynamic mechanism to show a List of DataObject in Primefaces.DataTable.

My approach looks like:

public class DataObject {
    private String staticval1;
    private String staticval2;

    private List<Tupel> optionalValues;


    // .. getter, setter, hashCode, toString.....
}

public class Tupel{
    private String id;
    private String value;
}

@ManagedBean
@ViewScoped
public class TableOverviewBean {
    private List<DataObject> data;

    @EJB
    private IMyDao myDao;

    @PostConstruct
    public void init() {
        data = myDao.findAll();
    }

    public List<DataObject> getData() {
        return data;
    }

    public void setData(List<DataObject> data) {
        this.data = data;
    }
}

    <h:form>
        <p:dataTable value="#{tableOverviewBean.data}" var="data">
            <p:column headerText="static1">
                <h:outputText value="#{data.staticval1}" />
            </p:column>

            <p:column headerText="static2">
                <h:outputText value="#{data.staticval2}" />
            </p:column>

            <p:columns value="#{data.optionalValues}" var="opt" headerText="#{opt.id}">
                <h:outputText value="#{opt.value}" />
            </p:columns>
        </p:dataTable>
    </h:form>

But this does not work. The dynamic columns are not rendered. How can I solve my problem?

EDIT: Expected result:

staticval1 | staticval2 | dynamic_id1 | dynamic_id2 | ... | dynmic_idn
----------------------------------------------------------------------
static1a   | static2a   | dyna_value1a| dyna_value2a | ... | dyna_valu3a
static1b   | static2b   | dyna_value1b| dyna_value2b | ... | dyna_valu3b
static1c   | static2c   | dyna_value1c| dyna_value2c | ... | dyna_valu3c

Honeyhoneybee

Answer 1

It isn't possible to define columns based on row data. Imagine that row 1 has 2 columns, row 2 has 6 columns, row 3 has 1 column, etc how would you ever produce a technically valid table in HTML? Each row must have the same amount of columns.

You've 2 options, depending on whether can change the model or not:

1. If you can't change the model, then you need to replace that <p:columns> by a single <p:column> and loop over the #{data.optionalValues} using a nested loop with e.g. <ui:repeat> or perhaps even another <p:dataTable><p:columns>:

   <p:column>
       <p:dataTable value=""><!-- Empty string as value forces 1 row. -->
           <p:columns value="#{data.optionalValues}" var="opt" headerText="#{opt.id}">
               #{opt.value}
           </p:columns>
       </p:dataTable>
   </p:column>
   

2. If you can change the model, then you need to let <p:columns value> point to a bean property instead of to a row property, so that it's exactly the same for every row. This works if you replace List<Tupel> optionalValues by Map<String, Tupel> optionalValues where the key is Tupel#id and add a List<String> property to the bean containing all available Tupel#id values.

   <p:columns value="#{tableOverviewBean.availableTupelIds}" var="id" headerText="#{id}">
       #{data.optionalValues[id].value}
   </p:columns>
   

Yingling

Both solutions do not really solve my problem. I added an example output to my question. Is there a way to get a table like this? – Honeyhoneybee

Did you read the 1st paragraph? If you want to achieve the layout you need, you have to move the data from row to bean and provide a fixed amount of columns. – Yingling

Yes I read. My rows have same amount of columns. But the number of columns may vary if I get another dataset. E.g. one time there are 10 optional values (each dataobject has 10). Another set may have 8 optinal values. – Honeyhoneybee

I know. But you're going to need to change the model in case you want to achieve exactly the desired view. I updated the answer. – Yingling

What about colspan value? Isn't it possible to achieve a correct html table with different elements per row how long the colspan value fits? – Dilator

@opfau: colspan doesn't change amount of columns. It only merges columns. – Yingling

I filled up my model to meet same column size for each row. All rows have 5 columns in my case. On 1st row there is one element in 1st column and an element in 2nd column which defines a colspan of 3. But it does not span. – Dilator

Answer 2

java:

@Named
@ViewScoped
public class LiveRangeService implements Serializable {
    private List< Map<String, ColumnModel> > tableData;
    private List<ColumnModel> tableHeaderNames;


    public List<Map<String, ColumnModel>> getTableData() {
        return tableData;
    }
    public List<ColumnModel> getTableHeaderNames() {
        return tableHeaderNames;
    }

    public void PlayListMB() {
        tableData = new ArrayList< Map<String, ColumnModel> >();

        //Generate table header.
        tableHeaderNames = new ArrayList<ColumnModel>();
        for (int j = 0; j < 5; j++) {
              tableHeaderNames.add(new ColumnModel("header "+j, " col:"+ String.valueOf(j+1)));
        }

        //Generate table data.
        for (int i = 0; i < 10; i++) {
            Map<String, ColumnModel> playlist = new HashMap<String, ColumnModel>();
            for (int j = 0; j < 5; j++) {
                playlist.put(tableHeaderNames.get(j).key,new ColumnModel(tableHeaderNames.get(j).key,"row:" + String.valueOf(i+1) +" col:"+ String.valueOf(j+1)));
            }
            tableData.add(playlist);
        }
    }

    static public class ColumnModel implements Serializable {

        private String key;
        private String value;

        public ColumnModel(String key, String value) {
            this.key = key;
            this.value = value;
        }

        public String getKey() {
            return key;
        }

        public String getValue() {
            return value;
        }
    }

And XHTML:

                <h:form>

                    <p:dataTable id="tbl" var="result"
                        value="#{liveRangeService.tableData}"
                        rendered="#{not empty liveRangeService.tableData}"
                        rowIndexVar="rowIndex"
                        >

                        <f:facet name="header">  header table </f:facet>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="序号" />
                            </f:facet>
                            <h:outputText value="#{rowIndex+1}" />
                        </p:column>

                        <p:columns value="#{liveRangeService.tableHeaderNames}"
                            var="mycolHeader" columnIndexVar="colIndex">
                            <f:facet name="header">
                                <h:outputText value="#{mycolHeader.value}" />

                            </f:facet>
                            <h:outputText value="#{result[mycolHeader.key].value}" />
                            <br />
                        </p:columns>

                    </p:dataTable>
                </h:form>

That's a example.

Bottomless