title: JSF 1.2 dataTable Add Columns Dynamically
body: <p>So I have a page that asks users to input peoples information that I will use to do a search within a database for more robust demographics. The issue I am having is that when then are adding people to look for in the search (via a ) I am adding new row to the Column. </p>
  
  <p>The users are saying they don't want vertical rendering of the array. They want Horizontal rendering, which means a new column for each parent object. And only the parent so the rest if the addRow work just fine for them, however they want to do side by side compares. I am lost on how to do this via jsf/jsp. Here is what I currently have:</p>
  
  <pre><code>&lt;div style="overflow: auto; width: 1250px; height: 200px;"&gt;
  &lt;h:dataTable var="root" value="#{bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader"&gt;
      &lt;h:column&gt;
          &lt;f:facet name="header"&gt;
              &lt;h:outputText styleClass="ArrayLabel" value="Persons"/&gt;
          &lt;/f:facet&gt;
      &lt;/h:column&gt;
      &lt;h:column&gt;
          &lt;f:facet name="header"&gt;
              &lt;h:panelGrid columns="2" columnClasses="MaxWidth"&gt; 
                  &lt;h:outputText value="" /&gt; 
                  &lt;h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink" binding="#{commandLink.instance}"
  disabled="#{!bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].addPossible}"
  action="#{bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].addRow}"/&gt;
              &lt;/h:panelGrid&gt;
          &lt;/f:facet&gt; 
          &lt;h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth"&gt;
              &lt;h:outputText styleClass="ArrayLabel" value="Create Case Person" /&gt;
              &lt;h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
  binding="#{commandLink.instance}"
  disabled="#{!bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].removePossible}"
  action="#{root['~REMOVE~'].removeRow}"/&gt;
          &lt;/h:panelGrid&gt; 
          &lt;h:outputText value=""/&gt;
          &lt;h:panelGrid columns="2"&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="PersonFirstName"/&gt;
              &lt;h:inputText id="PersonFirstName_ID" styleClass="ViewEntryField" value="#{root['PersonFirstName']}" required="false"/&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="Person's Last Name"/&gt;
              &lt;h:inputText id="PersonLastName_ID" styleClass="ViewEntryField" value="#{root['PersonLastName']}" required="false"/&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="Person's Middle Name"/&gt;
              &lt;h:inputText id="PersonMiddleName_ID" styleClass="ViewEntryField" value="#{root['PersonMiddleName']}" required="false"/&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="Date of Birth"/&gt;
              &lt;h:panelGroup&gt;
                  &lt;h:inputText id="DateOfBirth_ID" styleClass="ViewEntryField" value="#{root['DateOfBirth']}" required="false"&gt;
                      &lt;hx:convertDateTime type="date"/&gt;
                      &lt;hx:inputHelperDatePicker/&gt;
                  &lt;/h:inputText&gt;
                  &lt;h:message styleClass="errorDetailsValidation" for="DateOfBirth_ID"/&gt;
              &lt;/h:panelGroup&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="SUPER ID"/&gt;
              &lt;h:panelGroup&gt;
                  &lt;h:inputText id="SUPERID_ID" styleClass="ViewEntryField" value="#{root['SUPERID']}" required="false"&gt;
                      &lt;f:converter converterId="IntegerConverter"/&gt;
                  &lt;/h:inputText&gt;
                  &lt;h:message styleClass="errorDetailsValidation" for="SUPERID_ID"/&gt;
              &lt;/h:panelGroup&gt;
          &lt;/h:panelGrid&gt;  
          &lt;h:outputText value=""/&gt;
          &lt;h:dataTable var="nested_1_1_1" value="#{root['OtherIDs[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader"&gt;     
              &lt;h:column&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;h:outputText styleClass="ArrayLabel" value="OtherIDs"/&gt;
                  &lt;/f:facet&gt;
              &lt;/h:column&gt;
              &lt;h:column&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;h:panelGrid columns="2" columnClasses="MaxWidth"&gt; 
                          &lt;h:outputText value="" /&gt; 
                          &lt;h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink"
  binding="#{commandLink.instance}"
  disabled="#{!root['OtherIDs[]/'].addPossible}"
  action="#{root['OtherIDs[]/'].addRow}"/&gt;
                      &lt;/h:panelGrid&gt;
                  &lt;/f:facet&gt; 
                  &lt;h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth"&gt;
                      &lt;h:outputText styleClass="ArrayLabel" value="Other ID" /&gt;
                      &lt;h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
  binding="#{commandLink.instance}"
  disabled="#{!root['OtherIDs[]/'].removePossible}"
  action="#{nested_1_1_1['~REMOVE~'].removeRow}"/&gt;
                  &lt;/h:panelGrid&gt;
                  &lt;h:outputText value=""/&gt;
                  &lt;h:panelGrid columns="2"&gt;
                      &lt;h:outputText styleClass="ViewFieldLabel" value="ID"/&gt;
                      &lt;h:inputText id="ID_ID" styleClass="ViewEntryField" value="#{nested_1_1_1['ID']}" required="false"/&gt;
                      &lt;h:outputText styleClass="ViewFieldLabel" value="Source System of Other ID"/&gt;
                      &lt;h:selectOneMenu styleClass="ViewEntryField" value="#{nested_1_1_1['IdType']}"&gt;
                          &lt;f:selectItem itemValue="TYPE1" itemLabel="TYPE1"/&gt;
                          &lt;f:selectItem itemValue="TYPE2" itemLabel="TYPE2"/&gt;
                      &lt;/h:selectOneMenu&gt;
                  &lt;/h:panelGrid&gt;
              &lt;/h:column&gt;
          &lt;/h:dataTable&gt;
          &lt;h:outputText value=""/&gt;
          &lt;h:panelGrid columns="2"&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="Gender"/&gt;
              &lt;h:selectOneMenu styleClass="ViewEntryField" value="#{root['Gender']}"&gt;
                  &lt;f:selectItem itemValue="M" itemLabel="M"/&gt;
                  &lt;f:selectItem itemValue="F" itemLabel="F"/&gt;
                  &lt;f:selectItem itemValue="U" itemLabel="U"/&gt;
              &lt;/h:selectOneMenu&gt;
          &lt;/h:panelGrid&gt;  
          &lt;h:outputText value=""/&gt;
          &lt;h:dataTable var="nested_1_2_1" value="#{root['AliasNames[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader"&gt;     
              &lt;h:column&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;h:outputText styleClass="ArrayLabel" value="AliasNames"/&gt;
                  &lt;/f:facet&gt;
              &lt;/h:column&gt;
              &lt;h:column&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;h:panelGrid columns="2" columnClasses="MaxWidth"&gt; 
                          &lt;h:outputText value="" /&gt; 
                          &lt;h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink"
  binding="#{commandLink.instance}"
  disabled="#{!root['AliasNames[]/'].addPossible}"
  action="#{root['AliasNames[]/'].addRow}"/&gt;
                      &lt;/h:panelGrid&gt;
                  &lt;/f:facet&gt; 
                  &lt;h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth"&gt;
                      &lt;h:outputText styleClass="ArrayLabel" value="aliasNames" /&gt;
                      &lt;h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
  binding="#{commandLink.instance}"
  disabled="#{!root['AliasNames[]/'].removePossible}"
  action="#{nested_1_2_1['~REMOVE~'].removeRow}"/&gt;
                  &lt;/h:panelGrid&gt;
                  &lt;h:outputText value=""/&gt;
                  &lt;h:panelGrid columns="2"&gt;
                      &lt;h:outputText styleClass="ViewFieldLabel" value="Last Name"/&gt;
                      &lt;h:inputText id="LastName_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['LastName']}" required="false"/&gt;
                      &lt;h:outputText styleClass="ViewFieldLabel" value="First Name"/&gt;
                      &lt;h:inputText id="FirstName_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['FirstName']}" required="false"/&gt;
                      &lt;h:outputText styleClass="ViewFieldLabel" value="Middle Name"/&gt;
                      &lt;h:inputText id="Middle_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['Middle']}" required="false"/&gt;
                  &lt;/h:panelGrid&gt;
              &lt;/h:column&gt;
          &lt;/h:dataTable&gt;
          &lt;h:outputText value=""/&gt;
          &lt;h:panelGrid columns="2"&gt;
              &lt;h:outputText styleClass="ViewFieldLabel" value="Date Person Expired"/&gt;
              &lt;h:panelGroup&gt;
                  &lt;h:inputText id="DateExpired_ID" styleClass="ViewEntryField" value="#{root['DateExpired']}" required="false"&gt;
                      &lt;hx:convertDateTime type="date"/&gt;
                      &lt;hx:inputHelperDatePicker/&gt;
                  &lt;/h:inputText&gt;
                  &lt;h:message styleClass="errorDetailsValidation" for="DateExpired_ID"/&gt;
              &lt;/h:panelGroup&gt;
          &lt;/h:panelGrid&gt;
      &lt;/h:column&gt;
  &lt;/h:dataTable&gt;
  </code></pre>
  
  <p></p>