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
Jennifer AmigonGermanyStephen Shaw UNQUALIFIED
Octavia MaletUnited KingdomIoni Bowcher PROPOSAL
Johnson SergiBrazilAnna Fali PROPOSAL
Julie StensethFranceStephen Shaw PROPOSAL
Nicolas IturbideBrazilXuxue Feng QUALIFIED
Mayumi KolmetzGermanyOnyama Limba UNQUALIFIED
Kaitlin OstroskyFranceElwin Sharvill QUALIFIED
Smith GlickJapanBernardo Dominic RENEWAL
Kaitlin OstroskyJapanAsiya Javayant NEGOTIATION
Chavez BriddickIndiaAnna Fali QUALIFIED
Maisha RulapaughJapanAsiya Javayant NEW
Wickens NestleItalyOnyama Limba NEW
Claire TollnerJapanXuxue Feng NEW
Chavez BriddickItalyAnna Fali RENEWAL
Octavia MaletBrazilIoni Bowcher UNQUALIFIED
Ivar PaprockiFranceIoni Bowcher NEGOTIATION
Octavia MaletBrazilIvan Magalhaes NEGOTIATION
Emily WhobreyIndiaBernardo Dominic NEGOTIATION
Chavez BriddickGermanyAnna Fali NEW
Munro FerenczFranceBernardo Dominic QUALIFIED
Adams MorascaJapanIvan Magalhaes NEGOTIATION
Ivar PaprockiCanadaElwin Sharvill NEGOTIATION
Adams MorascaArgentinaAmy Elsner RENEWAL
Arvin AlbaresItalyAnna Fali RENEWAL
Arvin AlbaresItalyIvan Magalhaes UNQUALIFIED
Faith GillianGermanyElwin Sharvill NEGOTIATION
Jennifer AmigonBrazilOnyama Limba QUALIFIED
Octavia MaletUnited KingdomAnna Fali UNQUALIFIED
Deepesh ChuiCanadaXuxue Feng RENEWAL
Darci PoquetteIndiaElwin Sharvill PROPOSAL
Alejandro PerinItalyElwin Sharvill QUALIFIED
Kadeem FlosiGermanyAsiya Javayant RENEWAL
Octavia MaletCanadaIoni Bowcher PROPOSAL
Murillo MaletAustraliaStephen Shaw NEW
Ricardo GauchoFranceIvan Magalhaes NEW
Maisha RulapaughSpainBernardo Dominic NEGOTIATION
Claire TollnerGermanyOnyama Limba RENEWAL
Antonio CaudySpainAnna Fali NEW
Salvatore StockhamBrazilIoni Bowcher NEGOTIATION
Emily WhobreyGermanyAmy Elsner NEGOTIATION
Greenwood BologniaUnited KingdomOnyama Limba QUALIFIED
Jefferson SchemmerItalyOnyama Limba PROPOSAL
Smith GlickRussiaAsiya Javayant RENEWAL
Stacey MacleadUnited KingdomAnna Fali RENEWAL
Juan WieserBrazilStephen Shaw UNQUALIFIED
Cody SaylorsGermanyBernardo Dominic QUALIFIED
Aruna FigeroaArgentinaIoni Bowcher NEGOTIATION
Francesco ShinkoGermanyStephen Shaw PROPOSAL
Cody SaylorsIndiaXuxue Feng PROPOSAL
Adams MorascaFranceAmy Elsner NEW
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinUnited KingdomXuxue Feng NEGOTIATION
David DarakjyCanadaOnyama Limba NEGOTIATION
Chavez BriddickAustraliaBernardo Dominic PROPOSAL
Costa DilliardUnited KingdomAmy Elsner RENEWAL
Wickens NestleCanadaAnna Fali NEW
Ricardo GauchoRussiaOnyama Limba PROPOSAL
Izzy GarufiCanadaElwin Sharvill QUALIFIED
Juan WieserIndiaXuxue Feng PROPOSAL
Emily WhobreyBrazilAmy Elsner QUALIFIED
Rodrigues CampainJapanAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimAustralia2025-08-19Commercial Press PROPOSAL33Xuxue Feng
1001Smith GlickSpain2025-08-29Rousseaux, Michael Esq NEGOTIATION3Amy Elsner
1002Aika InouyeAustralia2025-08-24Buckley Miller Wright QUALIFIED99Anna Fali
1003Darci PoquetteRussia2025-08-14Feiner Bros NEGOTIATION43Bernardo Dominic
1004Nicolas IturbideAustralia2025-08-08Rangoni Of Florence RENEWAL47Ioni Bowcher
1005Sinclair WaycottSpain2025-08-08Feltz Printing Service UNQUALIFIED54Bernardo Dominic
1006Aika InouyeBrazil2025-08-31Chemel, James L Cpa UNQUALIFIED41Bernardo Dominic
1007Antonio CaudyAustralia2025-08-18Printing Dimensions PROPOSAL45Anna Fali
1008James ButtJapan2025-08-17Feiner Bros NEW94Anna Fali
1009Ivar PaprockiItaly2025-08-06Rousseaux, Michael Esq PROPOSAL82Elwin Sharvill
1010Costa DilliardJapan2025-08-18King, Christopher A Esq PROPOSAL46Onyama Limba
1011Ashley DoeUnited Kingdom2025-08-10Morlong Associates QUALIFIED79Stephen Shaw
1012Ashley DoeRussia2025-08-24Rousseaux, Michael Esq PROPOSAL15Onyama Limba
1013Salvatore StockhamGermany2025-08-09Morlong Associates QUALIFIED70Ioni Bowcher
1014Kaitlin OstroskyGermany2025-08-14Printing Dimensions NEW56Bernardo Dominic
1015Kadeem FlosiRussia2025-08-20Printing Dimensions UNQUALIFIED22Ioni Bowcher
1016Silvio SlusarskiFrance2025-08-05King, Christopher A Esq NEGOTIATION54Onyama Limba
1017Maisha RulapaughCanada2025-08-31Chapman, Ross E Esq RENEWAL40Xuxue Feng
1018Claire TollnerRussia2025-08-05Benton, John B Jr RENEWAL72Bernardo Dominic
1019Aditya KuskoGermany2025-08-18Buckley Miller Wright NEW18Asiya Javayant
1020Darci PoquetteArgentina2025-08-07Buckley Miller Wright RENEWAL39Bernardo Dominic
1021Johnson SergiBrazil2025-08-27King, Christopher A Esq QUALIFIED67Amy Elsner
1022Rodrigues CampainItaly2025-08-21Truhlar And Truhlar Attys PROPOSAL26Xuxue Feng
1023Jennifer AmigonUnited Kingdom2025-08-14Rangoni Of Florence UNQUALIFIED37Stephen Shaw
1024Jennifer AmigonIndia2025-08-12Feltz Printing Service RENEWAL66Stephen Shaw
1025Arvin AlbaresBrazil2025-08-13Buckley Miller Wright QUALIFIED68Stephen Shaw
1026Jennifer AmigonJapan2025-08-05Chapman, Ross E Esq QUALIFIED22Xuxue Feng
1027Arvin AlbaresIndia2025-08-03Benton, John B Jr QUALIFIED91Amy Elsner
1028Nicolas IturbideGermany2025-08-08Truhlar And Truhlar Attys NEW90Elwin Sharvill
1029Antonio CaudyArgentina2025-08-14Buckley Miller Wright UNQUALIFIED47Stephen Shaw
1030Misaki RoysterGermany2025-08-08Feltz Printing Service NEGOTIATION56Onyama Limba
1031Mayumi KolmetzIndia2025-08-31Chemel, James L Cpa NEGOTIATION82Elwin Sharvill
1032Tony FollerSpain2025-08-25Feiner Bros NEGOTIATION98Xuxue Feng
1033Juan WieserRussia2025-08-18Printing Dimensions NEW27Ioni Bowcher
1034Greenwood BologniaUnited Kingdom2025-08-18Printing Dimensions RENEWAL93Bernardo Dominic
1035Arvin AlbaresJapan2025-08-18Benton, John B Jr RENEWAL42Ioni Bowcher
1036Silvio SlusarskiGermany2025-08-24Dorl, James J Esq RENEWAL20Bernardo Dominic
1037Stacey MacleadIndia2025-08-04Rangoni Of Florence PROPOSAL32Ioni Bowcher
1038Jefferson SchemmerUnited Kingdom2025-08-15Chemel, James L Cpa UNQUALIFIED21Ivan Magalhaes
1039Alejandro PerinIndia2025-08-08Commercial Press NEGOTIATION35Amy Elsner
1040Deepesh ChuiAustralia2025-08-31King, Christopher A Esq NEGOTIATION69Anna Fali
1041Emily WhobreyGermany2025-08-25Morlong Associates PROPOSAL10Elwin Sharvill
1042Salvatore StockhamArgentina2025-08-06Chanay, Jeffrey A Esq PROPOSAL69Ivan Magalhaes
1043Stacey MacleadIndia2025-08-04Printing Dimensions NEGOTIATION32Amy Elsner
1044Octavia MaletUnited Kingdom2025-08-10King, Christopher A Esq NEGOTIATION11Xuxue Feng
1045Rodrigues CampainBrazil2025-08-24Morlong Associates QUALIFIED54Ivan Magalhaes
1046Aditya KuskoUnited Kingdom2025-08-14Chapman, Ross E Esq PROPOSAL44Onyama Limba
1047Misaki RoysterGermany2025-08-26Rousseaux, Michael Esq PROPOSAL25Stephen Shaw
1048Chavez BriddickFrance2025-08-02Feltz Printing Service UNQUALIFIED9Asiya Javayant
1049Misaki RoysterIndia2025-08-07Dorl, James J Esq NEGOTIATION59Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresBrazilElwin Sharvill RENEWAL
Jones VocelkaBrazilAsiya Javayant PROPOSAL
Smith GlickGermanyElwin Sharvill QUALIFIED
Octavia MaletUnited KingdomStephen Shaw PROPOSAL
Deepesh ChuiRussiaIoni Bowcher PROPOSAL
Mujtaba NickaSpainXuxue Feng QUALIFIED
Deepesh ChuiArgentinaBernardo Dominic NEW
Arvin AlbaresBrazilIoni Bowcher RENEWAL
Ricardo GauchoFranceElwin Sharvill UNQUALIFIED
Arvin AlbaresJapanBernardo Dominic PROPOSAL
Emily WhobreyArgentinaOnyama Limba NEW
Emily WhobreySpainAsiya Javayant UNQUALIFIED
Aika InouyeUnited KingdomStephen Shaw PROPOSAL
Cody SaylorsJapanAmy Elsner QUALIFIED
Deepesh ChuiArgentinaAmy Elsner QUALIFIED
Faith GillianBrazilAmy Elsner RENEWAL
Emily WhobreyItalyBernardo Dominic RENEWAL
Munro FerenczRussiaElwin Sharvill RENEWAL
Murillo MaletJapanOnyama Limba UNQUALIFIED
Costa DilliardFranceAmy Elsner RENEWAL
Smith GlickJapanOnyama Limba PROPOSAL
Aika InouyeBrazilStephen Shaw RENEWAL
Munro FerenczArgentinaAmy Elsner PROPOSAL
Jones VocelkaRussiaOnyama Limba PROPOSAL
Leja CaldareraJapanIvan Magalhaes NEGOTIATION
Stacey MacleadUnited KingdomStephen Shaw NEGOTIATION
Morrow RutaCanadaElwin Sharvill PROPOSAL
Maria MarrierUnited KingdomElwin Sharvill PROPOSAL
Adams MorascaAustraliaXuxue Feng UNQUALIFIED
Mujtaba NickaItalyElwin Sharvill NEGOTIATION
Faith GillianArgentinaIoni Bowcher QUALIFIED
Izzy GarufiAustraliaAsiya Javayant NEGOTIATION
Ashley DoeGermanyIvan Magalhaes PROPOSAL
Nicolas IturbideBrazilXuxue Feng NEGOTIATION
Faith GillianSpainOnyama Limba UNQUALIFIED
Maisha RulapaughSpainAnna Fali NEGOTIATION
Arvin AlbaresArgentinaIvan Magalhaes RENEWAL
Faith GillianSpainAnna Fali PROPOSAL
Aika InouyeCanadaXuxue Feng RENEWAL
Octavia MaletFranceAmy Elsner QUALIFIED
Isabel BowleyBrazilAnna Fali RENEWAL
Adams MorascaUnited KingdomElwin Sharvill NEW
Claire TollnerArgentinaAmy Elsner QUALIFIED
Cody SaylorsUnited KingdomIoni Bowcher NEGOTIATION
Clifford RimJapanAnna Fali RENEWAL
Ashley DoeFranceElwin Sharvill NEGOTIATION
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Murillo MaletSpainXuxue Feng UNQUALIFIED
Maria MarrierCanadaAsiya Javayant UNQUALIFIED
Mayumi KolmetzUnited KingdomBernardo Dominic NEW
Frozen Columns
Name
Jefferson Schemmer
Rodrigues Campain
Darci Poquette
Tony Foller
Maisha Rulapaugh
Leon Oldroyd
Rodrigues Campain
Octavia Malet
Julie Stenseth
Sinclair Waycott
Kadeem Flosi
David Darakjy
Izzy Garufi
Smith Glick
Aditya Kusko
Wickens Nestle
Alejandro Perin
Deepesh Chui
Isabel Bowley
Munro Ferencz
Ivar Paprocki
Deepesh Chui
Alejandro Perin
Morrow Ruta
Faith Gillian
Juan Wieser
Faith Gillian
Juan Wieser
Octavia Malet
Kaitlin Ostrosky
Claire Tollner
Clifford Rim
Ivar Paprocki
Mayumi Kolmetz
Smith Glick
Johnson Sergi
James Butt
James Butt
Arvin Albares
Johnson Sergi
Mujtaba Nicka
Ashley Doe
Aditya Kusko
Rodrigues Campain
Ricardo Gaucho
Murillo Malet
Smith Glick
Ivar Paprocki
Francesco Shinko
Mujtaba Nicka
IdCountryDate
1000Germany2025-08-28
1001Canada2025-08-13
1002Brazil2025-08-12
1003Italy2025-08-06
1004Brazil2025-08-12
1005Germany2025-08-22
1006Italy2025-08-20
1007United Kingdom2025-08-21
1008Australia2025-08-18
1009France2025-08-03
1010Japan2025-08-02
1011Australia2025-08-05
1012Japan2025-08-31
1013India2025-08-06
1014Canada2025-08-11
1015Canada2025-08-03
1016Japan2025-08-03
1017Germany2025-08-08
1018Brazil2025-08-08
1019Japan2025-08-25
1020Canada2025-08-04
1021Canada2025-08-25
1022United Kingdom2025-08-18
1023United Kingdom2025-08-03
1024Russia2025-08-08
1025Spain2025-08-09
1026Italy2025-08-07
1027France2025-08-17
1028Italy2025-08-21
1029France2025-08-14
1030Australia2025-08-19
1031Argentina2025-08-14
1032Argentina2025-08-03
1033Japan2025-08-04
1034Japan2025-08-05
1035Russia2025-08-04
1036Germany2025-08-05
1037Australia2025-08-05
1038India2025-08-10
1039Canada2025-08-25
1040Brazil2025-08-15
1041Italy2025-08-02
1042Australia2025-08-05
1043United Kingdom2025-08-04
1044Russia2025-08-02
1045France2025-08-23
1046France2025-08-09
1047France2025-08-16
1048Australia2025-08-25
1049Italy2025-08-27

On-Demand Data

NameIdCountryDate
Darci Poquette1000France2025-08-28
Jefferson Schemmer1001Russia2025-08-02
Costa Dilliard1002Canada2025-08-24
Octavia Malet1003Brazil2025-08-03
Alejandro Perin1004Spain2025-08-10
David Darakjy1005France2025-08-15
Kadeem Flosi1006Russia2025-08-26
Kadeem Flosi1007Japan2025-08-31
Stacey Maclead1008Argentina2025-08-16
Johnson Sergi1009France2025-08-24
Francesco Shinko1010Italy2025-08-29
Leon Oldroyd1011Australia2025-08-02
David Darakjy1012Argentina2025-08-21
Julie Stenseth1013Spain2025-08-29
Claire Tollner1014France2025-08-18
Leja Caldarera1015Australia2025-08-03
Claire Tollner1016Russia2025-08-02
Ricardo Gaucho1017Spain2025-08-19
Maisha Rulapaugh1018Italy2025-08-07
Ivar Paprocki1019Argentina2025-08-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Misaki RoysterFranceXuxue Feng NEGOTIATION
Cody SaylorsArgentinaOnyama Limba QUALIFIED
Ashley DoeAustraliaAnna Fali QUALIFIED
Leon OldroydFranceIvan Magalhaes NEGOTIATION
Rodrigues CampainCanadaOnyama Limba NEW
Julie StensethIndiaXuxue Feng UNQUALIFIED
Salvatore StockhamIndiaIvan Magalhaes NEW
Ivar PaprockiFranceBernardo Dominic RENEWAL
Claire TollnerRussiaAmy Elsner RENEWAL
Johnson SergiAustraliaElwin Sharvill QUALIFIED
Izzy GarufiBrazilOnyama Limba RENEWAL
Arvin AlbaresBrazilIvan Magalhaes QUALIFIED
Darci PoquetteBrazilAnna Fali QUALIFIED
Maisha RulapaughAustraliaAnna Fali NEGOTIATION
Kadeem FlosiSpainElwin Sharvill UNQUALIFIED
Johnson SergiBrazilElwin Sharvill QUALIFIED
Kadeem FlosiGermanyBernardo Dominic QUALIFIED
Smith GlickUnited KingdomOnyama Limba PROPOSAL
Alejandro PerinSpainStephen Shaw RENEWAL
Aika InouyeUnited KingdomAsiya Javayant UNQUALIFIED
Faith GillianJapanIoni Bowcher RENEWAL
Munro FerenczAustraliaAsiya Javayant NEW
Juan WieserSpainOnyama Limba NEW
Chavez BriddickUnited KingdomBernardo Dominic UNQUALIFIED
Aditya KuskoJapanIvan Magalhaes NEGOTIATION
Aruna FigeroaGermanyOnyama Limba QUALIFIED
Aika InouyeBrazilIoni Bowcher RENEWAL
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Leja CaldareraIndiaXuxue Feng NEGOTIATION
Salvatore StockhamSpainAsiya Javayant NEGOTIATION
Chavez BriddickCanadaOnyama Limba UNQUALIFIED
Darci PoquetteRussiaAsiya Javayant QUALIFIED
Darci PoquetteFranceOnyama Limba QUALIFIED
Tony FollerGermanyOnyama Limba NEW
Arvin AlbaresBrazilStephen Shaw PROPOSAL
Costa DilliardBrazilXuxue Feng UNQUALIFIED
Wickens NestleItalyAnna Fali NEGOTIATION
Francesco ShinkoUnited KingdomOnyama Limba NEGOTIATION
Juan WieserJapanBernardo Dominic PROPOSAL
Francesco ShinkoItalyXuxue Feng 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>