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
Maria MarrierAustraliaBernardo Dominic RENEWAL
Alejandro PerinIndiaAnna Fali RENEWAL
Leon OldroydSpainXuxue Feng PROPOSAL
Kaitlin OstroskyCanadaAsiya Javayant NEW
Aika InouyeAustraliaIvan Magalhaes NEGOTIATION
Costa DilliardItalyAmy Elsner QUALIFIED
Ivar PaprockiItalyStephen Shaw PROPOSAL
Claire TollnerRussiaXuxue Feng NEW
Tony FollerItalyAnna Fali NEGOTIATION
Cody SaylorsUnited KingdomOnyama Limba RENEWAL
Leon OldroydRussiaBernardo Dominic UNQUALIFIED
Maisha RulapaughAustraliaElwin Sharvill RENEWAL
Misaki RoysterRussiaStephen Shaw UNQUALIFIED
Ivar PaprockiAustraliaStephen Shaw QUALIFIED
Morrow RutaIndiaXuxue Feng NEW
Smith GlickCanadaAsiya Javayant RENEWAL
Murillo MaletUnited KingdomAmy Elsner PROPOSAL
Claire TollnerRussiaElwin Sharvill NEW
Aika InouyeSpainElwin Sharvill PROPOSAL
Morrow RutaCanadaAnna Fali UNQUALIFIED
Juan WieserIndiaXuxue Feng QUALIFIED
Salvatore StockhamRussiaIoni Bowcher UNQUALIFIED
Faith GillianIndiaAsiya Javayant NEGOTIATION
Tony FollerIndiaOnyama Limba PROPOSAL
Arvin AlbaresAustraliaIoni Bowcher PROPOSAL
Francesco ShinkoBrazilXuxue Feng UNQUALIFIED
Maisha RulapaughJapanIvan Magalhaes PROPOSAL
Aditya KuskoAustraliaAsiya Javayant NEGOTIATION
Costa DilliardGermanyBernardo Dominic RENEWAL
Aditya KuskoSpainAmy Elsner UNQUALIFIED
Alejandro PerinArgentinaOnyama Limba UNQUALIFIED
Ivar PaprockiAustraliaAsiya Javayant UNQUALIFIED
Octavia MaletArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresBrazilElwin Sharvill QUALIFIED
Alejandro PerinJapanAsiya Javayant NEGOTIATION
Claire TollnerIndiaAnna Fali PROPOSAL
Jeanfrancois VenereGermanyAsiya Javayant NEGOTIATION
Arvin AlbaresGermanyAmy Elsner RENEWAL
Sinclair WaycottAustraliaAsiya Javayant NEGOTIATION
Cody SaylorsIndiaAnna Fali UNQUALIFIED
Faith GillianGermanyAmy Elsner NEW
Claire TollnerIndiaElwin Sharvill RENEWAL
Mayumi KolmetzGermanyAnna Fali NEGOTIATION
Misaki RoysterAustraliaAmy Elsner QUALIFIED
Ashley DoeSpainBernardo Dominic RENEWAL
Deepesh ChuiAustraliaXuxue Feng PROPOSAL
Ricardo GauchoCanadaElwin Sharvill QUALIFIED
Leja CaldareraBrazilElwin Sharvill RENEWAL
Morrow RutaSpainAnna Fali RENEWAL
Aditya KuskoItalyElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaFranceElwin Sharvill QUALIFIED
Rodrigues CampainIndiaAnna Fali UNQUALIFIED
Rodrigues CampainGermanyBernardo Dominic RENEWAL
Chavez BriddickGermanyAsiya Javayant PROPOSAL
Morrow RutaFranceIvan Magalhaes QUALIFIED
Leon OldroydCanadaAsiya Javayant QUALIFIED
Antonio CaudyJapanOnyama Limba UNQUALIFIED
Chavez BriddickArgentinaElwin Sharvill UNQUALIFIED
Ivar PaprockiSpainIvan Magalhaes UNQUALIFIED
Ashley DoeAustraliaBernardo Dominic PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoAustralia2026-05-17Morlong Associates NEW55Xuxue Feng
1001Nicolas IturbideIndia2026-05-07Feltz Printing Service NEW98Bernardo Dominic
1002Smith GlickUnited Kingdom2026-05-03Morlong Associates PROPOSAL62Bernardo Dominic
1003Jefferson SchemmerJapan2026-05-26Feiner Bros UNQUALIFIED25Xuxue Feng
1004Kadeem FlosiItaly2026-05-10Feiner Bros NEW33Xuxue Feng
1005Mujtaba NickaUnited Kingdom2026-05-28Chanay, Jeffrey A Esq PROPOSAL62Asiya Javayant
1006Francesco ShinkoRussia2026-05-09Chapman, Ross E Esq UNQUALIFIED79Onyama Limba
1007Jennifer AmigonGermany2026-05-11Feiner Bros NEGOTIATION84Bernardo Dominic
1008Sinclair WaycottIndia2026-05-10Truhlar And Truhlar Attys PROPOSAL47Xuxue Feng
1009Smith GlickJapan2026-05-12Chanay, Jeffrey A Esq NEW41Onyama Limba
1010Antonio CaudyGermany2026-05-05Feltz Printing Service NEGOTIATION17Elwin Sharvill
1011Kaitlin OstroskyArgentina2026-05-26Chapman, Ross E Esq UNQUALIFIED27Stephen Shaw
1012Claire TollnerRussia2026-05-26Printing Dimensions NEGOTIATION28Ivan Magalhaes
1013Deepesh ChuiArgentina2026-05-13Rousseaux, Michael Esq NEGOTIATION24Elwin Sharvill
1014Tony FollerCanada2026-05-02Chanay, Jeffrey A Esq NEW71Onyama Limba
1015Tony FollerIndia2026-05-21Feiner Bros UNQUALIFIED42Asiya Javayant
1016Alejandro PerinAustralia2026-05-05Chanay, Jeffrey A Esq QUALIFIED18Onyama Limba
1017Francesco ShinkoUnited Kingdom2026-05-02Feltz Printing Service NEW10Anna Fali
1018Octavia MaletBrazil2026-05-26Feltz Printing Service QUALIFIED77Ivan Magalhaes
1019Emily WhobreyArgentina2026-05-13Chapman, Ross E Esq QUALIFIED70Xuxue Feng
1020Silvio SlusarskiSpain2026-05-09Printing Dimensions QUALIFIED64Elwin Sharvill
1021Ivar PaprockiGermany2026-05-21Dorl, James J Esq RENEWAL94Amy Elsner
1022Francesco ShinkoGermany2026-05-25Benton, John B Jr RENEWAL39Ioni Bowcher
1023Maisha RulapaughJapan2026-05-14Chapman, Ross E Esq RENEWAL7Onyama Limba
1024Kadeem FlosiCanada2026-05-30Benton, John B Jr QUALIFIED24Xuxue Feng
1025Silvio SlusarskiFrance2026-05-13King, Christopher A Esq NEGOTIATION35Ivan Magalhaes
1026Morrow RutaUnited Kingdom2026-05-20Benton, John B Jr PROPOSAL98Ioni Bowcher
1027Ricardo GauchoGermany2026-05-08Dorl, James J Esq NEW46Elwin Sharvill
1028Wickens NestleIndia2026-05-17Benton, John B Jr NEGOTIATION21Asiya Javayant
1029Clifford RimUnited Kingdom2026-05-08Commercial Press UNQUALIFIED80Elwin Sharvill
1030Isabel BowleyFrance2026-05-11King, Christopher A Esq QUALIFIED15Bernardo Dominic
1031Aika InouyeUnited Kingdom2026-05-29Rousseaux, Michael Esq PROPOSAL12Ioni Bowcher
1032Misaki RoysterArgentina2026-05-28Chemel, James L Cpa QUALIFIED21Ivan Magalhaes
1033Aditya KuskoIndia2026-05-15Chanay, Jeffrey A Esq NEGOTIATION80Onyama Limba
1034Misaki RoysterIndia2026-05-10Chanay, Jeffrey A Esq NEGOTIATION40Onyama Limba
1035Smith GlickIndia2026-05-30Feiner Bros UNQUALIFIED6Anna Fali
1036Mujtaba NickaFrance2026-05-21Truhlar And Truhlar Attys NEGOTIATION1Xuxue Feng
1037Adams MorascaItaly2026-05-08Truhlar And Truhlar Attys QUALIFIED69Asiya Javayant
1038Cody SaylorsFrance2026-05-17Dorl, James J Esq QUALIFIED32Elwin Sharvill
1039Wickens NestleSpain2026-05-05Rousseaux, Michael Esq PROPOSAL86Asiya Javayant
1040Jeanfrancois VenereSpain2026-05-07Chemel, James L Cpa NEW77Anna Fali
1041Salvatore StockhamUnited Kingdom2026-05-03Buckley Miller Wright NEW45Xuxue Feng
1042Aika InouyeIndia2026-05-09Rousseaux, Michael Esq NEW52Ioni Bowcher
1043Izzy GarufiCanada2026-05-22Chanay, Jeffrey A Esq QUALIFIED71Stephen Shaw
1044Chavez BriddickCanada2026-05-09King, Christopher A Esq NEW36Stephen Shaw
1045Kaitlin OstroskyUnited Kingdom2026-05-08Chanay, Jeffrey A Esq PROPOSAL3Anna Fali
1046Leja CaldareraArgentina2026-05-03Rangoni Of Florence NEW4Amy Elsner
1047Misaki RoysterCanada2026-05-13Truhlar And Truhlar Attys RENEWAL59Elwin Sharvill
1048Morrow RutaBrazil2026-05-25Buckley Miller Wright RENEWAL18Amy Elsner
1049Salvatore StockhamGermany2026-05-07Commercial Press NEGOTIATION70Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeFranceIoni Bowcher RENEWAL
Misaki RoysterFranceBernardo Dominic PROPOSAL
Aruna FigeroaUnited KingdomXuxue Feng UNQUALIFIED
Ricardo GauchoItalyIoni Bowcher NEW
Murillo MaletUnited KingdomBernardo Dominic RENEWAL
Maria MarrierArgentinaBernardo Dominic NEGOTIATION
Leon OldroydGermanyStephen Shaw NEW
Murillo MaletBrazilAnna Fali QUALIFIED
Ashley DoeRussiaAnna Fali PROPOSAL
Mujtaba NickaArgentinaElwin Sharvill PROPOSAL
Misaki RoysterAustraliaOnyama Limba UNQUALIFIED
Nicolas IturbideAustraliaXuxue Feng NEGOTIATION
Maisha RulapaughRussiaAsiya Javayant RENEWAL
Smith GlickItalyAnna Fali NEGOTIATION
Silvio SlusarskiJapanAmy Elsner NEGOTIATION
Jennifer AmigonCanadaElwin Sharvill PROPOSAL
Leon OldroydGermanyAsiya Javayant QUALIFIED
Wickens NestleIndiaAmy Elsner NEGOTIATION
Izzy GarufiUnited KingdomAmy Elsner UNQUALIFIED
Jones VocelkaUnited KingdomIoni Bowcher NEW
Alejandro PerinArgentinaStephen Shaw NEW
Clifford RimItalyXuxue Feng RENEWAL
Mayumi KolmetzIndiaAnna Fali NEGOTIATION
Nicolas IturbideBrazilOnyama Limba NEGOTIATION
Kadeem FlosiFranceStephen Shaw PROPOSAL
Costa DilliardItalyStephen Shaw RENEWAL
Kaitlin OstroskyItalyXuxue Feng NEGOTIATION
Aruna FigeroaJapanAmy Elsner NEW
Nicolas IturbideIndiaXuxue Feng QUALIFIED
Darci PoquetteGermanyBernardo Dominic NEW
Nicolas IturbideArgentinaIvan Magalhaes RENEWAL
Jones VocelkaCanadaXuxue Feng PROPOSAL
Mayumi KolmetzJapanBernardo Dominic UNQUALIFIED
Stacey MacleadItalyOnyama Limba QUALIFIED
Ricardo GauchoSpainAsiya Javayant QUALIFIED
James ButtBrazilOnyama Limba PROPOSAL
Murillo MaletIndiaBernardo Dominic UNQUALIFIED
Claire TollnerArgentinaBernardo Dominic QUALIFIED
Juan WieserIndiaElwin Sharvill PROPOSAL
Leon OldroydFranceBernardo Dominic QUALIFIED
Greenwood BologniaSpainAmy Elsner PROPOSAL
Francesco ShinkoSpainOnyama Limba NEW
Darci PoquetteSpainStephen Shaw QUALIFIED
Chavez BriddickJapanXuxue Feng QUALIFIED
Chavez BriddickCanadaStephen Shaw NEW
Wickens NestleUnited KingdomAmy Elsner UNQUALIFIED
Aruna FigeroaFranceStephen Shaw QUALIFIED
Clifford RimItalyOnyama Limba NEGOTIATION
Darci PoquetteUnited KingdomXuxue Feng NEW
Adams MorascaBrazilStephen Shaw NEGOTIATION
Frozen Columns
Name
Nicolas Iturbide
Ivar Paprocki
Jones Vocelka
Kadeem Flosi
Rodrigues Campain
James Butt
Leja Caldarera
Jeanfrancois Venere
Ivar Paprocki
Nicolas Iturbide
Wickens Nestle
David Darakjy
Misaki Royster
Rodrigues Campain
Aditya Kusko
Aika Inouye
Maisha Rulapaugh
Ivar Paprocki
Murillo Malet
Mayumi Kolmetz
Cody Saylors
Antonio Caudy
Morrow Ruta
Chavez Briddick
Mayumi Kolmetz
Munro Ferencz
Salvatore Stockham
Chavez Briddick
Julie Stenseth
Salvatore Stockham
Ivar Paprocki
Munro Ferencz
Kadeem Flosi
Julie Stenseth
Munro Ferencz
Jeanfrancois Venere
Murillo Malet
Salvatore Stockham
Francesco Shinko
Adams Morasca
Jefferson Schemmer
Emily Whobrey
Jennifer Amigon
Smith Glick
Octavia Malet
Tony Foller
Alejandro Perin
Jeanfrancois Venere
Silvio Slusarski
Darci Poquette
IdCountryDate
1000Japan2026-05-04
1001Italy2026-05-25
1002Russia2026-05-26
1003Italy2026-05-23
1004United Kingdom2026-05-19
1005Brazil2026-05-30
1006United Kingdom2026-05-17
1007Spain2026-05-03
1008Russia2026-05-21
1009France2026-05-28
1010Italy2026-05-10
1011France2026-05-14
1012Germany2026-05-04
1013Germany2026-05-11
1014Brazil2026-05-11
1015India2026-05-25
1016Germany2026-05-20
1017Australia2026-05-15
1018Spain2026-05-14
1019Spain2026-05-22
1020Brazil2026-05-12
1021Italy2026-05-01
1022Brazil2026-05-12
1023Spain2026-05-25
1024Russia2026-05-08
1025Germany2026-05-06
1026Japan2026-05-24
1027Russia2026-05-05
1028Japan2026-05-25
1029Spain2026-05-22
1030Italy2026-05-12
1031Brazil2026-05-27
1032Italy2026-05-17
1033Russia2026-05-11
1034Germany2026-05-06
1035Italy2026-05-21
1036Argentina2026-05-20
1037Russia2026-05-14
1038Italy2026-05-14
1039United Kingdom2026-05-17
1040Italy2026-05-01
1041Japan2026-05-02
1042Germany2026-05-21
1043Spain2026-05-04
1044Germany2026-05-21
1045Brazil2026-05-22
1046Brazil2026-05-16
1047Brazil2026-05-20
1048Argentina2026-05-28
1049France2026-05-11

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Canada2026-05-06
Costa Dilliard1001Russia2026-05-11
Jennifer Amigon1002United Kingdom2026-05-02
Octavia Malet1003Argentina2026-05-01
Wickens Nestle1004Japan2026-05-07
Kadeem Flosi1005Spain2026-05-11
Rodrigues Campain1006France2026-05-07
Misaki Royster1007Spain2026-05-15
Tony Foller1008Argentina2026-05-05
Jennifer Amigon1009Germany2026-05-11
Costa Dilliard1010Spain2026-05-13
Adams Morasca1011Argentina2026-05-17
Greenwood Bolognia1012Germany2026-05-02
Costa Dilliard1013Japan2026-05-20
Smith Glick1014Japan2026-05-06
Aika Inouye1015Brazil2026-05-06
Adams Morasca1016Brazil2026-05-25
Tony Foller1017Spain2026-05-23
Antonio Caudy1018Argentina2026-05-18
Leja Caldarera1019Japan2026-05-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Arvin AlbaresItalyBernardo Dominic NEW
Morrow RutaIndiaAmy Elsner NEGOTIATION
Kaitlin OstroskyRussiaIoni Bowcher NEW
Ivar PaprockiFranceBernardo Dominic NEGOTIATION
Chavez BriddickJapanBernardo Dominic NEGOTIATION
Jennifer AmigonSpainAnna Fali PROPOSAL
Stacey MacleadRussiaAmy Elsner UNQUALIFIED
James ButtFranceIvan Magalhaes RENEWAL
Wickens NestleUnited KingdomIoni Bowcher UNQUALIFIED
Juan WieserUnited KingdomXuxue Feng NEGOTIATION
David DarakjyIndiaStephen Shaw NEW
Leja CaldareraRussiaAmy Elsner PROPOSAL
Greenwood BologniaFranceAmy Elsner NEGOTIATION
Alejandro PerinAustraliaElwin Sharvill QUALIFIED
Octavia MaletJapanAnna Fali UNQUALIFIED
Jeanfrancois VenereArgentinaBernardo Dominic NEW
Costa DilliardBrazilBernardo Dominic NEW
Sinclair WaycottGermanyBernardo Dominic NEW
Jennifer AmigonItalyIvan Magalhaes RENEWAL
Ricardo GauchoBrazilAnna Fali UNQUALIFIED
Darci PoquetteGermanyOnyama Limba PROPOSAL
Morrow RutaIndiaStephen Shaw UNQUALIFIED
Smith GlickRussiaIoni Bowcher NEW
David DarakjyArgentinaAsiya Javayant RENEWAL
Leon OldroydArgentinaIoni Bowcher PROPOSAL
Tony FollerBrazilAsiya Javayant UNQUALIFIED
Clifford RimJapanBernardo Dominic NEGOTIATION
Rodrigues CampainIndiaIvan Magalhaes UNQUALIFIED
Izzy GarufiFranceBernardo Dominic NEW
Greenwood BologniaFranceAnna Fali NEW
Jeanfrancois VenereUnited KingdomAmy Elsner NEGOTIATION
Alejandro PerinIndiaAmy Elsner RENEWAL
Julie StensethGermanyAnna Fali UNQUALIFIED
Greenwood BologniaBrazilAnna Fali UNQUALIFIED
Faith GillianFranceAsiya Javayant NEGOTIATION
Octavia MaletJapanIvan Magalhaes NEW
Tony FollerIndiaXuxue Feng RENEWAL
David DarakjyBrazilOnyama Limba NEW
Cody SaylorsFranceIvan Magalhaes NEGOTIATION
James ButtRussiaAmy Elsner PROPOSAL

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