JSF Datatable with two columns

I have a JSF datatable like this one:

    <h:form id="productsBox">
            <h:dataTable var="product" value="#{categoriesBean.category.products}" id="productsTable">
                <h:column id="product">
                        <img id="img" src="C:/upload/Jellyfish_231834557726756606.jpg" />
                        <h:outputText id="name" value=" #{product.name}" />
                        <h:outputText id="price" value=" #{product.price}" />
                        <h:commandButton id="addToCart" value="Add to cart" action="#{shoppingCartBean.addProduct(product)}">
                        </h:commandButton>
                </h:column开发者_Python百科>
            </h:dataTable>
            </h:dataTable>
        </h:form>

I don't know how to make this table with 4 rows and 2 columns, putting one product on each sell, like in the image below:

And after this problem is solved, I'm curious, can I make something like pagination for products with JSF, if they are more than 12 products in my category? Or there is something better for this? I heard primefaces could help me.

Primefaces can indeed help you here. It has the DataGrid component that does exactly this.

It lets you specify the total number of rows on one page and the number of columns in which each item from your collection is rendered.

Yes you can use Primefaces for this. You have to add jar of primefaces in you library path or You can add dependency for primefaces in pom.xml file if you wish to use MAVEN. Also if you are using XHTML page you have to include xmlns:p="http://primefaces.org/ui" . So you are now ready to use primefaces components along with jsf core library component.

This will be the code then :

                    <h:form id="productsBox">
                        <p:dataTable id="productsTable" var="product" 
                            value="#{categoriesBean.category.products}" 
                            paginator="true" rows="10" paginatorAlwaysVisible="false"
                            paginatorPosition="bottom">
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText id="name" value=" #{product.name}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Price" />
                                </f:facet>
                                <h:outputText id="price" value=" #{product.price}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Action" />
                                </f:facet>
                                <h:commandButton id="addToCart" value="Add to cart"
                                    action="#{shoppingCartBean.addProduct(product)}" />
                            </p:column>

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