af:table component structure in ADF

<af:table value="#{bindings.treename.collectionModel}"  var="row"
varStatus="vs">
<af:column headerText = "#{bindings.treename.hints.FirstName.label}"
sortable="true" filterable="true"
sortproperty = "#{bindings.treename.hints.FirstName.name}"
Editable tab- <af:inputText value = "#{row.bindings.FirstName.inputValue}" />
Readonly tab- <af:outputText value = "#{row.FirstName}" />
</af:column>

<af:column headerText = "#{bindings.treename.hints.departmentId.label}"
sortable="true" filterable="true"
sortproperty = #{bindings.treename.hints.departmentId.name}
<f:facet name="filter">
<af:inputDate value="#{vs.filterCriteria.HireDate}"/>
</f:facet>
Editable tab- <af:inputDate value="#{row.bindings.HireDate.inputValue}" />
Read only tab-  <af:outputText value="#{row.HireDate}" >
</af:column>

<af:column headerText = "#{bindings.treename.hints.departmentId.label}"
sortable="true" filterable="true"
sortproperty = #{bindings.treename.hints.departmentId.name}
<f:facet name="filter">
<af:selectOneChoice value="#{vs.filterCriteria.DepartmentId}"
inlineStyle="width:100px" autoSubmit="true">
<af:forEach items="#{bindings.DepartmentsView1.rangeSet}"
var="listRow">
<f:selectItem itemValue="#{listRow.DepartmentId}"
itemLabel="#{listRow.DepartmentName}"/>
</af:forEach>
</af:selectOneChoice>
</f:facet>
Editable tab- <af:inputText value="#{row.bindings.DepartmentId.inputValue}">
Read only tab- <af:outputText value="#{row.DepartmentId}">
</af:column>
</af:table>

 

Result: This code displayes the updatable/read only table. In the top input text as default filter for all columns and date or LOV or customized component for the columns which use <f:facet name =”filter” />. The default implementation of the table filter cell renderer is an af:inputText field.

Front end display will be like below:

Note: If you want to add a filter like we have done it here for Department Id column you need place the filter component in the filter facet of a column. Here we have added LOV filter (SelectOneChoice) and inside that we have placed foreach to which bindings we’ve given for DepartmentsVO . There is no need to be any relationship between employees and departments to create in adf. Just Department Id should present in both VOs that is enough. And your page should contain both the VOs tree bindings. No need to do any child relationship like that just drag two VOs datacontrols as tree bindings to the page.