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
James ButtSpainStephen Shaw QUALIFIED
Julie StensethBrazilBernardo Dominic QUALIFIED
Greenwood BologniaItalyIoni Bowcher QUALIFIED
Juan WieserJapanOnyama Limba NEGOTIATION
Tony FollerItalyAnna Fali QUALIFIED
Murillo MaletGermanyIoni Bowcher NEGOTIATION
Costa DilliardUnited KingdomStephen Shaw QUALIFIED
Mujtaba NickaSpainAsiya Javayant NEW
Antonio CaudyIndiaBernardo Dominic QUALIFIED
Cody SaylorsCanadaBernardo Dominic NEW
Stacey MacleadRussiaIvan Magalhaes NEGOTIATION
Adams MorascaSpainAsiya Javayant PROPOSAL
Francesco ShinkoItalyBernardo Dominic RENEWAL
Claire TollnerAustraliaBernardo Dominic UNQUALIFIED
Izzy GarufiItalyAnna Fali NEGOTIATION
Julie StensethArgentinaAnna Fali NEW
Julie StensethSpainElwin Sharvill NEGOTIATION
Kadeem FlosiRussiaAmy Elsner RENEWAL
Jennifer AmigonRussiaXuxue Feng PROPOSAL
Jones VocelkaUnited KingdomIoni Bowcher NEW
Adams MorascaCanadaAmy Elsner NEW
Wickens NestleItalyBernardo Dominic NEW
Leja CaldareraCanadaAsiya Javayant RENEWAL
Salvatore StockhamGermanyElwin Sharvill UNQUALIFIED
Jeanfrancois VenereRussiaAmy Elsner NEW
Mayumi KolmetzJapanAsiya Javayant PROPOSAL
Chavez BriddickAustraliaAnna Fali PROPOSAL
Francesco ShinkoItalyBernardo Dominic NEW
Cody SaylorsBrazilBernardo Dominic RENEWAL
Aditya KuskoGermanyStephen Shaw UNQUALIFIED
Murillo MaletSpainElwin Sharvill PROPOSAL
Mujtaba NickaUnited KingdomStephen Shaw NEGOTIATION
Munro FerenczArgentinaAsiya Javayant QUALIFIED
Alejandro PerinFranceElwin Sharvill NEGOTIATION
Juan WieserArgentinaOnyama Limba UNQUALIFIED
Johnson SergiBrazilOnyama Limba NEW
Isabel BowleyBrazilXuxue Feng RENEWAL
Isabel BowleyUnited KingdomElwin Sharvill PROPOSAL
Murillo MaletAustraliaElwin Sharvill RENEWAL
Silvio SlusarskiFranceOnyama Limba NEGOTIATION
Jennifer AmigonItalyAsiya Javayant PROPOSAL
Juan WieserAustraliaIvan Magalhaes NEGOTIATION
Stacey MacleadAustraliaElwin Sharvill RENEWAL
Tony FollerArgentinaXuxue Feng PROPOSAL
Arvin AlbaresUnited KingdomAnna Fali NEW
Stacey MacleadIndiaStephen Shaw RENEWAL
Mayumi KolmetzCanadaXuxue Feng NEGOTIATION
Adams MorascaAustraliaXuxue Feng UNQUALIFIED
Francesco ShinkoUnited KingdomAsiya Javayant NEGOTIATION
Rodrigues CampainFranceXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Rodrigues CampainCanadaBernardo Dominic NEW
Maria MarrierRussiaAmy Elsner PROPOSAL
Sinclair WaycottArgentinaAmy Elsner QUALIFIED
Maisha RulapaughJapanIvan Magalhaes NEW
Greenwood BologniaUnited KingdomIoni Bowcher NEGOTIATION
Deepesh ChuiFranceBernardo Dominic NEW
Rodrigues CampainAustraliaAmy Elsner NEGOTIATION
Misaki RoysterFranceAmy Elsner UNQUALIFIED
Tony FollerRussiaIvan Magalhaes NEGOTIATION
Costa DilliardFranceStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinIndia2025-09-23Commercial Press NEGOTIATION42Onyama Limba
1001Chavez BriddickBrazil2025-10-06Chemel, James L Cpa NEW58Onyama Limba
1002Kadeem FlosiGermany2025-10-04Chanay, Jeffrey A Esq UNQUALIFIED63Xuxue Feng
1003Juan WieserJapan2025-10-01Truhlar And Truhlar Attys UNQUALIFIED57Bernardo Dominic
1004Antonio CaudyGermany2025-10-02Chanay, Jeffrey A Esq UNQUALIFIED64Asiya Javayant
1005Claire TollnerSpain2025-10-09Truhlar And Truhlar Attys RENEWAL15Amy Elsner
1006Alejandro PerinAustralia2025-10-09Chapman, Ross E Esq UNQUALIFIED89Anna Fali
1007Jeanfrancois VenereRussia2025-10-18Printing Dimensions NEGOTIATION97Elwin Sharvill
1008Jones VocelkaUnited Kingdom2025-10-18Commercial Press RENEWAL36Ivan Magalhaes
1009Francesco ShinkoJapan2025-10-15Chapman, Ross E Esq NEW43Stephen Shaw
1010Francesco ShinkoSpain2025-10-14Rangoni Of Florence PROPOSAL90Amy Elsner
1011Jennifer AmigonRussia2025-09-23Commercial Press NEGOTIATION14Asiya Javayant
1012Tony FollerItaly2025-10-20Dorl, James J Esq NEGOTIATION71Xuxue Feng
1013Jefferson SchemmerGermany2025-10-06Morlong Associates NEW43Amy Elsner
1014Jennifer AmigonBrazil2025-10-04Chemel, James L Cpa UNQUALIFIED0Anna Fali
1015Mayumi KolmetzCanada2025-10-17King, Christopher A Esq RENEWAL38Ioni Bowcher
1016Greenwood BologniaGermany2025-09-22Benton, John B Jr UNQUALIFIED36Anna Fali
1017Isabel BowleySpain2025-10-10Benton, John B Jr RENEWAL11Ivan Magalhaes
1018Salvatore StockhamJapan2025-10-17Benton, John B Jr QUALIFIED59Ivan Magalhaes
1019Aditya KuskoAustralia2025-10-06Chemel, James L Cpa PROPOSAL85Xuxue Feng
1020Wickens NestleUnited Kingdom2025-10-15Dorl, James J Esq NEGOTIATION63Ivan Magalhaes
1021Misaki RoysterCanada2025-09-23Buckley Miller Wright RENEWAL92Xuxue Feng
1022Adams MorascaFrance2025-09-25Printing Dimensions UNQUALIFIED44Asiya Javayant
1023Juan WieserIndia2025-10-20Chanay, Jeffrey A Esq NEGOTIATION26Ivan Magalhaes
1024Mayumi KolmetzFrance2025-09-22Buckley Miller Wright QUALIFIED59Xuxue Feng
1025Adams MorascaBrazil2025-10-11King, Christopher A Esq QUALIFIED7Xuxue Feng
1026Adams MorascaArgentina2025-10-12Rousseaux, Michael Esq NEGOTIATION98Ioni Bowcher
1027Nicolas IturbideFrance2025-10-20Feltz Printing Service UNQUALIFIED6Bernardo Dominic
1028Jennifer AmigonAustralia2025-10-15Printing Dimensions QUALIFIED99Asiya Javayant
1029Aditya KuskoCanada2025-10-01Rousseaux, Michael Esq RENEWAL16Ivan Magalhaes
1030Cody SaylorsJapan2025-09-23Rangoni Of Florence NEGOTIATION22Xuxue Feng
1031Kaitlin OstroskySpain2025-10-11Feiner Bros NEW34Elwin Sharvill
1032Ricardo GauchoGermany2025-09-30Commercial Press UNQUALIFIED55Stephen Shaw
1033Arvin AlbaresJapan2025-09-27Feltz Printing Service RENEWAL64Asiya Javayant
1034David DarakjyIndia2025-10-20Chanay, Jeffrey A Esq QUALIFIED56Stephen Shaw
1035Aditya KuskoSpain2025-10-10Chanay, Jeffrey A Esq QUALIFIED86Asiya Javayant
1036Ashley DoeAustralia2025-10-21King, Christopher A Esq RENEWAL27Anna Fali
1037Jones VocelkaFrance2025-10-03Commercial Press NEW12Amy Elsner
1038Chavez BriddickUnited Kingdom2025-10-18Feiner Bros QUALIFIED10Ivan Magalhaes
1039Cody SaylorsRussia2025-09-24Commercial Press NEGOTIATION54Amy Elsner
1040Claire TollnerArgentina2025-10-15Chanay, Jeffrey A Esq RENEWAL36Elwin Sharvill
1041Mayumi KolmetzIndia2025-10-17Buckley Miller Wright UNQUALIFIED94Stephen Shaw
1042Ashley DoeSpain2025-10-06Feltz Printing Service RENEWAL25Amy Elsner
1043Silvio SlusarskiCanada2025-09-29Dorl, James J Esq UNQUALIFIED12Elwin Sharvill
1044Greenwood BologniaIndia2025-10-18Printing Dimensions NEW72Onyama Limba
1045Ivar PaprockiJapan2025-09-23Chapman, Ross E Esq NEGOTIATION46Anna Fali
1046Maisha RulapaughCanada2025-10-07Rousseaux, Michael Esq UNQUALIFIED71Ioni Bowcher
1047Aika InouyeArgentina2025-10-20Chapman, Ross E Esq RENEWAL24Anna Fali
1048Jefferson SchemmerFrance2025-09-28Chanay, Jeffrey A Esq UNQUALIFIED67Ioni Bowcher
1049Greenwood BologniaRussia2025-10-18Buckley Miller Wright QUALIFIED40Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiFranceIoni Bowcher QUALIFIED
Costa DilliardGermanyAsiya Javayant NEW
Francesco ShinkoRussiaOnyama Limba RENEWAL
Kaitlin OstroskyItalyAnna Fali UNQUALIFIED
David DarakjyItalyOnyama Limba NEW
Darci PoquetteItalyElwin Sharvill RENEWAL
Aruna FigeroaAustraliaIoni Bowcher NEGOTIATION
Nicolas IturbideFranceOnyama Limba RENEWAL
Wickens NestleGermanyXuxue Feng RENEWAL
Isabel BowleyCanadaElwin Sharvill NEW
Alejandro PerinArgentinaAsiya Javayant QUALIFIED
Costa DilliardUnited KingdomAnna Fali RENEWAL
Tony FollerUnited KingdomAsiya Javayant UNQUALIFIED
Jeanfrancois VenereUnited KingdomIoni Bowcher PROPOSAL
Aika InouyeAustraliaAsiya Javayant QUALIFIED
Rodrigues CampainFranceStephen Shaw NEGOTIATION
Deepesh ChuiBrazilAnna Fali NEW
Rodrigues CampainJapanElwin Sharvill NEW
Maria MarrierItalyBernardo Dominic UNQUALIFIED
Sinclair WaycottCanadaAmy Elsner RENEWAL
Silvio SlusarskiFranceAsiya Javayant RENEWAL
Arvin AlbaresArgentinaIoni Bowcher UNQUALIFIED
Arvin AlbaresItalyBernardo Dominic NEW
Rodrigues CampainFranceAnna Fali RENEWAL
Munro FerenczItalyBernardo Dominic NEW
Izzy GarufiSpainIoni Bowcher QUALIFIED
James ButtAustraliaStephen Shaw PROPOSAL
Aditya KuskoSpainXuxue Feng PROPOSAL
Ashley DoeJapanIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaAmy Elsner UNQUALIFIED
Francesco ShinkoJapanBernardo Dominic RENEWAL
Wickens NestleGermanyIvan Magalhaes QUALIFIED
Johnson SergiIndiaOnyama Limba NEW
David DarakjyRussiaOnyama Limba QUALIFIED
Aruna FigeroaAustraliaAsiya Javayant RENEWAL
Smith GlickAustraliaIvan Magalhaes NEGOTIATION
Mayumi KolmetzArgentinaStephen Shaw NEW
Ashley DoeBrazilElwin Sharvill RENEWAL
Francesco ShinkoAustraliaAsiya Javayant UNQUALIFIED
Antonio CaudyItalyBernardo Dominic PROPOSAL
Adams MorascaFranceXuxue Feng NEGOTIATION
Tony FollerFranceAnna Fali UNQUALIFIED
Wickens NestleGermanyOnyama Limba RENEWAL
Salvatore StockhamIndiaAmy Elsner NEGOTIATION
Juan WieserFranceIoni Bowcher UNQUALIFIED
Kaitlin OstroskyAustraliaAnna Fali PROPOSAL
Salvatore StockhamFranceIvan Magalhaes QUALIFIED
Isabel BowleyBrazilBernardo Dominic NEW
Adams MorascaUnited KingdomIvan Magalhaes PROPOSAL
Arvin AlbaresAustraliaStephen Shaw RENEWAL
Frozen Columns
Name
Johnson Sergi
Nicolas Iturbide
Jefferson Schemmer
Ivar Paprocki
Silvio Slusarski
Juan Wieser
Johnson Sergi
Izzy Garufi
Octavia Malet
Aditya Kusko
Maisha Rulapaugh
Kaitlin Ostrosky
James Butt
Julie Stenseth
Jennifer Amigon
Jones Vocelka
Julie Stenseth
Chavez Briddick
Misaki Royster
Faith Gillian
Arvin Albares
David Darakjy
Clifford Rim
Mujtaba Nicka
Jones Vocelka
Juan Wieser
Julie Stenseth
Cody Saylors
David Darakjy
Deepesh Chui
Ashley Doe
Deepesh Chui
Cody Saylors
Chavez Briddick
Chavez Briddick
Jennifer Amigon
Adams Morasca
Kadeem Flosi
Maria Marrier
Nicolas Iturbide
Izzy Garufi
Ricardo Gaucho
Kaitlin Ostrosky
Deepesh Chui
Murillo Malet
Ashley Doe
Arvin Albares
James Butt
Deepesh Chui
Ricardo Gaucho
IdCountryDate
1000Argentina2025-09-26
1001United Kingdom2025-10-09
1002United Kingdom2025-10-20
1003Spain2025-10-09
1004Italy2025-10-11
1005Italy2025-10-05
1006Germany2025-09-27
1007Brazil2025-10-07
1008France2025-09-26
1009Russia2025-10-13
1010Germany2025-10-17
1011India2025-10-18
1012Brazil2025-10-12
1013Japan2025-10-21
1014India2025-09-25
1015Russia2025-10-12
1016Australia2025-10-01
1017France2025-09-24
1018Italy2025-10-10
1019France2025-10-20
1020France2025-09-27
1021United Kingdom2025-09-24
1022Australia2025-10-19
1023Germany2025-10-21
1024Japan2025-10-18
1025Russia2025-10-06
1026France2025-09-30
1027Japan2025-10-10
1028France2025-09-27
1029France2025-10-19
1030Canada2025-10-11
1031India2025-10-04
1032France2025-10-05
1033India2025-10-02
1034Italy2025-09-27
1035Spain2025-09-23
1036Argentina2025-10-10
1037Brazil2025-10-18
1038Russia2025-10-19
1039Italy2025-10-01
1040Germany2025-10-07
1041France2025-10-20
1042India2025-10-14
1043Brazil2025-10-21
1044Italy2025-09-22
1045United Kingdom2025-10-08
1046Canada2025-09-30
1047Japan2025-10-01
1048Canada2025-10-11
1049Canada2025-10-21

On-Demand Data

NameIdCountryDate
Arvin Albares1000Canada2025-10-13
Darci Poquette1001Brazil2025-10-21
James Butt1002United Kingdom2025-09-25
Mujtaba Nicka1003United Kingdom2025-10-17
Claire Tollner1004Canada2025-10-19
Kaitlin Ostrosky1005Canada2025-09-27
Costa Dilliard1006Germany2025-10-05
Maisha Rulapaugh1007United Kingdom2025-10-21
Wickens Nestle1008Russia2025-10-12
Jefferson Schemmer1009India2025-10-06
Wickens Nestle1010Canada2025-09-30
Ashley Doe1011Spain2025-09-27
Ivar Paprocki1012Russia2025-10-04
Emily Whobrey1013Germany2025-10-01
Clifford Rim1014United Kingdom2025-10-13
Murillo Malet1015Germany2025-10-10
Jennifer Amigon1016Japan2025-10-17
David Darakjy1017Japan2025-10-19
Ashley Doe1018Argentina2025-10-08
Maisha Rulapaugh1019Germany2025-10-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczSpainOnyama Limba UNQUALIFIED
Greenwood BologniaCanadaIvan Magalhaes QUALIFIED
Costa DilliardSpainAnna Fali PROPOSAL
Octavia MaletAustraliaOnyama Limba NEGOTIATION
Wickens NestleAustraliaAnna Fali RENEWAL
Nicolas IturbideFranceXuxue Feng PROPOSAL
Kaitlin OstroskyCanadaElwin Sharvill RENEWAL
Morrow RutaJapanElwin Sharvill NEGOTIATION
Munro FerenczSpainBernardo Dominic UNQUALIFIED
Salvatore StockhamFranceAnna Fali NEGOTIATION
Julie StensethArgentinaAmy Elsner NEGOTIATION
Juan WieserCanadaXuxue Feng QUALIFIED
David DarakjyRussiaStephen Shaw NEGOTIATION
Juan WieserJapanAnna Fali NEW
Ashley DoeUnited KingdomIoni Bowcher RENEWAL
Francesco ShinkoAustraliaOnyama Limba PROPOSAL
Nicolas IturbideIndiaAnna Fali RENEWAL
Nicolas IturbideFranceXuxue Feng PROPOSAL
Smith GlickItalyElwin Sharvill QUALIFIED
Munro FerenczJapanBernardo Dominic NEW
Leon OldroydRussiaBernardo Dominic PROPOSAL
Aika InouyeCanadaElwin Sharvill RENEWAL
Ricardo GauchoBrazilOnyama Limba PROPOSAL
Emily WhobreyItalyXuxue Feng RENEWAL
Maisha RulapaughRussiaBernardo Dominic NEW
Claire TollnerSpainOnyama Limba PROPOSAL
Jennifer AmigonUnited KingdomAmy Elsner UNQUALIFIED
Cody SaylorsJapanElwin Sharvill RENEWAL
Murillo MaletAustraliaStephen Shaw RENEWAL
Ivar PaprockiGermanyAnna Fali NEGOTIATION
Mujtaba NickaUnited KingdomStephen Shaw UNQUALIFIED
Darci PoquetteUnited KingdomIoni Bowcher NEGOTIATION
Kaitlin OstroskyArgentinaStephen Shaw RENEWAL
Octavia MaletArgentinaStephen Shaw PROPOSAL
Kaitlin OstroskySpainElwin Sharvill NEGOTIATION
Francesco ShinkoGermanyIvan Magalhaes RENEWAL
Jennifer AmigonArgentinaStephen Shaw QUALIFIED
Ricardo GauchoSpainOnyama Limba UNQUALIFIED
Wickens NestleFranceBernardo Dominic RENEWAL
Costa DilliardSpainElwin Sharvill 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>