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
Ashley DoeFranceElwin Sharvill QUALIFIED
Mayumi KolmetzFranceIoni Bowcher PROPOSAL
David DarakjyRussiaIoni Bowcher NEGOTIATION
Emily WhobreyArgentinaAmy Elsner RENEWAL
Claire TollnerRussiaAsiya Javayant PROPOSAL
Costa DilliardGermanyIoni Bowcher QUALIFIED
Maisha RulapaughUnited KingdomStephen Shaw PROPOSAL
Faith GillianSpainXuxue Feng NEGOTIATION
Maisha RulapaughAustraliaIoni Bowcher UNQUALIFIED
Mujtaba NickaArgentinaXuxue Feng QUALIFIED
Clifford RimItalyElwin Sharvill UNQUALIFIED
Jennifer AmigonAustraliaAmy Elsner PROPOSAL
Francesco ShinkoJapanAmy Elsner UNQUALIFIED
Antonio CaudyArgentinaAmy Elsner NEGOTIATION
Ivar PaprockiCanadaStephen Shaw QUALIFIED
Costa DilliardBrazilStephen Shaw RENEWAL
Morrow RutaBrazilBernardo Dominic NEW
Alejandro PerinJapanOnyama Limba NEW
Leon OldroydArgentinaStephen Shaw NEW
Ricardo GauchoFranceAnna Fali NEGOTIATION
Maisha RulapaughIndiaAnna Fali QUALIFIED
Murillo MaletCanadaAsiya Javayant NEGOTIATION
Faith GillianGermanyOnyama Limba RENEWAL
Ivar PaprockiIndiaBernardo Dominic PROPOSAL
Maisha RulapaughRussiaIoni Bowcher QUALIFIED
Morrow RutaArgentinaIvan Magalhaes NEW
Rodrigues CampainAustraliaElwin Sharvill UNQUALIFIED
Emily WhobreyCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyGermanyElwin Sharvill NEGOTIATION
Adams MorascaIndiaOnyama Limba NEGOTIATION
Mujtaba NickaJapanBernardo Dominic PROPOSAL
Adams MorascaSpainBernardo Dominic NEGOTIATION
Tony FollerIndiaStephen Shaw UNQUALIFIED
Jefferson SchemmerBrazilAsiya Javayant UNQUALIFIED
Jefferson SchemmerItalyBernardo Dominic NEGOTIATION
Smith GlickCanadaAmy Elsner QUALIFIED
Stacey MacleadItalyStephen Shaw UNQUALIFIED
Julie StensethJapanIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes UNQUALIFIED
Leon OldroydItalyStephen Shaw UNQUALIFIED
Isabel BowleyIndiaXuxue Feng PROPOSAL
Silvio SlusarskiGermanyXuxue Feng PROPOSAL
James ButtFranceBernardo Dominic UNQUALIFIED
Izzy GarufiAustraliaIoni Bowcher UNQUALIFIED
Sinclair WaycottFranceElwin Sharvill RENEWAL
Johnson SergiFranceAmy Elsner NEW
Faith GillianIndiaAmy Elsner RENEWAL
Greenwood BologniaRussiaAsiya Javayant QUALIFIED
Alejandro PerinArgentinaBernardo Dominic RENEWAL
Maria MarrierGermanyIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereBrazilIoni Bowcher PROPOSAL
Jones VocelkaUnited KingdomAsiya Javayant NEGOTIATION
Misaki RoysterGermanyIvan Magalhaes NEW
Jeanfrancois VenereGermanyAnna Fali RENEWAL
Jefferson SchemmerBrazilOnyama Limba UNQUALIFIED
Mayumi KolmetzSpainOnyama Limba PROPOSAL
Deepesh ChuiRussiaElwin Sharvill NEGOTIATION
Munro FerenczItalyBernardo Dominic QUALIFIED
Aika InouyeGermanyBernardo Dominic NEGOTIATION
Maria MarrierJapanXuxue Feng RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsRussia2025-09-27Truhlar And Truhlar Attys QUALIFIED55Elwin Sharvill
1001Octavia MaletCanada2025-09-17Printing Dimensions NEW10Anna Fali
1002Deepesh ChuiBrazil2025-09-25Commercial Press NEGOTIATION71Bernardo Dominic
1003Octavia MaletUnited Kingdom2025-09-20Feltz Printing Service QUALIFIED54Anna Fali
1004Stacey MacleadBrazil2025-09-01Commercial Press NEW66Anna Fali
1005David DarakjySpain2025-09-27King, Christopher A Esq PROPOSAL1Asiya Javayant
1006Deepesh ChuiUnited Kingdom2025-09-01Buckley Miller Wright UNQUALIFIED19Ivan Magalhaes
1007Wickens NestleCanada2025-09-29Benton, John B Jr RENEWAL75Amy Elsner
1008Octavia MaletAustralia2025-09-12King, Christopher A Esq NEW55Amy Elsner
1009Chavez BriddickGermany2025-09-22Morlong Associates UNQUALIFIED21Bernardo Dominic
1010Deepesh ChuiFrance2025-09-14Feltz Printing Service NEW57Elwin Sharvill
1011Izzy GarufiSpain2025-09-24Buckley Miller Wright NEGOTIATION9Amy Elsner
1012Leon OldroydItaly2025-09-05Dorl, James J Esq NEGOTIATION6Onyama Limba
1013Kadeem FlosiIndia2025-09-06Feltz Printing Service NEW42Xuxue Feng
1014Octavia MaletFrance2025-09-26Feiner Bros UNQUALIFIED39Anna Fali
1015Murillo MaletSpain2025-09-29Feiner Bros NEW95Onyama Limba
1016Cody SaylorsCanada2025-09-11Feltz Printing Service NEW50Bernardo Dominic
1017Adams MorascaCanada2025-09-20Chapman, Ross E Esq PROPOSAL56Xuxue Feng
1018Rodrigues CampainCanada2025-09-24Morlong Associates NEW88Anna Fali
1019Munro FerenczArgentina2025-09-02Feiner Bros PROPOSAL60Xuxue Feng
1020Aditya KuskoJapan2025-09-28Rousseaux, Michael Esq NEGOTIATION90Asiya Javayant
1021Tony FollerAustralia2025-09-15Benton, John B Jr NEGOTIATION74Anna Fali
1022Mujtaba NickaItaly2025-09-02Chapman, Ross E Esq QUALIFIED21Bernardo Dominic
1023Aruna FigeroaBrazil2025-09-12Printing Dimensions UNQUALIFIED51Ivan Magalhaes
1024Juan WieserRussia2025-09-29Morlong Associates NEGOTIATION4Bernardo Dominic
1025Antonio CaudyJapan2025-09-01Rousseaux, Michael Esq NEW29Stephen Shaw
1026Claire TollnerCanada2025-09-17Commercial Press NEW66Xuxue Feng
1027Octavia MaletItaly2025-09-27Truhlar And Truhlar Attys QUALIFIED24Anna Fali
1028Arvin AlbaresBrazil2025-09-27Rangoni Of Florence UNQUALIFIED97Anna Fali
1029Murillo MaletArgentina2025-09-22King, Christopher A Esq PROPOSAL39Xuxue Feng
1030Adams MorascaUnited Kingdom2025-09-14Feiner Bros RENEWAL34Anna Fali
1031Misaki RoysterSpain2025-09-09Commercial Press PROPOSAL1Amy Elsner
1032Leja CaldareraBrazil2025-09-20Morlong Associates QUALIFIED36Ivan Magalhaes
1033Mayumi KolmetzSpain2025-09-13Dorl, James J Esq UNQUALIFIED66Onyama Limba
1034Leja CaldareraBrazil2025-09-09Commercial Press UNQUALIFIED97Amy Elsner
1035Adams MorascaSpain2025-09-01Feiner Bros RENEWAL23Ivan Magalhaes
1036Emily WhobreyArgentina2025-09-18Benton, John B Jr PROPOSAL45Anna Fali
1037Chavez BriddickItaly2025-09-09Chemel, James L Cpa UNQUALIFIED8Xuxue Feng
1038Salvatore StockhamGermany2025-09-11Chanay, Jeffrey A Esq NEW73Onyama Limba
1039Johnson SergiGermany2025-09-20Feiner Bros QUALIFIED41Stephen Shaw
1040Salvatore StockhamArgentina2025-09-17Chemel, James L Cpa NEW32Amy Elsner
1041Adams MorascaIndia2025-09-18Truhlar And Truhlar Attys RENEWAL79Ioni Bowcher
1042Juan WieserSpain2025-09-21Morlong Associates UNQUALIFIED35Ioni Bowcher
1043Ricardo GauchoUnited Kingdom2025-09-26Buckley Miller Wright RENEWAL1Onyama Limba
1044Greenwood BologniaGermany2025-09-02Chemel, James L Cpa QUALIFIED90Amy Elsner
1045Salvatore StockhamSpain2025-09-02Feiner Bros PROPOSAL82Asiya Javayant
1046Johnson SergiItaly2025-09-14Truhlar And Truhlar Attys PROPOSAL78Stephen Shaw
1047Ivar PaprockiGermany2025-09-16Printing Dimensions UNQUALIFIED53Bernardo Dominic
1048Salvatore StockhamFrance2025-09-06King, Christopher A Esq NEW55Amy Elsner
1049Julie StensethCanada2025-09-11King, Christopher A Esq NEW18Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Darci PoquetteSpainElwin Sharvill NEW
Tony FollerIndiaOnyama Limba QUALIFIED
Ashley DoeRussiaOnyama Limba UNQUALIFIED
Deepesh ChuiFranceIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereArgentinaAsiya Javayant NEGOTIATION
Adams MorascaCanadaAnna Fali NEGOTIATION
Emily WhobreyAustraliaBernardo Dominic RENEWAL
David DarakjyGermanyElwin Sharvill RENEWAL
Isabel BowleyAustraliaAsiya Javayant NEW
Chavez BriddickIndiaXuxue Feng UNQUALIFIED
Faith GillianJapanAnna Fali QUALIFIED
Arvin AlbaresAustraliaIoni Bowcher NEGOTIATION
Ivar PaprockiJapanIoni Bowcher RENEWAL
Ashley DoeArgentinaIoni Bowcher NEW
Ashley DoeSpainIoni Bowcher NEGOTIATION
Leja CaldareraCanadaXuxue Feng NEGOTIATION
Izzy GarufiRussiaAmy Elsner PROPOSAL
Deepesh ChuiGermanyAmy Elsner RENEWAL
Wickens NestleGermanyAsiya Javayant NEGOTIATION
Rodrigues CampainAustraliaIoni Bowcher UNQUALIFIED
Silvio SlusarskiGermanyAnna Fali PROPOSAL
Munro FerenczAustraliaBernardo Dominic PROPOSAL
Jennifer AmigonRussiaXuxue Feng RENEWAL
James ButtSpainElwin Sharvill RENEWAL
Aditya KuskoAustraliaIoni Bowcher QUALIFIED
Emily WhobreyArgentinaOnyama Limba RENEWAL
Emily WhobreyRussiaOnyama Limba NEW
Jeanfrancois VenereAustraliaAnna Fali QUALIFIED
Murillo MaletCanadaElwin Sharvill NEW
Juan WieserIndiaAmy Elsner RENEWAL
Kaitlin OstroskyGermanyAnna Fali QUALIFIED
Costa DilliardCanadaIoni Bowcher RENEWAL
Aditya KuskoSpainStephen Shaw NEW
Clifford RimJapanOnyama Limba PROPOSAL
Adams MorascaCanadaIoni Bowcher NEW
Costa DilliardSpainIoni Bowcher UNQUALIFIED
Maria MarrierAustraliaBernardo Dominic RENEWAL
Jones VocelkaJapanBernardo Dominic PROPOSAL
Clifford RimAustraliaElwin Sharvill PROPOSAL
Juan WieserSpainXuxue Feng NEW
Emily WhobreyAustraliaIvan Magalhaes PROPOSAL
Jefferson SchemmerItalyXuxue Feng RENEWAL
Arvin AlbaresIndiaBernardo Dominic NEGOTIATION
Sinclair WaycottGermanyAmy Elsner NEW
Clifford RimUnited KingdomIvan Magalhaes NEGOTIATION
Alejandro PerinFranceOnyama Limba NEGOTIATION
Costa DilliardIndiaAsiya Javayant QUALIFIED
Chavez BriddickJapanElwin Sharvill NEW
Darci PoquetteAustraliaXuxue Feng UNQUALIFIED
Rodrigues CampainUnited KingdomStephen Shaw NEGOTIATION
Frozen Columns
Name
Silvio Slusarski
Jefferson Schemmer
Deepesh Chui
Jeanfrancois Venere
Sinclair Waycott
Mujtaba Nicka
Deepesh Chui
Nicolas Iturbide
Mayumi Kolmetz
Isabel Bowley
Maisha Rulapaugh
Francesco Shinko
Kadeem Flosi
Francesco Shinko
Francesco Shinko
Aruna Figeroa
David Darakjy
Chavez Briddick
Morrow Ruta
Jones Vocelka
Aruna Figeroa
Octavia Malet
Kaitlin Ostrosky
Costa Dilliard
Arvin Albares
James Butt
Jeanfrancois Venere
Rodrigues Campain
Johnson Sergi
Chavez Briddick
Cody Saylors
Aditya Kusko
Maria Marrier
Octavia Malet
Aika Inouye
Octavia Malet
Mayumi Kolmetz
Jeanfrancois Venere
Maria Marrier
Francesco Shinko
Julie Stenseth
Izzy Garufi
Izzy Garufi
Sinclair Waycott
Deepesh Chui
Murillo Malet
Leon Oldroyd
Mujtaba Nicka
Ashley Doe
Greenwood Bolognia
IdCountryDate
1000Spain2025-09-13
1001Germany2025-09-15
1002Brazil2025-09-11
1003United Kingdom2025-09-05
1004Australia2025-09-06
1005United Kingdom2025-09-20
1006Argentina2025-09-13
1007Argentina2025-09-09
1008United Kingdom2025-09-29
1009Canada2025-09-22
1010India2025-09-20
1011Australia2025-09-26
1012Argentina2025-09-15
1013India2025-09-13
1014Brazil2025-09-15
1015Argentina2025-09-04
1016Japan2025-09-02
1017India2025-09-25
1018Spain2025-09-25
1019Canada2025-09-13
1020United Kingdom2025-09-21
1021Italy2025-09-15
1022India2025-09-23
1023Brazil2025-09-01
1024Italy2025-09-09
1025Argentina2025-09-12
1026Argentina2025-09-19
1027Canada2025-09-16
1028Argentina2025-09-16
1029United Kingdom2025-09-11
1030India2025-09-05
1031Spain2025-09-21
1032Germany2025-09-21
1033India2025-09-11
1034Australia2025-09-22
1035Canada2025-09-02
1036Canada2025-09-02
1037Germany2025-09-12
1038Canada2025-09-19
1039Italy2025-08-31
1040Germany2025-09-11
1041Italy2025-09-27
1042Germany2025-09-15
1043Japan2025-09-16
1044United Kingdom2025-09-28
1045United Kingdom2025-09-02
1046Argentina2025-09-03
1047Italy2025-09-15
1048France2025-09-22
1049Germany2025-09-06

On-Demand Data

NameIdCountryDate
Isabel Bowley1000India2025-09-03
Maisha Rulapaugh1001India2025-09-05
Silvio Slusarski1002Brazil2025-09-17
Octavia Malet1003Japan2025-09-19
Jeanfrancois Venere1004Spain2025-09-16
Juan Wieser1005United Kingdom2025-09-17
Julie Stenseth1006Australia2025-09-16
Adams Morasca1007Argentina2025-09-29
Nicolas Iturbide1008Canada2025-09-22
Jones Vocelka1009France2025-09-20
Maisha Rulapaugh1010Japan2025-09-10
Smith Glick1011Spain2025-09-05
Darci Poquette1012United Kingdom2025-09-09
Alejandro Perin1013Spain2025-09-16
Emily Whobrey1014United Kingdom2025-09-17
Octavia Malet1015United Kingdom2025-09-29
Aruna Figeroa1016Canada2025-09-14
Claire Tollner1017Spain2025-09-04
Cody Saylors1018Australia2025-09-23
Chavez Briddick1019India2025-09-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford RimGermanyIoni Bowcher QUALIFIED
Maisha RulapaughGermanyAsiya Javayant NEGOTIATION
Jefferson SchemmerJapanAsiya Javayant NEW
Isabel BowleyItalyXuxue Feng RENEWAL
Izzy GarufiAustraliaAsiya Javayant PROPOSAL
Faith GillianItalyBernardo Dominic QUALIFIED
Octavia MaletArgentinaAnna Fali QUALIFIED
Darci PoquetteAustraliaStephen Shaw NEGOTIATION
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Ashley DoeAustraliaElwin Sharvill NEW
Sinclair WaycottCanadaStephen Shaw RENEWAL
Emily WhobreyBrazilAmy Elsner NEGOTIATION
Johnson SergiJapanAsiya Javayant RENEWAL
Smith GlickUnited KingdomXuxue Feng RENEWAL
Wickens NestleRussiaIoni Bowcher PROPOSAL
Cody SaylorsAustraliaOnyama Limba UNQUALIFIED
Wickens NestleCanadaBernardo Dominic NEW
Francesco ShinkoArgentinaXuxue Feng UNQUALIFIED
Jefferson SchemmerUnited KingdomAnna Fali PROPOSAL
David DarakjyArgentinaAsiya Javayant PROPOSAL
Aditya KuskoUnited KingdomAmy Elsner NEGOTIATION
Arvin AlbaresBrazilAnna Fali RENEWAL
Izzy GarufiSpainStephen Shaw NEGOTIATION
Faith GillianIndiaElwin Sharvill NEGOTIATION
Rodrigues CampainFranceStephen Shaw PROPOSAL
Isabel BowleySpainIoni Bowcher UNQUALIFIED
Leon OldroydItalyIvan Magalhaes UNQUALIFIED
Mujtaba NickaItalyIoni Bowcher UNQUALIFIED
Ricardo GauchoRussiaIvan Magalhaes QUALIFIED
Jones VocelkaArgentinaBernardo Dominic NEGOTIATION
Nicolas IturbideFranceBernardo Dominic NEW
Leon OldroydRussiaBernardo Dominic PROPOSAL
Kadeem FlosiGermanyOnyama Limba NEW
Kaitlin OstroskyIndiaBernardo Dominic UNQUALIFIED
Octavia MaletItalyBernardo Dominic PROPOSAL
Octavia MaletJapanIvan Magalhaes RENEWAL
Salvatore StockhamSpainStephen Shaw NEW
Johnson SergiUnited KingdomIvan Magalhaes RENEWAL
Kadeem FlosiCanadaXuxue Feng NEW
Murillo MaletBrazilAmy Elsner RENEWAL

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