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
Kadeem FlosiItalyElwin Sharvill PROPOSAL
Nicolas IturbideArgentinaAsiya Javayant RENEWAL
Nicolas IturbideFranceElwin Sharvill UNQUALIFIED
Maria MarrierRussiaIoni Bowcher UNQUALIFIED
Aika InouyeFranceXuxue Feng PROPOSAL
Kaitlin OstroskyFranceOnyama Limba RENEWAL
Kadeem FlosiRussiaIoni Bowcher QUALIFIED
Murillo MaletBrazilIoni Bowcher PROPOSAL
Alejandro PerinUnited KingdomBernardo Dominic NEW
Ivar PaprockiRussiaAsiya Javayant NEGOTIATION
Ivar PaprockiItalyIvan Magalhaes NEW
Jones VocelkaItalyStephen Shaw NEW
Clifford RimFranceStephen Shaw PROPOSAL
Jennifer AmigonJapanAnna Fali NEGOTIATION
Johnson SergiCanadaXuxue Feng UNQUALIFIED
Salvatore StockhamArgentinaStephen Shaw NEW
Jennifer AmigonCanadaXuxue Feng NEW
Kaitlin OstroskyIndiaBernardo Dominic NEW
Cody SaylorsCanadaElwin Sharvill UNQUALIFIED
Alejandro PerinAustraliaAsiya Javayant NEGOTIATION
David DarakjyCanadaAmy Elsner UNQUALIFIED
Antonio CaudySpainOnyama Limba QUALIFIED
Darci PoquetteAustraliaIoni Bowcher UNQUALIFIED
Wickens NestleBrazilStephen Shaw QUALIFIED
Jennifer AmigonFranceXuxue Feng NEW
Deepesh ChuiRussiaOnyama Limba NEGOTIATION
Antonio CaudyCanadaIvan Magalhaes UNQUALIFIED
Claire TollnerFranceAnna Fali NEW
Octavia MaletSpainAnna Fali UNQUALIFIED
Emily WhobreyBrazilAmy Elsner UNQUALIFIED
Ashley DoeSpainIvan Magalhaes NEGOTIATION
Leja CaldareraUnited KingdomIoni Bowcher QUALIFIED
Francesco ShinkoRussiaStephen Shaw NEW
Greenwood BologniaBrazilAmy Elsner PROPOSAL
Smith GlickBrazilBernardo Dominic NEGOTIATION
Kadeem FlosiArgentinaXuxue Feng NEGOTIATION
Darci PoquetteCanadaStephen Shaw RENEWAL
Murillo MaletGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoGermanyIoni Bowcher UNQUALIFIED
Maisha RulapaughJapanAmy Elsner RENEWAL
Misaki RoysterAustraliaAmy Elsner UNQUALIFIED
Leja CaldareraAustraliaIvan Magalhaes RENEWAL
Antonio CaudyGermanyBernardo Dominic UNQUALIFIED
Antonio CaudyGermanyIoni Bowcher NEW
Deepesh ChuiIndiaAmy Elsner UNQUALIFIED
Misaki RoysterAustraliaAmy Elsner PROPOSAL
Munro FerenczBrazilStephen Shaw NEGOTIATION
Jefferson SchemmerItalyOnyama Limba UNQUALIFIED
Isabel BowleyGermanyAmy Elsner QUALIFIED
Mayumi KolmetzJapanElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Johnson SergiGermanyStephen Shaw NEGOTIATION
Leja CaldareraIndiaXuxue Feng QUALIFIED
Juan WieserGermanyOnyama Limba NEGOTIATION
Alejandro PerinBrazilOnyama Limba NEGOTIATION
Smith GlickJapanBernardo Dominic NEGOTIATION
Antonio CaudyFranceAsiya Javayant PROPOSAL
Darci PoquetteBrazilIvan Magalhaes PROPOSAL
Arvin AlbaresIndiaStephen Shaw PROPOSAL
David DarakjyFranceOnyama Limba NEW
Aika InouyeBrazilOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiSpain2025-08-17Benton, John B Jr PROPOSAL19Elwin Sharvill
1001Claire TollnerJapan2025-08-09Buckley Miller Wright QUALIFIED69Ioni Bowcher
1002Clifford RimCanada2025-08-20Benton, John B Jr NEGOTIATION94Asiya Javayant
1003Nicolas IturbideBrazil2025-08-06Printing Dimensions NEGOTIATION74Onyama Limba
1004Julie StensethJapan2025-08-21Feltz Printing Service NEW0Asiya Javayant
1005Francesco ShinkoItaly2025-08-17Benton, John B Jr QUALIFIED51Amy Elsner
1006Mujtaba NickaUnited Kingdom2025-08-05Feltz Printing Service QUALIFIED34Ioni Bowcher
1007Sinclair WaycottIndia2025-08-20Feltz Printing Service NEW79Asiya Javayant
1008James ButtBrazil2025-08-21Chemel, James L Cpa RENEWAL21Anna Fali
1009Costa DilliardAustralia2025-07-29Rangoni Of Florence PROPOSAL96Ioni Bowcher
1010Emily WhobreyAustralia2025-07-31Feiner Bros RENEWAL8Ivan Magalhaes
1011Johnson SergiFrance2025-08-02Feiner Bros UNQUALIFIED20Ioni Bowcher
1012Ivar PaprockiJapan2025-08-22Chanay, Jeffrey A Esq UNQUALIFIED18Anna Fali
1013Greenwood BologniaRussia2025-08-03Feiner Bros PROPOSAL43Xuxue Feng
1014Morrow RutaItaly2025-08-24Commercial Press RENEWAL28Stephen Shaw
1015Jennifer AmigonSpain2025-08-22Printing Dimensions QUALIFIED31Ivan Magalhaes
1016Johnson SergiRussia2025-08-16Chapman, Ross E Esq RENEWAL41Stephen Shaw
1017Faith GillianGermany2025-08-10Rangoni Of Florence UNQUALIFIED52Asiya Javayant
1018Clifford RimJapan2025-08-15Rangoni Of Florence NEW48Onyama Limba
1019James ButtCanada2025-08-19Chanay, Jeffrey A Esq PROPOSAL89Onyama Limba
1020Ricardo GauchoItaly2025-08-14Chanay, Jeffrey A Esq QUALIFIED56Ioni Bowcher
1021Misaki RoysterCanada2025-08-12Chanay, Jeffrey A Esq NEGOTIATION31Elwin Sharvill
1022Mujtaba NickaFrance2025-08-19King, Christopher A Esq PROPOSAL44Ioni Bowcher
1023Chavez BriddickRussia2025-08-04Rousseaux, Michael Esq RENEWAL69Elwin Sharvill
1024Adams MorascaJapan2025-08-25Truhlar And Truhlar Attys NEGOTIATION35Bernardo Dominic
1025Aruna FigeroaFrance2025-08-11Rousseaux, Michael Esq PROPOSAL66Anna Fali
1026Murillo MaletCanada2025-08-21Buckley Miller Wright NEW80Xuxue Feng
1027Ricardo GauchoFrance2025-07-30Truhlar And Truhlar Attys PROPOSAL51Bernardo Dominic
1028Isabel BowleySpain2025-08-23Commercial Press UNQUALIFIED99Stephen Shaw
1029Darci PoquetteAustralia2025-08-16Commercial Press NEGOTIATION60Amy Elsner
1030Ashley DoeUnited Kingdom2025-08-09Commercial Press RENEWAL4Ivan Magalhaes
1031Costa DilliardUnited Kingdom2025-08-23Printing Dimensions NEGOTIATION20Ivan Magalhaes
1032Munro FerenczRussia2025-08-26Feiner Bros PROPOSAL87Asiya Javayant
1033Silvio SlusarskiIndia2025-08-17Feltz Printing Service NEGOTIATION34Ioni Bowcher
1034Leon OldroydSpain2025-07-31Benton, John B Jr NEGOTIATION89Xuxue Feng
1035Johnson SergiUnited Kingdom2025-08-12Dorl, James J Esq UNQUALIFIED62Asiya Javayant
1036Stacey MacleadItaly2025-08-10Feiner Bros NEW74Onyama Limba
1037Juan WieserBrazil2025-08-16Benton, John B Jr NEW70Ioni Bowcher
1038Maisha RulapaughRussia2025-08-22Rangoni Of Florence UNQUALIFIED17Bernardo Dominic
1039Maria MarrierIndia2025-08-02Chanay, Jeffrey A Esq UNQUALIFIED43Xuxue Feng
1040Aditya KuskoItaly2025-08-18Feltz Printing Service NEW71Stephen Shaw
1041Leja CaldareraSpain2025-08-20Feltz Printing Service NEGOTIATION93Bernardo Dominic
1042Stacey MacleadFrance2025-08-15Rousseaux, Michael Esq QUALIFIED91Bernardo Dominic
1043Nicolas IturbideCanada2025-08-15Chapman, Ross E Esq RENEWAL89Anna Fali
1044Ivar PaprockiJapan2025-08-03Benton, John B Jr NEGOTIATION79Xuxue Feng
1045Claire TollnerUnited Kingdom2025-07-31Truhlar And Truhlar Attys NEW61Bernardo Dominic
1046Deepesh ChuiFrance2025-08-23Morlong Associates RENEWAL37Amy Elsner
1047Mayumi KolmetzFrance2025-08-17Commercial Press PROPOSAL16Ivan Magalhaes
1048Silvio SlusarskiItaly2025-08-01Dorl, James J Esq RENEWAL41Onyama Limba
1049Morrow RutaSpain2025-08-09Printing Dimensions RENEWAL90Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
James ButtSpainAnna Fali NEW
Jefferson SchemmerSpainAmy Elsner QUALIFIED
Antonio CaudyJapanOnyama Limba NEW
Salvatore StockhamCanadaIvan Magalhaes NEW
Aditya KuskoAustraliaStephen Shaw UNQUALIFIED
Maria MarrierArgentinaOnyama Limba NEW
Leja CaldareraBrazilOnyama Limba UNQUALIFIED
Deepesh ChuiItalyIoni Bowcher PROPOSAL
Adams MorascaSpainStephen Shaw PROPOSAL
Tony FollerIndiaIvan Magalhaes RENEWAL
Jones VocelkaFranceXuxue Feng RENEWAL
Ashley DoeSpainBernardo Dominic NEW
Cody SaylorsGermanyIoni Bowcher UNQUALIFIED
Murillo MaletArgentinaBernardo Dominic PROPOSAL
Murillo MaletUnited KingdomIvan Magalhaes NEW
Izzy GarufiItalyIvan Magalhaes RENEWAL
Aditya KuskoGermanyAnna Fali QUALIFIED
David DarakjyBrazilElwin Sharvill QUALIFIED
Leja CaldareraFranceIvan Magalhaes UNQUALIFIED
Nicolas IturbideCanadaAnna Fali QUALIFIED
Cody SaylorsBrazilAnna Fali NEW
Tony FollerIndiaStephen Shaw NEGOTIATION
Jeanfrancois VenereAustraliaOnyama Limba NEW
David DarakjyCanadaXuxue Feng RENEWAL
Misaki RoysterIndiaIvan Magalhaes NEW
Ashley DoeSpainIvan Magalhaes RENEWAL
Emily WhobreyUnited KingdomAnna Fali NEW
Salvatore StockhamUnited KingdomIvan Magalhaes QUALIFIED
Stacey MacleadBrazilAnna Fali RENEWAL
Jefferson SchemmerItalyXuxue Feng PROPOSAL
Salvatore StockhamAustraliaBernardo Dominic PROPOSAL
Salvatore StockhamBrazilAnna Fali PROPOSAL
Costa DilliardArgentinaStephen Shaw RENEWAL
Deepesh ChuiRussiaOnyama Limba RENEWAL
Octavia MaletRussiaAmy Elsner UNQUALIFIED
Smith GlickFranceAmy Elsner QUALIFIED
Juan WieserArgentinaIoni Bowcher NEW
Octavia MaletUnited KingdomOnyama Limba QUALIFIED
Jennifer AmigonIndiaAmy Elsner QUALIFIED
Aika InouyeAustraliaXuxue Feng PROPOSAL
Murillo MaletItalyIoni Bowcher UNQUALIFIED
Kaitlin OstroskyBrazilBernardo Dominic PROPOSAL
Mujtaba NickaAustraliaAsiya Javayant RENEWAL
Deepesh ChuiItalyIvan Magalhaes QUALIFIED
David DarakjyUnited KingdomAmy Elsner QUALIFIED
Mujtaba NickaAustraliaIoni Bowcher QUALIFIED
Antonio CaudyItalyAsiya Javayant QUALIFIED
Julie StensethFranceAsiya Javayant NEGOTIATION
Nicolas IturbideUnited KingdomBernardo Dominic NEW
Salvatore StockhamGermanyAmy Elsner NEGOTIATION
Frozen Columns
Name
Ricardo Gaucho
Aruna Figeroa
Salvatore Stockham
David Darakjy
Cody Saylors
Salvatore Stockham
Clifford Rim
Jones Vocelka
Mujtaba Nicka
Clifford Rim
Morrow Ruta
Ivar Paprocki
Jefferson Schemmer
Johnson Sergi
Emily Whobrey
Darci Poquette
Darci Poquette
Jennifer Amigon
Ivar Paprocki
Jeanfrancois Venere
Francesco Shinko
Jeanfrancois Venere
Murillo Malet
Leon Oldroyd
Francesco Shinko
Claire Tollner
Sinclair Waycott
Leja Caldarera
Kadeem Flosi
Faith Gillian
Morrow Ruta
Maria Marrier
Aditya Kusko
Francesco Shinko
Leon Oldroyd
Deepesh Chui
Isabel Bowley
Misaki Royster
Morrow Ruta
Faith Gillian
Izzy Garufi
Aika Inouye
Maria Marrier
Nicolas Iturbide
David Darakjy
Chavez Briddick
Deepesh Chui
Ashley Doe
Salvatore Stockham
David Darakjy
IdCountryDate
1000France2025-07-31
1001Argentina2025-08-12
1002Spain2025-08-27
1003Germany2025-08-22
1004Germany2025-08-27
1005Australia2025-08-13
1006Argentina2025-08-26
1007Canada2025-08-14
1008Russia2025-08-27
1009India2025-08-15
1010Canada2025-08-20
1011Spain2025-07-30
1012Brazil2025-08-03
1013Australia2025-08-22
1014United Kingdom2025-07-29
1015Japan2025-08-25
1016India2025-08-01
1017Spain2025-08-20
1018Japan2025-08-06
1019Brazil2025-08-12
1020Canada2025-08-18
1021France2025-07-30
1022United Kingdom2025-08-26
1023United Kingdom2025-08-25
1024Japan2025-08-27
1025Canada2025-08-23
1026Spain2025-08-23
1027Japan2025-08-13
1028Russia2025-08-18
1029United Kingdom2025-08-23
1030Canada2025-08-16
1031Italy2025-08-15
1032Argentina2025-08-07
1033United Kingdom2025-08-15
1034Canada2025-08-26
1035France2025-08-19
1036India2025-08-10
1037Germany2025-08-27
1038India2025-08-26
1039Argentina2025-08-24
1040Russia2025-08-22
1041United Kingdom2025-08-18
1042France2025-08-07
1043Japan2025-08-17
1044Argentina2025-08-23
1045Canada2025-08-08
1046France2025-08-22
1047Spain2025-08-16
1048Japan2025-08-08
1049Canada2025-08-09

On-Demand Data

NameIdCountryDate
Maria Marrier1000Germany2025-08-07
Chavez Briddick1001France2025-08-06
Darci Poquette1002Russia2025-08-19
Johnson Sergi1003Argentina2025-08-20
Octavia Malet1004United Kingdom2025-08-15
Mujtaba Nicka1005United Kingdom2025-08-20
Jefferson Schemmer1006United Kingdom2025-08-10
Nicolas Iturbide1007France2025-08-17
Cody Saylors1008Argentina2025-08-06
Maisha Rulapaugh1009Argentina2025-08-14
Ivar Paprocki1010United Kingdom2025-08-08
Ivar Paprocki1011Brazil2025-07-29
Wickens Nestle1012Argentina2025-08-09
Jefferson Schemmer1013Japan2025-08-02
Jeanfrancois Venere1014Germany2025-08-23
Darci Poquette1015Russia2025-08-17
Costa Dilliard1016Italy2025-08-23
David Darakjy1017Argentina2025-08-02
Mujtaba Nicka1018Australia2025-08-24
Faith Gillian1019Italy2025-08-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickJapanAsiya Javayant PROPOSAL
Maisha RulapaughCanadaOnyama Limba QUALIFIED
Aika InouyeIndiaXuxue Feng NEGOTIATION
Mujtaba NickaItalyIvan Magalhaes QUALIFIED
Nicolas IturbideItalyAsiya Javayant QUALIFIED
Aditya KuskoBrazilOnyama Limba UNQUALIFIED
Aika InouyeArgentinaXuxue Feng NEW
Kaitlin OstroskyGermanyAsiya Javayant QUALIFIED
Ashley DoeItalyOnyama Limba NEGOTIATION
Nicolas IturbideIndiaOnyama Limba NEW
Isabel BowleyRussiaXuxue Feng QUALIFIED
Aditya KuskoIndiaBernardo Dominic NEW
Deepesh ChuiItalyXuxue Feng UNQUALIFIED
Claire TollnerFranceIvan Magalhaes QUALIFIED
Aruna FigeroaGermanyAnna Fali PROPOSAL
Francesco ShinkoRussiaIvan Magalhaes UNQUALIFIED
Ivar PaprockiFranceXuxue Feng RENEWAL
Salvatore StockhamCanadaIoni Bowcher QUALIFIED
Costa DilliardJapanAnna Fali UNQUALIFIED
Emily WhobreyUnited KingdomXuxue Feng PROPOSAL
Jones VocelkaUnited KingdomAmy Elsner UNQUALIFIED
Costa DilliardIndiaAmy Elsner NEW
Julie StensethBrazilElwin Sharvill UNQUALIFIED
Julie StensethJapanBernardo Dominic RENEWAL
Wickens NestleJapanAsiya Javayant UNQUALIFIED
Juan WieserBrazilBernardo Dominic RENEWAL
Clifford RimGermanyOnyama Limba RENEWAL
Claire TollnerSpainOnyama Limba RENEWAL
Cody SaylorsAustraliaIoni Bowcher UNQUALIFIED
Johnson SergiItalyElwin Sharvill UNQUALIFIED
Antonio CaudyJapanBernardo Dominic NEGOTIATION
Kaitlin OstroskyItalyElwin Sharvill NEGOTIATION
Aruna FigeroaArgentinaIoni Bowcher RENEWAL
Alejandro PerinFranceOnyama Limba NEW
Maisha RulapaughJapanElwin Sharvill RENEWAL
Misaki RoysterCanadaBernardo Dominic PROPOSAL
Darci PoquetteGermanyXuxue Feng RENEWAL
Morrow RutaArgentinaStephen Shaw QUALIFIED
Kaitlin OstroskyIndiaAmy Elsner UNQUALIFIED
Maisha RulapaughGermanyAsiya Javayant 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>