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
Stacey MacleadRussiaAnna Fali NEW
Ivar PaprockiCanadaAnna Fali NEGOTIATION
Silvio SlusarskiGermanyAnna Fali UNQUALIFIED
Chavez BriddickFranceXuxue Feng PROPOSAL
Greenwood BologniaArgentinaAsiya Javayant PROPOSAL
Clifford RimBrazilStephen Shaw NEW
Isabel BowleyCanadaAsiya Javayant NEGOTIATION
Faith GillianUnited KingdomOnyama Limba NEGOTIATION
Cody SaylorsGermanyStephen Shaw UNQUALIFIED
Aditya KuskoFranceIvan Magalhaes UNQUALIFIED
Aruna FigeroaUnited KingdomBernardo Dominic PROPOSAL
Ricardo GauchoBrazilStephen Shaw RENEWAL
Stacey MacleadSpainAsiya Javayant QUALIFIED
Cody SaylorsArgentinaAsiya Javayant PROPOSAL
Jennifer AmigonBrazilBernardo Dominic QUALIFIED
Murillo MaletFranceOnyama Limba RENEWAL
Greenwood BologniaItalyXuxue Feng PROPOSAL
Wickens NestleRussiaStephen Shaw UNQUALIFIED
Rodrigues CampainAustraliaXuxue Feng PROPOSAL
Wickens NestleUnited KingdomXuxue Feng QUALIFIED
Jeanfrancois VenereSpainIoni Bowcher UNQUALIFIED
Jefferson SchemmerRussiaOnyama Limba QUALIFIED
Wickens NestleArgentinaAsiya Javayant UNQUALIFIED
Stacey MacleadRussiaAnna Fali PROPOSAL
Mujtaba NickaSpainAsiya Javayant NEGOTIATION
Arvin AlbaresUnited KingdomIoni Bowcher QUALIFIED
Johnson SergiAustraliaIvan Magalhaes QUALIFIED
Emily WhobreyJapanAmy Elsner NEGOTIATION
Deepesh ChuiSpainBernardo Dominic PROPOSAL
Greenwood BologniaRussiaAsiya Javayant QUALIFIED
Chavez BriddickIndiaAsiya Javayant RENEWAL
Claire TollnerArgentinaAnna Fali QUALIFIED
Aruna FigeroaUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes NEW
Costa DilliardGermanyStephen Shaw UNQUALIFIED
Kadeem FlosiCanadaStephen Shaw NEW
Leon OldroydAustraliaIvan Magalhaes UNQUALIFIED
Greenwood BologniaIndiaIvan Magalhaes NEW
Misaki RoysterRussiaOnyama Limba NEW
David DarakjyBrazilAsiya Javayant PROPOSAL
Mayumi KolmetzRussiaAmy Elsner NEW
Alejandro PerinCanadaStephen Shaw NEGOTIATION
Faith GillianRussiaOnyama Limba PROPOSAL
Francesco ShinkoGermanyAmy Elsner NEGOTIATION
Faith GillianItalyAsiya Javayant NEW
Aditya KuskoCanadaAsiya Javayant NEW
Kadeem FlosiUnited KingdomXuxue Feng QUALIFIED
Deepesh ChuiItalyIoni Bowcher RENEWAL
Juan WieserJapanAnna Fali PROPOSAL
Darci PoquetteGermanyBernardo Dominic NEW
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoIndiaIoni Bowcher QUALIFIED
Francesco ShinkoBrazilAmy Elsner PROPOSAL
Aditya KuskoArgentinaIoni Bowcher QUALIFIED
Deepesh ChuiCanadaElwin Sharvill PROPOSAL
Sinclair WaycottRussiaAmy Elsner QUALIFIED
Smith GlickCanadaStephen Shaw NEGOTIATION
Adams MorascaIndiaOnyama Limba PROPOSAL
Wickens NestleIndiaIoni Bowcher UNQUALIFIED
Salvatore StockhamSpainAnna Fali NEW
Izzy GarufiGermanyOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsArgentina2025-09-25Truhlar And Truhlar Attys QUALIFIED5Ioni Bowcher
1001Isabel BowleyAustralia2025-10-05Printing Dimensions NEW55Onyama Limba
1002Faith GillianCanada2025-10-02Feiner Bros NEW0Bernardo Dominic
1003Johnson SergiCanada2025-10-12Chanay, Jeffrey A Esq NEW1Ioni Bowcher
1004Smith GlickGermany2025-10-05Truhlar And Truhlar Attys PROPOSAL7Asiya Javayant
1005Clifford RimArgentina2025-09-24Feltz Printing Service QUALIFIED5Amy Elsner
1006Mujtaba NickaItaly2025-10-02Feiner Bros PROPOSAL31Xuxue Feng
1007Kadeem FlosiCanada2025-10-15Chapman, Ross E Esq UNQUALIFIED12Asiya Javayant
1008Maisha RulapaughSpain2025-09-24Chemel, James L Cpa PROPOSAL81Xuxue Feng
1009Jones VocelkaAustralia2025-10-01Morlong Associates NEW43Xuxue Feng
1010Jones VocelkaBrazil2025-10-18Commercial Press NEGOTIATION77Ioni Bowcher
1011Claire TollnerJapan2025-10-13Feiner Bros QUALIFIED11Amy Elsner
1012Costa DilliardFrance2025-10-08Truhlar And Truhlar Attys QUALIFIED26Ivan Magalhaes
1013Jennifer AmigonIndia2025-10-03Printing Dimensions QUALIFIED29Ioni Bowcher
1014Alejandro PerinAustralia2025-10-17King, Christopher A Esq NEW66Amy Elsner
1015Alejandro PerinFrance2025-10-16Chemel, James L Cpa NEW23Stephen Shaw
1016Octavia MaletIndia2025-10-11Benton, John B Jr NEGOTIATION92Ivan Magalhaes
1017Isabel BowleyFrance2025-10-06Printing Dimensions RENEWAL70Onyama Limba
1018Rodrigues CampainCanada2025-10-08Buckley Miller Wright RENEWAL28Xuxue Feng
1019Ashley DoeIndia2025-10-05Feltz Printing Service QUALIFIED92Elwin Sharvill
1020Stacey MacleadBrazil2025-09-25Rangoni Of Florence RENEWAL6Bernardo Dominic
1021Rodrigues CampainAustralia2025-10-09Printing Dimensions PROPOSAL3Onyama Limba
1022Jones VocelkaGermany2025-09-20Rousseaux, Michael Esq UNQUALIFIED69Anna Fali
1023Salvatore StockhamRussia2025-09-24Buckley Miller Wright RENEWAL51Elwin Sharvill
1024Maria MarrierSpain2025-10-17Truhlar And Truhlar Attys NEGOTIATION54Ivan Magalhaes
1025Jeanfrancois VenereItaly2025-10-10Chemel, James L Cpa QUALIFIED90Onyama Limba
1026Morrow RutaArgentina2025-09-27Chemel, James L Cpa RENEWAL12Stephen Shaw
1027Ivar PaprockiIndia2025-10-02Truhlar And Truhlar Attys NEW67Stephen Shaw
1028Jones VocelkaJapan2025-10-12Chapman, Ross E Esq NEGOTIATION15Amy Elsner
1029Faith GillianArgentina2025-09-21Chanay, Jeffrey A Esq QUALIFIED37Stephen Shaw
1030Ricardo GauchoCanada2025-10-19Printing Dimensions NEGOTIATION5Bernardo Dominic
1031Johnson SergiCanada2025-10-05Chanay, Jeffrey A Esq NEGOTIATION6Xuxue Feng
1032Faith GillianIndia2025-09-24Chanay, Jeffrey A Esq NEW69Ioni Bowcher
1033Ricardo GauchoRussia2025-10-10Buckley Miller Wright NEGOTIATION59Elwin Sharvill
1034Julie StensethItaly2025-09-28Feltz Printing Service NEGOTIATION70Elwin Sharvill
1035Kadeem FlosiJapan2025-10-04King, Christopher A Esq PROPOSAL8Xuxue Feng
1036Jones VocelkaAustralia2025-10-07Rousseaux, Michael Esq RENEWAL86Ivan Magalhaes
1037Salvatore StockhamBrazil2025-09-27Buckley Miller Wright RENEWAL2Xuxue Feng
1038Leon OldroydJapan2025-09-28Rangoni Of Florence RENEWAL97Ioni Bowcher
1039Octavia MaletRussia2025-10-01Morlong Associates UNQUALIFIED36Asiya Javayant
1040Silvio SlusarskiArgentina2025-10-10Commercial Press NEGOTIATION38Bernardo Dominic
1041Costa DilliardGermany2025-10-16Feltz Printing Service PROPOSAL33Elwin Sharvill
1042Francesco ShinkoBrazil2025-10-14Dorl, James J Esq QUALIFIED59Xuxue Feng
1043Stacey MacleadFrance2025-09-24Printing Dimensions NEGOTIATION85Ivan Magalhaes
1044Maria MarrierJapan2025-10-12Feiner Bros NEGOTIATION65Stephen Shaw
1045Costa DilliardJapan2025-10-14Truhlar And Truhlar Attys UNQUALIFIED36Asiya Javayant
1046Darci PoquetteSpain2025-10-14Feltz Printing Service NEW35Ioni Bowcher
1047Jennifer AmigonAustralia2025-09-24Dorl, James J Esq UNQUALIFIED20Asiya Javayant
1048Aika InouyeGermany2025-09-27Commercial Press UNQUALIFIED56Xuxue Feng
1049Francesco ShinkoFrance2025-09-22Morlong Associates UNQUALIFIED5Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Salvatore StockhamItalyStephen Shaw NEGOTIATION
Aditya KuskoSpainAsiya Javayant UNQUALIFIED
Salvatore StockhamAustraliaAsiya Javayant NEGOTIATION
Greenwood BologniaSpainAmy Elsner UNQUALIFIED
Isabel BowleySpainOnyama Limba PROPOSAL
David DarakjyCanadaAsiya Javayant NEW
Juan WieserAustraliaOnyama Limba QUALIFIED
Maisha RulapaughArgentinaElwin Sharvill PROPOSAL
Jeanfrancois VenereUnited KingdomXuxue Feng RENEWAL
Ricardo GauchoCanadaStephen Shaw UNQUALIFIED
Sinclair WaycottCanadaIoni Bowcher QUALIFIED
Jefferson SchemmerSpainIoni Bowcher RENEWAL
Jeanfrancois VenereSpainStephen Shaw PROPOSAL
Smith GlickUnited KingdomAsiya Javayant RENEWAL
Aruna FigeroaSpainAsiya Javayant UNQUALIFIED
Alejandro PerinRussiaIoni Bowcher NEGOTIATION
Aika InouyeUnited KingdomAnna Fali UNQUALIFIED
James ButtIndiaStephen Shaw PROPOSAL
Ivar PaprockiSpainElwin Sharvill UNQUALIFIED
Rodrigues CampainCanadaAsiya Javayant NEGOTIATION
Alejandro PerinRussiaAnna Fali PROPOSAL
Wickens NestleUnited KingdomStephen Shaw UNQUALIFIED
Aika InouyeItalyOnyama Limba UNQUALIFIED
Aditya KuskoAustraliaXuxue Feng UNQUALIFIED
Misaki RoysterBrazilElwin Sharvill UNQUALIFIED
James ButtBrazilXuxue Feng NEW
Claire TollnerBrazilElwin Sharvill QUALIFIED
Claire TollnerRussiaAnna Fali UNQUALIFIED
Tony FollerJapanElwin Sharvill NEGOTIATION
Murillo MaletCanadaAmy Elsner UNQUALIFIED
Jefferson SchemmerJapanAnna Fali RENEWAL
Ricardo GauchoUnited KingdomXuxue Feng NEGOTIATION
Julie StensethAustraliaAmy Elsner QUALIFIED
Juan WieserIndiaElwin Sharvill PROPOSAL
Jeanfrancois VenereAustraliaBernardo Dominic PROPOSAL
Kaitlin OstroskyItalyBernardo Dominic NEW
Darci PoquetteCanadaIvan Magalhaes QUALIFIED
Francesco ShinkoAustraliaOnyama Limba RENEWAL
Octavia MaletArgentinaAnna Fali RENEWAL
Ricardo GauchoFranceIoni Bowcher UNQUALIFIED
Salvatore StockhamUnited KingdomIvan Magalhaes NEGOTIATION
Ricardo GauchoIndiaAnna Fali UNQUALIFIED
Ivar PaprockiCanadaBernardo Dominic NEW
Jones VocelkaIndiaAsiya Javayant UNQUALIFIED
Emily WhobreyUnited KingdomIvan Magalhaes RENEWAL
Claire TollnerRussiaBernardo Dominic PROPOSAL
Aika InouyeItalyAnna Fali UNQUALIFIED
Kadeem FlosiAustraliaAnna Fali RENEWAL
Greenwood BologniaUnited KingdomBernardo Dominic PROPOSAL
Jones VocelkaJapanXuxue Feng UNQUALIFIED
Frozen Columns
Name
Mujtaba Nicka
Aika Inouye
Jeanfrancois Venere
Stacey Maclead
Isabel Bowley
James Butt
Kadeem Flosi
Rodrigues Campain
Jones Vocelka
Chavez Briddick
James Butt
Aika Inouye
Leon Oldroyd
Emily Whobrey
Cody Saylors
Julie Stenseth
Francesco Shinko
Deepesh Chui
Adams Morasca
Kaitlin Ostrosky
Salvatore Stockham
Faith Gillian
Salvatore Stockham
Cody Saylors
Misaki Royster
Faith Gillian
Faith Gillian
Kaitlin Ostrosky
Smith Glick
Leja Caldarera
Murillo Malet
Tony Foller
Maria Marrier
Jeanfrancois Venere
Darci Poquette
Wickens Nestle
Darci Poquette
Kaitlin Ostrosky
Isabel Bowley
Munro Ferencz
Ashley Doe
Salvatore Stockham
Leja Caldarera
Ashley Doe
Juan Wieser
Misaki Royster
Costa Dilliard
Antonio Caudy
Munro Ferencz
Francesco Shinko
IdCountryDate
1000India2025-10-14
1001United Kingdom2025-10-16
1002Germany2025-10-02
1003France2025-10-12
1004United Kingdom2025-10-08
1005France2025-10-02
1006France2025-10-09
1007Australia2025-09-23
1008Argentina2025-10-17
1009United Kingdom2025-10-17
1010Russia2025-09-27
1011United Kingdom2025-10-12
1012Germany2025-10-10
1013Canada2025-10-04
1014Canada2025-10-01
1015United Kingdom2025-09-23
1016India2025-10-10
1017Germany2025-09-23
1018Spain2025-10-17
1019Russia2025-09-21
1020Germany2025-10-18
1021Germany2025-10-02
1022Japan2025-10-15
1023Italy2025-10-16
1024Australia2025-09-26
1025Russia2025-09-21
1026Spain2025-10-10
1027Argentina2025-09-21
1028United Kingdom2025-10-10
1029Germany2025-10-09
1030France2025-10-19
1031France2025-10-18
1032Argentina2025-10-01
1033India2025-10-15
1034France2025-09-24
1035Canada2025-10-14
1036Australia2025-09-20
1037India2025-09-30
1038France2025-10-06
1039United Kingdom2025-09-28
1040France2025-09-30
1041Argentina2025-09-29
1042Russia2025-09-22
1043United Kingdom2025-10-16
1044Argentina2025-10-05
1045Russia2025-09-20
1046Canada2025-10-01
1047United Kingdom2025-10-18
1048Japan2025-10-16
1049Spain2025-10-15

On-Demand Data

NameIdCountryDate
Ashley Doe1000Brazil2025-09-30
Maria Marrier1001Brazil2025-10-07
Clifford Rim1002Brazil2025-10-09
Maria Marrier1003France2025-10-14
Cody Saylors1004Italy2025-10-19
Silvio Slusarski1005Australia2025-09-30
Claire Tollner1006Germany2025-09-24
Jefferson Schemmer1007Russia2025-10-18
Maisha Rulapaugh1008Argentina2025-09-26
David Darakjy1009Germany2025-09-25
Jeanfrancois Venere1010France2025-09-23
Faith Gillian1011Japan2025-09-20
Emily Whobrey1012India2025-09-22
Stacey Maclead1013United Kingdom2025-09-21
Claire Tollner1014Canada2025-09-26
Munro Ferencz1015Germany2025-10-12
Adams Morasca1016United Kingdom2025-10-15
Emily Whobrey1017France2025-10-17
Mayumi Kolmetz1018France2025-09-28
Izzy Garufi1019France2025-09-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczAustraliaStephen Shaw NEW
Julie StensethUnited KingdomIoni Bowcher NEW
Rodrigues CampainItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoJapanIoni Bowcher UNQUALIFIED
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
Misaki RoysterJapanStephen Shaw PROPOSAL
Aruna FigeroaIndiaIvan Magalhaes PROPOSAL
Johnson SergiIndiaOnyama Limba NEGOTIATION
Clifford RimGermanyAsiya Javayant UNQUALIFIED
James ButtFranceIoni Bowcher NEGOTIATION
Costa DilliardItalyAmy Elsner NEGOTIATION
Kadeem FlosiJapanStephen Shaw QUALIFIED
Chavez BriddickCanadaBernardo Dominic NEGOTIATION
David DarakjySpainBernardo Dominic NEGOTIATION
Emily WhobreyRussiaBernardo Dominic PROPOSAL
Julie StensethJapanAnna Fali UNQUALIFIED
Jennifer AmigonBrazilAsiya Javayant PROPOSAL
Ashley DoeRussiaXuxue Feng PROPOSAL
Aruna FigeroaAustraliaBernardo Dominic PROPOSAL
Greenwood BologniaItalyBernardo Dominic NEW
Kaitlin OstroskySpainIoni Bowcher QUALIFIED
Wickens NestleBrazilAsiya Javayant PROPOSAL
Mayumi KolmetzJapanAnna Fali RENEWAL
Maria MarrierAustraliaElwin Sharvill UNQUALIFIED
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Francesco ShinkoGermanyIvan Magalhaes NEW
Arvin AlbaresJapanBernardo Dominic RENEWAL
Nicolas IturbideAustraliaElwin Sharvill QUALIFIED
Nicolas IturbideIndiaAmy Elsner RENEWAL
Jones VocelkaJapanOnyama Limba RENEWAL
Johnson SergiUnited KingdomIvan Magalhaes PROPOSAL
Smith GlickSpainIvan Magalhaes NEW
Aditya KuskoAustraliaAmy Elsner NEW
Mujtaba NickaBrazilXuxue Feng PROPOSAL
Ivar PaprockiFranceAmy Elsner PROPOSAL
Kaitlin OstroskySpainXuxue Feng RENEWAL
Nicolas IturbideBrazilIvan Magalhaes QUALIFIED
Julie StensethUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyRussiaAsiya Javayant NEW
Munro FerenczBrazilOnyama Limba NEGOTIATION

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