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
Maisha RulapaughItalyOnyama Limba UNQUALIFIED
Aruna FigeroaItalyOnyama Limba NEGOTIATION
Deepesh ChuiAustraliaIvan Magalhaes QUALIFIED
Cody SaylorsGermanyOnyama Limba PROPOSAL
Maisha RulapaughGermanyAnna Fali UNQUALIFIED
Octavia MaletRussiaAnna Fali UNQUALIFIED
Clifford RimGermanyIoni Bowcher NEGOTIATION
Antonio CaudyIndiaAnna Fali UNQUALIFIED
Aruna FigeroaAustraliaBernardo Dominic NEGOTIATION
Octavia MaletGermanyOnyama Limba PROPOSAL
Emily WhobreyGermanyStephen Shaw NEW
Emily WhobreyArgentinaAnna Fali NEGOTIATION
Johnson SergiIndiaIvan Magalhaes UNQUALIFIED
Leon OldroydCanadaAmy Elsner NEGOTIATION
Johnson SergiBrazilAnna Fali NEGOTIATION
Kadeem FlosiAustraliaElwin Sharvill PROPOSAL
Murillo MaletIndiaBernardo Dominic NEW
Silvio SlusarskiRussiaOnyama Limba NEW
Claire TollnerFranceIoni Bowcher NEGOTIATION
Costa DilliardItalyOnyama Limba UNQUALIFIED
Alejandro PerinJapanXuxue Feng UNQUALIFIED
Isabel BowleySpainAsiya Javayant QUALIFIED
Jennifer AmigonRussiaIoni Bowcher PROPOSAL
Ivar PaprockiUnited KingdomElwin Sharvill QUALIFIED
Kaitlin OstroskyBrazilBernardo Dominic QUALIFIED
Murillo MaletItalyAmy Elsner UNQUALIFIED
Wickens NestleRussiaBernardo Dominic QUALIFIED
Kaitlin OstroskySpainIvan Magalhaes QUALIFIED
Kadeem FlosiUnited KingdomAsiya Javayant UNQUALIFIED
Julie StensethBrazilIvan Magalhaes RENEWAL
Cody SaylorsIndiaBernardo Dominic QUALIFIED
Salvatore StockhamAustraliaBernardo Dominic RENEWAL
Claire TollnerRussiaXuxue Feng QUALIFIED
Leja CaldareraJapanElwin Sharvill NEGOTIATION
James ButtArgentinaElwin Sharvill PROPOSAL
Johnson SergiSpainXuxue Feng NEGOTIATION
Murillo MaletFranceAnna Fali RENEWAL
Costa DilliardRussiaAmy Elsner QUALIFIED
Emily WhobreyGermanyBernardo Dominic QUALIFIED
Chavez BriddickGermanyElwin Sharvill QUALIFIED
Wickens NestleArgentinaAnna Fali QUALIFIED
Rodrigues CampainSpainIoni Bowcher NEGOTIATION
Ricardo GauchoSpainElwin Sharvill QUALIFIED
Ricardo GauchoFranceAsiya Javayant QUALIFIED
Emily WhobreyRussiaStephen Shaw RENEWAL
Francesco ShinkoArgentinaIoni Bowcher UNQUALIFIED
Izzy GarufiItalyAmy Elsner PROPOSAL
Kaitlin OstroskySpainXuxue Feng PROPOSAL
Leon OldroydAustraliaAsiya Javayant QUALIFIED
Adams MorascaCanadaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Smith GlickJapanElwin Sharvill UNQUALIFIED
Juan WieserSpainElwin Sharvill UNQUALIFIED
Darci PoquetteItalyElwin Sharvill PROPOSAL
Antonio CaudyArgentinaBernardo Dominic NEGOTIATION
Ashley DoeIndiaAsiya Javayant UNQUALIFIED
Sinclair WaycottAustraliaIvan Magalhaes NEW
Jennifer AmigonBrazilIoni Bowcher NEW
Aika InouyeGermanyOnyama Limba RENEWAL
Morrow RutaBrazilAmy Elsner RENEWAL
Maisha RulapaughItalyIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Costa DilliardAustralia2025-03-17Morlong Associates NEW91Xuxue Feng
1001Deepesh ChuiFrance2025-03-07Dorl, James J Esq QUALIFIED84Onyama Limba
1002Cody SaylorsSpain2025-03-27Rousseaux, Michael Esq QUALIFIED72Asiya Javayant
1003Costa DilliardCanada2025-03-12Chapman, Ross E Esq NEGOTIATION76Asiya Javayant
1004Silvio SlusarskiBrazil2025-03-10Truhlar And Truhlar Attys UNQUALIFIED45Amy Elsner
1005Greenwood BologniaFrance2025-03-16Chemel, James L Cpa NEW30Xuxue Feng
1006Rodrigues CampainCanada2025-03-18Feiner Bros UNQUALIFIED89Asiya Javayant
1007Isabel BowleyAustralia2025-03-24Feiner Bros RENEWAL38Asiya Javayant
1008Alejandro PerinFrance2025-03-20Benton, John B Jr NEW97Onyama Limba
1009Stacey MacleadGermany2025-03-18Chapman, Ross E Esq NEW67Onyama Limba
1010Alejandro PerinFrance2025-03-05Chemel, James L Cpa QUALIFIED3Elwin Sharvill
1011Julie StensethItaly2025-03-21Chapman, Ross E Esq PROPOSAL85Ioni Bowcher
1012Arvin AlbaresUnited Kingdom2025-03-04Benton, John B Jr UNQUALIFIED85Ioni Bowcher
1013Francesco ShinkoArgentina2025-03-21Feltz Printing Service RENEWAL16Amy Elsner
1014Aika InouyeJapan2025-03-12King, Christopher A Esq NEW66Amy Elsner
1015Misaki RoysterJapan2025-03-06Feltz Printing Service NEW89Stephen Shaw
1016Aika InouyeGermany2025-03-07Rousseaux, Michael Esq RENEWAL96Anna Fali
1017Salvatore StockhamAustralia2025-03-20Benton, John B Jr NEGOTIATION13Anna Fali
1018Octavia MaletIndia2025-03-13Chanay, Jeffrey A Esq RENEWAL95Elwin Sharvill
1019Leja CaldareraSpain2025-03-14Chanay, Jeffrey A Esq RENEWAL8Bernardo Dominic
1020Costa DilliardSpain2025-03-08Benton, John B Jr NEGOTIATION70Ioni Bowcher
1021Faith GillianArgentina2025-03-21Feiner Bros UNQUALIFIED11Elwin Sharvill
1022Johnson SergiUnited Kingdom2025-03-23Feiner Bros NEW56Onyama Limba
1023Murillo MaletRussia2025-03-27Chemel, James L Cpa UNQUALIFIED28Amy Elsner
1024Leon OldroydRussia2025-03-11Truhlar And Truhlar Attys UNQUALIFIED85Anna Fali
1025Maisha RulapaughAustralia2025-03-28Chemel, James L Cpa RENEWAL60Ioni Bowcher
1026Jennifer AmigonRussia2025-03-01Commercial Press NEGOTIATION34Ioni Bowcher
1027Kaitlin OstroskyJapan2025-03-10Buckley Miller Wright QUALIFIED31Elwin Sharvill
1028Tony FollerUnited Kingdom2025-03-23Morlong Associates NEGOTIATION87Amy Elsner
1029Costa DilliardCanada2025-03-02Commercial Press QUALIFIED62Ioni Bowcher
1030Aika InouyeUnited Kingdom2025-03-28Morlong Associates NEGOTIATION34Ioni Bowcher
1031Maisha RulapaughSpain2025-03-28Chapman, Ross E Esq RENEWAL60Ioni Bowcher
1032Deepesh ChuiRussia2025-03-19Feiner Bros NEW19Ivan Magalhaes
1033Maisha RulapaughJapan2025-03-09Chanay, Jeffrey A Esq QUALIFIED40Elwin Sharvill
1034Juan WieserGermany2025-03-11Chanay, Jeffrey A Esq UNQUALIFIED53Elwin Sharvill
1035Clifford RimFrance2025-03-25Printing Dimensions NEGOTIATION27Elwin Sharvill
1036Leja CaldareraBrazil2025-03-08Benton, John B Jr UNQUALIFIED67Ivan Magalhaes
1037Arvin AlbaresCanada2025-03-01Morlong Associates RENEWAL36Bernardo Dominic
1038Aika InouyeSpain2025-03-05Chapman, Ross E Esq QUALIFIED47Asiya Javayant
1039Smith GlickAustralia2025-03-23Rangoni Of Florence UNQUALIFIED57Ivan Magalhaes
1040Wickens NestleSpain2025-03-01Feltz Printing Service UNQUALIFIED71Amy Elsner
1041Chavez BriddickItaly2025-03-10Morlong Associates NEW52Stephen Shaw
1042James ButtGermany2025-03-09Rousseaux, Michael Esq QUALIFIED13Xuxue Feng
1043Ivar PaprockiUnited Kingdom2025-03-17Chanay, Jeffrey A Esq UNQUALIFIED23Ioni Bowcher
1044Greenwood BologniaArgentina2025-03-19Truhlar And Truhlar Attys RENEWAL51Bernardo Dominic
1045Isabel BowleyRussia2025-03-29Rangoni Of Florence UNQUALIFIED13Anna Fali
1046Adams MorascaArgentina2025-03-21Commercial Press NEW22Elwin Sharvill
1047Morrow RutaUnited Kingdom2025-03-30Rousseaux, Michael Esq PROPOSAL33Anna Fali
1048Adams MorascaAustralia2025-03-01Feltz Printing Service PROPOSAL50Asiya Javayant
1049James ButtFrance2025-03-17Buckley Miller Wright PROPOSAL19Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeItalyAmy Elsner RENEWAL
Leja CaldareraFranceBernardo Dominic RENEWAL
Murillo MaletFranceAmy Elsner NEGOTIATION
Mayumi KolmetzBrazilAsiya Javayant RENEWAL
Octavia MaletFranceOnyama Limba RENEWAL
Darci PoquetteGermanyElwin Sharvill NEGOTIATION
Aika InouyeCanadaBernardo Dominic RENEWAL
Mayumi KolmetzItalyBernardo Dominic UNQUALIFIED
Deepesh ChuiIndiaOnyama Limba UNQUALIFIED
Greenwood BologniaCanadaAmy Elsner QUALIFIED
Greenwood BologniaIndiaAmy Elsner RENEWAL
Arvin AlbaresCanadaIvan Magalhaes QUALIFIED
Johnson SergiFranceIoni Bowcher NEGOTIATION
Mujtaba NickaSpainXuxue Feng UNQUALIFIED
Kadeem FlosiUnited KingdomAsiya Javayant PROPOSAL
Murillo MaletIndiaAnna Fali NEGOTIATION
Silvio SlusarskiItalyAnna Fali NEGOTIATION
Nicolas IturbideSpainBernardo Dominic QUALIFIED
Mujtaba NickaGermanyIvan Magalhaes RENEWAL
Ricardo GauchoItalyIoni Bowcher QUALIFIED
Chavez BriddickCanadaIoni Bowcher NEGOTIATION
Rodrigues CampainFranceXuxue Feng RENEWAL
Rodrigues CampainItalyAsiya Javayant RENEWAL
Adams MorascaIndiaAsiya Javayant QUALIFIED
Wickens NestleFranceIvan Magalhaes RENEWAL
Emily WhobreySpainXuxue Feng NEGOTIATION
Leon OldroydIndiaIvan Magalhaes RENEWAL
Aika InouyeArgentinaAmy Elsner PROPOSAL
Murillo MaletFranceBernardo Dominic NEGOTIATION
Francesco ShinkoCanadaElwin Sharvill PROPOSAL
Aika InouyeCanadaOnyama Limba NEW
Sinclair WaycottIndiaStephen Shaw PROPOSAL
Leja CaldareraRussiaBernardo Dominic PROPOSAL
Salvatore StockhamUnited KingdomBernardo Dominic NEGOTIATION
Jefferson SchemmerGermanyOnyama Limba UNQUALIFIED
Munro FerenczAustraliaAsiya Javayant NEGOTIATION
Greenwood BologniaUnited KingdomIoni Bowcher UNQUALIFIED
Morrow RutaIndiaAsiya Javayant PROPOSAL
Clifford RimRussiaAmy Elsner NEW
Leon OldroydRussiaIoni Bowcher QUALIFIED
Leja CaldareraAustraliaBernardo Dominic QUALIFIED
Deepesh ChuiItalyIvan Magalhaes NEGOTIATION
Deepesh ChuiArgentinaBernardo Dominic RENEWAL
Izzy GarufiItalyXuxue Feng RENEWAL
Leon OldroydBrazilAnna Fali RENEWAL
Deepesh ChuiAustraliaXuxue Feng PROPOSAL
Leja CaldareraGermanyOnyama Limba PROPOSAL
Octavia MaletItalyAmy Elsner QUALIFIED
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Francesco ShinkoIndiaStephen Shaw PROPOSAL
Frozen Columns
Name
Mujtaba Nicka
Antonio Caudy
Rodrigues Campain
Leon Oldroyd
Antonio Caudy
Darci Poquette
Kadeem Flosi
Faith Gillian
Jeanfrancois Venere
Darci Poquette
Ricardo Gaucho
Silvio Slusarski
Kaitlin Ostrosky
Rodrigues Campain
Morrow Ruta
Johnson Sergi
Sinclair Waycott
Smith Glick
Antonio Caudy
Mujtaba Nicka
Greenwood Bolognia
Deepesh Chui
Claire Tollner
Costa Dilliard
Maria Marrier
Ashley Doe
Emily Whobrey
Aruna Figeroa
Leja Caldarera
Ashley Doe
Cody Saylors
Emily Whobrey
Jennifer Amigon
Misaki Royster
Morrow Ruta
Cody Saylors
Aditya Kusko
Rodrigues Campain
Adams Morasca
Adams Morasca
Mayumi Kolmetz
Isabel Bowley
Munro Ferencz
James Butt
Jones Vocelka
David Darakjy
Silvio Slusarski
David Darakjy
Aruna Figeroa
Chavez Briddick
IdCountryDate
1000Italy2025-03-25
1001Argentina2025-03-14
1002Brazil2025-03-27
1003France2025-03-27
1004Canada2025-03-25
1005Japan2025-03-07
1006Russia2025-03-25
1007Argentina2025-03-10
1008France2025-03-08
1009Spain2025-03-12
1010Australia2025-03-04
1011Italy2025-03-28
1012Japan2025-03-15
1013Italy2025-03-25
1014Argentina2025-03-05
1015Brazil2025-03-30
1016Canada2025-03-11
1017Russia2025-03-23
1018France2025-03-29
1019United Kingdom2025-03-08
1020Russia2025-03-23
1021Argentina2025-03-27
1022Germany2025-03-23
1023Germany2025-03-27
1024Germany2025-03-11
1025Spain2025-03-22
1026France2025-03-06
1027United Kingdom2025-03-12
1028Brazil2025-03-20
1029Italy2025-03-30
1030United Kingdom2025-03-13
1031Argentina2025-03-20
1032Argentina2025-03-20
1033Germany2025-03-16
1034Italy2025-03-04
1035Australia2025-03-12
1036India2025-03-14
1037Spain2025-03-01
1038Argentina2025-03-19
1039Brazil2025-03-02
1040Spain2025-03-18
1041India2025-03-23
1042France2025-03-11
1043Japan2025-03-16
1044Spain2025-03-19
1045Germany2025-03-10
1046France2025-03-29
1047Canada2025-03-11
1048Canada2025-03-28
1049Italy2025-03-09

On-Demand Data

NameIdCountryDate
Emily Whobrey1000Spain2025-03-08
Francesco Shinko1001Spain2025-03-13
Mayumi Kolmetz1002Germany2025-03-02
Jefferson Schemmer1003Germany2025-03-08
Leja Caldarera1004United Kingdom2025-03-28
Stacey Maclead1005Spain2025-03-14
Leon Oldroyd1006Spain2025-03-05
Clifford Rim1007Argentina2025-03-22
Jeanfrancois Venere1008Japan2025-03-12
Kadeem Flosi1009France2025-03-29
Adams Morasca1010France2025-03-27
Salvatore Stockham1011Brazil2025-03-02
Adams Morasca1012France2025-03-29
Mujtaba Nicka1013Italy2025-03-05
Johnson Sergi1014Brazil2025-03-13
Maria Marrier1015Germany2025-03-25
Silvio Slusarski1016Australia2025-03-05
Jeanfrancois Venere1017Spain2025-03-20
Morrow Ruta1018Germany2025-03-04
Aditya Kusko1019Brazil2025-03-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Juan WieserAustraliaIvan Magalhaes NEGOTIATION
Morrow RutaJapanIoni Bowcher NEW
Ivar PaprockiBrazilIvan Magalhaes QUALIFIED
Mujtaba NickaCanadaXuxue Feng NEGOTIATION
James ButtItalyOnyama Limba PROPOSAL
Aika InouyeBrazilAsiya Javayant NEW
Munro FerenczItalyAmy Elsner UNQUALIFIED
Aruna FigeroaJapanStephen Shaw PROPOSAL
Claire TollnerSpainXuxue Feng PROPOSAL
Ashley DoeAustraliaIoni Bowcher UNQUALIFIED
Silvio SlusarskiCanadaOnyama Limba QUALIFIED
Stacey MacleadGermanyAsiya Javayant UNQUALIFIED
Sinclair WaycottItalyIoni Bowcher RENEWAL
Maisha RulapaughFranceAnna Fali NEW
Costa DilliardJapanAnna Fali RENEWAL
Murillo MaletJapanStephen Shaw RENEWAL
Murillo MaletJapanIoni Bowcher UNQUALIFIED
Sinclair WaycottGermanyIoni Bowcher RENEWAL
Jefferson SchemmerBrazilBernardo Dominic NEGOTIATION
Leja CaldareraArgentinaAsiya Javayant NEW
Murillo MaletFranceAsiya Javayant UNQUALIFIED
Chavez BriddickSpainXuxue Feng PROPOSAL
Johnson SergiArgentinaAmy Elsner NEGOTIATION
Deepesh ChuiUnited KingdomAsiya Javayant PROPOSAL
Stacey MacleadFranceXuxue Feng NEGOTIATION
Alejandro PerinJapanOnyama Limba QUALIFIED
Emily WhobreyItalyStephen Shaw NEW
Aruna FigeroaArgentinaAsiya Javayant RENEWAL
Juan WieserAustraliaIoni Bowcher NEW
Jones VocelkaArgentinaIvan Magalhaes QUALIFIED
Cody SaylorsAustraliaOnyama Limba NEGOTIATION
Jennifer AmigonFranceAmy Elsner PROPOSAL
Ivar PaprockiJapanXuxue Feng NEGOTIATION
Chavez BriddickAustraliaAmy Elsner PROPOSAL
Isabel BowleyAustraliaOnyama Limba NEW
Sinclair WaycottFranceIoni Bowcher NEW
Aruna FigeroaGermanyIvan Magalhaes UNQUALIFIED
Octavia MaletAustraliaOnyama Limba NEW
Octavia MaletJapanBernardo Dominic PROPOSAL
Deepesh ChuiArgentinaAnna Fali 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>