Search code examples
primefacestabview

How to make a tabview with same datatable and paginate it


I want to make a tabview with primefaces component with three tabs, inside tabs I will use a datatable with input text. Is it posible to use the same datatable and distinct fields in three tabs? Is it posible to paginate all tabs at the same time to show same register at a time? Sorry for my bad english.

Imagine a list of objects cars with this properties: colour, form, wheels, name, model and price.

Tabview
                      Tab1                        Tab2               Tab3
1 row      colour | form        wheels | name        model | price
2 row
3 row

I want to use same datatable and paginate three tabs at the same time to have same rows at three tabs.


Solution

  • It is possible. You can add an event to your tabView. And then change the visibility of the columns of your dataTable. The code could be something like this:

    <p:tabView activeIndex="#{bean.activeTab}">
        <p:ajax event="tabChange" update="@([id$=dataTable])" />
    
        <p:tab title="Tab1">
        <p:tab title="Tab2">
        <p:tab title="Tab3">
    </p:tabView>
    
    <p:dataTable id="dataTable" value="#{bean.cars}">
        <p:column headerText="Colour" rendered="#{bean.activeTab == 0}">
            ...
        </p:column>
    
        <p:column headerText="Form" rendered="#{bean.activeTab == 0}">
            ...
        </p:column>
    
        <p:column headerText="Wheels" rendered="#{bean.activeTab == 1}">
            ...
        </p:column>
    
        <p:column headerText="Name" rendered="#{bean.activeTab == 1}">
            ...
        </p:column>
    
        <p:column headerText="Model" rendered="#{bean.activeTab == 2}">
            ...
        </p:column>
    
        <p:column headerText="Price" rendered="#{bean.activeTab == 2}">
            ...
        </p:column>
    </p:dataTable>