以下的示例来自于 bpdemos，是一个商品价格查询的表格，这里定义了4列的信息，分别是"title"、 "listPrice"、 "yourPrice" 和"image"，接着下面定义了模板，用{列的id}来绑定该列的信息，从而达到自定义的效果。

<w:page title="DataView">
    <w:pagingToolbar for="view-example" pageSize="3" />
    <w:form>
        <w:dataView id="view-example" jsvar="productView"
            value="#{datarepresent.dataViewBean.products}" var="p">
            <w:outputColumn id="title" value="#{p.title}" />
            <w:outputColumn id="listPrice" value="#{p.listPrice}" />
            <w:outputColumn id="yourPrice" value="#{p.yourPrice}" />
            <w:outputColumn id="image" value="#{p.image}" />
            <f:facet name="template">
                <h:panelGroup layout="block" styleClass="product">
                    <h:panelGrid columns="2">
                        <f:verbatim>
                            <img src="{image}" title="{title}" class="image" />
                        </f:verbatim>
                        <h:panelGrid columns="1">
                            <f:verbatim>
                                <span class="title">{title}</span>
                            </f:verbatim>
                            <f:verbatim>
                                <span>List Price: </span>
                                <span class="listPrice">{listPrice}</span>
                            </f:verbatim>
                            <f:verbatim>
                                <span>Your Price: </span>
                                <span class="yourPrice">{yourPrice}</span>
                            </f:verbatim>
                        </h:panelGrid>
                    </h:panelGrid>
                </h:panelGroup>
            </f:facet>
            <f:facet name="empty">
                <f:verbatim>No data to display.</f:verbatim>
            </f:facet>
        </w:dataView>
    </w:form>
</w:page>