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
Octavia MaletCanadaIoni Bowcher QUALIFIED
David DarakjyFranceStephen Shaw RENEWAL
Greenwood BologniaRussiaIvan Magalhaes NEW
Leja CaldareraUnited KingdomStephen Shaw NEW
Stacey MacleadArgentinaAnna Fali RENEWAL
David DarakjyRussiaAmy Elsner PROPOSAL
Antonio CaudyIndiaIvan Magalhaes NEW
Juan WieserSpainBernardo Dominic UNQUALIFIED
David DarakjyJapanStephen Shaw UNQUALIFIED
Kaitlin OstroskyIndiaAnna Fali QUALIFIED
Aruna FigeroaFranceOnyama Limba NEW
Smith GlickArgentinaAnna Fali NEW
Wickens NestleItalyOnyama Limba NEW
Emily WhobreyJapanAnna Fali NEW
Isabel BowleyAustraliaIoni Bowcher PROPOSAL
Leon OldroydJapanIoni Bowcher PROPOSAL
Maisha RulapaughArgentinaAsiya Javayant UNQUALIFIED
Cody SaylorsBrazilIoni Bowcher PROPOSAL
Sinclair WaycottIndiaOnyama Limba UNQUALIFIED
Arvin AlbaresBrazilXuxue Feng RENEWAL
Francesco ShinkoItalyElwin Sharvill RENEWAL
Sinclair WaycottIndiaBernardo Dominic QUALIFIED
Salvatore StockhamSpainXuxue Feng RENEWAL
Clifford RimJapanAsiya Javayant RENEWAL
Nicolas IturbideRussiaIvan Magalhaes RENEWAL
Smith GlickItalyStephen Shaw RENEWAL
David DarakjyAustraliaAsiya Javayant UNQUALIFIED
Julie StensethUnited KingdomElwin Sharvill UNQUALIFIED
James ButtItalyOnyama Limba UNQUALIFIED
Misaki RoysterItalyXuxue Feng NEGOTIATION
Rodrigues CampainIndiaAsiya Javayant UNQUALIFIED
Octavia MaletArgentinaBernardo Dominic RENEWAL
Munro FerenczIndiaBernardo Dominic RENEWAL
Misaki RoysterBrazilOnyama Limba NEW
Ashley DoeUnited KingdomXuxue Feng RENEWAL
Smith GlickAustraliaAmy Elsner RENEWAL
Izzy GarufiUnited KingdomIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomStephen Shaw UNQUALIFIED
Jeanfrancois VenereArgentinaAsiya Javayant PROPOSAL
Chavez BriddickGermanyXuxue Feng QUALIFIED
Ashley DoeRussiaAnna Fali PROPOSAL
Morrow RutaFranceAmy Elsner UNQUALIFIED
Misaki RoysterArgentinaStephen Shaw QUALIFIED
Kadeem FlosiSpainStephen Shaw QUALIFIED
Aika InouyeJapanIvan Magalhaes NEGOTIATION
Ivar PaprockiCanadaAnna Fali RENEWAL
Alejandro PerinJapanIoni Bowcher PROPOSAL
Ivar PaprockiItalyElwin Sharvill PROPOSAL
Rodrigues CampainSpainIvan Magalhaes PROPOSAL
Isabel BowleyUnited KingdomOnyama Limba NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideItalyOnyama Limba QUALIFIED
Darci PoquetteUnited KingdomAsiya Javayant UNQUALIFIED
Smith GlickBrazilStephen Shaw QUALIFIED
Darci PoquetteUnited KingdomStephen Shaw RENEWAL
Faith GillianUnited KingdomIoni Bowcher RENEWAL
Isabel BowleyItalyAmy Elsner NEGOTIATION
Maisha RulapaughBrazilOnyama Limba RENEWAL
Morrow RutaAustraliaXuxue Feng UNQUALIFIED
James ButtIndiaIvan Magalhaes PROPOSAL
Ivar PaprockiIndiaElwin Sharvill PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideRussia2025-09-18Chemel, James L Cpa PROPOSAL92Asiya Javayant
1001Smith GlickAustralia2025-09-23Printing Dimensions NEW72Bernardo Dominic
1002Stacey MacleadBrazil2025-09-27Chapman, Ross E Esq RENEWAL86Amy Elsner
1003Deepesh ChuiFrance2025-09-18Benton, John B Jr PROPOSAL76Amy Elsner
1004Jeanfrancois VenereGermany2025-09-11Feiner Bros UNQUALIFIED19Asiya Javayant
1005Francesco ShinkoIndia2025-09-19Rousseaux, Michael Esq NEW84Onyama Limba
1006Johnson SergiCanada2025-09-26Truhlar And Truhlar Attys NEGOTIATION17Onyama Limba
1007David DarakjyGermany2025-09-10Buckley Miller Wright QUALIFIED15Onyama Limba
1008Costa DilliardAustralia2025-09-28Commercial Press NEW45Ioni Bowcher
1009Octavia MaletCanada2025-09-28Buckley Miller Wright UNQUALIFIED15Anna Fali
1010Jeanfrancois VenereCanada2025-09-28Feiner Bros UNQUALIFIED61Amy Elsner
1011Julie StensethAustralia2025-09-26King, Christopher A Esq PROPOSAL10Ioni Bowcher
1012Costa DilliardRussia2025-09-20Chapman, Ross E Esq QUALIFIED5Ioni Bowcher
1013Salvatore StockhamIndia2025-09-05Chapman, Ross E Esq UNQUALIFIED93Elwin Sharvill
1014Aditya KuskoCanada2025-09-17Feiner Bros NEW90Onyama Limba
1015Rodrigues CampainSpain2025-09-18Buckley Miller Wright QUALIFIED44Anna Fali
1016Ivar PaprockiArgentina2025-09-17Morlong Associates QUALIFIED46Xuxue Feng
1017Aruna FigeroaSpain2025-09-18Chapman, Ross E Esq QUALIFIED64Bernardo Dominic
1018Faith GillianFrance2025-09-24Chemel, James L Cpa NEW44Ioni Bowcher
1019Johnson SergiIndia2025-09-20Benton, John B Jr UNQUALIFIED55Onyama Limba
1020Sinclair WaycottCanada2025-09-10Feltz Printing Service RENEWAL99Onyama Limba
1021Francesco ShinkoFrance2025-09-15Printing Dimensions UNQUALIFIED46Asiya Javayant
1022Stacey MacleadCanada2025-10-03Buckley Miller Wright RENEWAL78Ioni Bowcher
1023Faith GillianIndia2025-09-15Feiner Bros UNQUALIFIED0Xuxue Feng
1024Cody SaylorsJapan2025-10-01Benton, John B Jr UNQUALIFIED31Ioni Bowcher
1025Octavia MaletItaly2025-09-13Feiner Bros NEGOTIATION84Asiya Javayant
1026Murillo MaletUnited Kingdom2025-09-09Chapman, Ross E Esq QUALIFIED68Asiya Javayant
1027Arvin AlbaresFrance2025-09-14Dorl, James J Esq NEW35Bernardo Dominic
1028Sinclair WaycottAustralia2025-09-22Benton, John B Jr NEGOTIATION39Elwin Sharvill
1029Ricardo GauchoJapan2025-09-21Dorl, James J Esq RENEWAL84Anna Fali
1030Jennifer AmigonJapan2025-09-16Rousseaux, Michael Esq NEGOTIATION3Amy Elsner
1031Munro FerenczBrazil2025-09-08Commercial Press NEW89Stephen Shaw
1032Faith GillianRussia2025-10-03Feiner Bros NEGOTIATION24Ioni Bowcher
1033Jeanfrancois VenereSpain2025-09-09Rangoni Of Florence NEGOTIATION2Bernardo Dominic
1034Misaki RoysterFrance2025-09-08Rousseaux, Michael Esq NEGOTIATION71Asiya Javayant
1035Clifford RimFrance2025-09-15Chemel, James L Cpa NEW22Bernardo Dominic
1036Jefferson SchemmerUnited Kingdom2025-09-29Truhlar And Truhlar Attys UNQUALIFIED18Stephen Shaw
1037Deepesh ChuiItaly2025-09-16Buckley Miller Wright QUALIFIED98Onyama Limba
1038Johnson SergiArgentina2025-09-04Feiner Bros UNQUALIFIED48Anna Fali
1039Leon OldroydFrance2025-09-23Feiner Bros NEW0Elwin Sharvill
1040Rodrigues CampainItaly2025-09-14Feltz Printing Service NEGOTIATION76Bernardo Dominic
1041Aditya KuskoArgentina2025-09-19Feiner Bros PROPOSAL86Ivan Magalhaes
1042Misaki RoysterRussia2025-09-27Benton, John B Jr NEW43Onyama Limba
1043Kaitlin OstroskyJapan2025-10-01Feiner Bros RENEWAL84Ivan Magalhaes
1044Kadeem FlosiGermany2025-09-16Chanay, Jeffrey A Esq QUALIFIED77Xuxue Feng
1045Jefferson SchemmerUnited Kingdom2025-09-18Chapman, Ross E Esq UNQUALIFIED93Amy Elsner
1046Faith GillianArgentina2025-09-25Truhlar And Truhlar Attys RENEWAL27Elwin Sharvill
1047Jennifer AmigonAustralia2025-09-07Feltz Printing Service RENEWAL68Anna Fali
1048Arvin AlbaresAustralia2025-09-17Feiner Bros QUALIFIED82Stephen Shaw
1049James ButtItaly2025-09-16Chapman, Ross E Esq PROPOSAL63Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletItalyBernardo Dominic QUALIFIED
Rodrigues CampainCanadaBernardo Dominic RENEWAL
Leon OldroydAustraliaIvan Magalhaes QUALIFIED
James ButtArgentinaIoni Bowcher NEW
Silvio SlusarskiSpainXuxue Feng PROPOSAL
Aditya KuskoIndiaAnna Fali QUALIFIED
Jennifer AmigonSpainStephen Shaw RENEWAL
Kaitlin OstroskyCanadaAmy Elsner RENEWAL
Emily WhobreyRussiaAnna Fali NEW
Rodrigues CampainUnited KingdomOnyama Limba QUALIFIED
Johnson SergiItalyIvan Magalhaes UNQUALIFIED
Silvio SlusarskiFranceXuxue Feng RENEWAL
Francesco ShinkoGermanyXuxue Feng NEW
Arvin AlbaresRussiaAsiya Javayant UNQUALIFIED
Maria MarrierCanadaElwin Sharvill NEW
Jennifer AmigonIndiaIvan Magalhaes QUALIFIED
Alejandro PerinAustraliaBernardo Dominic NEW
Julie StensethRussiaXuxue Feng PROPOSAL
Aika InouyeArgentinaOnyama Limba NEGOTIATION
Salvatore StockhamAustraliaAnna Fali PROPOSAL
Johnson SergiItalyAnna Fali QUALIFIED
Munro FerenczCanadaOnyama Limba NEGOTIATION
Smith GlickRussiaBernardo Dominic PROPOSAL
Faith GillianCanadaOnyama Limba NEW
David DarakjySpainOnyama Limba RENEWAL
Tony FollerSpainElwin Sharvill UNQUALIFIED
Johnson SergiItalyElwin Sharvill QUALIFIED
Jeanfrancois VenereIndiaAsiya Javayant UNQUALIFIED
Izzy GarufiFranceBernardo Dominic NEW
Wickens NestleUnited KingdomStephen Shaw NEGOTIATION
Adams MorascaItalyBernardo Dominic NEW
Kadeem FlosiRussiaAmy Elsner PROPOSAL
Nicolas IturbideSpainBernardo Dominic QUALIFIED
Ricardo GauchoAustraliaIvan Magalhaes UNQUALIFIED
Kadeem FlosiIndiaElwin Sharvill NEGOTIATION
Faith GillianSpainAnna Fali UNQUALIFIED
Leon OldroydGermanyBernardo Dominic NEGOTIATION
Ricardo GauchoUnited KingdomAmy Elsner NEGOTIATION
Rodrigues CampainGermanyIoni Bowcher QUALIFIED
Munro FerenczArgentinaAnna Fali NEW
Jennifer AmigonSpainElwin Sharvill NEGOTIATION
Leon OldroydUnited KingdomIvan Magalhaes QUALIFIED
Jeanfrancois VenereFranceIvan Magalhaes RENEWAL
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Costa DilliardCanadaStephen Shaw NEW
James ButtFranceElwin Sharvill NEGOTIATION
Silvio SlusarskiRussiaIvan Magalhaes PROPOSAL
Jones VocelkaAustraliaBernardo Dominic QUALIFIED
Maisha RulapaughIndiaAnna Fali QUALIFIED
Jones VocelkaJapanBernardo Dominic QUALIFIED
Frozen Columns
Name
Kaitlin Ostrosky
Leja Caldarera
Aditya Kusko
Stacey Maclead
Darci Poquette
Julie Stenseth
Claire Tollner
Deepesh Chui
Julie Stenseth
Silvio Slusarski
Nicolas Iturbide
Deepesh Chui
Stacey Maclead
Mayumi Kolmetz
Ashley Doe
Darci Poquette
Isabel Bowley
Aika Inouye
David Darakjy
Kaitlin Ostrosky
Jeanfrancois Venere
Tony Foller
Francesco Shinko
Cody Saylors
Aditya Kusko
Ivar Paprocki
Aika Inouye
James Butt
Kadeem Flosi
Johnson Sergi
Leon Oldroyd
Jones Vocelka
Julie Stenseth
Maria Marrier
Ashley Doe
Francesco Shinko
Leon Oldroyd
Ashley Doe
Francesco Shinko
Claire Tollner
Ashley Doe
Murillo Malet
Cody Saylors
Antonio Caudy
Adams Morasca
Aditya Kusko
Faith Gillian
Murillo Malet
Ashley Doe
Murillo Malet
IdCountryDate
1000United Kingdom2025-09-11
1001Australia2025-09-25
1002Germany2025-09-29
1003France2025-10-01
1004France2025-09-28
1005France2025-09-23
1006Canada2025-09-27
1007United Kingdom2025-09-24
1008United Kingdom2025-09-11
1009Australia2025-09-19
1010Germany2025-10-03
1011India2025-10-01
1012United Kingdom2025-09-28
1013Canada2025-10-02
1014Germany2025-10-01
1015Australia2025-09-22
1016Canada2025-09-20
1017Argentina2025-09-30
1018Japan2025-09-16
1019Japan2025-10-02
1020Canada2025-09-08
1021Canada2025-09-10
1022India2025-09-07
1023Italy2025-09-17
1024Canada2025-09-16
1025United Kingdom2025-09-24
1026Canada2025-09-17
1027Australia2025-09-29
1028United Kingdom2025-09-09
1029Brazil2025-10-01
1030Italy2025-09-20
1031Russia2025-09-07
1032Russia2025-10-02
1033Russia2025-09-16
1034France2025-09-07
1035India2025-09-04
1036India2025-09-09
1037Japan2025-09-15
1038Spain2025-09-17
1039Brazil2025-09-10
1040United Kingdom2025-09-29
1041United Kingdom2025-09-11
1042France2025-09-08
1043Brazil2025-09-26
1044Brazil2025-09-21
1045Germany2025-09-27
1046France2025-09-22
1047Russia2025-09-09
1048Italy2025-09-08
1049United Kingdom2025-09-17

On-Demand Data

NameIdCountryDate
Darci Poquette1000Japan2025-09-20
Leja Caldarera1001Argentina2025-09-05
Murillo Malet1002Canada2025-09-20
Mayumi Kolmetz1003Argentina2025-09-13
Morrow Ruta1004Canada2025-09-04
Aika Inouye1005Brazil2025-09-19
Leja Caldarera1006Russia2025-10-02
Izzy Garufi1007Germany2025-09-07
Jeanfrancois Venere1008Australia2025-09-17
Wickens Nestle1009Canada2025-09-13
Morrow Ruta1010Spain2025-09-22
Jefferson Schemmer1011Russia2025-09-18
Jefferson Schemmer1012Russia2025-09-11
Octavia Malet1013Japan2025-09-23
Munro Ferencz1014Spain2025-10-01
Jones Vocelka1015Japan2025-09-22
Adams Morasca1016Italy2025-09-26
Aruna Figeroa1017Canada2025-09-08
Chavez Briddick1018United Kingdom2025-09-10
Octavia Malet1019Germany2025-09-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteBrazilIoni Bowcher NEGOTIATION
Kaitlin OstroskyArgentinaOnyama Limba NEW
Francesco ShinkoGermanyAnna Fali PROPOSAL
Nicolas IturbideIndiaIvan Magalhaes QUALIFIED
Darci PoquetteUnited KingdomElwin Sharvill NEW
Maria MarrierJapanIvan Magalhaes RENEWAL
Jones VocelkaUnited KingdomIoni Bowcher RENEWAL
Jones VocelkaUnited KingdomOnyama Limba QUALIFIED
Aditya KuskoRussiaAmy Elsner NEGOTIATION
Ashley DoeSpainXuxue Feng QUALIFIED
Kaitlin OstroskyItalyIoni Bowcher RENEWAL
Sinclair WaycottRussiaAsiya Javayant UNQUALIFIED
Smith GlickArgentinaAsiya Javayant NEGOTIATION
Emily WhobreyAustraliaIvan Magalhaes PROPOSAL
Julie StensethArgentinaAnna Fali NEW
David DarakjyJapanOnyama Limba PROPOSAL
Aditya KuskoAustraliaIoni Bowcher NEGOTIATION
Wickens NestleFranceXuxue Feng PROPOSAL
Morrow RutaFranceAmy Elsner RENEWAL
Leja CaldareraSpainBernardo Dominic RENEWAL
Deepesh ChuiCanadaElwin Sharvill NEGOTIATION
Murillo MaletGermanyAmy Elsner UNQUALIFIED
Stacey MacleadSpainAsiya Javayant NEW
Arvin AlbaresSpainElwin Sharvill NEGOTIATION
Ashley DoeItalyStephen Shaw PROPOSAL
Salvatore StockhamGermanyXuxue Feng UNQUALIFIED
Morrow RutaCanadaAsiya Javayant UNQUALIFIED
Juan WieserUnited KingdomIvan Magalhaes QUALIFIED
Misaki RoysterFranceAmy Elsner UNQUALIFIED
Darci PoquetteJapanXuxue Feng RENEWAL
Maria MarrierUnited KingdomOnyama Limba QUALIFIED
Izzy GarufiIndiaAnna Fali NEGOTIATION
Silvio SlusarskiGermanyXuxue Feng PROPOSAL
Alejandro PerinArgentinaIoni Bowcher UNQUALIFIED
Jennifer AmigonJapanBernardo Dominic PROPOSAL
Adams MorascaFranceXuxue Feng PROPOSAL
Cody SaylorsIndiaAsiya Javayant QUALIFIED
Morrow RutaGermanyAsiya Javayant RENEWAL
Smith GlickRussiaAsiya Javayant QUALIFIED
James ButtJapanElwin Sharvill NEW

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