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
Aika InouyeBrazilIvan Magalhaes NEW
David DarakjyBrazilOnyama Limba RENEWAL
Johnson SergiItalyAsiya Javayant RENEWAL
Salvatore StockhamUnited KingdomBernardo Dominic RENEWAL
Ivar PaprockiIndiaIvan Magalhaes QUALIFIED
Maisha RulapaughGermanyAsiya Javayant QUALIFIED
Aditya KuskoJapanAsiya Javayant RENEWAL
Aditya KuskoGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaArgentinaStephen Shaw RENEWAL
Maria MarrierArgentinaAsiya Javayant RENEWAL
Ricardo GauchoItalyAnna Fali PROPOSAL
Isabel BowleyUnited KingdomIvan Magalhaes UNQUALIFIED
Julie StensethItalyAnna Fali RENEWAL
Aditya KuskoArgentinaAsiya Javayant QUALIFIED
Ivar PaprockiJapanIvan Magalhaes NEGOTIATION
Munro FerenczIndiaAsiya Javayant NEGOTIATION
Adams MorascaArgentinaAmy Elsner RENEWAL
Jefferson SchemmerFranceAnna Fali UNQUALIFIED
Greenwood BologniaCanadaElwin Sharvill PROPOSAL
Maria MarrierJapanIoni Bowcher PROPOSAL
Jennifer AmigonJapanStephen Shaw UNQUALIFIED
Murillo MaletSpainIoni Bowcher NEGOTIATION
James ButtArgentinaAnna Fali UNQUALIFIED
Ashley DoeSpainBernardo Dominic NEGOTIATION
Chavez BriddickCanadaOnyama Limba NEGOTIATION
Octavia MaletRussiaIvan Magalhaes PROPOSAL
Murillo MaletSpainAnna Fali QUALIFIED
Ashley DoeBrazilBernardo Dominic PROPOSAL
Antonio CaudyUnited KingdomBernardo Dominic QUALIFIED
Izzy GarufiRussiaIvan Magalhaes RENEWAL
Faith GillianJapanXuxue Feng RENEWAL
Octavia MaletRussiaBernardo Dominic UNQUALIFIED
Murillo MaletIndiaXuxue Feng UNQUALIFIED
Misaki RoysterAustraliaIvan Magalhaes UNQUALIFIED
Alejandro PerinGermanyBernardo Dominic RENEWAL
Silvio SlusarskiAustraliaStephen Shaw NEW
Smith GlickFranceStephen Shaw NEGOTIATION
Jefferson SchemmerSpainXuxue Feng UNQUALIFIED
Mujtaba NickaArgentinaElwin Sharvill NEGOTIATION
David DarakjyRussiaBernardo Dominic RENEWAL
Claire TollnerCanadaIvan Magalhaes RENEWAL
Johnson SergiUnited KingdomAmy Elsner NEW
Ricardo GauchoAustraliaIoni Bowcher NEGOTIATION
Ivar PaprockiGermanyXuxue Feng NEW
Izzy GarufiSpainAnna Fali PROPOSAL
Ivar PaprockiArgentinaIoni Bowcher RENEWAL
Darci PoquetteBrazilIoni Bowcher NEW
Maisha RulapaughIndiaXuxue Feng PROPOSAL
Cody SaylorsJapanIvan Magalhaes NEW
Costa DilliardBrazilElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaIndiaElwin Sharvill RENEWAL
Nicolas IturbideAustraliaElwin Sharvill PROPOSAL
Misaki RoysterRussiaElwin Sharvill UNQUALIFIED
Sinclair WaycottSpainXuxue Feng NEW
Morrow RutaUnited KingdomXuxue Feng PROPOSAL
Leja CaldareraIndiaElwin Sharvill RENEWAL
Maria MarrierAustraliaOnyama Limba NEGOTIATION
Emily WhobreyBrazilElwin Sharvill NEW
Tony FollerCanadaAnna Fali QUALIFIED
Kaitlin OstroskyIndiaStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000James ButtBrazil2025-06-25King, Christopher A Esq PROPOSAL59Xuxue Feng
1001Mayumi KolmetzFrance2025-06-10Truhlar And Truhlar Attys NEW20Asiya Javayant
1002Tony FollerRussia2025-06-14Benton, John B Jr PROPOSAL49Elwin Sharvill
1003Morrow RutaIndia2025-06-10Chapman, Ross E Esq NEGOTIATION8Stephen Shaw
1004Maria MarrierSpain2025-06-24Commercial Press NEGOTIATION63Ioni Bowcher
1005Maria MarrierRussia2025-06-24Rangoni Of Florence PROPOSAL71Amy Elsner
1006Johnson SergiJapan2025-06-11Buckley Miller Wright QUALIFIED11Bernardo Dominic
1007Antonio CaudyIndia2025-06-18Buckley Miller Wright UNQUALIFIED20Bernardo Dominic
1008Emily WhobreyAustralia2025-06-14Benton, John B Jr UNQUALIFIED78Xuxue Feng
1009Mujtaba NickaGermany2025-06-21Buckley Miller Wright PROPOSAL86Asiya Javayant
1010Ashley DoeBrazil2025-06-30Benton, John B Jr QUALIFIED73Anna Fali
1011Mayumi KolmetzUnited Kingdom2025-07-02King, Christopher A Esq NEGOTIATION13Asiya Javayant
1012Juan WieserBrazil2025-06-16Commercial Press PROPOSAL97Anna Fali
1013Aika InouyeSpain2025-07-03Chapman, Ross E Esq PROPOSAL85Onyama Limba
1014Mujtaba NickaIndia2025-06-09Dorl, James J Esq NEGOTIATION79Ioni Bowcher
1015Wickens NestleUnited Kingdom2025-06-21Truhlar And Truhlar Attys RENEWAL95Onyama Limba
1016Darci PoquetteSpain2025-06-15Rousseaux, Michael Esq QUALIFIED3Ioni Bowcher
1017Rodrigues CampainIndia2025-06-29Buckley Miller Wright PROPOSAL95Anna Fali
1018Nicolas IturbideJapan2025-06-21King, Christopher A Esq QUALIFIED26Ivan Magalhaes
1019Rodrigues CampainItaly2025-06-23Commercial Press NEW41Anna Fali
1020Stacey MacleadCanada2025-06-14Printing Dimensions NEGOTIATION33Xuxue Feng
1021Clifford RimCanada2025-06-19Rousseaux, Michael Esq QUALIFIED17Xuxue Feng
1022Izzy GarufiFrance2025-06-16Feltz Printing Service QUALIFIED99Bernardo Dominic
1023Johnson SergiItaly2025-06-30Dorl, James J Esq QUALIFIED93Amy Elsner
1024Silvio SlusarskiCanada2025-07-05Chapman, Ross E Esq NEGOTIATION7Asiya Javayant
1025Leon OldroydRussia2025-06-23Feiner Bros NEGOTIATION38Ioni Bowcher
1026Morrow RutaSpain2025-06-17Dorl, James J Esq UNQUALIFIED5Onyama Limba
1027Emily WhobreyCanada2025-06-20Chapman, Ross E Esq UNQUALIFIED63Ivan Magalhaes
1028Stacey MacleadAustralia2025-06-20Feltz Printing Service NEW12Bernardo Dominic
1029Jeanfrancois VenereBrazil2025-06-17Morlong Associates RENEWAL17Stephen Shaw
1030Isabel BowleyCanada2025-06-20King, Christopher A Esq PROPOSAL72Anna Fali
1031Kadeem FlosiItaly2025-06-17Feltz Printing Service NEGOTIATION84Ivan Magalhaes
1032Emily WhobreyBrazil2025-07-05Commercial Press QUALIFIED49Xuxue Feng
1033Wickens NestleSpain2025-06-19Truhlar And Truhlar Attys QUALIFIED69Elwin Sharvill
1034Faith GillianItaly2025-06-11Dorl, James J Esq PROPOSAL64Onyama Limba
1035Murillo MaletIndia2025-06-16Truhlar And Truhlar Attys UNQUALIFIED48Bernardo Dominic
1036Arvin AlbaresArgentina2025-06-13Rousseaux, Michael Esq PROPOSAL2Elwin Sharvill
1037Ricardo GauchoItaly2025-06-12Feiner Bros QUALIFIED1Ioni Bowcher
1038Ricardo GauchoUnited Kingdom2025-06-19Rangoni Of Florence NEGOTIATION81Onyama Limba
1039Leja CaldareraRussia2025-06-18Rangoni Of Florence NEGOTIATION30Xuxue Feng
1040Tony FollerBrazil2025-06-17Chanay, Jeffrey A Esq UNQUALIFIED98Xuxue Feng
1041Nicolas IturbideRussia2025-06-21King, Christopher A Esq UNQUALIFIED31Ioni Bowcher
1042Murillo MaletSpain2025-06-09Benton, John B Jr NEGOTIATION5Ivan Magalhaes
1043Kadeem FlosiRussia2025-06-28Printing Dimensions RENEWAL68Asiya Javayant
1044Ashley DoeRussia2025-06-20Commercial Press PROPOSAL6Xuxue Feng
1045Jefferson SchemmerItaly2025-06-26Rousseaux, Michael Esq RENEWAL64Ioni Bowcher
1046Cody SaylorsArgentina2025-06-25Morlong Associates UNQUALIFIED97Onyama Limba
1047Leon OldroydUnited Kingdom2025-06-29Benton, John B Jr RENEWAL37Ioni Bowcher
1048Mujtaba NickaRussia2025-06-18King, Christopher A Esq PROPOSAL6Xuxue Feng
1049Chavez BriddickIndia2025-07-06Rousseaux, Michael Esq NEW83Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresArgentinaIvan Magalhaes RENEWAL
Tony FollerIndiaIvan Magalhaes UNQUALIFIED
Jones VocelkaItalyBernardo Dominic RENEWAL
Sinclair WaycottAustraliaIoni Bowcher UNQUALIFIED
Morrow RutaItalyAsiya Javayant UNQUALIFIED
Aruna FigeroaUnited KingdomAnna Fali NEGOTIATION
Costa DilliardAustraliaIvan Magalhaes PROPOSAL
Smith GlickFranceAnna Fali UNQUALIFIED
Mujtaba NickaRussiaStephen Shaw NEW
Smith GlickGermanyAnna Fali UNQUALIFIED
Juan WieserJapanBernardo Dominic NEGOTIATION
Smith GlickUnited KingdomXuxue Feng QUALIFIED
Isabel BowleyIndiaXuxue Feng NEW
Jeanfrancois VenereFranceAnna Fali PROPOSAL
Aika InouyeAustraliaIoni Bowcher NEW
Tony FollerCanadaIoni Bowcher UNQUALIFIED
Rodrigues CampainAustraliaElwin Sharvill PROPOSAL
Aika InouyeJapanStephen Shaw PROPOSAL
Leon OldroydIndiaOnyama Limba NEGOTIATION
Antonio CaudyCanadaAsiya Javayant NEW
Misaki RoysterFranceElwin Sharvill NEGOTIATION
Johnson SergiSpainBernardo Dominic RENEWAL
Jones VocelkaUnited KingdomBernardo Dominic QUALIFIED
Rodrigues CampainRussiaXuxue Feng RENEWAL
Juan WieserRussiaIvan Magalhaes QUALIFIED
Leja CaldareraUnited KingdomIoni Bowcher PROPOSAL
Salvatore StockhamCanadaStephen Shaw QUALIFIED
Arvin AlbaresAustraliaBernardo Dominic UNQUALIFIED
Mujtaba NickaCanadaAnna Fali RENEWAL
David DarakjyBrazilIvan Magalhaes PROPOSAL
Murillo MaletBrazilXuxue Feng NEGOTIATION
Emily WhobreyRussiaAnna Fali PROPOSAL
Murillo MaletArgentinaElwin Sharvill NEW
Nicolas IturbideArgentinaAsiya Javayant PROPOSAL
Ashley DoeAustraliaOnyama Limba RENEWAL
Cody SaylorsJapanAmy Elsner NEW
Greenwood BologniaBrazilXuxue Feng QUALIFIED
Adams MorascaUnited KingdomStephen Shaw QUALIFIED
Mayumi KolmetzGermanyAmy Elsner UNQUALIFIED
Tony FollerGermanyAsiya Javayant NEGOTIATION
Leon OldroydGermanyAmy Elsner PROPOSAL
Claire TollnerBrazilIvan Magalhaes NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill RENEWAL
Chavez BriddickJapanOnyama Limba UNQUALIFIED
Wickens NestleRussiaIvan Magalhaes NEW
Faith GillianJapanIoni Bowcher NEW
Octavia MaletRussiaOnyama Limba PROPOSAL
Maria MarrierIndiaXuxue Feng NEW
Emily WhobreyBrazilAsiya Javayant NEGOTIATION
Leja CaldareraItalyAsiya Javayant NEW
Frozen Columns
Name
Alejandro Perin
Clifford Rim
Isabel Bowley
Darci Poquette
Kaitlin Ostrosky
Julie Stenseth
Izzy Garufi
Salvatore Stockham
Jefferson Schemmer
Maisha Rulapaugh
Murillo Malet
Jeanfrancois Venere
Antonio Caudy
Claire Tollner
Jefferson Schemmer
Aditya Kusko
Maisha Rulapaugh
Ashley Doe
Greenwood Bolognia
Antonio Caudy
Adams Morasca
Salvatore Stockham
Wickens Nestle
Tony Foller
Munro Ferencz
Ivar Paprocki
Alejandro Perin
Tony Foller
Ivar Paprocki
Kadeem Flosi
Maria Marrier
Silvio Slusarski
Kadeem Flosi
Adams Morasca
Adams Morasca
Emily Whobrey
Aditya Kusko
Jefferson Schemmer
Darci Poquette
Jones Vocelka
Aditya Kusko
Costa Dilliard
Julie Stenseth
Izzy Garufi
Ivar Paprocki
Ashley Doe
Arvin Albares
Francesco Shinko
Mujtaba Nicka
Costa Dilliard
IdCountryDate
1000Canada2025-07-01
1001Russia2025-07-02
1002Argentina2025-06-25
1003Germany2025-06-15
1004Germany2025-06-23
1005Spain2025-06-27
1006Japan2025-06-09
1007India2025-07-03
1008Australia2025-06-17
1009Argentina2025-06-25
1010Argentina2025-06-09
1011France2025-06-15
1012France2025-06-12
1013Germany2025-06-21
1014United Kingdom2025-07-04
1015India2025-06-27
1016Argentina2025-06-22
1017Australia2025-06-11
1018Canada2025-06-21
1019Canada2025-06-22
1020Russia2025-07-06
1021Russia2025-06-12
1022United Kingdom2025-07-04
1023Japan2025-06-20
1024Brazil2025-06-09
1025United Kingdom2025-07-07
1026Germany2025-06-22
1027Brazil2025-06-23
1028Canada2025-06-09
1029United Kingdom2025-06-15
1030Germany2025-07-01
1031Germany2025-06-08
1032United Kingdom2025-06-29
1033United Kingdom2025-06-23
1034Germany2025-06-20
1035India2025-07-01
1036United Kingdom2025-06-30
1037India2025-06-19
1038India2025-06-17
1039Italy2025-07-02
1040Germany2025-06-11
1041United Kingdom2025-06-14
1042France2025-06-25
1043Canada2025-07-04
1044Russia2025-06-09
1045United Kingdom2025-06-08
1046Spain2025-06-16
1047Russia2025-06-20
1048Canada2025-06-12
1049Spain2025-06-23

On-Demand Data

NameIdCountryDate
Smith Glick1000Australia2025-06-23
Darci Poquette1001India2025-06-08
Deepesh Chui1002India2025-06-10
Morrow Ruta1003Brazil2025-06-28
Mayumi Kolmetz1004France2025-06-10
Ricardo Gaucho1005Japan2025-07-02
Darci Poquette1006Argentina2025-06-17
Faith Gillian1007Canada2025-07-03
Mayumi Kolmetz1008Japan2025-06-13
Rodrigues Campain1009India2025-07-02
Maria Marrier1010Italy2025-07-04
Emily Whobrey1011Spain2025-06-15
Leon Oldroyd1012Japan2025-06-25
Francesco Shinko1013Brazil2025-06-30
Wickens Nestle1014Brazil2025-06-22
Jefferson Schemmer1015Brazil2025-06-08
Emily Whobrey1016Brazil2025-06-12
Stacey Maclead1017India2025-06-22
Ivar Paprocki1018Brazil2025-06-19
Francesco Shinko1019Canada2025-07-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Johnson SergiBrazilIoni Bowcher PROPOSAL
Stacey MacleadBrazilOnyama Limba QUALIFIED
Rodrigues CampainItalyXuxue Feng QUALIFIED
Clifford RimBrazilElwin Sharvill NEW
Johnson SergiUnited KingdomIvan Magalhaes UNQUALIFIED
Tony FollerJapanIoni Bowcher QUALIFIED
Octavia MaletItalyIoni Bowcher NEW
Mayumi KolmetzCanadaElwin Sharvill NEW
Claire TollnerJapanStephen Shaw QUALIFIED
Munro FerenczCanadaXuxue Feng NEGOTIATION
Ricardo GauchoGermanyIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyIoni Bowcher UNQUALIFIED
Adams MorascaGermanyAmy Elsner NEW
Silvio SlusarskiRussiaOnyama Limba UNQUALIFIED
Alejandro PerinUnited KingdomBernardo Dominic PROPOSAL
Emily WhobreyGermanyStephen Shaw QUALIFIED
Murillo MaletGermanyIoni Bowcher NEGOTIATION
Costa DilliardSpainXuxue Feng NEGOTIATION
Ivar PaprockiIndiaXuxue Feng RENEWAL
Darci PoquetteArgentinaAmy Elsner NEW
Arvin AlbaresBrazilXuxue Feng NEW
Antonio CaudyCanadaIoni Bowcher QUALIFIED
Sinclair WaycottRussiaStephen Shaw QUALIFIED
Rodrigues CampainSpainAsiya Javayant QUALIFIED
Nicolas IturbideArgentinaAnna Fali PROPOSAL
Costa DilliardGermanyOnyama Limba NEGOTIATION
Faith GillianJapanOnyama Limba NEGOTIATION
Murillo MaletIndiaAnna Fali NEGOTIATION
Jennifer AmigonItalyXuxue Feng NEW
Cody SaylorsAustraliaAmy Elsner NEGOTIATION
Kaitlin OstroskySpainIvan Magalhaes UNQUALIFIED
Rodrigues CampainIndiaAnna Fali PROPOSAL
Juan WieserUnited KingdomIoni Bowcher RENEWAL
Alejandro PerinIndiaIoni Bowcher NEGOTIATION
Cody SaylorsUnited KingdomBernardo Dominic UNQUALIFIED
Kadeem FlosiBrazilIoni Bowcher UNQUALIFIED
Misaki RoysterItalyElwin Sharvill UNQUALIFIED
Darci PoquetteUnited KingdomAmy Elsner PROPOSAL
Ashley DoeItalyAnna Fali PROPOSAL
Isabel BowleyUnited KingdomElwin Sharvill QUALIFIED

<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>