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
Rodrigues CampainBrazilAnna Fali NEGOTIATION
Kaitlin OstroskyCanadaElwin Sharvill RENEWAL
Arvin AlbaresAustraliaOnyama Limba RENEWAL
Cody SaylorsCanadaXuxue Feng UNQUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant UNQUALIFIED
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Jeanfrancois VenereArgentinaAsiya Javayant UNQUALIFIED
Alejandro PerinItalyIoni Bowcher QUALIFIED
Izzy GarufiSpainAnna Fali RENEWAL
Alejandro PerinSpainAsiya Javayant NEW
Aika InouyeCanadaOnyama Limba RENEWAL
Nicolas IturbideSpainOnyama Limba NEW
Darci PoquetteIndiaOnyama Limba PROPOSAL
Emily WhobreyFranceBernardo Dominic NEW
Rodrigues CampainArgentinaAnna Fali UNQUALIFIED
Morrow RutaCanadaStephen Shaw UNQUALIFIED
Johnson SergiItalyIvan Magalhaes UNQUALIFIED
Faith GillianFranceAmy Elsner NEW
Ashley DoeIndiaElwin Sharvill NEW
Leon OldroydSpainAsiya Javayant NEGOTIATION
Johnson SergiSpainXuxue Feng NEGOTIATION
Emily WhobreySpainAnna Fali RENEWAL
Maria MarrierGermanyBernardo Dominic NEW
Arvin AlbaresRussiaAsiya Javayant UNQUALIFIED
Faith GillianJapanBernardo Dominic UNQUALIFIED
Wickens NestleFranceIoni Bowcher QUALIFIED
Deepesh ChuiSpainStephen Shaw NEW
David DarakjyUnited KingdomAmy Elsner UNQUALIFIED
Deepesh ChuiRussiaIoni Bowcher NEW
Francesco ShinkoBrazilAsiya Javayant RENEWAL
Rodrigues CampainUnited KingdomAsiya Javayant PROPOSAL
Julie StensethSpainXuxue Feng NEGOTIATION
Johnson SergiFranceIoni Bowcher RENEWAL
Morrow RutaSpainElwin Sharvill NEGOTIATION
Juan WieserSpainAsiya Javayant UNQUALIFIED
Antonio CaudyRussiaAmy Elsner RENEWAL
Rodrigues CampainRussiaAmy Elsner PROPOSAL
Mujtaba NickaRussiaOnyama Limba NEGOTIATION
Jeanfrancois VenereRussiaElwin Sharvill NEW
Octavia MaletGermanyIvan Magalhaes NEGOTIATION
Deepesh ChuiIndiaAmy Elsner QUALIFIED
Ivar PaprockiJapanIoni Bowcher PROPOSAL
Jones VocelkaGermanyAsiya Javayant NEW
James ButtAustraliaAsiya Javayant QUALIFIED
Jones VocelkaUnited KingdomAnna Fali UNQUALIFIED
Jones VocelkaJapanAmy Elsner PROPOSAL
Jefferson SchemmerCanadaOnyama Limba NEW
Morrow RutaBrazilAsiya Javayant UNQUALIFIED
Aditya KuskoAustraliaAnna Fali NEW
Darci PoquetteBrazilXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Costa DilliardArgentinaAsiya Javayant NEGOTIATION
Murillo MaletFranceAsiya Javayant RENEWAL
Francesco ShinkoSpainXuxue Feng QUALIFIED
Aika InouyeGermanyStephen Shaw QUALIFIED
Murillo MaletGermanyAsiya Javayant NEW
Aditya KuskoCanadaIoni Bowcher NEW
Kadeem FlosiCanadaElwin Sharvill UNQUALIFIED
Antonio CaudyArgentinaIoni Bowcher NEGOTIATION
Munro FerenczGermanyStephen Shaw UNQUALIFIED
Aruna FigeroaBrazilIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoJapan2025-08-08Chapman, Ross E Esq QUALIFIED25Onyama Limba
1001Izzy GarufiSpain2025-08-25Commercial Press NEGOTIATION6Anna Fali
1002Maria MarrierUnited Kingdom2025-08-11Feiner Bros PROPOSAL17Ioni Bowcher
1003Maria MarrierItaly2025-07-27Buckley Miller Wright RENEWAL62Onyama Limba
1004Kaitlin OstroskyFrance2025-08-12Morlong Associates RENEWAL2Elwin Sharvill
1005Claire TollnerCanada2025-08-08Truhlar And Truhlar Attys NEW10Elwin Sharvill
1006Jennifer AmigonJapan2025-07-27Chemel, James L Cpa PROPOSAL84Amy Elsner
1007Julie StensethAustralia2025-08-06Benton, John B Jr QUALIFIED38Onyama Limba
1008Isabel BowleyBrazil2025-08-11Feltz Printing Service NEGOTIATION59Ivan Magalhaes
1009Aruna FigeroaGermany2025-08-02Chapman, Ross E Esq RENEWAL25Stephen Shaw
1010Julie StensethSpain2025-08-07Morlong Associates NEGOTIATION96Asiya Javayant
1011Rodrigues CampainJapan2025-08-23Printing Dimensions UNQUALIFIED46Bernardo Dominic
1012Juan WieserItaly2025-08-22King, Christopher A Esq UNQUALIFIED13Stephen Shaw
1013Octavia MaletItaly2025-07-28Chemel, James L Cpa NEW79Amy Elsner
1014Salvatore StockhamSpain2025-08-13Benton, John B Jr RENEWAL51Ivan Magalhaes
1015Cody SaylorsIndia2025-08-01Chemel, James L Cpa UNQUALIFIED27Bernardo Dominic
1016Jennifer AmigonFrance2025-08-20Morlong Associates NEW74Asiya Javayant
1017Faith GillianAustralia2025-08-16Dorl, James J Esq QUALIFIED90Ivan Magalhaes
1018Alejandro PerinAustralia2025-08-25Feiner Bros PROPOSAL56Xuxue Feng
1019Morrow RutaArgentina2025-08-09King, Christopher A Esq UNQUALIFIED56Ioni Bowcher
1020Emily WhobreyBrazil2025-08-03Benton, John B Jr QUALIFIED40Ioni Bowcher
1021Salvatore StockhamSpain2025-08-05Buckley Miller Wright PROPOSAL80Onyama Limba
1022Alejandro PerinIndia2025-08-19Dorl, James J Esq NEW12Anna Fali
1023Izzy GarufiBrazil2025-07-28Rangoni Of Florence RENEWAL55Stephen Shaw
1024Antonio CaudyFrance2025-08-05Commercial Press PROPOSAL4Anna Fali
1025Cody SaylorsGermany2025-08-02Rousseaux, Michael Esq RENEWAL90Anna Fali
1026Alejandro PerinSpain2025-08-09Dorl, James J Esq NEW8Anna Fali
1027Nicolas IturbideAustralia2025-07-30Printing Dimensions NEGOTIATION31Bernardo Dominic
1028Faith GillianCanada2025-08-07King, Christopher A Esq NEW46Ioni Bowcher
1029Smith GlickBrazil2025-08-06Chanay, Jeffrey A Esq PROPOSAL50Onyama Limba
1030Ivar PaprockiSpain2025-08-12Printing Dimensions UNQUALIFIED58Ivan Magalhaes
1031Arvin AlbaresBrazil2025-08-17Commercial Press QUALIFIED92Onyama Limba
1032Aika InouyeGermany2025-08-17Chanay, Jeffrey A Esq UNQUALIFIED87Anna Fali
1033Arvin AlbaresIndia2025-07-30Truhlar And Truhlar Attys RENEWAL95Bernardo Dominic
1034Misaki RoysterRussia2025-08-04Truhlar And Truhlar Attys PROPOSAL69Onyama Limba
1035Morrow RutaGermany2025-08-21Benton, John B Jr QUALIFIED5Amy Elsner
1036Maisha RulapaughRussia2025-08-15Truhlar And Truhlar Attys QUALIFIED18Amy Elsner
1037Jeanfrancois VenereUnited Kingdom2025-08-14Printing Dimensions PROPOSAL53Bernardo Dominic
1038Faith GillianJapan2025-08-10Chanay, Jeffrey A Esq PROPOSAL7Xuxue Feng
1039Isabel BowleyUnited Kingdom2025-08-01Morlong Associates QUALIFIED26Bernardo Dominic
1040Jefferson SchemmerAustralia2025-08-12Printing Dimensions NEW37Elwin Sharvill
1041Maisha RulapaughJapan2025-07-28Commercial Press RENEWAL75Amy Elsner
1042Ivar PaprockiGermany2025-08-11Feiner Bros NEW4Elwin Sharvill
1043Arvin AlbaresBrazil2025-08-21Rangoni Of Florence UNQUALIFIED60Elwin Sharvill
1044Munro FerenczCanada2025-08-09Buckley Miller Wright NEGOTIATION13Anna Fali
1045Aruna FigeroaAustralia2025-07-29Benton, John B Jr RENEWAL50Elwin Sharvill
1046Smith GlickGermany2025-08-22Rousseaux, Michael Esq UNQUALIFIED65Xuxue Feng
1047Aditya KuskoJapan2025-07-30Rousseaux, Michael Esq PROPOSAL33Anna Fali
1048Maria MarrierItaly2025-08-07Chapman, Ross E Esq QUALIFIED54Amy Elsner
1049Faith GillianJapan2025-07-29Chanay, Jeffrey A Esq UNQUALIFIED10Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Darci PoquetteFranceOnyama Limba NEW
Izzy GarufiArgentinaAmy Elsner NEGOTIATION
Maria MarrierArgentinaIvan Magalhaes NEW
Mujtaba NickaBrazilBernardo Dominic NEGOTIATION
Octavia MaletItalyIoni Bowcher RENEWAL
Murillo MaletArgentinaElwin Sharvill NEGOTIATION
Kaitlin OstroskySpainElwin Sharvill QUALIFIED
Francesco ShinkoUnited KingdomIvan Magalhaes NEW
Claire TollnerSpainElwin Sharvill RENEWAL
Morrow RutaFranceAmy Elsner RENEWAL
Mujtaba NickaCanadaAsiya Javayant NEW
Ashley DoeBrazilElwin Sharvill NEW
Juan WieserAustraliaStephen Shaw NEGOTIATION
Julie StensethArgentinaAsiya Javayant RENEWAL
Misaki RoysterJapanIoni Bowcher NEGOTIATION
Costa DilliardSpainAsiya Javayant UNQUALIFIED
David DarakjyArgentinaStephen Shaw NEW
Cody SaylorsArgentinaAsiya Javayant NEGOTIATION
Juan WieserUnited KingdomXuxue Feng NEW
Sinclair WaycottSpainOnyama Limba RENEWAL
Jennifer AmigonFranceIvan Magalhaes NEGOTIATION
Smith GlickGermanyAmy Elsner NEGOTIATION
Mayumi KolmetzBrazilAnna Fali NEGOTIATION
Arvin AlbaresItalyXuxue Feng RENEWAL
Emily WhobreyGermanyBernardo Dominic NEW
Ashley DoeRussiaAmy Elsner NEW
Maisha RulapaughIndiaAnna Fali NEGOTIATION
Arvin AlbaresRussiaIvan Magalhaes PROPOSAL
Isabel BowleyCanadaIvan Magalhaes PROPOSAL
Maria MarrierUnited KingdomAsiya Javayant RENEWAL
Jeanfrancois VenereJapanIvan Magalhaes RENEWAL
Greenwood BologniaGermanyElwin Sharvill UNQUALIFIED
Silvio SlusarskiIndiaStephen Shaw NEGOTIATION
Alejandro PerinItalyXuxue Feng UNQUALIFIED
Silvio SlusarskiCanadaElwin Sharvill NEGOTIATION
Claire TollnerUnited KingdomIoni Bowcher RENEWAL
Francesco ShinkoAustraliaOnyama Limba UNQUALIFIED
Francesco ShinkoBrazilAmy Elsner UNQUALIFIED
Rodrigues CampainItalyIoni Bowcher UNQUALIFIED
Faith GillianUnited KingdomIoni Bowcher UNQUALIFIED
Leja CaldareraArgentinaBernardo Dominic QUALIFIED
Smith GlickFranceAmy Elsner RENEWAL
Izzy GarufiArgentinaAmy Elsner QUALIFIED
Antonio CaudyAustraliaAnna Fali RENEWAL
Ashley DoeUnited KingdomAnna Fali NEW
Mujtaba NickaBrazilOnyama Limba NEGOTIATION
Costa DilliardSpainXuxue Feng RENEWAL
Jennifer AmigonIndiaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereFranceIoni Bowcher UNQUALIFIED
Smith GlickGermanyBernardo Dominic NEGOTIATION
Frozen Columns
Name
Claire Tollner
Smith Glick
Octavia Malet
Stacey Maclead
Francesco Shinko
Johnson Sergi
Mayumi Kolmetz
Adams Morasca
Mujtaba Nicka
Antonio Caudy
Sinclair Waycott
Ivar Paprocki
Alejandro Perin
Munro Ferencz
Francesco Shinko
Leja Caldarera
Misaki Royster
Jefferson Schemmer
Leja Caldarera
Wickens Nestle
Ivar Paprocki
Ricardo Gaucho
Costa Dilliard
Cody Saylors
Clifford Rim
Emily Whobrey
Cody Saylors
Leon Oldroyd
Ricardo Gaucho
Stacey Maclead
Aruna Figeroa
Isabel Bowley
Jeanfrancois Venere
Kaitlin Ostrosky
Adams Morasca
Leja Caldarera
Aditya Kusko
Ricardo Gaucho
Ivar Paprocki
Morrow Ruta
Salvatore Stockham
Clifford Rim
Aika Inouye
Cody Saylors
Arvin Albares
Maisha Rulapaugh
Aditya Kusko
Jennifer Amigon
Faith Gillian
Murillo Malet
IdCountryDate
1000Japan2025-08-14
1001Italy2025-08-21
1002Spain2025-07-29
1003Spain2025-08-16
1004Russia2025-07-30
1005Australia2025-08-23
1006United Kingdom2025-08-10
1007Argentina2025-08-07
1008Japan2025-08-25
1009Germany2025-08-04
1010Argentina2025-08-13
1011Brazil2025-07-31
1012Brazil2025-08-10
1013United Kingdom2025-08-23
1014France2025-08-10
1015Spain2025-08-23
1016Canada2025-08-21
1017Spain2025-07-28
1018Australia2025-08-02
1019France2025-07-31
1020Australia2025-08-13
1021Russia2025-08-22
1022Canada2025-08-14
1023India2025-07-29
1024India2025-08-22
1025Italy2025-08-19
1026France2025-07-29
1027United Kingdom2025-08-08
1028Germany2025-08-19
1029Spain2025-08-22
1030India2025-08-12
1031Italy2025-08-22
1032Spain2025-08-02
1033Australia2025-07-28
1034Australia2025-08-08
1035France2025-08-19
1036France2025-07-27
1037India2025-08-17
1038Italy2025-08-20
1039Australia2025-08-25
1040Argentina2025-08-13
1041Japan2025-08-01
1042India2025-07-27
1043United Kingdom2025-08-17
1044Germany2025-08-18
1045Australia2025-08-15
1046Germany2025-08-10
1047United Kingdom2025-08-03
1048Germany2025-08-17
1049United Kingdom2025-07-29

On-Demand Data

NameIdCountryDate
Tony Foller1000Spain2025-08-07
Tony Foller1001United Kingdom2025-08-15
Misaki Royster1002Japan2025-08-13
Clifford Rim1003Australia2025-08-20
Mujtaba Nicka1004Argentina2025-08-09
Leon Oldroyd1005Japan2025-08-07
Salvatore Stockham1006Spain2025-07-29
Smith Glick1007France2025-07-28
Ivar Paprocki1008India2025-08-02
Jennifer Amigon1009Canada2025-08-25
Johnson Sergi1010India2025-08-21
Silvio Slusarski1011Japan2025-08-09
Jeanfrancois Venere1012Canada2025-08-14
Faith Gillian1013Argentina2025-08-24
Kadeem Flosi1014Brazil2025-08-18
Johnson Sergi1015Germany2025-08-07
Ashley Doe1016Italy2025-08-10
Johnson Sergi1017Japan2025-07-27
Aruna Figeroa1018Italy2025-08-02
Rodrigues Campain1019United Kingdom2025-08-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonJapanOnyama Limba QUALIFIED
Kadeem FlosiUnited KingdomElwin Sharvill NEW
Wickens NestleBrazilIvan Magalhaes NEW
Salvatore StockhamAustraliaXuxue Feng UNQUALIFIED
Octavia MaletUnited KingdomAmy Elsner UNQUALIFIED
Aditya KuskoGermanyIoni Bowcher NEW
Francesco ShinkoFranceAnna Fali PROPOSAL
Rodrigues CampainBrazilBernardo Dominic UNQUALIFIED
Salvatore StockhamCanadaAnna Fali QUALIFIED
Adams MorascaSpainIoni Bowcher RENEWAL
Sinclair WaycottSpainStephen Shaw NEGOTIATION
Silvio SlusarskiSpainAnna Fali NEGOTIATION
Stacey MacleadBrazilIoni Bowcher UNQUALIFIED
Aditya KuskoArgentinaAnna Fali NEGOTIATION
Clifford RimJapanElwin Sharvill UNQUALIFIED
Isabel BowleyBrazilStephen Shaw QUALIFIED
Arvin AlbaresBrazilStephen Shaw RENEWAL
James ButtBrazilIvan Magalhaes PROPOSAL
Murillo MaletArgentinaAsiya Javayant NEW
Francesco ShinkoCanadaXuxue Feng PROPOSAL
Kaitlin OstroskyArgentinaXuxue Feng QUALIFIED
Silvio SlusarskiFranceElwin Sharvill QUALIFIED
Wickens NestleSpainAsiya Javayant RENEWAL
Silvio SlusarskiItalyBernardo Dominic UNQUALIFIED
Arvin AlbaresGermanyStephen Shaw NEW
Misaki RoysterArgentinaXuxue Feng NEW
Jones VocelkaItalyXuxue Feng UNQUALIFIED
Izzy GarufiIndiaIoni Bowcher UNQUALIFIED
Emily WhobreyUnited KingdomStephen Shaw NEW
Aditya KuskoIndiaAnna Fali UNQUALIFIED
Aika InouyeSpainBernardo Dominic QUALIFIED
Johnson SergiIndiaElwin Sharvill RENEWAL
Munro FerenczArgentinaXuxue Feng UNQUALIFIED
Mujtaba NickaFranceXuxue Feng PROPOSAL
Ashley DoeRussiaIvan Magalhaes RENEWAL
Ivar PaprockiIndiaIvan Magalhaes QUALIFIED
Isabel BowleyCanadaIoni Bowcher QUALIFIED
Wickens NestleCanadaAmy Elsner QUALIFIED
Jennifer AmigonGermanyAnna Fali UNQUALIFIED
Faith GillianGermanyXuxue Feng 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>