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
Juan WieserArgentinaIoni Bowcher NEW
Cody SaylorsGermanyAsiya Javayant NEGOTIATION
Jeanfrancois VenereItalyIvan Magalhaes NEW
Wickens NestleAustraliaIoni Bowcher RENEWAL
Morrow RutaFranceIvan Magalhaes QUALIFIED
Aika InouyeItalyIoni Bowcher NEW
Isabel BowleyCanadaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereItalyAmy Elsner RENEWAL
Arvin AlbaresJapanElwin Sharvill NEGOTIATION
Wickens NestleFranceXuxue Feng NEGOTIATION
Ivar PaprockiJapanAnna Fali NEGOTIATION
Leon OldroydArgentinaBernardo Dominic RENEWAL
Mayumi KolmetzSpainAmy Elsner RENEWAL
Jefferson SchemmerFranceOnyama Limba NEW
Cody SaylorsAustraliaIoni Bowcher NEGOTIATION
Jennifer AmigonGermanyBernardo Dominic NEGOTIATION
Ashley DoeRussiaStephen Shaw PROPOSAL
Leja CaldareraSpainElwin Sharvill PROPOSAL
Misaki RoysterAustraliaAnna Fali UNQUALIFIED
Ivar PaprockiRussiaAnna Fali NEGOTIATION
Morrow RutaFranceAnna Fali QUALIFIED
Jeanfrancois VenereFranceAnna Fali PROPOSAL
Juan WieserBrazilIoni Bowcher PROPOSAL
Julie StensethRussiaIoni Bowcher QUALIFIED
Rodrigues CampainFranceXuxue Feng QUALIFIED
Jennifer AmigonItalyElwin Sharvill QUALIFIED
Ashley DoeBrazilStephen Shaw NEW
Tony FollerGermanyIvan Magalhaes QUALIFIED
Francesco ShinkoUnited KingdomStephen Shaw QUALIFIED
James ButtBrazilAsiya Javayant QUALIFIED
Chavez BriddickArgentinaStephen Shaw UNQUALIFIED
Darci PoquetteGermanyIoni Bowcher RENEWAL
Octavia MaletJapanIvan Magalhaes NEW
Greenwood BologniaItalyAmy Elsner NEW
Izzy GarufiJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereFranceAmy Elsner NEGOTIATION
Arvin AlbaresItalyElwin Sharvill PROPOSAL
Silvio SlusarskiArgentinaXuxue Feng UNQUALIFIED
Kadeem FlosiFranceIoni Bowcher QUALIFIED
Silvio SlusarskiItalyOnyama Limba RENEWAL
Juan WieserUnited KingdomAsiya Javayant NEW
Jeanfrancois VenereUnited KingdomIvan Magalhaes NEW
Deepesh ChuiJapanAsiya Javayant UNQUALIFIED
Rodrigues CampainJapanStephen Shaw RENEWAL
Stacey MacleadFranceOnyama Limba RENEWAL
Faith GillianItalyAnna Fali RENEWAL
Mayumi KolmetzCanadaAnna Fali UNQUALIFIED
Jones VocelkaAustraliaOnyama Limba UNQUALIFIED
James ButtRussiaStephen Shaw PROPOSAL
Costa DilliardGermanyAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickJapanElwin Sharvill NEGOTIATION
Leon OldroydSpainIvan Magalhaes RENEWAL
Aruna FigeroaFranceAnna Fali NEGOTIATION
Faith GillianItalyStephen Shaw NEGOTIATION
Maisha RulapaughJapanAsiya Javayant QUALIFIED
Greenwood BologniaBrazilBernardo Dominic NEW
Johnson SergiBrazilAnna Fali NEW
Costa DilliardRussiaStephen Shaw UNQUALIFIED
Maisha RulapaughBrazilIvan Magalhaes RENEWAL
Leja CaldareraCanadaAnna Fali RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserAustralia2026-06-05Rousseaux, Michael Esq PROPOSAL50Onyama Limba
1001Ivar PaprockiArgentina2026-06-08Truhlar And Truhlar Attys NEGOTIATION67Xuxue Feng
1002Antonio CaudyAustralia2026-05-28Chanay, Jeffrey A Esq NEGOTIATION96Anna Fali
1003Mujtaba NickaRussia2026-05-21Chemel, James L Cpa NEGOTIATION10Anna Fali
1004Julie StensethGermany2026-05-21Chapman, Ross E Esq NEW0Asiya Javayant
1005Clifford RimFrance2026-05-21Chemel, James L Cpa PROPOSAL65Ioni Bowcher
1006Jefferson SchemmerItaly2026-05-23Chanay, Jeffrey A Esq PROPOSAL94Bernardo Dominic
1007Kaitlin OstroskyGermany2026-05-25Feiner Bros UNQUALIFIED5Bernardo Dominic
1008Munro FerenczUnited Kingdom2026-06-03Printing Dimensions PROPOSAL60Ivan Magalhaes
1009Deepesh ChuiItaly2026-05-24Feiner Bros QUALIFIED19Amy Elsner
1010Claire TollnerJapan2026-06-02Chapman, Ross E Esq NEW14Asiya Javayant
1011James ButtSpain2026-05-28Printing Dimensions RENEWAL59Onyama Limba
1012Stacey MacleadAustralia2026-05-19Benton, John B Jr NEW22Elwin Sharvill
1013David DarakjySpain2026-05-26Morlong Associates NEGOTIATION98Onyama Limba
1014Maisha RulapaughFrance2026-06-02Chapman, Ross E Esq PROPOSAL99Amy Elsner
1015Maria MarrierAustralia2026-05-20Commercial Press PROPOSAL3Xuxue Feng
1016Ashley DoeSpain2026-06-10Morlong Associates QUALIFIED61Ivan Magalhaes
1017Costa DilliardFrance2026-06-07King, Christopher A Esq NEGOTIATION58Stephen Shaw
1018Claire TollnerCanada2026-06-02Rousseaux, Michael Esq PROPOSAL80Bernardo Dominic
1019Smith GlickJapan2026-06-12Feltz Printing Service QUALIFIED6Stephen Shaw
1020Jennifer AmigonIndia2026-05-24Rousseaux, Michael Esq PROPOSAL42Stephen Shaw
1021Silvio SlusarskiGermany2026-06-13Chapman, Ross E Esq RENEWAL80Ioni Bowcher
1022Salvatore StockhamAustralia2026-06-13Chemel, James L Cpa NEGOTIATION71Anna Fali
1023Greenwood BologniaUnited Kingdom2026-06-11Rousseaux, Michael Esq RENEWAL25Ioni Bowcher
1024Ricardo GauchoJapan2026-05-24King, Christopher A Esq RENEWAL46Asiya Javayant
1025Isabel BowleyIndia2026-06-02Benton, John B Jr PROPOSAL51Stephen Shaw
1026Leon OldroydUnited Kingdom2026-06-10King, Christopher A Esq QUALIFIED4Stephen Shaw
1027Aruna FigeroaRussia2026-05-22King, Christopher A Esq QUALIFIED22Onyama Limba
1028Johnson SergiRussia2026-06-05Dorl, James J Esq NEW5Anna Fali
1029Aditya KuskoBrazil2026-06-13King, Christopher A Esq RENEWAL50Stephen Shaw
1030Costa DilliardCanada2026-06-14Printing Dimensions NEGOTIATION85Onyama Limba
1031Silvio SlusarskiRussia2026-06-07Rousseaux, Michael Esq UNQUALIFIED53Ivan Magalhaes
1032David DarakjyBrazil2026-06-14Chanay, Jeffrey A Esq NEGOTIATION3Asiya Javayant
1033Arvin AlbaresAustralia2026-05-24Printing Dimensions RENEWAL77Bernardo Dominic
1034Leon OldroydIndia2026-06-10Feiner Bros UNQUALIFIED15Anna Fali
1035Arvin AlbaresGermany2026-05-22King, Christopher A Esq RENEWAL12Ioni Bowcher
1036Jefferson SchemmerBrazil2026-06-14King, Christopher A Esq PROPOSAL79Anna Fali
1037Wickens NestleJapan2026-06-10Feiner Bros QUALIFIED60Stephen Shaw
1038Maisha RulapaughFrance2026-06-06Benton, John B Jr PROPOSAL20Stephen Shaw
1039Sinclair WaycottBrazil2026-06-16Rangoni Of Florence NEGOTIATION71Elwin Sharvill
1040Jones VocelkaFrance2026-05-20Dorl, James J Esq UNQUALIFIED45Elwin Sharvill
1041Kaitlin OstroskyCanada2026-06-02Chemel, James L Cpa PROPOSAL38Ioni Bowcher
1042Jones VocelkaJapan2026-06-07Rousseaux, Michael Esq UNQUALIFIED36Onyama Limba
1043Arvin AlbaresAustralia2026-06-13Feltz Printing Service PROPOSAL75Asiya Javayant
1044Sinclair WaycottBrazil2026-05-22King, Christopher A Esq NEW27Onyama Limba
1045Adams MorascaArgentina2026-06-10Rangoni Of Florence PROPOSAL27Elwin Sharvill
1046Misaki RoysterAustralia2026-06-08Morlong Associates UNQUALIFIED72Xuxue Feng
1047Aika InouyeAustralia2026-06-17Printing Dimensions NEGOTIATION8Elwin Sharvill
1048Mujtaba NickaAustralia2026-06-11Rousseaux, Michael Esq UNQUALIFIED3Xuxue Feng
1049Emily WhobreyItaly2026-05-25King, Christopher A Esq UNQUALIFIED45Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletBrazilAmy Elsner PROPOSAL
Rodrigues CampainJapanXuxue Feng PROPOSAL
Antonio CaudyUnited KingdomOnyama Limba NEW
Ashley DoeAustraliaAmy Elsner NEGOTIATION
Adams MorascaRussiaXuxue Feng QUALIFIED
Emily WhobreyIndiaElwin Sharvill NEGOTIATION
Francesco ShinkoSpainIvan Magalhaes NEW
Aditya KuskoBrazilAsiya Javayant PROPOSAL
Greenwood BologniaSpainBernardo Dominic NEGOTIATION
Izzy GarufiBrazilXuxue Feng PROPOSAL
Jones VocelkaArgentinaElwin Sharvill NEW
Jefferson SchemmerItalyAnna Fali QUALIFIED
Tony FollerUnited KingdomXuxue Feng NEGOTIATION
Mujtaba NickaAustraliaOnyama Limba UNQUALIFIED
Wickens NestleUnited KingdomIvan Magalhaes RENEWAL
Emily WhobreyArgentinaElwin Sharvill NEW
Ricardo GauchoBrazilAnna Fali PROPOSAL
Mayumi KolmetzUnited KingdomIoni Bowcher NEGOTIATION
Adams MorascaIndiaElwin Sharvill QUALIFIED
Rodrigues CampainUnited KingdomIoni Bowcher PROPOSAL
Mujtaba NickaAustraliaAmy Elsner NEW
Kaitlin OstroskyArgentinaOnyama Limba QUALIFIED
James ButtUnited KingdomAmy Elsner QUALIFIED
Ashley DoeJapanIvan Magalhaes PROPOSAL
Aika InouyeArgentinaIoni Bowcher UNQUALIFIED
Sinclair WaycottAustraliaOnyama Limba UNQUALIFIED
Greenwood BologniaIndiaBernardo Dominic UNQUALIFIED
Costa DilliardArgentinaStephen Shaw UNQUALIFIED
Izzy GarufiItalyStephen Shaw NEW
James ButtSpainXuxue Feng NEGOTIATION
James ButtGermanyIoni Bowcher NEGOTIATION
Emily WhobreyFranceAmy Elsner UNQUALIFIED
Tony FollerGermanyStephen Shaw QUALIFIED
Alejandro PerinUnited KingdomAnna Fali PROPOSAL
Mujtaba NickaFranceOnyama Limba RENEWAL
Juan WieserBrazilIvan Magalhaes NEGOTIATION
Aika InouyeBrazilBernardo Dominic NEW
Kadeem FlosiRussiaAsiya Javayant RENEWAL
Greenwood BologniaItalyIoni Bowcher NEW
Sinclair WaycottSpainElwin Sharvill NEGOTIATION
Maisha RulapaughUnited KingdomAmy Elsner UNQUALIFIED
Aditya KuskoCanadaIoni Bowcher RENEWAL
Smith GlickSpainXuxue Feng RENEWAL
Mujtaba NickaAustraliaBernardo Dominic NEGOTIATION
Alejandro PerinCanadaElwin Sharvill UNQUALIFIED
Jones VocelkaBrazilIvan Magalhaes PROPOSAL
Leon OldroydUnited KingdomIoni Bowcher QUALIFIED
Tony FollerAustraliaAmy Elsner QUALIFIED
Cody SaylorsItalyIoni Bowcher PROPOSAL
Aika InouyeIndiaElwin Sharvill NEGOTIATION
Frozen Columns
Name
Nicolas Iturbide
Ivar Paprocki
Aruna Figeroa
Leja Caldarera
Francesco Shinko
Murillo Malet
Greenwood Bolognia
Darci Poquette
Ashley Doe
Jefferson Schemmer
Claire Tollner
Costa Dilliard
Munro Ferencz
Adams Morasca
Cody Saylors
Costa Dilliard
Silvio Slusarski
Maria Marrier
Smith Glick
Deepesh Chui
Alejandro Perin
Kaitlin Ostrosky
Johnson Sergi
Deepesh Chui
Aika Inouye
Costa Dilliard
Munro Ferencz
Alejandro Perin
Clifford Rim
Jennifer Amigon
Smith Glick
James Butt
Izzy Garufi
Sinclair Waycott
Costa Dilliard
Aditya Kusko
Francesco Shinko
Deepesh Chui
Arvin Albares
Maisha Rulapaugh
Ashley Doe
Julie Stenseth
Nicolas Iturbide
Jones Vocelka
Ivar Paprocki
Silvio Slusarski
Greenwood Bolognia
Jefferson Schemmer
Antonio Caudy
Wickens Nestle
IdCountryDate
1000Russia2026-05-26
1001Germany2026-06-05
1002Brazil2026-06-10
1003Canada2026-06-12
1004Canada2026-06-07
1005Russia2026-06-03
1006Spain2026-06-12
1007Brazil2026-06-10
1008Spain2026-06-11
1009France2026-05-23
1010India2026-05-30
1011India2026-06-08
1012Spain2026-05-25
1013Italy2026-06-10
1014India2026-05-31
1015Brazil2026-05-22
1016India2026-06-04
1017Germany2026-05-27
1018United Kingdom2026-05-22
1019Brazil2026-05-26
1020Germany2026-05-20
1021Spain2026-06-11
1022India2026-06-06
1023Russia2026-05-23
1024India2026-05-27
1025United Kingdom2026-06-15
1026Brazil2026-05-25
1027Brazil2026-05-26
1028Brazil2026-05-21
1029Russia2026-05-29
1030Canada2026-05-27
1031Argentina2026-05-19
1032Japan2026-06-05
1033Russia2026-06-17
1034Spain2026-06-14
1035Italy2026-06-07
1036Germany2026-06-06
1037Australia2026-06-15
1038Italy2026-06-04
1039Germany2026-05-30
1040Argentina2026-06-01
1041United Kingdom2026-06-07
1042India2026-05-21
1043Argentina2026-06-06
1044United Kingdom2026-06-16
1045France2026-05-26
1046India2026-06-04
1047Germany2026-05-26
1048France2026-05-29
1049France2026-06-01

On-Demand Data

NameIdCountryDate
Clifford Rim1000Germany2026-06-03
Ivar Paprocki1001Italy2026-05-23
Ashley Doe1002Brazil2026-06-13
Greenwood Bolognia1003Germany2026-06-01
Cody Saylors1004Japan2026-05-24
James Butt1005Canada2026-05-31
Morrow Ruta1006Germany2026-05-21
Julie Stenseth1007France2026-06-14
Darci Poquette1008France2026-05-19
Julie Stenseth1009Japan2026-06-07
Morrow Ruta1010Canada2026-06-05
Cody Saylors1011Japan2026-05-22
Mujtaba Nicka1012Germany2026-06-12
Francesco Shinko1013Russia2026-05-30
Ashley Doe1014Japan2026-06-01
Octavia Malet1015Russia2026-06-13
Aditya Kusko1016Japan2026-05-25
Maria Marrier1017Japan2026-05-21
Izzy Garufi1018France2026-06-05
Clifford Rim1019Japan2026-06-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinFranceIvan Magalhaes UNQUALIFIED
Tony FollerCanadaBernardo Dominic NEW
Maisha RulapaughAustraliaStephen Shaw RENEWAL
Kadeem FlosiRussiaIoni Bowcher PROPOSAL
James ButtJapanBernardo Dominic NEGOTIATION
Jefferson SchemmerArgentinaOnyama Limba NEW
Mujtaba NickaGermanyOnyama Limba QUALIFIED
James ButtItalyElwin Sharvill NEW
Izzy GarufiIndiaIvan Magalhaes NEGOTIATION
Antonio CaudySpainAnna Fali QUALIFIED
Leja CaldareraAustraliaAnna Fali PROPOSAL
Tony FollerFranceAmy Elsner QUALIFIED
Silvio SlusarskiItalyBernardo Dominic RENEWAL
Nicolas IturbideArgentinaElwin Sharvill QUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher UNQUALIFIED
David DarakjyJapanElwin Sharvill PROPOSAL
Arvin AlbaresItalyXuxue Feng PROPOSAL
Aruna FigeroaGermanyElwin Sharvill QUALIFIED
Darci PoquetteUnited KingdomStephen Shaw NEGOTIATION
Smith GlickItalyAnna Fali PROPOSAL
Murillo MaletFranceOnyama Limba UNQUALIFIED
Izzy GarufiUnited KingdomIvan Magalhaes UNQUALIFIED
Murillo MaletFranceAmy Elsner RENEWAL
Jones VocelkaFranceAnna Fali PROPOSAL
Mujtaba NickaItalyBernardo Dominic UNQUALIFIED
Mujtaba NickaFranceAsiya Javayant RENEWAL
Octavia MaletSpainOnyama Limba UNQUALIFIED
Emily WhobreySpainAsiya Javayant QUALIFIED
Faith GillianAustraliaBernardo Dominic NEW
Jones VocelkaRussiaElwin Sharvill PROPOSAL
Isabel BowleyJapanAmy Elsner QUALIFIED
Morrow RutaGermanyXuxue Feng NEW
Jennifer AmigonArgentinaBernardo Dominic NEGOTIATION
Deepesh ChuiJapanXuxue Feng PROPOSAL
Jennifer AmigonBrazilAsiya Javayant QUALIFIED
Mayumi KolmetzArgentinaXuxue Feng RENEWAL
Mujtaba NickaUnited KingdomXuxue Feng NEW
Ashley DoeAustraliaXuxue Feng NEGOTIATION
Wickens NestleIndiaElwin Sharvill NEW
Francesco ShinkoFranceIoni Bowcher 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>