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
Cody SaylorsBrazilIoni Bowcher PROPOSAL
Jennifer AmigonIndiaAmy Elsner UNQUALIFIED
Claire TollnerBrazilOnyama Limba QUALIFIED
Kadeem FlosiIndiaOnyama Limba PROPOSAL
Izzy GarufiUnited KingdomAsiya Javayant NEW
James ButtRussiaAsiya Javayant NEW
Sinclair WaycottFranceStephen Shaw QUALIFIED
Jones VocelkaCanadaOnyama Limba NEGOTIATION
Jeanfrancois VenereJapanAmy Elsner QUALIFIED
Jeanfrancois VenereItalyOnyama Limba QUALIFIED
Mayumi KolmetzIndiaXuxue Feng PROPOSAL
Chavez BriddickIndiaIoni Bowcher QUALIFIED
Cody SaylorsUnited KingdomStephen Shaw NEW
Leon OldroydGermanyAsiya Javayant PROPOSAL
Francesco ShinkoBrazilAnna Fali QUALIFIED
Kadeem FlosiCanadaXuxue Feng PROPOSAL
Munro FerenczArgentinaAsiya Javayant RENEWAL
Faith GillianCanadaAsiya Javayant QUALIFIED
Maria MarrierSpainBernardo Dominic NEW
Julie StensethItalyBernardo Dominic QUALIFIED
Alejandro PerinCanadaXuxue Feng NEW
Rodrigues CampainItalyIvan Magalhaes NEGOTIATION
Smith GlickCanadaXuxue Feng NEGOTIATION
Silvio SlusarskiFranceElwin Sharvill QUALIFIED
Juan WieserGermanyAmy Elsner NEW
Johnson SergiSpainBernardo Dominic NEGOTIATION
Darci PoquetteGermanyIoni Bowcher UNQUALIFIED
Wickens NestleAustraliaBernardo Dominic NEW
Jones VocelkaAustraliaAnna Fali NEGOTIATION
Darci PoquetteBrazilIoni Bowcher QUALIFIED
Salvatore StockhamAustraliaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereFranceAmy Elsner NEGOTIATION
Silvio SlusarskiFranceAnna Fali QUALIFIED
Antonio CaudyAustraliaElwin Sharvill PROPOSAL
Isabel BowleyRussiaAsiya Javayant NEGOTIATION
Smith GlickIndiaIvan Magalhaes UNQUALIFIED
Ashley DoeRussiaIoni Bowcher QUALIFIED
Silvio SlusarskiGermanyStephen Shaw UNQUALIFIED
Mujtaba NickaSpainStephen Shaw NEGOTIATION
Mayumi KolmetzIndiaAmy Elsner NEGOTIATION
Clifford RimCanadaStephen Shaw UNQUALIFIED
Izzy GarufiArgentinaIoni Bowcher NEW
Chavez BriddickUnited KingdomAnna Fali NEGOTIATION
Claire TollnerGermanyAnna Fali QUALIFIED
Alejandro PerinJapanIoni Bowcher UNQUALIFIED
Mayumi KolmetzUnited KingdomAnna Fali NEW
Alejandro PerinSpainAsiya Javayant NEGOTIATION
Greenwood BologniaArgentinaElwin Sharvill NEGOTIATION
Ivar PaprockiCanadaIoni Bowcher UNQUALIFIED
Murillo MaletItalyIoni Bowcher UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Cody SaylorsBrazilBernardo Dominic PROPOSAL
Costa DilliardRussiaAmy Elsner RENEWAL
Misaki RoysterCanadaXuxue Feng UNQUALIFIED
Rodrigues CampainSpainXuxue Feng RENEWAL
Kadeem FlosiBrazilAnna Fali UNQUALIFIED
Nicolas IturbideJapanOnyama Limba RENEWAL
Ivar PaprockiUnited KingdomIoni Bowcher NEW
Misaki RoysterIndiaStephen Shaw NEGOTIATION
Jefferson SchemmerJapanAmy Elsner UNQUALIFIED
Chavez BriddickSpainIvan Magalhaes NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Munro FerenczBrazil2026-04-18Morlong Associates NEW71Ivan Magalhaes
1001Silvio SlusarskiFrance2026-04-24Rousseaux, Michael Esq PROPOSAL20Anna Fali
1002Jeanfrancois VenereJapan2026-04-13Rousseaux, Michael Esq NEGOTIATION97Stephen Shaw
1003David DarakjyArgentina2026-04-18Feiner Bros RENEWAL77Ivan Magalhaes
1004Aruna FigeroaRussia2026-04-11Rousseaux, Michael Esq PROPOSAL61Elwin Sharvill
1005Isabel BowleyBrazil2026-04-27Chanay, Jeffrey A Esq QUALIFIED5Bernardo Dominic
1006Cody SaylorsGermany2026-04-12Chanay, Jeffrey A Esq QUALIFIED69Ivan Magalhaes
1007Smith GlickJapan2026-04-10Chanay, Jeffrey A Esq NEGOTIATION3Elwin Sharvill
1008Octavia MaletAustralia2026-04-17Chanay, Jeffrey A Esq PROPOSAL64Asiya Javayant
1009Nicolas IturbideGermany2026-04-11Morlong Associates RENEWAL37Anna Fali
1010Kaitlin OstroskyArgentina2026-04-14Chanay, Jeffrey A Esq QUALIFIED92Asiya Javayant
1011Maria MarrierJapan2026-04-14Buckley Miller Wright NEGOTIATION69Amy Elsner
1012Deepesh ChuiJapan2026-04-13Benton, John B Jr RENEWAL92Stephen Shaw
1013Clifford RimCanada2026-04-15Morlong Associates QUALIFIED31Anna Fali
1014Cody SaylorsIndia2026-04-24Truhlar And Truhlar Attys RENEWAL41Bernardo Dominic
1015Juan WieserFrance2026-04-23Buckley Miller Wright RENEWAL96Ioni Bowcher
1016Isabel BowleyGermany2026-04-21Morlong Associates PROPOSAL55Stephen Shaw
1017Isabel BowleyFrance2026-04-21Dorl, James J Esq UNQUALIFIED18Ioni Bowcher
1018Kaitlin OstroskyArgentina2026-04-30Chanay, Jeffrey A Esq RENEWAL46Ioni Bowcher
1019Costa DilliardCanada2026-04-28King, Christopher A Esq QUALIFIED54Anna Fali
1020Juan WieserSpain2026-04-15Feiner Bros RENEWAL84Anna Fali
1021Leon OldroydRussia2026-04-30Chemel, James L Cpa QUALIFIED79Asiya Javayant
1022Ivar PaprockiRussia2026-04-15Benton, John B Jr NEW88Xuxue Feng
1023Alejandro PerinBrazil2026-04-13Morlong Associates NEW41Anna Fali
1024Octavia MaletFrance2026-04-19Dorl, James J Esq PROPOSAL92Anna Fali
1025Costa DilliardJapan2026-04-23Feltz Printing Service UNQUALIFIED91Anna Fali
1026Mayumi KolmetzAustralia2026-04-25Rousseaux, Michael Esq PROPOSAL29Amy Elsner
1027Kadeem FlosiIndia2026-04-12Rangoni Of Florence NEW69Asiya Javayant
1028Kaitlin OstroskyIndia2026-04-09Printing Dimensions RENEWAL65Amy Elsner
1029Kaitlin OstroskyJapan2026-04-21Feltz Printing Service NEGOTIATION72Ivan Magalhaes
1030Adams MorascaItaly2026-04-12Printing Dimensions NEW50Bernardo Dominic
1031Silvio SlusarskiArgentina2026-04-15King, Christopher A Esq QUALIFIED59Bernardo Dominic
1032Julie StensethFrance2026-04-25Dorl, James J Esq NEGOTIATION94Stephen Shaw
1033Morrow RutaCanada2026-04-28King, Christopher A Esq RENEWAL43Elwin Sharvill
1034Jefferson SchemmerGermany2026-04-05Feltz Printing Service UNQUALIFIED43Onyama Limba
1035Jones VocelkaIndia2026-04-29Rangoni Of Florence RENEWAL48Amy Elsner
1036Julie StensethCanada2026-04-10Chanay, Jeffrey A Esq PROPOSAL48Amy Elsner
1037Alejandro PerinItaly2026-04-14Morlong Associates RENEWAL38Ivan Magalhaes
1038Rodrigues CampainUnited Kingdom2026-04-30Rousseaux, Michael Esq NEW59Onyama Limba
1039Aika InouyeUnited Kingdom2026-05-04Printing Dimensions RENEWAL49Onyama Limba
1040Jennifer AmigonAustralia2026-05-03Commercial Press RENEWAL36Asiya Javayant
1041Wickens NestleGermany2026-05-03Dorl, James J Esq NEGOTIATION89Elwin Sharvill
1042Faith GillianAustralia2026-04-26Rangoni Of Florence PROPOSAL97Xuxue Feng
1043Arvin AlbaresIndia2026-04-07Chanay, Jeffrey A Esq NEW32Anna Fali
1044Wickens NestleItaly2026-04-11Rangoni Of Florence QUALIFIED76Ivan Magalhaes
1045James ButtItaly2026-04-21King, Christopher A Esq NEW54Ioni Bowcher
1046Misaki RoysterFrance2026-04-24Rangoni Of Florence NEGOTIATION56Amy Elsner
1047Tony FollerArgentina2026-04-12Commercial Press PROPOSAL18Onyama Limba
1048Antonio CaudyJapan2026-04-05Rousseaux, Michael Esq NEW0Ivan Magalhaes
1049Kaitlin OstroskyCanada2026-05-02Rangoni Of Florence RENEWAL58Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Octavia MaletIndiaIvan Magalhaes PROPOSAL
Alejandro PerinRussiaElwin Sharvill UNQUALIFIED
Julie StensethGermanyOnyama Limba RENEWAL
Nicolas IturbideFranceAnna Fali NEW
Aika InouyeIndiaAmy Elsner QUALIFIED
Aditya KuskoGermanyIoni Bowcher UNQUALIFIED
Aruna FigeroaItalyStephen Shaw RENEWAL
Rodrigues CampainFranceAsiya Javayant NEGOTIATION
Juan WieserItalyXuxue Feng UNQUALIFIED
Francesco ShinkoIndiaBernardo Dominic NEW
Aika InouyeItalyBernardo Dominic UNQUALIFIED
Claire TollnerJapanIoni Bowcher NEW
Deepesh ChuiCanadaAnna Fali UNQUALIFIED
Maria MarrierUnited KingdomIoni Bowcher RENEWAL
Darci PoquetteRussiaIvan Magalhaes NEW
Deepesh ChuiArgentinaIvan Magalhaes NEGOTIATION
Jefferson SchemmerFranceIvan Magalhaes RENEWAL
Sinclair WaycottGermanyAnna Fali NEGOTIATION
Izzy GarufiJapanElwin Sharvill NEW
Aditya KuskoUnited KingdomAmy Elsner QUALIFIED
Deepesh ChuiIndiaXuxue Feng PROPOSAL
Morrow RutaAustraliaOnyama Limba RENEWAL
Aditya KuskoItalyBernardo Dominic UNQUALIFIED
Clifford RimFranceAmy Elsner RENEWAL
Jones VocelkaRussiaAmy Elsner PROPOSAL
David DarakjyRussiaStephen Shaw QUALIFIED
Jennifer AmigonAustraliaOnyama Limba QUALIFIED
Greenwood BologniaGermanyAnna Fali PROPOSAL
Maria MarrierGermanyXuxue Feng NEGOTIATION
Arvin AlbaresJapanAmy Elsner NEW
James ButtBrazilIvan Magalhaes RENEWAL
Arvin AlbaresItalyXuxue Feng NEW
Maria MarrierUnited KingdomOnyama Limba PROPOSAL
Smith GlickBrazilAsiya Javayant NEGOTIATION
Johnson SergiRussiaAmy Elsner NEGOTIATION
Leja CaldareraArgentinaAnna Fali NEGOTIATION
Morrow RutaRussiaIoni Bowcher PROPOSAL
David DarakjySpainIoni Bowcher NEW
Izzy GarufiArgentinaOnyama Limba UNQUALIFIED
Wickens NestleUnited KingdomBernardo Dominic RENEWAL
Tony FollerBrazilAnna Fali QUALIFIED
Jeanfrancois VenereAustraliaElwin Sharvill RENEWAL
Johnson SergiFranceIoni Bowcher RENEWAL
Jennifer AmigonFranceBernardo Dominic UNQUALIFIED
Ashley DoeFranceIvan Magalhaes UNQUALIFIED
Emily WhobreyBrazilXuxue Feng PROPOSAL
Mujtaba NickaAustraliaBernardo Dominic PROPOSAL
Salvatore StockhamFranceOnyama Limba UNQUALIFIED
Leja CaldareraSpainAmy Elsner PROPOSAL
Frozen Columns
Name
Misaki Royster
Cody Saylors
Aruna Figeroa
Maria Marrier
Johnson Sergi
Nicolas Iturbide
Antonio Caudy
Emily Whobrey
Chavez Briddick
Isabel Bowley
Clifford Rim
Mayumi Kolmetz
Aruna Figeroa
David Darakjy
Leja Caldarera
Jefferson Schemmer
Salvatore Stockham
Clifford Rim
Costa Dilliard
Chavez Briddick
Rodrigues Campain
Kaitlin Ostrosky
Chavez Briddick
Costa Dilliard
Rodrigues Campain
Ashley Doe
Aika Inouye
Emily Whobrey
Sinclair Waycott
Nicolas Iturbide
Francesco Shinko
Kadeem Flosi
Clifford Rim
Darci Poquette
Ashley Doe
Cody Saylors
David Darakjy
Octavia Malet
Deepesh Chui
Izzy Garufi
Darci Poquette
Salvatore Stockham
Stacey Maclead
Mujtaba Nicka
Antonio Caudy
Mujtaba Nicka
Julie Stenseth
Wickens Nestle
Arvin Albares
David Darakjy
IdCountryDate
1000Argentina2026-04-11
1001Russia2026-05-04
1002Argentina2026-04-25
1003France2026-04-21
1004India2026-04-05
1005Germany2026-04-05
1006Argentina2026-05-03
1007Canada2026-04-19
1008Brazil2026-04-11
1009Canada2026-04-29
1010Japan2026-04-07
1011Germany2026-04-19
1012Brazil2026-04-06
1013Italy2026-04-19
1014Australia2026-04-21
1015India2026-04-16
1016United Kingdom2026-05-02
1017Italy2026-04-14
1018Brazil2026-05-01
1019Japan2026-04-08
1020Russia2026-04-20
1021Canada2026-04-29
1022Spain2026-04-08
1023Italy2026-04-17
1024Italy2026-04-29
1025Canada2026-04-14
1026Spain2026-04-23
1027Germany2026-04-26
1028Italy2026-04-18
1029Germany2026-04-05
1030Canada2026-04-26
1031Germany2026-04-17
1032Australia2026-04-19
1033France2026-04-11
1034Brazil2026-04-16
1035India2026-04-06
1036Brazil2026-05-04
1037Spain2026-04-21
1038Spain2026-04-18
1039Germany2026-04-25
1040Germany2026-04-24
1041Italy2026-04-18
1042Japan2026-04-08
1043France2026-04-09
1044Japan2026-04-19
1045Italy2026-04-20
1046France2026-04-05
1047Russia2026-04-29
1048Spain2026-04-15
1049United Kingdom2026-04-19

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Russia2026-04-08
Darci Poquette1001Italy2026-04-22
Johnson Sergi1002Argentina2026-04-29
Ivar Paprocki1003Russia2026-04-05
Francesco Shinko1004Japan2026-04-07
Chavez Briddick1005Australia2026-05-02
Jennifer Amigon1006Russia2026-04-05
Rodrigues Campain1007Japan2026-05-01
Adams Morasca1008Spain2026-05-04
James Butt1009Spain2026-04-27
Leon Oldroyd1010Canada2026-04-29
Salvatore Stockham1011United Kingdom2026-04-26
Octavia Malet1012India2026-04-13
Maria Marrier1013India2026-04-23
Cody Saylors1014Argentina2026-04-05
Stacey Maclead1015Australia2026-04-09
Octavia Malet1016Argentina2026-04-07
Isabel Bowley1017Canada2026-04-30
Smith Glick1018Italy2026-05-04
Izzy Garufi1019Germany2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadItalyBernardo Dominic UNQUALIFIED
Jefferson SchemmerJapanAnna Fali QUALIFIED
Julie StensethCanadaAsiya Javayant PROPOSAL
Smith GlickBrazilXuxue Feng UNQUALIFIED
Costa DilliardGermanyXuxue Feng NEW
Tony FollerItalyStephen Shaw QUALIFIED
David DarakjyGermanyIvan Magalhaes UNQUALIFIED
Tony FollerArgentinaIvan Magalhaes NEW
Ivar PaprockiUnited KingdomAsiya Javayant PROPOSAL
Emily WhobreyCanadaIvan Magalhaes RENEWAL
Julie StensethJapanStephen Shaw QUALIFIED
Faith GillianItalyXuxue Feng NEGOTIATION
Jeanfrancois VenereRussiaIvan Magalhaes RENEWAL
Francesco ShinkoSpainAnna Fali UNQUALIFIED
Cody SaylorsIndiaAsiya Javayant NEW
Silvio SlusarskiIndiaAnna Fali UNQUALIFIED
Morrow RutaGermanyAmy Elsner UNQUALIFIED
Leon OldroydGermanyStephen Shaw QUALIFIED
Kaitlin OstroskyAustraliaOnyama Limba RENEWAL
Kadeem FlosiFranceStephen Shaw PROPOSAL
Darci PoquetteCanadaOnyama Limba PROPOSAL
Faith GillianAustraliaAsiya Javayant UNQUALIFIED
Leja CaldareraRussiaIvan Magalhaes UNQUALIFIED
Stacey MacleadRussiaIvan Magalhaes PROPOSAL
Rodrigues CampainGermanyIvan Magalhaes UNQUALIFIED
Antonio CaudyArgentinaStephen Shaw UNQUALIFIED
Ricardo GauchoItalyOnyama Limba QUALIFIED
Jefferson SchemmerRussiaStephen Shaw NEGOTIATION
David DarakjyFranceIoni Bowcher NEGOTIATION
David DarakjyItalyAnna Fali QUALIFIED
Kadeem FlosiJapanAmy Elsner PROPOSAL
Misaki RoysterIndiaStephen Shaw RENEWAL
Salvatore StockhamAustraliaAsiya Javayant RENEWAL
Sinclair WaycottGermanyXuxue Feng PROPOSAL
Francesco ShinkoSpainOnyama Limba NEGOTIATION
Kaitlin OstroskyFranceBernardo Dominic NEGOTIATION
Alejandro PerinUnited KingdomIoni Bowcher QUALIFIED
Munro FerenczIndiaBernardo Dominic UNQUALIFIED
Rodrigues CampainRussiaElwin Sharvill PROPOSAL
Ashley DoeSpainIvan Magalhaes NEGOTIATION

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