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
Maria MarrierArgentinaAmy Elsner NEW
Wickens NestleGermanyIoni Bowcher NEW
Salvatore StockhamJapanXuxue Feng NEGOTIATION
Aika InouyeFranceElwin Sharvill RENEWAL
Sinclair WaycottItalyBernardo Dominic QUALIFIED
Jefferson SchemmerRussiaXuxue Feng NEW
Ivar PaprockiArgentinaIvan Magalhaes PROPOSAL
Adams MorascaGermanyStephen Shaw RENEWAL
Darci PoquetteCanadaStephen Shaw QUALIFIED
Jefferson SchemmerRussiaXuxue Feng RENEWAL
Aika InouyeFranceElwin Sharvill UNQUALIFIED
Adams MorascaRussiaElwin Sharvill NEW
James ButtSpainIoni Bowcher NEW
Greenwood BologniaIndiaAnna Fali PROPOSAL
Claire TollnerJapanStephen Shaw NEW
Jeanfrancois VenereSpainElwin Sharvill PROPOSAL
Sinclair WaycottCanadaBernardo Dominic UNQUALIFIED
Claire TollnerUnited KingdomAmy Elsner NEGOTIATION
Mayumi KolmetzCanadaIvan Magalhaes PROPOSAL
Maisha RulapaughCanadaAmy Elsner QUALIFIED
Ricardo GauchoItalyXuxue Feng NEGOTIATION
Kadeem FlosiBrazilAnna Fali PROPOSAL
Rodrigues CampainCanadaAnna Fali PROPOSAL
Arvin AlbaresSpainElwin Sharvill PROPOSAL
Nicolas IturbideFranceAsiya Javayant NEW
Mayumi KolmetzUnited KingdomIoni Bowcher PROPOSAL
Munro FerenczJapanAmy Elsner RENEWAL
Ricardo GauchoFranceOnyama Limba NEGOTIATION
Aditya KuskoRussiaBernardo Dominic NEGOTIATION
Misaki RoysterFranceStephen Shaw NEGOTIATION
Tony FollerGermanyXuxue Feng NEW
Aruna FigeroaIndiaElwin Sharvill UNQUALIFIED
Ivar PaprockiUnited KingdomIvan Magalhaes QUALIFIED
Mujtaba NickaBrazilAsiya Javayant QUALIFIED
Ricardo GauchoSpainOnyama Limba RENEWAL
Aika InouyeArgentinaAmy Elsner QUALIFIED
Emily WhobreyItalyAmy Elsner UNQUALIFIED
Wickens NestleItalyOnyama Limba NEGOTIATION
Rodrigues CampainRussiaAsiya Javayant QUALIFIED
Nicolas IturbideIndiaBernardo Dominic QUALIFIED
Jeanfrancois VenereArgentinaOnyama Limba RENEWAL
Julie StensethSpainIoni Bowcher PROPOSAL
Isabel BowleyCanadaStephen Shaw NEW
Chavez BriddickArgentinaAnna Fali QUALIFIED
Alejandro PerinBrazilStephen Shaw NEW
Mujtaba NickaJapanStephen Shaw PROPOSAL
James ButtAustraliaAnna Fali PROPOSAL
Munro FerenczUnited KingdomIvan Magalhaes RENEWAL
Leon OldroydBrazilAnna Fali UNQUALIFIED
Salvatore StockhamBrazilOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideSpainAsiya Javayant QUALIFIED
Stacey MacleadSpainStephen Shaw UNQUALIFIED
Mujtaba NickaJapanStephen Shaw PROPOSAL
Munro FerenczItalyXuxue Feng UNQUALIFIED
Cody SaylorsJapanXuxue Feng UNQUALIFIED
Misaki RoysterRussiaElwin Sharvill PROPOSAL
Morrow RutaJapanBernardo Dominic RENEWAL
Emily WhobreyBrazilAsiya Javayant NEGOTIATION
Nicolas IturbideJapanIvan Magalhaes UNQUALIFIED
Isabel BowleyBrazilAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ashley DoeItaly2026-04-04Rousseaux, Michael Esq NEGOTIATION33Xuxue Feng
1001Maisha RulapaughItaly2026-04-27Chapman, Ross E Esq NEGOTIATION10Ioni Bowcher
1002Wickens NestleSpain2026-04-09Chemel, James L Cpa NEW21Stephen Shaw
1003Jefferson SchemmerAustralia2026-04-16Buckley Miller Wright PROPOSAL30Xuxue Feng
1004Maria MarrierIndia2026-04-27Feltz Printing Service UNQUALIFIED4Onyama Limba
1005Mujtaba NickaArgentina2026-04-29Rousseaux, Michael Esq NEW50Amy Elsner
1006Clifford RimArgentina2026-04-21King, Christopher A Esq PROPOSAL54Elwin Sharvill
1007Kaitlin OstroskyCanada2026-04-10Truhlar And Truhlar Attys RENEWAL59Ioni Bowcher
1008Misaki RoysterAustralia2026-04-11Dorl, James J Esq NEGOTIATION90Asiya Javayant
1009Aruna FigeroaCanada2026-04-27Rangoni Of Florence NEGOTIATION54Stephen Shaw
1010Izzy GarufiCanada2026-04-02Truhlar And Truhlar Attys UNQUALIFIED7Elwin Sharvill
1011Juan WieserSpain2026-04-12Commercial Press RENEWAL68Ioni Bowcher
1012Chavez BriddickBrazil2026-04-14Feiner Bros NEGOTIATION56Asiya Javayant
1013Leon OldroydFrance2026-04-22Chanay, Jeffrey A Esq NEW7Xuxue Feng
1014Maisha RulapaughBrazil2026-04-16Chemel, James L Cpa UNQUALIFIED34Elwin Sharvill
1015Jeanfrancois VenereSpain2026-04-19Rangoni Of Florence RENEWAL39Anna Fali
1016Munro FerenczRussia2026-04-05Truhlar And Truhlar Attys PROPOSAL59Stephen Shaw
1017Alejandro PerinIndia2026-04-26Chemel, James L Cpa QUALIFIED50Stephen Shaw
1018Isabel BowleyFrance2026-04-09Morlong Associates NEGOTIATION85Amy Elsner
1019James ButtItaly2026-04-25Chemel, James L Cpa RENEWAL11Asiya Javayant
1020Mayumi KolmetzJapan2026-04-22Dorl, James J Esq NEGOTIATION90Bernardo Dominic
1021Rodrigues CampainCanada2026-04-10Morlong Associates NEGOTIATION82Amy Elsner
1022Deepesh ChuiJapan2026-04-05Buckley Miller Wright PROPOSAL17Ioni Bowcher
1023Aditya KuskoUnited Kingdom2026-04-03Chemel, James L Cpa NEW21Asiya Javayant
1024Kaitlin OstroskyGermany2026-04-07Commercial Press UNQUALIFIED91Anna Fali
1025Mujtaba NickaItaly2026-04-12Truhlar And Truhlar Attys RENEWAL8Onyama Limba
1026Francesco ShinkoBrazil2026-04-28Chanay, Jeffrey A Esq PROPOSAL42Onyama Limba
1027Leja CaldareraJapan2026-04-20Chemel, James L Cpa NEGOTIATION13Ioni Bowcher
1028Aika InouyeArgentina2026-04-02Truhlar And Truhlar Attys UNQUALIFIED43Bernardo Dominic
1029Clifford RimArgentina2026-04-19Morlong Associates PROPOSAL4Ioni Bowcher
1030Kaitlin OstroskyRussia2026-04-04Commercial Press NEW65Elwin Sharvill
1031Mayumi KolmetzSpain2026-04-20Benton, John B Jr RENEWAL24Asiya Javayant
1032Francesco ShinkoJapan2026-04-28Chapman, Ross E Esq NEGOTIATION93Anna Fali
1033Kadeem FlosiFrance2026-04-26Dorl, James J Esq NEGOTIATION0Amy Elsner
1034Wickens NestleJapan2026-04-21Truhlar And Truhlar Attys NEW88Amy Elsner
1035Cody SaylorsCanada2026-04-17Commercial Press NEW3Xuxue Feng
1036Salvatore StockhamFrance2026-04-17Chapman, Ross E Esq NEW45Stephen Shaw
1037Alejandro PerinIndia2026-03-31Chanay, Jeffrey A Esq NEGOTIATION95Bernardo Dominic
1038Mayumi KolmetzBrazil2026-04-13Chapman, Ross E Esq NEGOTIATION31Anna Fali
1039Munro FerenczAustralia2026-04-12Truhlar And Truhlar Attys PROPOSAL89Ivan Magalhaes
1040Kadeem FlosiRussia2026-04-24Benton, John B Jr NEW57Ioni Bowcher
1041Maria MarrierUnited Kingdom2026-04-22Feiner Bros PROPOSAL45Elwin Sharvill
1042Sinclair WaycottBrazil2026-04-17Chemel, James L Cpa QUALIFIED23Elwin Sharvill
1043Clifford RimArgentina2026-04-02King, Christopher A Esq UNQUALIFIED97Elwin Sharvill
1044Adams MorascaGermany2026-04-19Truhlar And Truhlar Attys NEW49Bernardo Dominic
1045Maisha RulapaughRussia2026-04-10Rangoni Of Florence NEW72Ioni Bowcher
1046Arvin AlbaresGermany2026-04-04Chanay, Jeffrey A Esq NEGOTIATION33Onyama Limba
1047Arvin AlbaresGermany2026-04-15Benton, John B Jr PROPOSAL30Amy Elsner
1048Kadeem FlosiBrazil2026-04-18Rangoni Of Florence QUALIFIED5Anna Fali
1049David DarakjyRussia2026-04-15Chapman, Ross E Esq QUALIFIED26Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiJapanIvan Magalhaes RENEWAL
Jennifer AmigonIndiaBernardo Dominic NEW
Alejandro PerinIndiaBernardo Dominic RENEWAL
Nicolas IturbideRussiaOnyama Limba QUALIFIED
Izzy GarufiItalyAnna Fali UNQUALIFIED
Salvatore StockhamGermanyStephen Shaw NEGOTIATION
Jefferson SchemmerSpainOnyama Limba NEW
Stacey MacleadIndiaIoni Bowcher UNQUALIFIED
Silvio SlusarskiGermanyStephen Shaw RENEWAL
Arvin AlbaresUnited KingdomIvan Magalhaes NEW
Jones VocelkaArgentinaIoni Bowcher NEW
Greenwood BologniaUnited KingdomAmy Elsner QUALIFIED
Aika InouyeSpainAsiya Javayant PROPOSAL
Cody SaylorsSpainStephen Shaw UNQUALIFIED
Ricardo GauchoSpainAmy Elsner QUALIFIED
Mujtaba NickaFranceIvan Magalhaes RENEWAL
Deepesh ChuiCanadaBernardo Dominic RENEWAL
Rodrigues CampainGermanyAnna Fali QUALIFIED
Kaitlin OstroskyCanadaXuxue Feng NEGOTIATION
Kadeem FlosiAustraliaStephen Shaw NEW
Adams MorascaRussiaAmy Elsner UNQUALIFIED
James ButtUnited KingdomAmy Elsner PROPOSAL
Costa DilliardItalyXuxue Feng UNQUALIFIED
Jeanfrancois VenereJapanStephen Shaw PROPOSAL
Darci PoquetteItalyOnyama Limba NEGOTIATION
Claire TollnerBrazilAnna Fali PROPOSAL
Aditya KuskoRussiaElwin Sharvill UNQUALIFIED
Murillo MaletArgentinaAsiya Javayant RENEWAL
Salvatore StockhamJapanAmy Elsner NEGOTIATION
Tony FollerIndiaBernardo Dominic RENEWAL
Murillo MaletFranceElwin Sharvill UNQUALIFIED
Francesco ShinkoItalyStephen Shaw NEGOTIATION
Johnson SergiJapanBernardo Dominic NEGOTIATION
Aruna FigeroaBrazilAsiya Javayant UNQUALIFIED
Cody SaylorsAustraliaAsiya Javayant NEGOTIATION
Darci PoquetteArgentinaAnna Fali NEW
Aruna FigeroaCanadaOnyama Limba UNQUALIFIED
Leon OldroydRussiaStephen Shaw NEW
Morrow RutaUnited KingdomXuxue Feng UNQUALIFIED
Kaitlin OstroskyGermanyElwin Sharvill QUALIFIED
Chavez BriddickGermanyOnyama Limba QUALIFIED
Ashley DoeBrazilElwin Sharvill NEW
Greenwood BologniaGermanyAnna Fali NEW
Salvatore StockhamAustraliaXuxue Feng NEW
Juan WieserArgentinaIvan Magalhaes RENEWAL
Deepesh ChuiFranceAsiya Javayant UNQUALIFIED
Silvio SlusarskiIndiaIoni Bowcher QUALIFIED
Leon OldroydJapanXuxue Feng NEGOTIATION
Ashley DoeArgentinaAmy Elsner PROPOSAL
Sinclair WaycottUnited KingdomIoni Bowcher QUALIFIED
Frozen Columns
Name
Faith Gillian
Greenwood Bolognia
Clifford Rim
Ivar Paprocki
Aditya Kusko
Claire Tollner
Salvatore Stockham
James Butt
Costa Dilliard
Johnson Sergi
Faith Gillian
Munro Ferencz
Silvio Slusarski
Claire Tollner
Mujtaba Nicka
Stacey Maclead
Silvio Slusarski
Maria Marrier
Leja Caldarera
Chavez Briddick
Faith Gillian
Maria Marrier
James Butt
Salvatore Stockham
Salvatore Stockham
Salvatore Stockham
Aditya Kusko
Leon Oldroyd
Stacey Maclead
Sinclair Waycott
Izzy Garufi
Smith Glick
Leja Caldarera
Isabel Bowley
Aika Inouye
Kaitlin Ostrosky
Nicolas Iturbide
Antonio Caudy
Antonio Caudy
Julie Stenseth
Octavia Malet
Ricardo Gaucho
David Darakjy
Kaitlin Ostrosky
Jeanfrancois Venere
Maisha Rulapaugh
Morrow Ruta
Smith Glick
Greenwood Bolognia
Smith Glick
IdCountryDate
1000India2026-04-27
1001Spain2026-04-24
1002Canada2026-04-17
1003United Kingdom2026-04-19
1004Russia2026-04-06
1005Australia2026-04-06
1006Italy2026-04-07
1007France2026-04-13
1008Russia2026-04-27
1009India2026-04-10
1010Russia2026-04-19
1011Russia2026-04-16
1012Canada2026-04-27
1013Canada2026-04-18
1014Argentina2026-04-06
1015France2026-04-14
1016Russia2026-04-03
1017Canada2026-04-03
1018Canada2026-04-29
1019Japan2026-04-25
1020France2026-04-01
1021Japan2026-04-16
1022Argentina2026-04-01
1023Brazil2026-04-03
1024France2026-04-20
1025Germany2026-04-10
1026Canada2026-04-18
1027India2026-04-24
1028Canada2026-04-18
1029Canada2026-04-02
1030Canada2026-04-05
1031Italy2026-04-19
1032Brazil2026-04-16
1033Russia2026-04-15
1034Spain2026-04-14
1035Argentina2026-04-18
1036India2026-04-20
1037Italy2026-04-14
1038United Kingdom2026-04-04
1039Canada2026-04-03
1040Australia2026-04-06
1041France2026-04-21
1042Argentina2026-04-20
1043Germany2026-04-25
1044Brazil2026-04-08
1045India2026-04-19
1046Italy2026-03-31
1047Russia2026-04-28
1048France2026-04-03
1049Argentina2026-04-08

On-Demand Data

NameIdCountryDate
Murillo Malet1000India2026-04-07
Leon Oldroyd1001Argentina2026-03-31
Ricardo Gaucho1002India2026-04-08
Adams Morasca1003Spain2026-04-03
Misaki Royster1004Italy2026-04-07
Faith Gillian1005Japan2026-04-19
Silvio Slusarski1006Spain2026-04-20
Johnson Sergi1007United Kingdom2026-04-14
Ivar Paprocki1008Argentina2026-04-06
Antonio Caudy1009United Kingdom2026-04-03
Jones Vocelka1010India2026-04-04
Emily Whobrey1011Germany2026-04-25
Octavia Malet1012Brazil2026-04-06
Isabel Bowley1013France2026-04-19
Smith Glick1014Spain2026-04-02
Sinclair Waycott1015Brazil2026-04-02
James Butt1016Italy2026-04-07
Claire Tollner1017Argentina2026-04-23
Deepesh Chui1018France2026-04-08
Murillo Malet1019Japan2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiAustraliaIvan Magalhaes UNQUALIFIED
Aditya KuskoItalyAnna Fali NEW
Kaitlin OstroskyGermanyBernardo Dominic UNQUALIFIED
Silvio SlusarskiBrazilStephen Shaw NEW
Antonio CaudyCanadaXuxue Feng PROPOSAL
Aditya KuskoSpainXuxue Feng PROPOSAL
Salvatore StockhamAustraliaIoni Bowcher NEGOTIATION
Mujtaba NickaGermanyOnyama Limba QUALIFIED
Kaitlin OstroskyRussiaOnyama Limba RENEWAL
Greenwood BologniaIndiaIoni Bowcher QUALIFIED
Chavez BriddickAustraliaElwin Sharvill PROPOSAL
Cody SaylorsRussiaAnna Fali PROPOSAL
Claire TollnerItalyXuxue Feng NEW
Chavez BriddickJapanXuxue Feng RENEWAL
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Munro FerenczSpainXuxue Feng PROPOSAL
Adams MorascaUnited KingdomBernardo Dominic UNQUALIFIED
Clifford RimIndiaBernardo Dominic PROPOSAL
Ricardo GauchoRussiaAsiya Javayant NEGOTIATION
Misaki RoysterBrazilIvan Magalhaes QUALIFIED
Octavia MaletCanadaAmy Elsner NEGOTIATION
James ButtUnited KingdomElwin Sharvill RENEWAL
Jeanfrancois VenereSpainElwin Sharvill UNQUALIFIED
Octavia MaletBrazilIoni Bowcher NEW
Leon OldroydIndiaIvan Magalhaes NEGOTIATION
Nicolas IturbideIndiaIvan Magalhaes QUALIFIED
Murillo MaletUnited KingdomBernardo Dominic UNQUALIFIED
Munro FerenczRussiaOnyama Limba RENEWAL
Antonio CaudyArgentinaXuxue Feng NEGOTIATION
Francesco ShinkoArgentinaAmy Elsner QUALIFIED
Ashley DoeAustraliaAmy Elsner RENEWAL
Mujtaba NickaSpainIvan Magalhaes NEGOTIATION
Munro FerenczRussiaAsiya Javayant PROPOSAL
Jeanfrancois VenereJapanStephen Shaw QUALIFIED
Ivar PaprockiIndiaXuxue Feng NEW
Alejandro PerinUnited KingdomElwin Sharvill UNQUALIFIED
Silvio SlusarskiCanadaStephen Shaw RENEWAL
Wickens NestleArgentinaAnna Fali PROPOSAL
David DarakjyGermanyAmy Elsner PROPOSAL
Adams MorascaArgentinaIoni Bowcher NEW

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