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
Izzy GarufiIndiaElwin Sharvill RENEWAL
Johnson SergiIndiaStephen Shaw RENEWAL
Salvatore StockhamItalyAnna Fali RENEWAL
Stacey MacleadUnited KingdomIvan Magalhaes PROPOSAL
Nicolas IturbideArgentinaAsiya Javayant PROPOSAL
Adams MorascaRussiaAnna Fali UNQUALIFIED
Octavia MaletJapanOnyama Limba UNQUALIFIED
Greenwood BologniaIndiaStephen Shaw NEW
Greenwood BologniaUnited KingdomAnna Fali UNQUALIFIED
David DarakjyGermanyAnna Fali RENEWAL
Misaki RoysterCanadaIoni Bowcher QUALIFIED
Antonio CaudySpainOnyama Limba RENEWAL
Kaitlin OstroskySpainBernardo Dominic NEGOTIATION
Chavez BriddickIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaItalyStephen Shaw NEGOTIATION
Tony FollerGermanyAsiya Javayant PROPOSAL
Deepesh ChuiItalyAsiya Javayant NEW
Isabel BowleyCanadaXuxue Feng UNQUALIFIED
Ivar PaprockiAustraliaStephen Shaw RENEWAL
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Johnson SergiArgentinaStephen Shaw RENEWAL
Munro FerenczGermanyAmy Elsner PROPOSAL
James ButtBrazilOnyama Limba RENEWAL
Aditya KuskoRussiaOnyama Limba QUALIFIED
Jennifer AmigonJapanStephen Shaw UNQUALIFIED
Kadeem FlosiBrazilAnna Fali NEGOTIATION
Salvatore StockhamAustraliaAsiya Javayant RENEWAL
Francesco ShinkoCanadaOnyama Limba RENEWAL
Jones VocelkaSpainStephen Shaw NEW
Munro FerenczAustraliaAnna Fali UNQUALIFIED
Deepesh ChuiFranceAnna Fali NEGOTIATION
Darci PoquetteSpainXuxue Feng PROPOSAL
Misaki RoysterSpainAmy Elsner NEW
Mujtaba NickaArgentinaStephen Shaw QUALIFIED
Octavia MaletItalyIvan Magalhaes UNQUALIFIED
Wickens NestleGermanyAnna Fali NEGOTIATION
Ivar PaprockiJapanElwin Sharvill NEGOTIATION
Nicolas IturbideJapanOnyama Limba UNQUALIFIED
Claire TollnerIndiaStephen Shaw NEGOTIATION
Ricardo GauchoGermanyAsiya Javayant UNQUALIFIED
James ButtAustraliaAsiya Javayant UNQUALIFIED
Salvatore StockhamArgentinaOnyama Limba QUALIFIED
Clifford RimRussiaOnyama Limba NEW
Costa DilliardItalyXuxue Feng NEGOTIATION
Faith GillianArgentinaStephen Shaw PROPOSAL
Jeanfrancois VenereGermanyAnna Fali NEGOTIATION
Ricardo GauchoBrazilStephen Shaw UNQUALIFIED
Claire TollnerBrazilAmy Elsner NEW
Misaki RoysterBrazilXuxue Feng RENEWAL
Izzy GarufiBrazilElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiUnited KingdomAsiya Javayant UNQUALIFIED
Adams MorascaArgentinaXuxue Feng NEGOTIATION
Jefferson SchemmerFranceIoni Bowcher QUALIFIED
Octavia MaletIndiaStephen Shaw NEW
Maisha RulapaughRussiaAmy Elsner NEGOTIATION
Kaitlin OstroskyGermanyIvan Magalhaes PROPOSAL
Mujtaba NickaGermanyElwin Sharvill UNQUALIFIED
Maria MarrierSpainElwin Sharvill NEW
Leon OldroydArgentinaIvan Magalhaes QUALIFIED
Rodrigues CampainGermanyElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottGermany2025-09-14Chapman, Ross E Esq QUALIFIED74Bernardo Dominic
1001Jennifer AmigonAustralia2025-09-10Chanay, Jeffrey A Esq NEGOTIATION30Ioni Bowcher
1002David DarakjyRussia2025-09-14Truhlar And Truhlar Attys RENEWAL35Amy Elsner
1003Jones VocelkaSpain2025-08-28Benton, John B Jr QUALIFIED33Elwin Sharvill
1004Julie StensethArgentina2025-08-31Benton, John B Jr QUALIFIED17Ivan Magalhaes
1005Jefferson SchemmerSpain2025-09-09Chemel, James L Cpa RENEWAL10Xuxue Feng
1006Isabel BowleyUnited Kingdom2025-09-18Chanay, Jeffrey A Esq UNQUALIFIED48Amy Elsner
1007Francesco ShinkoRussia2025-09-04Printing Dimensions PROPOSAL74Xuxue Feng
1008Adams MorascaFrance2025-09-03Chanay, Jeffrey A Esq PROPOSAL63Stephen Shaw
1009Jones VocelkaCanada2025-09-18Truhlar And Truhlar Attys UNQUALIFIED55Ioni Bowcher
1010Jones VocelkaUnited Kingdom2025-09-13Rousseaux, Michael Esq NEW93Elwin Sharvill
1011Jeanfrancois VenereRussia2025-09-20King, Christopher A Esq NEW5Bernardo Dominic
1012Wickens NestleItaly2025-08-31Chemel, James L Cpa NEGOTIATION91Elwin Sharvill
1013Rodrigues CampainGermany2025-09-20Benton, John B Jr QUALIFIED21Xuxue Feng
1014Leja CaldareraCanada2025-09-11Feltz Printing Service RENEWAL7Anna Fali
1015Nicolas IturbideRussia2025-09-09Chanay, Jeffrey A Esq UNQUALIFIED61Ivan Magalhaes
1016Leon OldroydCanada2025-09-14Benton, John B Jr UNQUALIFIED93Stephen Shaw
1017Deepesh ChuiGermany2025-09-15King, Christopher A Esq PROPOSAL70Asiya Javayant
1018Octavia MaletGermany2025-09-23Truhlar And Truhlar Attys RENEWAL83Anna Fali
1019Maria MarrierCanada2025-09-12Buckley Miller Wright UNQUALIFIED38Ivan Magalhaes
1020Salvatore StockhamUnited Kingdom2025-09-16Rangoni Of Florence UNQUALIFIED39Asiya Javayant
1021Octavia MaletRussia2025-09-04Buckley Miller Wright NEGOTIATION64Ivan Magalhaes
1022Arvin AlbaresUnited Kingdom2025-08-27Buckley Miller Wright UNQUALIFIED13Stephen Shaw
1023Jones VocelkaSpain2025-09-21Printing Dimensions NEGOTIATION89Amy Elsner
1024Chavez BriddickSpain2025-09-19Rangoni Of Florence NEGOTIATION24Asiya Javayant
1025Wickens NestleArgentina2025-09-22Printing Dimensions NEW43Ioni Bowcher
1026Faith GillianAustralia2025-09-09Morlong Associates NEGOTIATION20Amy Elsner
1027Maisha RulapaughFrance2025-09-10Feiner Bros NEGOTIATION74Asiya Javayant
1028Rodrigues CampainItaly2025-08-28Chanay, Jeffrey A Esq QUALIFIED91Ioni Bowcher
1029Mayumi KolmetzUnited Kingdom2025-09-22Rangoni Of Florence PROPOSAL39Asiya Javayant
1030Aika InouyeGermany2025-09-11Dorl, James J Esq NEGOTIATION82Onyama Limba
1031Leon OldroydAustralia2025-09-21Feiner Bros UNQUALIFIED72Xuxue Feng
1032Izzy GarufiFrance2025-09-03Rousseaux, Michael Esq QUALIFIED98Stephen Shaw
1033Nicolas IturbideItaly2025-09-02Rangoni Of Florence PROPOSAL21Stephen Shaw
1034Arvin AlbaresUnited Kingdom2025-09-11Chapman, Ross E Esq RENEWAL81Stephen Shaw
1035James ButtBrazil2025-09-24Chanay, Jeffrey A Esq RENEWAL47Bernardo Dominic
1036Ashley DoeFrance2025-09-14Feiner Bros QUALIFIED92Anna Fali
1037Smith GlickUnited Kingdom2025-09-02King, Christopher A Esq NEGOTIATION83Anna Fali
1038Aruna FigeroaCanada2025-09-13Morlong Associates QUALIFIED25Ioni Bowcher
1039Darci PoquetteFrance2025-09-15Rousseaux, Michael Esq PROPOSAL76Ivan Magalhaes
1040Sinclair WaycottAustralia2025-09-24Chemel, James L Cpa UNQUALIFIED72Asiya Javayant
1041Octavia MaletUnited Kingdom2025-09-04Chapman, Ross E Esq NEW66Ivan Magalhaes
1042Izzy GarufiIndia2025-09-16Feltz Printing Service UNQUALIFIED12Amy Elsner
1043Faith GillianArgentina2025-08-28Chemel, James L Cpa RENEWAL62Ioni Bowcher
1044Mayumi KolmetzIndia2025-08-30Rousseaux, Michael Esq NEW72Onyama Limba
1045Izzy GarufiFrance2025-09-23Rousseaux, Michael Esq RENEWAL26Bernardo Dominic
1046Tony FollerItaly2025-09-13Chapman, Ross E Esq NEW55Bernardo Dominic
1047Claire TollnerCanada2025-09-06Commercial Press QUALIFIED56Anna Fali
1048Jeanfrancois VenereCanada2025-09-15Benton, John B Jr PROPOSAL87Asiya Javayant
1049Munro FerenczBrazil2025-09-09Dorl, James J Esq UNQUALIFIED32Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Smith GlickRussiaIvan Magalhaes QUALIFIED
Wickens NestleBrazilStephen Shaw NEW
Maisha RulapaughJapanXuxue Feng UNQUALIFIED
Aruna FigeroaRussiaAnna Fali NEGOTIATION
Arvin AlbaresItalyAnna Fali RENEWAL
Misaki RoysterJapanAnna Fali QUALIFIED
Antonio CaudyRussiaIvan Magalhaes NEGOTIATION
Clifford RimRussiaBernardo Dominic UNQUALIFIED
Arvin AlbaresJapanAsiya Javayant NEGOTIATION
Jeanfrancois VenereUnited KingdomIvan Magalhaes RENEWAL
Faith GillianUnited KingdomBernardo Dominic RENEWAL
Octavia MaletRussiaBernardo Dominic QUALIFIED
Antonio CaudyRussiaXuxue Feng PROPOSAL
Mujtaba NickaRussiaOnyama Limba QUALIFIED
Johnson SergiBrazilStephen Shaw RENEWAL
Maria MarrierAustraliaAsiya Javayant PROPOSAL
Alejandro PerinSpainAnna Fali RENEWAL
Octavia MaletItalyStephen Shaw PROPOSAL
Morrow RutaCanadaStephen Shaw NEW
Jennifer AmigonRussiaAsiya Javayant RENEWAL
Salvatore StockhamSpainAsiya Javayant RENEWAL
Costa DilliardRussiaIvan Magalhaes UNQUALIFIED
Ashley DoeRussiaAmy Elsner PROPOSAL
Octavia MaletAustraliaBernardo Dominic QUALIFIED
David DarakjyRussiaOnyama Limba NEGOTIATION
Costa DilliardBrazilAnna Fali RENEWAL
Aditya KuskoIndiaIvan Magalhaes RENEWAL
Ivar PaprockiUnited KingdomAsiya Javayant UNQUALIFIED
Maria MarrierItalyAmy Elsner UNQUALIFIED
Murillo MaletSpainOnyama Limba RENEWAL
Mujtaba NickaIndiaBernardo Dominic NEW
Murillo MaletUnited KingdomAsiya Javayant NEGOTIATION
Emily WhobreyFranceAnna Fali NEW
Jefferson SchemmerArgentinaElwin Sharvill NEW
Johnson SergiArgentinaIoni Bowcher NEGOTIATION
Octavia MaletArgentinaAnna Fali RENEWAL
Tony FollerUnited KingdomAsiya Javayant RENEWAL
Murillo MaletCanadaStephen Shaw QUALIFIED
Nicolas IturbideGermanyAnna Fali RENEWAL
Clifford RimGermanyBernardo Dominic NEW
Francesco ShinkoIndiaXuxue Feng RENEWAL
Alejandro PerinItalyIoni Bowcher NEW
Julie StensethArgentinaAsiya Javayant QUALIFIED
Misaki RoysterItalyAnna Fali NEGOTIATION
Juan WieserCanadaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyFranceAmy Elsner QUALIFIED
Jefferson SchemmerCanadaIoni Bowcher RENEWAL
Murillo MaletBrazilIoni Bowcher RENEWAL
Octavia MaletSpainAmy Elsner NEGOTIATION
Cody SaylorsRussiaAnna Fali UNQUALIFIED
Frozen Columns
Name
Aika Inouye
Darci Poquette
Aruna Figeroa
Misaki Royster
Adams Morasca
Ricardo Gaucho
Silvio Slusarski
Isabel Bowley
Murillo Malet
Aika Inouye
Jefferson Schemmer
Stacey Maclead
James Butt
Costa Dilliard
Faith Gillian
David Darakjy
Antonio Caudy
Emily Whobrey
Jones Vocelka
Francesco Shinko
Mujtaba Nicka
Clifford Rim
Murillo Malet
Tony Foller
Misaki Royster
Maria Marrier
Octavia Malet
Jones Vocelka
Sinclair Waycott
Maria Marrier
Arvin Albares
David Darakjy
Maria Marrier
Greenwood Bolognia
Morrow Ruta
Johnson Sergi
Costa Dilliard
James Butt
Munro Ferencz
Murillo Malet
Jones Vocelka
Jennifer Amigon
Cody Saylors
Tony Foller
Emily Whobrey
Tony Foller
Juan Wieser
Julie Stenseth
Aika Inouye
Arvin Albares
IdCountryDate
1000Italy2025-09-06
1001Russia2025-08-29
1002Japan2025-09-21
1003Brazil2025-09-15
1004Australia2025-09-13
1005United Kingdom2025-09-19
1006United Kingdom2025-09-21
1007Brazil2025-08-29
1008India2025-09-07
1009India2025-09-01
1010Italy2025-09-03
1011Russia2025-09-05
1012Brazil2025-09-22
1013Spain2025-09-01
1014Brazil2025-08-29
1015Japan2025-09-23
1016Germany2025-09-10
1017Argentina2025-09-06
1018Spain2025-09-25
1019Russia2025-09-16
1020India2025-09-04
1021Argentina2025-09-19
1022United Kingdom2025-08-27
1023Spain2025-09-09
1024Australia2025-09-01
1025United Kingdom2025-08-29
1026Brazil2025-08-31
1027India2025-08-30
1028Spain2025-09-15
1029Argentina2025-09-16
1030Spain2025-09-11
1031Spain2025-09-23
1032Spain2025-08-31
1033France2025-09-18
1034Brazil2025-09-06
1035United Kingdom2025-09-02
1036India2025-09-10
1037United Kingdom2025-09-20
1038Spain2025-09-08
1039France2025-08-30
1040Germany2025-09-07
1041Germany2025-09-16
1042Argentina2025-09-21
1043India2025-08-27
1044Russia2025-09-21
1045Canada2025-08-28
1046Canada2025-09-11
1047Russia2025-09-01
1048Argentina2025-09-14
1049Russia2025-09-03

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Australia2025-09-20
Darci Poquette1001United Kingdom2025-09-01
Emily Whobrey1002Germany2025-09-07
Maria Marrier1003Canada2025-09-06
James Butt1004Japan2025-08-30
Leja Caldarera1005Japan2025-08-29
Mujtaba Nicka1006United Kingdom2025-08-29
Adams Morasca1007Spain2025-09-25
Izzy Garufi1008Brazil2025-09-15
Ashley Doe1009Germany2025-08-27
Ricardo Gaucho1010United Kingdom2025-09-01
Smith Glick1011Spain2025-09-18
Alejandro Perin1012Canada2025-09-25
Murillo Malet1013India2025-09-17
Arvin Albares1014Argentina2025-08-31
Izzy Garufi1015India2025-09-17
Kaitlin Ostrosky1016Australia2025-09-03
Mujtaba Nicka1017Canada2025-09-13
Salvatore Stockham1018Brazil2025-09-23
Isabel Bowley1019Italy2025-09-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaGermanyStephen Shaw PROPOSAL
Leja CaldareraJapanIvan Magalhaes NEW
Chavez BriddickJapanAsiya Javayant NEGOTIATION
Maisha RulapaughItalyXuxue Feng NEW
Claire TollnerFranceOnyama Limba RENEWAL
Kadeem FlosiJapanAmy Elsner RENEWAL
Costa DilliardSpainAnna Fali NEGOTIATION
Francesco ShinkoGermanyBernardo Dominic QUALIFIED
Silvio SlusarskiFranceIoni Bowcher PROPOSAL
Greenwood BologniaAustraliaOnyama Limba QUALIFIED
Faith GillianUnited KingdomIvan Magalhaes QUALIFIED
James ButtArgentinaIoni Bowcher PROPOSAL
Emily WhobreyItalyIvan Magalhaes QUALIFIED
James ButtIndiaOnyama Limba UNQUALIFIED
Johnson SergiFranceStephen Shaw PROPOSAL
Jennifer AmigonIndiaIvan Magalhaes RENEWAL
Jennifer AmigonItalyAnna Fali NEGOTIATION
Claire TollnerIndiaBernardo Dominic UNQUALIFIED
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Deepesh ChuiBrazilAsiya Javayant UNQUALIFIED
Costa DilliardRussiaStephen Shaw NEGOTIATION
Darci PoquetteCanadaIoni Bowcher RENEWAL
Clifford RimUnited KingdomElwin Sharvill RENEWAL
Aika InouyeCanadaAnna Fali RENEWAL
Jennifer AmigonUnited KingdomStephen Shaw RENEWAL
Aika InouyeUnited KingdomXuxue Feng NEGOTIATION
Leja CaldareraSpainOnyama Limba NEW
Misaki RoysterBrazilAmy Elsner QUALIFIED
Deepesh ChuiFranceXuxue Feng PROPOSAL
Kaitlin OstroskyAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideUnited KingdomIoni Bowcher UNQUALIFIED
Alejandro PerinArgentinaAnna Fali NEGOTIATION
Misaki RoysterRussiaIoni Bowcher RENEWAL
Alejandro PerinItalyElwin Sharvill RENEWAL
Clifford RimJapanOnyama Limba PROPOSAL
Costa DilliardRussiaAnna Fali RENEWAL
Kadeem FlosiFranceIoni Bowcher NEGOTIATION
Silvio SlusarskiItalyAnna Fali PROPOSAL
Izzy GarufiUnited KingdomAnna Fali RENEWAL
Maisha RulapaughCanadaXuxue Feng 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>