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
Julie StensethCanadaAnna Fali NEGOTIATION
Aditya KuskoArgentinaAsiya Javayant UNQUALIFIED
Munro FerenczCanadaBernardo Dominic UNQUALIFIED
Johnson SergiFranceStephen Shaw RENEWAL
Costa DilliardArgentinaElwin Sharvill QUALIFIED
Cody SaylorsJapanAnna Fali PROPOSAL
Smith GlickRussiaStephen Shaw UNQUALIFIED
Mayumi KolmetzUnited KingdomXuxue Feng PROPOSAL
Silvio SlusarskiRussiaIvan Magalhaes QUALIFIED
Darci PoquetteFranceAnna Fali UNQUALIFIED
Mayumi KolmetzAustraliaXuxue Feng NEGOTIATION
Aditya KuskoGermanyXuxue Feng QUALIFIED
Aika InouyeGermanyAnna Fali QUALIFIED
Nicolas IturbideUnited KingdomIvan Magalhaes PROPOSAL
Clifford RimRussiaOnyama Limba QUALIFIED
Jefferson SchemmerBrazilXuxue Feng QUALIFIED
Francesco ShinkoJapanOnyama Limba PROPOSAL
David DarakjyItalyAmy Elsner PROPOSAL
Izzy GarufiItalyXuxue Feng QUALIFIED
Arvin AlbaresBrazilBernardo Dominic UNQUALIFIED
Arvin AlbaresAustraliaIoni Bowcher RENEWAL
Greenwood BologniaArgentinaAsiya Javayant QUALIFIED
Chavez BriddickItalyStephen Shaw RENEWAL
Emily WhobreyItalyIoni Bowcher RENEWAL
Jeanfrancois VenereUnited KingdomAmy Elsner NEW
Munro FerenczCanadaBernardo Dominic UNQUALIFIED
Wickens NestleArgentinaAsiya Javayant NEGOTIATION
Costa DilliardRussiaIvan Magalhaes NEGOTIATION
Maisha RulapaughBrazilOnyama Limba NEW
Faith GillianGermanyIvan Magalhaes UNQUALIFIED
Isabel BowleySpainOnyama Limba PROPOSAL
Izzy GarufiArgentinaOnyama Limba QUALIFIED
Maria MarrierIndiaAnna Fali NEW
Adams MorascaCanadaAsiya Javayant QUALIFIED
Kaitlin OstroskyArgentinaXuxue Feng UNQUALIFIED
Costa DilliardItalyXuxue Feng NEW
Jones VocelkaArgentinaOnyama Limba NEW
Deepesh ChuiGermanyOnyama Limba NEW
James ButtItalyOnyama Limba NEW
Darci PoquetteGermanyElwin Sharvill PROPOSAL
Johnson SergiArgentinaIoni Bowcher PROPOSAL
Munro FerenczArgentinaAsiya Javayant PROPOSAL
Murillo MaletAustraliaIoni Bowcher QUALIFIED
Kaitlin OstroskyGermanyElwin Sharvill RENEWAL
Wickens NestleBrazilAnna Fali NEW
Leon OldroydFranceStephen Shaw PROPOSAL
Wickens NestleFranceOnyama Limba UNQUALIFIED
Leon OldroydItalyElwin Sharvill NEW
Adams MorascaAustraliaXuxue Feng QUALIFIED
Ricardo GauchoItalyIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Sinclair WaycottItalyIoni Bowcher RENEWAL
Salvatore StockhamJapanBernardo Dominic QUALIFIED
Francesco ShinkoFranceBernardo Dominic RENEWAL
Cody SaylorsItalyIvan Magalhaes NEGOTIATION
Silvio SlusarskiFranceIvan Magalhaes NEW
Alejandro PerinCanadaElwin Sharvill NEGOTIATION
Leon OldroydUnited KingdomStephen Shaw PROPOSAL
Octavia MaletRussiaStephen Shaw UNQUALIFIED
Aika InouyeSpainIvan Magalhaes NEGOTIATION
Maisha RulapaughArgentinaBernardo Dominic QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainJapan2025-04-12Truhlar And Truhlar Attys PROPOSAL69Anna Fali
1001Alejandro PerinArgentina2025-04-16Commercial Press UNQUALIFIED44Xuxue Feng
1002Juan WieserCanada2025-04-08Printing Dimensions UNQUALIFIED8Asiya Javayant
1003Aika InouyeArgentina2025-04-19Printing Dimensions NEW65Xuxue Feng
1004Greenwood BologniaJapan2025-04-22Printing Dimensions QUALIFIED94Stephen Shaw
1005Izzy GarufiAustralia2025-04-09Feltz Printing Service UNQUALIFIED92Ivan Magalhaes
1006Maisha RulapaughCanada2025-03-27Feltz Printing Service PROPOSAL31Asiya Javayant
1007Nicolas IturbideAustralia2025-04-09Chanay, Jeffrey A Esq QUALIFIED17Elwin Sharvill
1008Claire TollnerIndia2025-03-27Rousseaux, Michael Esq NEGOTIATION23Amy Elsner
1009Chavez BriddickGermany2025-04-19Chanay, Jeffrey A Esq NEGOTIATION42Bernardo Dominic
1010Claire TollnerJapan2025-04-16Truhlar And Truhlar Attys NEW38Elwin Sharvill
1011Kadeem FlosiSpain2025-04-22Feiner Bros QUALIFIED36Elwin Sharvill
1012Claire TollnerSpain2025-04-16Chapman, Ross E Esq RENEWAL38Elwin Sharvill
1013Jones VocelkaGermany2025-03-27Benton, John B Jr UNQUALIFIED99Ivan Magalhaes
1014Johnson SergiCanada2025-04-17Printing Dimensions RENEWAL52Xuxue Feng
1015Rodrigues CampainJapan2025-04-12Rousseaux, Michael Esq QUALIFIED91Bernardo Dominic
1016Adams MorascaRussia2025-04-09Feltz Printing Service NEGOTIATION26Ivan Magalhaes
1017Jeanfrancois VenereRussia2025-03-31Morlong Associates NEGOTIATION64Bernardo Dominic
1018Cody SaylorsJapan2025-04-08King, Christopher A Esq QUALIFIED68Amy Elsner
1019Rodrigues CampainRussia2025-04-11Chanay, Jeffrey A Esq NEW3Xuxue Feng
1020Nicolas IturbideUnited Kingdom2025-04-16Rousseaux, Michael Esq QUALIFIED50Asiya Javayant
1021Mayumi KolmetzFrance2025-03-29Feltz Printing Service NEGOTIATION90Stephen Shaw
1022Chavez BriddickIndia2025-04-17Truhlar And Truhlar Attys UNQUALIFIED33Elwin Sharvill
1023Costa DilliardRussia2025-04-16Benton, John B Jr QUALIFIED31Amy Elsner
1024Ashley DoeIndia2025-04-20Chanay, Jeffrey A Esq RENEWAL68Ivan Magalhaes
1025Stacey MacleadSpain2025-04-11Buckley Miller Wright NEGOTIATION44Ivan Magalhaes
1026Clifford RimItaly2025-04-22Commercial Press RENEWAL64Onyama Limba
1027Misaki RoysterCanada2025-04-11Dorl, James J Esq NEGOTIATION84Xuxue Feng
1028Murillo MaletIndia2025-04-07Feltz Printing Service NEW10Xuxue Feng
1029Johnson SergiCanada2025-04-23Rousseaux, Michael Esq NEGOTIATION82Anna Fali
1030Kadeem FlosiCanada2025-04-12Truhlar And Truhlar Attys PROPOSAL45Stephen Shaw
1031Mayumi KolmetzGermany2025-04-07Printing Dimensions NEGOTIATION19Xuxue Feng
1032Ashley DoeCanada2025-04-13Chanay, Jeffrey A Esq UNQUALIFIED56Ioni Bowcher
1033Darci PoquetteGermany2025-03-31Morlong Associates QUALIFIED50Asiya Javayant
1034Nicolas IturbideIndia2025-04-09Printing Dimensions PROPOSAL89Anna Fali
1035Silvio SlusarskiAustralia2025-04-15Commercial Press UNQUALIFIED19Ioni Bowcher
1036Tony FollerRussia2025-03-29Commercial Press NEGOTIATION76Amy Elsner
1037David DarakjyArgentina2025-04-17Rangoni Of Florence PROPOSAL9Ioni Bowcher
1038Stacey MacleadItaly2025-04-22Chanay, Jeffrey A Esq NEW0Xuxue Feng
1039Ashley DoeIndia2025-04-04Printing Dimensions QUALIFIED9Ivan Magalhaes
1040Emily WhobreyAustralia2025-04-01Commercial Press UNQUALIFIED24Stephen Shaw
1041Aika InouyeArgentina2025-04-05Morlong Associates QUALIFIED93Amy Elsner
1042Adams MorascaCanada2025-04-18Commercial Press UNQUALIFIED55Elwin Sharvill
1043Izzy GarufiSpain2025-04-06Feiner Bros QUALIFIED88Asiya Javayant
1044Salvatore StockhamRussia2025-04-21Chanay, Jeffrey A Esq UNQUALIFIED27Xuxue Feng
1045Johnson SergiArgentina2025-04-23Dorl, James J Esq NEW30Bernardo Dominic
1046Ricardo GauchoJapan2025-04-19Truhlar And Truhlar Attys QUALIFIED96Anna Fali
1047Chavez BriddickBrazil2025-04-21Rousseaux, Michael Esq PROPOSAL60Onyama Limba
1048Julie StensethJapan2025-03-28Benton, John B Jr NEW91Ioni Bowcher
1049Mayumi KolmetzIndia2025-04-02Chemel, James L Cpa UNQUALIFIED26Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Jones VocelkaAustraliaBernardo Dominic UNQUALIFIED
Murillo MaletAustraliaIvan Magalhaes UNQUALIFIED
Julie StensethIndiaXuxue Feng PROPOSAL
Silvio SlusarskiSpainXuxue Feng PROPOSAL
Munro FerenczItalyXuxue Feng NEGOTIATION
James ButtFranceStephen Shaw RENEWAL
Misaki RoysterUnited KingdomStephen Shaw QUALIFIED
Smith GlickAustraliaAsiya Javayant UNQUALIFIED
Izzy GarufiIndiaAsiya Javayant QUALIFIED
Misaki RoysterBrazilElwin Sharvill NEGOTIATION
Claire TollnerCanadaOnyama Limba UNQUALIFIED
Mujtaba NickaGermanyAnna Fali PROPOSAL
Ashley DoeFranceElwin Sharvill RENEWAL
Mayumi KolmetzGermanyAmy Elsner UNQUALIFIED
Ivar PaprockiBrazilIvan Magalhaes RENEWAL
Jeanfrancois VenereSpainXuxue Feng PROPOSAL
Salvatore StockhamCanadaIvan Magalhaes UNQUALIFIED
Chavez BriddickAustraliaAnna Fali PROPOSAL
Jennifer AmigonCanadaBernardo Dominic UNQUALIFIED
Chavez BriddickSpainAsiya Javayant NEGOTIATION
Deepesh ChuiRussiaAsiya Javayant PROPOSAL
Alejandro PerinItalyStephen Shaw RENEWAL
Cody SaylorsUnited KingdomIvan Magalhaes UNQUALIFIED
Deepesh ChuiItalyAnna Fali NEGOTIATION
Juan WieserRussiaAnna Fali UNQUALIFIED
Cody SaylorsIndiaAnna Fali NEW
Adams MorascaItalyOnyama Limba UNQUALIFIED
Mujtaba NickaUnited KingdomOnyama Limba NEW
Julie StensethFranceAmy Elsner QUALIFIED
Munro FerenczUnited KingdomAsiya Javayant UNQUALIFIED
Johnson SergiCanadaBernardo Dominic NEGOTIATION
Arvin AlbaresFranceAnna Fali UNQUALIFIED
Wickens NestleArgentinaOnyama Limba PROPOSAL
Wickens NestleItalyAnna Fali QUALIFIED
Francesco ShinkoJapanAnna Fali QUALIFIED
Aditya KuskoRussiaOnyama Limba PROPOSAL
Kaitlin OstroskyRussiaOnyama Limba RENEWAL
Antonio CaudyArgentinaIoni Bowcher NEW
Morrow RutaCanadaIvan Magalhaes UNQUALIFIED
Rodrigues CampainAustraliaIoni Bowcher NEGOTIATION
Faith GillianFranceAmy Elsner UNQUALIFIED
Aruna FigeroaCanadaAsiya Javayant RENEWAL
Misaki RoysterJapanIvan Magalhaes NEW
Claire TollnerArgentinaAsiya Javayant PROPOSAL
Misaki RoysterRussiaAmy Elsner UNQUALIFIED
Maria MarrierJapanAsiya Javayant NEGOTIATION
Salvatore StockhamJapanAmy Elsner QUALIFIED
Mayumi KolmetzSpainXuxue Feng UNQUALIFIED
Juan WieserFranceXuxue Feng NEW
Jennifer AmigonSpainAmy Elsner UNQUALIFIED
Frozen Columns
Name
Misaki Royster
Leja Caldarera
Cody Saylors
Jefferson Schemmer
Arvin Albares
Kaitlin Ostrosky
Julie Stenseth
Aika Inouye
Antonio Caudy
Mayumi Kolmetz
Aika Inouye
Faith Gillian
Murillo Malet
Stacey Maclead
Chavez Briddick
Morrow Ruta
Julie Stenseth
James Butt
Antonio Caudy
Kaitlin Ostrosky
Sinclair Waycott
Stacey Maclead
Salvatore Stockham
Alejandro Perin
Jeanfrancois Venere
James Butt
Faith Gillian
Smith Glick
Faith Gillian
Misaki Royster
Adams Morasca
Smith Glick
Greenwood Bolognia
Cody Saylors
Leon Oldroyd
Claire Tollner
Alejandro Perin
Clifford Rim
Claire Tollner
Leon Oldroyd
Johnson Sergi
Misaki Royster
Murillo Malet
Costa Dilliard
Leja Caldarera
Silvio Slusarski
Julie Stenseth
Ashley Doe
Aruna Figeroa
Tony Foller
IdCountryDate
1000India2025-04-16
1001Germany2025-04-09
1002Italy2025-04-16
1003Australia2025-04-09
1004France2025-03-28
1005Germany2025-04-23
1006Italy2025-04-03
1007Canada2025-04-22
1008Argentina2025-04-19
1009Japan2025-04-22
1010Italy2025-04-19
1011Australia2025-04-23
1012Canada2025-04-04
1013Russia2025-04-08
1014Australia2025-03-26
1015Russia2025-04-01
1016United Kingdom2025-04-21
1017Australia2025-04-07
1018Japan2025-04-01
1019Australia2025-03-30
1020Australia2025-04-14
1021Italy2025-03-27
1022Brazil2025-04-07
1023Italy2025-04-22
1024Brazil2025-04-09
1025India2025-04-18
1026Argentina2025-04-19
1027Germany2025-04-09
1028India2025-03-28
1029Russia2025-04-12
1030Canada2025-04-08
1031United Kingdom2025-04-19
1032Argentina2025-04-01
1033Japan2025-04-08
1034Russia2025-04-22
1035Argentina2025-04-17
1036Argentina2025-04-23
1037Argentina2025-03-28
1038Germany2025-04-01
1039Spain2025-03-28
1040Russia2025-04-11
1041France2025-04-14
1042Germany2025-04-14
1043Spain2025-04-19
1044Canada2025-03-26
1045Canada2025-04-19
1046United Kingdom2025-03-29
1047Australia2025-03-25
1048Australia2025-03-26
1049Australia2025-04-11

On-Demand Data

NameIdCountryDate
Stacey Maclead1000Russia2025-03-30
Aika Inouye1001France2025-04-15
Johnson Sergi1002Japan2025-04-19
Octavia Malet1003Spain2025-04-10
Emily Whobrey1004Australia2025-03-25
Jennifer Amigon1005Germany2025-04-16
Misaki Royster1006Brazil2025-04-18
Jefferson Schemmer1007France2025-04-17
Kadeem Flosi1008Australia2025-04-16
Greenwood Bolognia1009Russia2025-03-27
Greenwood Bolognia1010Japan2025-03-30
Adams Morasca1011United Kingdom2025-04-06
Wickens Nestle1012Italy2025-04-18
Tony Foller1013Italy2025-04-18
Ricardo Gaucho1014Argentina2025-04-04
Emily Whobrey1015Australia2025-03-29
Mujtaba Nicka1016Germany2025-03-28
Cody Saylors1017France2025-04-02
Munro Ferencz1018India2025-04-10
Francesco Shinko1019Canada2025-03-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Misaki RoysterSpainIoni Bowcher NEGOTIATION
Wickens NestleAustraliaStephen Shaw UNQUALIFIED
Johnson SergiJapanElwin Sharvill PROPOSAL
Munro FerenczBrazilXuxue Feng RENEWAL
Smith GlickItalyIoni Bowcher NEW
Nicolas IturbideFranceBernardo Dominic NEW
Kaitlin OstroskyArgentinaElwin Sharvill NEW
Isabel BowleyGermanyBernardo Dominic QUALIFIED
Jeanfrancois VenereRussiaOnyama Limba PROPOSAL
Claire TollnerItalyElwin Sharvill NEW
Adams MorascaGermanyBernardo Dominic UNQUALIFIED
Aditya KuskoGermanyStephen Shaw UNQUALIFIED
Ivar PaprockiItalyAnna Fali UNQUALIFIED
Faith GillianBrazilAnna Fali PROPOSAL
Isabel BowleyArgentinaAsiya Javayant QUALIFIED
Kaitlin OstroskyAustraliaIoni Bowcher NEGOTIATION
Maria MarrierFranceXuxue Feng QUALIFIED
Juan WieserIndiaBernardo Dominic PROPOSAL
Francesco ShinkoArgentinaOnyama Limba PROPOSAL
Clifford RimArgentinaXuxue Feng RENEWAL
Nicolas IturbideSpainBernardo Dominic RENEWAL
Izzy GarufiCanadaAmy Elsner UNQUALIFIED
Silvio SlusarskiIndiaAsiya Javayant UNQUALIFIED
Ricardo GauchoIndiaBernardo Dominic PROPOSAL
Aika InouyeJapanXuxue Feng PROPOSAL
Salvatore StockhamArgentinaIvan Magalhaes NEGOTIATION
Faith GillianIndiaAsiya Javayant PROPOSAL
Stacey MacleadArgentinaIoni Bowcher RENEWAL
Faith GillianGermanyAsiya Javayant NEGOTIATION
Stacey MacleadJapanXuxue Feng NEW
Clifford RimArgentinaAnna Fali NEW
Munro FerenczSpainAmy Elsner RENEWAL
Salvatore StockhamBrazilAmy Elsner NEW
David DarakjyJapanStephen Shaw UNQUALIFIED
Munro FerenczGermanyOnyama Limba UNQUALIFIED
Smith GlickFranceAmy Elsner RENEWAL
Juan WieserGermanyIvan Magalhaes PROPOSAL
Johnson SergiFranceOnyama Limba QUALIFIED
Francesco ShinkoFranceXuxue Feng UNQUALIFIED
Greenwood BologniaItalyOnyama Limba PROPOSAL

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