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
Mayumi KolmetzArgentinaElwin Sharvill UNQUALIFIED
Nicolas IturbideBrazilAnna Fali UNQUALIFIED
Izzy GarufiAustraliaAnna Fali RENEWAL
Costa DilliardGermanyElwin Sharvill NEGOTIATION
Aruna FigeroaAustraliaStephen Shaw PROPOSAL
David DarakjyBrazilIoni Bowcher QUALIFIED
Darci PoquetteRussiaIoni Bowcher UNQUALIFIED
Emily WhobreyUnited KingdomXuxue Feng NEW
Salvatore StockhamArgentinaAmy Elsner UNQUALIFIED
Silvio SlusarskiCanadaAmy Elsner UNQUALIFIED
Aditya KuskoAustraliaXuxue Feng PROPOSAL
Aditya KuskoAustraliaStephen Shaw QUALIFIED
Stacey MacleadCanadaXuxue Feng QUALIFIED
Izzy GarufiArgentinaIoni Bowcher NEGOTIATION
Chavez BriddickRussiaIvan Magalhaes RENEWAL
Deepesh ChuiItalyElwin Sharvill QUALIFIED
Jefferson SchemmerItalyBernardo Dominic QUALIFIED
David DarakjyFranceStephen Shaw NEGOTIATION
Ricardo GauchoCanadaOnyama Limba UNQUALIFIED
Claire TollnerGermanyIvan Magalhaes UNQUALIFIED
Izzy GarufiFranceAmy Elsner NEGOTIATION
Kadeem FlosiSpainAsiya Javayant NEGOTIATION
Leon OldroydFranceIvan Magalhaes UNQUALIFIED
Antonio CaudyBrazilIoni Bowcher NEGOTIATION
Julie StensethJapanOnyama Limba NEW
Morrow RutaRussiaAnna Fali UNQUALIFIED
Sinclair WaycottJapanAmy Elsner UNQUALIFIED
Aika InouyeItalyAnna Fali UNQUALIFIED
Alejandro PerinJapanBernardo Dominic QUALIFIED
Aika InouyeIndiaAsiya Javayant UNQUALIFIED
Aika InouyeUnited KingdomOnyama Limba PROPOSAL
Smith GlickJapanOnyama Limba NEGOTIATION
Mayumi KolmetzRussiaStephen Shaw QUALIFIED
Jennifer AmigonRussiaOnyama Limba NEW
Rodrigues CampainArgentinaAsiya Javayant RENEWAL
Jeanfrancois VenereFranceAsiya Javayant RENEWAL
Misaki RoysterFranceAsiya Javayant RENEWAL
Tony FollerCanadaXuxue Feng NEGOTIATION
Ivar PaprockiItalyElwin Sharvill NEGOTIATION
Mujtaba NickaIndiaIvan Magalhaes RENEWAL
Morrow RutaJapanStephen Shaw NEGOTIATION
Arvin AlbaresRussiaAsiya Javayant QUALIFIED
Greenwood BologniaJapanAsiya Javayant PROPOSAL
Silvio SlusarskiJapanAmy Elsner QUALIFIED
Faith GillianSpainAmy Elsner PROPOSAL
James ButtItalyAsiya Javayant QUALIFIED
Misaki RoysterItalyOnyama Limba NEGOTIATION
Mujtaba NickaIndiaAsiya Javayant RENEWAL
Munro FerenczBrazilOnyama Limba PROPOSAL
Munro FerenczAustraliaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Maria MarrierIndiaIoni Bowcher QUALIFIED
Clifford RimBrazilBernardo Dominic UNQUALIFIED
Misaki RoysterSpainIvan Magalhaes NEGOTIATION
Smith GlickRussiaIvan Magalhaes NEGOTIATION
Juan WieserAustraliaIoni Bowcher UNQUALIFIED
Stacey MacleadSpainAnna Fali NEGOTIATION
Johnson SergiSpainStephen Shaw QUALIFIED
Jefferson SchemmerUnited KingdomIvan Magalhaes QUALIFIED
Jeanfrancois VenereJapanElwin Sharvill NEW
Leja CaldareraAustraliaIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio CaudySpain2025-09-23Rousseaux, Michael Esq NEGOTIATION21Xuxue Feng
1001Arvin AlbaresUnited Kingdom2025-09-11Chemel, James L Cpa PROPOSAL63Amy Elsner
1002Octavia MaletUnited Kingdom2025-09-18Printing Dimensions NEGOTIATION61Anna Fali
1003Mayumi KolmetzSpain2025-09-07Dorl, James J Esq RENEWAL89Onyama Limba
1004Misaki RoysterArgentina2025-09-20Printing Dimensions RENEWAL7Amy Elsner
1005Jefferson SchemmerRussia2025-09-07Feiner Bros RENEWAL49Stephen Shaw
1006Mujtaba NickaAustralia2025-09-02Benton, John B Jr QUALIFIED51Ivan Magalhaes
1007Jefferson SchemmerRussia2025-09-10Dorl, James J Esq NEW22Anna Fali
1008Jones VocelkaUnited Kingdom2025-09-12Dorl, James J Esq UNQUALIFIED39Onyama Limba
1009Ricardo GauchoSpain2025-09-14Buckley Miller Wright NEGOTIATION42Amy Elsner
1010Chavez BriddickJapan2025-09-08Feiner Bros RENEWAL90Onyama Limba
1011Sinclair WaycottUnited Kingdom2025-09-28Chemel, James L Cpa NEW48Bernardo Dominic
1012Antonio CaudyCanada2025-09-02Chanay, Jeffrey A Esq NEGOTIATION84Xuxue Feng
1013Mayumi KolmetzAustralia2025-09-01Buckley Miller Wright UNQUALIFIED43Elwin Sharvill
1014Francesco ShinkoCanada2025-09-12Chanay, Jeffrey A Esq RENEWAL81Amy Elsner
1015Julie StensethUnited Kingdom2025-09-25Rousseaux, Michael Esq RENEWAL56Asiya Javayant
1016Cody SaylorsGermany2025-09-08Chapman, Ross E Esq UNQUALIFIED82Anna Fali
1017Jones VocelkaIndia2025-09-09Rousseaux, Michael Esq QUALIFIED85Ivan Magalhaes
1018Costa DilliardIndia2025-09-23Benton, John B Jr RENEWAL9Elwin Sharvill
1019Aika InouyeItaly2025-09-22Rangoni Of Florence NEGOTIATION36Stephen Shaw
1020Alejandro PerinItaly2025-09-03Rousseaux, Michael Esq NEW10Elwin Sharvill
1021Stacey MacleadGermany2025-09-14Truhlar And Truhlar Attys RENEWAL30Anna Fali
1022Kadeem FlosiFrance2025-09-01Printing Dimensions PROPOSAL36Bernardo Dominic
1023Isabel BowleyAustralia2025-09-16Feiner Bros NEW23Onyama Limba
1024Jones VocelkaAustralia2025-09-28Chemel, James L Cpa QUALIFIED81Amy Elsner
1025Jennifer AmigonArgentina2025-09-16Printing Dimensions QUALIFIED73Onyama Limba
1026Alejandro PerinAustralia2025-09-27Morlong Associates PROPOSAL99Bernardo Dominic
1027Misaki RoysterCanada2025-08-30Chemel, James L Cpa QUALIFIED40Anna Fali
1028Kaitlin OstroskyBrazil2025-09-12Chapman, Ross E Esq PROPOSAL60Xuxue Feng
1029David DarakjyUnited Kingdom2025-09-12Chanay, Jeffrey A Esq RENEWAL56Stephen Shaw
1030Stacey MacleadArgentina2025-09-02Feltz Printing Service NEGOTIATION19Onyama Limba
1031Octavia MaletIndia2025-09-02Chemel, James L Cpa NEGOTIATION43Xuxue Feng
1032Aruna FigeroaBrazil2025-09-02Truhlar And Truhlar Attys NEGOTIATION76Amy Elsner
1033Octavia MaletCanada2025-09-09Chemel, James L Cpa RENEWAL15Ioni Bowcher
1034Smith GlickUnited Kingdom2025-08-30Benton, John B Jr QUALIFIED24Amy Elsner
1035Aditya KuskoArgentina2025-09-10Dorl, James J Esq QUALIFIED99Elwin Sharvill
1036Johnson SergiFrance2025-09-06Dorl, James J Esq NEW58Bernardo Dominic
1037Stacey MacleadUnited Kingdom2025-09-07Rangoni Of Florence NEGOTIATION73Xuxue Feng
1038Isabel BowleySpain2025-09-05Morlong Associates NEW15Anna Fali
1039James ButtBrazil2025-09-14Feltz Printing Service NEGOTIATION79Elwin Sharvill
1040Jefferson SchemmerRussia2025-08-30Rousseaux, Michael Esq PROPOSAL61Anna Fali
1041Salvatore StockhamBrazil2025-09-04Feiner Bros NEW97Ivan Magalhaes
1042Kadeem FlosiSpain2025-09-19Feiner Bros UNQUALIFIED26Asiya Javayant
1043Chavez BriddickRussia2025-09-02Printing Dimensions QUALIFIED16Onyama Limba
1044Izzy GarufiAustralia2025-09-26Rangoni Of Florence QUALIFIED66Stephen Shaw
1045Munro FerenczCanada2025-09-14Dorl, James J Esq NEW20Ivan Magalhaes
1046Ashley DoeBrazil2025-09-07Chanay, Jeffrey A Esq PROPOSAL65Ioni Bowcher
1047Kadeem FlosiRussia2025-09-02Commercial Press NEGOTIATION0Anna Fali
1048Isabel BowleyUnited Kingdom2025-09-10Chemel, James L Cpa QUALIFIED1Asiya Javayant
1049Emily WhobreyCanada2025-09-06Benton, John B Jr UNQUALIFIED94Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiRussiaIvan Magalhaes RENEWAL
Aruna FigeroaArgentinaXuxue Feng NEW
Murillo MaletCanadaElwin Sharvill QUALIFIED
Aruna FigeroaBrazilStephen Shaw NEGOTIATION
Salvatore StockhamAustraliaElwin Sharvill NEGOTIATION
Juan WieserUnited KingdomAsiya Javayant RENEWAL
James ButtUnited KingdomStephen Shaw NEGOTIATION
Mujtaba NickaItalyIoni Bowcher NEGOTIATION
Misaki RoysterUnited KingdomAnna Fali NEGOTIATION
Stacey MacleadGermanyXuxue Feng PROPOSAL
Cody SaylorsGermanyIoni Bowcher UNQUALIFIED
Tony FollerJapanStephen Shaw QUALIFIED
Julie StensethIndiaBernardo Dominic NEGOTIATION
Aika InouyeBrazilElwin Sharvill QUALIFIED
Kaitlin OstroskyIndiaElwin Sharvill PROPOSAL
Munro FerenczSpainAmy Elsner UNQUALIFIED
Emily WhobreyJapanAnna Fali NEW
Maisha RulapaughItalyStephen Shaw QUALIFIED
Silvio SlusarskiCanadaElwin Sharvill NEW
Murillo MaletUnited KingdomBernardo Dominic UNQUALIFIED
Jones VocelkaArgentinaAmy Elsner PROPOSAL
Jefferson SchemmerRussiaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyBrazilIvan Magalhaes UNQUALIFIED
Maisha RulapaughSpainOnyama Limba RENEWAL
David DarakjyGermanyStephen Shaw QUALIFIED
Aruna FigeroaIndiaOnyama Limba NEW
Maria MarrierUnited KingdomIoni Bowcher QUALIFIED
Isabel BowleyRussiaIvan Magalhaes NEGOTIATION
Chavez BriddickAustraliaAnna Fali NEW
Jennifer AmigonCanadaAmy Elsner PROPOSAL
Smith GlickUnited KingdomIoni Bowcher QUALIFIED
James ButtJapanAmy Elsner NEGOTIATION
David DarakjyUnited KingdomElwin Sharvill NEW
Morrow RutaGermanyOnyama Limba RENEWAL
Costa DilliardAustraliaXuxue Feng NEGOTIATION
Clifford RimFranceStephen Shaw PROPOSAL
Costa DilliardGermanyIoni Bowcher UNQUALIFIED
Antonio CaudyJapanIvan Magalhaes RENEWAL
Costa DilliardGermanyElwin Sharvill PROPOSAL
Ricardo GauchoJapanElwin Sharvill QUALIFIED
Nicolas IturbideSpainAnna Fali NEGOTIATION
Stacey MacleadFranceAsiya Javayant QUALIFIED
Mayumi KolmetzSpainOnyama Limba NEGOTIATION
Smith GlickArgentinaElwin Sharvill NEGOTIATION
Izzy GarufiUnited KingdomAnna Fali QUALIFIED
Ricardo GauchoGermanyIoni Bowcher UNQUALIFIED
Silvio SlusarskiJapanIvan Magalhaes QUALIFIED
Emily WhobreyIndiaStephen Shaw NEGOTIATION
Misaki RoysterGermanyXuxue Feng UNQUALIFIED
Faith GillianJapanElwin Sharvill PROPOSAL
Frozen Columns
Name
Maisha Rulapaugh
Chavez Briddick
Claire Tollner
Smith Glick
Sinclair Waycott
Faith Gillian
James Butt
Izzy Garufi
Jefferson Schemmer
Faith Gillian
Munro Ferencz
Aruna Figeroa
Clifford Rim
Mayumi Kolmetz
Aruna Figeroa
David Darakjy
Smith Glick
Jefferson Schemmer
Deepesh Chui
Nicolas Iturbide
Isabel Bowley
Antonio Caudy
Mujtaba Nicka
Ricardo Gaucho
Wickens Nestle
Antonio Caudy
Claire Tollner
Maisha Rulapaugh
Jeanfrancois Venere
Jennifer Amigon
Aruna Figeroa
Kadeem Flosi
Munro Ferencz
Maisha Rulapaugh
Aruna Figeroa
Julie Stenseth
Emily Whobrey
Isabel Bowley
Darci Poquette
Deepesh Chui
Leja Caldarera
Ashley Doe
Izzy Garufi
Kaitlin Ostrosky
Leja Caldarera
Rodrigues Campain
Francesco Shinko
Aruna Figeroa
Octavia Malet
Jefferson Schemmer
IdCountryDate
1000United Kingdom2025-09-13
1001Germany2025-09-14
1002France2025-09-11
1003Brazil2025-09-17
1004United Kingdom2025-09-01
1005Japan2025-09-26
1006Russia2025-09-04
1007India2025-09-03
1008Italy2025-09-13
1009United Kingdom2025-09-22
1010Brazil2025-09-24
1011Brazil2025-09-22
1012France2025-09-04
1013Italy2025-09-20
1014Canada2025-09-03
1015Spain2025-08-30
1016Brazil2025-09-17
1017Japan2025-09-09
1018Canada2025-09-04
1019Brazil2025-09-15
1020Spain2025-09-28
1021Brazil2025-09-12
1022India2025-09-13
1023France2025-09-16
1024Australia2025-08-30
1025Japan2025-09-25
1026Germany2025-09-26
1027Brazil2025-09-03
1028Spain2025-09-11
1029Japan2025-09-21
1030India2025-08-31
1031Argentina2025-09-13
1032Russia2025-09-26
1033Japan2025-09-23
1034Japan2025-09-26
1035Italy2025-09-18
1036Russia2025-09-17
1037Japan2025-09-26
1038Spain2025-09-10
1039Argentina2025-09-23
1040India2025-09-07
1041Brazil2025-09-21
1042Australia2025-09-13
1043Argentina2025-09-01
1044Argentina2025-09-25
1045France2025-09-22
1046Japan2025-09-26
1047Australia2025-09-09
1048Spain2025-09-18
1049Russia2025-09-07

On-Demand Data

NameIdCountryDate
Wickens Nestle1000United Kingdom2025-09-27
Ivar Paprocki1001Spain2025-09-26
Ricardo Gaucho1002France2025-09-26
Jefferson Schemmer1003Argentina2025-09-25
Jones Vocelka1004India2025-09-04
Mujtaba Nicka1005Argentina2025-09-27
Aika Inouye1006Italy2025-09-07
Faith Gillian1007Canada2025-09-20
Izzy Garufi1008Spain2025-09-11
Aika Inouye1009United Kingdom2025-09-22
Greenwood Bolognia1010Argentina2025-09-17
Adams Morasca1011Brazil2025-09-21
Jefferson Schemmer1012Australia2025-09-15
Aika Inouye1013Italy2025-09-10
Mujtaba Nicka1014Italy2025-09-28
Cody Saylors1015Brazil2025-09-18
Aditya Kusko1016Spain2025-09-03
Ivar Paprocki1017Germany2025-09-03
Jeanfrancois Venere1018Japan2025-09-12
Wickens Nestle1019India2025-09-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiItalyAsiya Javayant UNQUALIFIED
Mujtaba NickaItalyOnyama Limba NEGOTIATION
Faith GillianFranceStephen Shaw UNQUALIFIED
Francesco ShinkoFranceXuxue Feng RENEWAL
Juan WieserGermanyAsiya Javayant RENEWAL
Ricardo GauchoIndiaIoni Bowcher NEGOTIATION
Deepesh ChuiBrazilElwin Sharvill NEW
Misaki RoysterItalyAmy Elsner QUALIFIED
Smith GlickFranceXuxue Feng QUALIFIED
Aika InouyeCanadaBernardo Dominic NEW
Jefferson SchemmerArgentinaElwin Sharvill UNQUALIFIED
Costa DilliardItalyStephen Shaw PROPOSAL
Salvatore StockhamCanadaIoni Bowcher PROPOSAL
Cody SaylorsSpainIvan Magalhaes RENEWAL
Rodrigues CampainBrazilBernardo Dominic NEGOTIATION
Leon OldroydRussiaAmy Elsner QUALIFIED
Ivar PaprockiGermanyAmy Elsner NEW
Tony FollerGermanyXuxue Feng RENEWAL
David DarakjyCanadaBernardo Dominic NEW
Kadeem FlosiItalyAnna Fali PROPOSAL
Alejandro PerinCanadaAmy Elsner QUALIFIED
Isabel BowleyUnited KingdomAnna Fali PROPOSAL
Maria MarrierCanadaBernardo Dominic QUALIFIED
Aruna FigeroaGermanyAnna Fali UNQUALIFIED
Cody SaylorsRussiaAmy Elsner NEGOTIATION
Murillo MaletBrazilAnna Fali QUALIFIED
Octavia MaletIndiaBernardo Dominic NEW
Mayumi KolmetzIndiaAnna Fali UNQUALIFIED
Ashley DoeItalyBernardo Dominic QUALIFIED
Arvin AlbaresSpainBernardo Dominic UNQUALIFIED
Munro FerenczAustraliaOnyama Limba RENEWAL
Cody SaylorsBrazilAnna Fali QUALIFIED
Greenwood BologniaGermanyAmy Elsner NEW
Adams MorascaFranceBernardo Dominic QUALIFIED
Kadeem FlosiBrazilIoni Bowcher PROPOSAL
Mujtaba NickaUnited KingdomIvan Magalhaes QUALIFIED
David DarakjyIndiaAnna Fali NEW
Ashley DoeCanadaBernardo Dominic NEGOTIATION
Darci PoquetteUnited KingdomIvan Magalhaes PROPOSAL
Claire TollnerUnited KingdomBernardo Dominic 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>