Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

DataTable Scroll

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical
NameCountryRepresentativeStatus
Juan WieserUnited KingdomAsiya Javayant NEGOTIATION
Jefferson SchemmerRussiaBernardo Dominic PROPOSAL
James ButtJapanAnna Fali UNQUALIFIED
Jennifer AmigonBrazilIoni Bowcher NEGOTIATION
Jeanfrancois VenereJapanIoni Bowcher PROPOSAL
Mayumi KolmetzAustraliaBernardo Dominic PROPOSAL
Maria MarrierArgentinaAsiya Javayant RENEWAL
Costa DilliardItalyAsiya Javayant RENEWAL
Ivar PaprockiIndiaXuxue Feng RENEWAL
Chavez BriddickItalyAmy Elsner QUALIFIED
Francesco ShinkoFranceIvan Magalhaes RENEWAL
Smith GlickIndiaBernardo Dominic NEW
Kadeem FlosiSpainIvan Magalhaes QUALIFIED
Murillo MaletAustraliaAsiya Javayant PROPOSAL
Octavia MaletArgentinaAmy Elsner NEW
Cody SaylorsItalyXuxue Feng NEW
Aditya KuskoUnited KingdomAnna Fali RENEWAL
David DarakjyAustraliaAmy Elsner NEW
Claire TollnerUnited KingdomStephen Shaw NEGOTIATION
Nicolas IturbideBrazilElwin Sharvill RENEWAL
Adams MorascaSpainIvan Magalhaes NEGOTIATION
Maisha RulapaughGermanyXuxue Feng RENEWAL
Juan WieserIndiaStephen Shaw QUALIFIED
Leon OldroydAustraliaXuxue Feng NEGOTIATION
Jefferson SchemmerBrazilAmy Elsner PROPOSAL
Cody SaylorsSpainIoni Bowcher RENEWAL
Chavez BriddickJapanXuxue Feng QUALIFIED
Misaki RoysterJapanBernardo Dominic NEW
David DarakjyGermanyAsiya Javayant NEGOTIATION
Smith GlickUnited KingdomElwin Sharvill UNQUALIFIED
Faith GillianBrazilAnna Fali NEW
Tony FollerFranceStephen Shaw NEW
Mayumi KolmetzItalyBernardo Dominic RENEWAL
Emily WhobreySpainAnna Fali RENEWAL
Isabel BowleyIndiaIvan Magalhaes PROPOSAL
Tony FollerFranceBernardo Dominic QUALIFIED
Arvin AlbaresRussiaIoni Bowcher NEW
Julie StensethUnited KingdomXuxue Feng QUALIFIED
Costa DilliardAustraliaAmy Elsner NEGOTIATION
Wickens NestleJapanStephen Shaw NEGOTIATION
Ricardo GauchoItalyXuxue Feng PROPOSAL
Aika InouyeAustraliaStephen Shaw RENEWAL
Juan WieserGermanyXuxue Feng RENEWAL
Misaki RoysterArgentinaIvan Magalhaes UNQUALIFIED
Nicolas IturbideArgentinaIvan Magalhaes RENEWAL
Jefferson SchemmerJapanIvan Magalhaes QUALIFIED
Munro FerenczUnited KingdomIvan Magalhaes QUALIFIED
Jennifer AmigonCanadaBernardo Dominic RENEWAL
Darci PoquetteIndiaAmy Elsner RENEWAL
Jeanfrancois VenereItalyAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Rodrigues CampainIndiaAsiya Javayant NEGOTIATION
Smith GlickIndiaXuxue Feng NEGOTIATION
Stacey MacleadFranceOnyama Limba RENEWAL
Jones VocelkaAustraliaBernardo Dominic NEW
Juan WieserUnited KingdomIoni Bowcher RENEWAL
Maisha RulapaughAustraliaElwin Sharvill NEW
Faith GillianBrazilBernardo Dominic PROPOSAL
Aruna FigeroaUnited KingdomIoni Bowcher NEGOTIATION
Jones VocelkaRussiaAnna Fali NEGOTIATION
Faith GillianCanadaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Faith GillianSpain2026-06-02Chanay, Jeffrey A Esq PROPOSAL48Stephen Shaw
1001Kaitlin OstroskyArgentina2026-06-01Rangoni Of Florence RENEWAL60Ioni Bowcher
1002Deepesh ChuiSpain2026-06-10Rousseaux, Michael Esq RENEWAL44Ioni Bowcher
1003Kaitlin OstroskyCanada2026-05-18Rousseaux, Michael Esq NEW99Xuxue Feng
1004Mayumi KolmetzFrance2026-06-05Rangoni Of Florence RENEWAL53Amy Elsner
1005Mayumi KolmetzJapan2026-06-02Feltz Printing Service NEW22Anna Fali
1006Munro FerenczArgentina2026-05-23Printing Dimensions UNQUALIFIED81Elwin Sharvill
1007Stacey MacleadCanada2026-05-20Rousseaux, Michael Esq RENEWAL63Amy Elsner
1008Alejandro PerinItaly2026-05-16Feltz Printing Service RENEWAL94Asiya Javayant
1009Chavez BriddickBrazil2026-05-14Feltz Printing Service NEW80Ioni Bowcher
1010Wickens NestleSpain2026-06-02Truhlar And Truhlar Attys NEW73Elwin Sharvill
1011Munro FerenczIndia2026-05-14Chapman, Ross E Esq QUALIFIED89Ivan Magalhaes
1012Murillo MaletFrance2026-05-14King, Christopher A Esq NEGOTIATION75Stephen Shaw
1013Jeanfrancois VenereItaly2026-05-25Rangoni Of Florence UNQUALIFIED83Asiya Javayant
1014Jefferson SchemmerSpain2026-05-16Dorl, James J Esq QUALIFIED7Onyama Limba
1015Smith GlickFrance2026-06-07Feiner Bros QUALIFIED14Ivan Magalhaes
1016Aruna FigeroaSpain2026-05-16Feiner Bros UNQUALIFIED8Anna Fali
1017Isabel BowleyArgentina2026-05-16Truhlar And Truhlar Attys QUALIFIED88Elwin Sharvill
1018Smith GlickItaly2026-06-07Feiner Bros UNQUALIFIED82Stephen Shaw
1019Arvin AlbaresIndia2026-05-27Feltz Printing Service QUALIFIED56Onyama Limba
1020Rodrigues CampainFrance2026-05-15Chapman, Ross E Esq PROPOSAL97Anna Fali
1021Wickens NestleSpain2026-06-05Dorl, James J Esq QUALIFIED80Bernardo Dominic
1022Chavez BriddickArgentina2026-06-01Rangoni Of Florence QUALIFIED99Stephen Shaw
1023Francesco ShinkoBrazil2026-05-14King, Christopher A Esq NEW29Ivan Magalhaes
1024Isabel BowleyIndia2026-06-05Feiner Bros RENEWAL30Stephen Shaw
1025Chavez BriddickSpain2026-05-15King, Christopher A Esq UNQUALIFIED18Amy Elsner
1026Emily WhobreyBrazil2026-06-01Commercial Press RENEWAL23Elwin Sharvill
1027Jefferson SchemmerFrance2026-05-20Printing Dimensions RENEWAL97Ivan Magalhaes
1028Nicolas IturbideCanada2026-06-11King, Christopher A Esq QUALIFIED65Asiya Javayant
1029Morrow RutaUnited Kingdom2026-06-06Rangoni Of Florence QUALIFIED87Xuxue Feng
1030Nicolas IturbideBrazil2026-06-05Buckley Miller Wright NEW23Asiya Javayant
1031Faith GillianCanada2026-06-09Feltz Printing Service PROPOSAL26Elwin Sharvill
1032Emily WhobreyGermany2026-05-14Chanay, Jeffrey A Esq NEGOTIATION25Ioni Bowcher
1033Johnson SergiFrance2026-05-22Feltz Printing Service NEW20Bernardo Dominic
1034Stacey MacleadAustralia2026-05-26Chapman, Ross E Esq NEGOTIATION28Ioni Bowcher
1035Chavez BriddickSpain2026-05-17Printing Dimensions PROPOSAL3Amy Elsner
1036David DarakjyJapan2026-06-12Feiner Bros NEW2Anna Fali
1037Octavia MaletIndia2026-05-16Feltz Printing Service QUALIFIED87Ioni Bowcher
1038Jones VocelkaArgentina2026-05-14Commercial Press NEW20Ioni Bowcher
1039Costa DilliardCanada2026-05-22Feiner Bros RENEWAL2Bernardo Dominic
1040Kaitlin OstroskyArgentina2026-05-24Printing Dimensions NEGOTIATION85Elwin Sharvill
1041Nicolas IturbideBrazil2026-06-09Chanay, Jeffrey A Esq UNQUALIFIED28Ioni Bowcher
1042Nicolas IturbideBrazil2026-06-05Truhlar And Truhlar Attys RENEWAL45Asiya Javayant
1043Kadeem FlosiUnited Kingdom2026-06-06Chapman, Ross E Esq UNQUALIFIED74Ioni Bowcher
1044Arvin AlbaresFrance2026-05-18Morlong Associates NEW47Ioni Bowcher
1045Jefferson SchemmerSpain2026-05-29Printing Dimensions QUALIFIED49Amy Elsner
1046Misaki RoysterJapan2026-06-04Chemel, James L Cpa PROPOSAL28Xuxue Feng
1047Deepesh ChuiIndia2026-05-25Chemel, James L Cpa NEW7Anna Fali
1048Ivar PaprockiItaly2026-05-28Rangoni Of Florence QUALIFIED23Ioni Bowcher
1049Leon OldroydUnited Kingdom2026-05-15Chapman, Ross E Esq QUALIFIED13Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerRussiaAmy Elsner PROPOSAL
Chavez BriddickBrazilXuxue Feng QUALIFIED
Mayumi KolmetzFranceIvan Magalhaes QUALIFIED
Murillo MaletIndiaIoni Bowcher NEGOTIATION
Greenwood BologniaUnited KingdomBernardo Dominic NEGOTIATION
Maria MarrierArgentinaElwin Sharvill QUALIFIED
Sinclair WaycottIndiaIvan Magalhaes NEW
Kadeem FlosiArgentinaAsiya Javayant QUALIFIED
Cody SaylorsRussiaAnna Fali PROPOSAL
Kaitlin OstroskyUnited KingdomIoni Bowcher PROPOSAL
Francesco ShinkoGermanyAsiya Javayant QUALIFIED
Costa DilliardBrazilStephen Shaw NEW
Deepesh ChuiArgentinaXuxue Feng NEGOTIATION
Deepesh ChuiArgentinaAnna Fali UNQUALIFIED
Francesco ShinkoArgentinaAnna Fali RENEWAL
Munro FerenczIndiaBernardo Dominic RENEWAL
Octavia MaletJapanAnna Fali PROPOSAL
Johnson SergiRussiaOnyama Limba PROPOSAL
Arvin AlbaresJapanOnyama Limba NEW
Leja CaldareraCanadaIoni Bowcher PROPOSAL
Johnson SergiIndiaIoni Bowcher NEW
Isabel BowleyIndiaAnna Fali QUALIFIED
Kadeem FlosiRussiaAnna Fali RENEWAL
Wickens NestleFranceIvan Magalhaes PROPOSAL
Jeanfrancois VenereIndiaOnyama Limba NEW
Darci PoquetteAustraliaBernardo Dominic QUALIFIED
Maria MarrierCanadaStephen Shaw NEGOTIATION
Aruna FigeroaRussiaAsiya Javayant UNQUALIFIED
Morrow RutaBrazilAsiya Javayant QUALIFIED
Jeanfrancois VenereUnited KingdomBernardo Dominic NEW
Arvin AlbaresSpainIoni Bowcher NEW
Sinclair WaycottIndiaAmy Elsner UNQUALIFIED
Kaitlin OstroskyCanadaAmy Elsner QUALIFIED
Ivar PaprockiItalyXuxue Feng PROPOSAL
Munro FerenczItalyAsiya Javayant UNQUALIFIED
Johnson SergiRussiaIoni Bowcher UNQUALIFIED
Francesco ShinkoAustraliaAnna Fali PROPOSAL
Silvio SlusarskiItalyIvan Magalhaes QUALIFIED
Greenwood BologniaAustraliaAsiya Javayant NEW
Mujtaba NickaItalyStephen Shaw QUALIFIED
Kadeem FlosiArgentinaXuxue Feng QUALIFIED
Octavia MaletItalyElwin Sharvill RENEWAL
Costa DilliardJapanIvan Magalhaes RENEWAL
Deepesh ChuiIndiaXuxue Feng NEW
Jeanfrancois VenereUnited KingdomStephen Shaw RENEWAL
Arvin AlbaresFranceOnyama Limba RENEWAL
Mayumi KolmetzBrazilAnna Fali PROPOSAL
Greenwood BologniaSpainIvan Magalhaes RENEWAL
Leja CaldareraCanadaElwin Sharvill RENEWAL
Kadeem FlosiArgentinaBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Chavez Briddick
Morrow Ruta
Jeanfrancois Venere
Tony Foller
Ricardo Gaucho
Clifford Rim
Juan Wieser
Greenwood Bolognia
Murillo Malet
Emily Whobrey
Mujtaba Nicka
Ricardo Gaucho
Jennifer Amigon
Tony Foller
Wickens Nestle
Jeanfrancois Venere
Octavia Malet
Greenwood Bolognia
Wickens Nestle
Ashley Doe
Jennifer Amigon
Johnson Sergi
Kaitlin Ostrosky
Maisha Rulapaugh
Antonio Caudy
Tony Foller
Alejandro Perin
Aika Inouye
Jennifer Amigon
Cody Saylors
Smith Glick
Jeanfrancois Venere
Chavez Briddick
Nicolas Iturbide
Aruna Figeroa
Jeanfrancois Venere
Cody Saylors
Munro Ferencz
Izzy Garufi
Rodrigues Campain
Juan Wieser
Rodrigues Campain
Sinclair Waycott
Isabel Bowley
Leon Oldroyd
Munro Ferencz
Leja Caldarera
Ashley Doe
Kadeem Flosi
Jones Vocelka
IdCountryDate
1000Italy2026-06-02
1001Germany2026-05-22
1002Brazil2026-06-11
1003Russia2026-06-08
1004Australia2026-05-28
1005Australia2026-06-08
1006France2026-05-20
1007Germany2026-05-15
1008Canada2026-05-20
1009Italy2026-05-19
1010Japan2026-06-09
1011Germany2026-05-29
1012Italy2026-06-08
1013Italy2026-06-11
1014United Kingdom2026-05-15
1015India2026-05-14
1016Argentina2026-05-14
1017Japan2026-05-24
1018Spain2026-06-06
1019India2026-05-24
1020United Kingdom2026-06-10
1021Russia2026-05-15
1022Brazil2026-05-17
1023India2026-05-22
1024Spain2026-06-12
1025United Kingdom2026-06-03
1026Italy2026-06-06
1027Australia2026-06-10
1028Russia2026-05-18
1029Japan2026-05-20
1030Spain2026-05-19
1031Japan2026-05-18
1032United Kingdom2026-05-22
1033Canada2026-05-14
1034Canada2026-05-25
1035Spain2026-05-20
1036Brazil2026-05-18
1037Australia2026-06-11
1038Argentina2026-05-15
1039United Kingdom2026-05-17
1040Japan2026-05-20
1041Russia2026-05-22
1042Argentina2026-05-25
1043United Kingdom2026-05-26
1044United Kingdom2026-05-29
1045Spain2026-05-24
1046United Kingdom2026-05-23
1047United Kingdom2026-06-05
1048Australia2026-05-26
1049Canada2026-06-02

On-Demand Data

NameIdCountryDate
Darci Poquette1000Germany2026-05-20
Clifford Rim1001Brazil2026-05-23
Antonio Caudy1002Brazil2026-05-14
Nicolas Iturbide1003Germany2026-05-15
Alejandro Perin1004India2026-06-09
Stacey Maclead1005Australia2026-05-25
Maisha Rulapaugh1006Germany2026-05-25
Silvio Slusarski1007United Kingdom2026-05-19
Wickens Nestle1008Italy2026-06-11
Aruna Figeroa1009Brazil2026-06-07
Murillo Malet1010Australia2026-05-15
Izzy Garufi1011Canada2026-05-17
Leja Caldarera1012Brazil2026-05-31
Munro Ferencz1013Italy2026-05-26
Faith Gillian1014Canada2026-06-12
Misaki Royster1015India2026-05-26
Juan Wieser1016Russia2026-06-06
Aika Inouye1017Spain2026-06-04
Clifford Rim1018Italy2026-06-01
Aditya Kusko1019France2026-05-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyFranceXuxue Feng UNQUALIFIED
Cody SaylorsBrazilAnna Fali NEGOTIATION
Juan WieserBrazilXuxue Feng NEW
Silvio SlusarskiGermanyAsiya Javayant NEGOTIATION
Ivar PaprockiGermanyAmy Elsner NEW
Silvio SlusarskiJapanAmy Elsner NEW
Kadeem FlosiGermanyOnyama Limba RENEWAL
David DarakjyGermanyBernardo Dominic QUALIFIED
Emily WhobreyIndiaOnyama Limba QUALIFIED
Jones VocelkaSpainIoni Bowcher QUALIFIED
Jones VocelkaJapanBernardo Dominic RENEWAL
Nicolas IturbideGermanyXuxue Feng UNQUALIFIED
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Kaitlin OstroskyArgentinaAmy Elsner RENEWAL
Julie StensethJapanStephen Shaw PROPOSAL
Aruna FigeroaJapanIvan Magalhaes RENEWAL
Munro FerenczCanadaAmy Elsner PROPOSAL
Octavia MaletArgentinaXuxue Feng RENEWAL
Nicolas IturbideCanadaAmy Elsner RENEWAL
Aika InouyeGermanyStephen Shaw NEW
Jefferson SchemmerJapanOnyama Limba PROPOSAL
Salvatore StockhamBrazilAmy Elsner RENEWAL
Misaki RoysterUnited KingdomIvan Magalhaes NEGOTIATION
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Maria MarrierBrazilXuxue Feng RENEWAL
Darci PoquetteFranceAmy Elsner PROPOSAL
Chavez BriddickFranceOnyama Limba NEW
Arvin AlbaresFranceAmy Elsner PROPOSAL
Chavez BriddickArgentinaAnna Fali NEGOTIATION
Smith GlickIndiaStephen Shaw NEW
Alejandro PerinBrazilElwin Sharvill UNQUALIFIED
Leon OldroydJapanAsiya Javayant NEW
James ButtJapanStephen Shaw PROPOSAL
Alejandro PerinGermanyIvan Magalhaes PROPOSAL
Maisha RulapaughBrazilXuxue Feng UNQUALIFIED
Ashley DoeArgentinaAsiya Javayant NEGOTIATION
Aditya KuskoFranceAmy Elsner RENEWAL
Jefferson SchemmerRussiaAmy Elsner NEGOTIATION
Munro FerenczItalyIvan Magalhaes NEGOTIATION
Alejandro PerinBrazilOnyama Limba RENEWAL

<style>
    .ui-datatable-frozenlayout-left {
        width: 20%;
    }

    .ui-datatable-frozenlayout-right {
        width: 80%;
    }
</style>


<h:form>
    <div class="card">
        <h5 style="margin-top:0">Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers1}" scrollable="true" scrollHeight="250">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers2}" scrollable="true" scrollWidth="600">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal and Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers3}" scrollable="true" scrollWidth="50%" scrollHeight="250">
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
            <p:column headerText="Company" footerText="Company">
                <h:outputText value="#{customer.company}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
            <p:column headerText="Activity" footerText="Activity">
                <h:outputText value="#{customer.activity}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers4}" scrollable="true" scrollHeight="250"
                     frozenRows="2">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Columns</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers5}" scrollable="true" scrollHeight="250"
                     scrollWidth="300" frozenColumns="1">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h3>On-Demand Data</h3>
        <p:dataTable var="customer" value="#{dtScrollView.customers6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Virtual Scrolling - 20000 Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true"
                     virtualScroll="true" scrollHeight="200" rows="40" style="margin-bottom:0">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>