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
Jennifer AmigonGermanyOnyama Limba NEW
Leon OldroydItalyAnna Fali RENEWAL
Claire TollnerArgentinaAnna Fali NEGOTIATION
Jones VocelkaFranceAmy Elsner UNQUALIFIED
David DarakjySpainIoni Bowcher QUALIFIED
Munro FerenczFranceOnyama Limba RENEWAL
Chavez BriddickJapanIoni Bowcher QUALIFIED
Julie StensethGermanyXuxue Feng NEW
Alejandro PerinGermanyIvan Magalhaes NEGOTIATION
Greenwood BologniaJapanElwin Sharvill RENEWAL
Jefferson SchemmerGermanyOnyama Limba QUALIFIED
Jennifer AmigonBrazilOnyama Limba PROPOSAL
Munro FerenczUnited KingdomAsiya Javayant NEW
Kadeem FlosiGermanyElwin Sharvill QUALIFIED
Costa DilliardRussiaAmy Elsner PROPOSAL
Jefferson SchemmerAustraliaAmy Elsner NEW
Francesco ShinkoBrazilStephen Shaw RENEWAL
Isabel BowleyCanadaAnna Fali NEGOTIATION
Arvin AlbaresSpainAmy Elsner NEW
Kadeem FlosiAustraliaAnna Fali NEGOTIATION
Kadeem FlosiIndiaAmy Elsner NEGOTIATION
Julie StensethItalyAsiya Javayant NEGOTIATION
Salvatore StockhamItalyAsiya Javayant NEW
Aruna FigeroaCanadaAmy Elsner UNQUALIFIED
Costa DilliardFranceIvan Magalhaes QUALIFIED
Aika InouyeCanadaOnyama Limba UNQUALIFIED
Tony FollerJapanAnna Fali PROPOSAL
Isabel BowleyCanadaAmy Elsner NEGOTIATION
Jeanfrancois VenereFranceAsiya Javayant UNQUALIFIED
Greenwood BologniaJapanAmy Elsner PROPOSAL
Johnson SergiSpainBernardo Dominic UNQUALIFIED
Ricardo GauchoSpainElwin Sharvill UNQUALIFIED
Silvio SlusarskiRussiaIoni Bowcher UNQUALIFIED
Leon OldroydCanadaIoni Bowcher NEGOTIATION
Claire TollnerIndiaStephen Shaw QUALIFIED
Jones VocelkaRussiaAmy Elsner NEGOTIATION
Silvio SlusarskiRussiaStephen Shaw NEW
Ivar PaprockiIndiaBernardo Dominic NEGOTIATION
Ricardo GauchoUnited KingdomXuxue Feng NEW
Mujtaba NickaUnited KingdomXuxue Feng PROPOSAL
Tony FollerArgentinaXuxue Feng NEGOTIATION
Ashley DoeBrazilAnna Fali QUALIFIED
Maria MarrierRussiaIoni Bowcher PROPOSAL
Mujtaba NickaCanadaOnyama Limba NEW
Juan WieserJapanAsiya Javayant NEGOTIATION
Izzy GarufiIndiaIoni Bowcher NEGOTIATION
Smith GlickCanadaStephen Shaw PROPOSAL
Alejandro PerinArgentinaAsiya Javayant UNQUALIFIED
Misaki RoysterFranceStephen Shaw QUALIFIED
Leon OldroydArgentinaIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Clifford RimCanadaAmy Elsner RENEWAL
Smith GlickJapanAsiya Javayant PROPOSAL
Darci PoquetteCanadaBernardo Dominic RENEWAL
Maisha RulapaughAustraliaIoni Bowcher UNQUALIFIED
Antonio CaudyItalyOnyama Limba NEGOTIATION
Darci PoquetteCanadaIoni Bowcher NEGOTIATION
Maisha RulapaughIndiaIvan Magalhaes QUALIFIED
Francesco ShinkoItalyElwin Sharvill UNQUALIFIED
Kaitlin OstroskyAustraliaOnyama Limba PROPOSAL
Murillo MaletAustraliaOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamSpain2026-05-23Chemel, James L Cpa QUALIFIED86Onyama Limba
1001Greenwood BologniaFrance2026-05-11Truhlar And Truhlar Attys RENEWAL5Asiya Javayant
1002Rodrigues CampainBrazil2026-05-18Feiner Bros UNQUALIFIED51Stephen Shaw
1003Clifford RimAustralia2026-04-26Chapman, Ross E Esq QUALIFIED16Elwin Sharvill
1004Munro FerenczGermany2026-05-08King, Christopher A Esq RENEWAL38Elwin Sharvill
1005Emily WhobreyJapan2026-05-23Truhlar And Truhlar Attys PROPOSAL44Anna Fali
1006Darci PoquetteUnited Kingdom2026-05-13Chapman, Ross E Esq NEGOTIATION18Asiya Javayant
1007Aditya KuskoAustralia2026-05-08Benton, John B Jr QUALIFIED72Ioni Bowcher
1008Maria MarrierRussia2026-05-03Feiner Bros RENEWAL83Xuxue Feng
1009Jennifer AmigonSpain2026-05-01Printing Dimensions NEGOTIATION35Asiya Javayant
1010Clifford RimArgentina2026-05-01Feltz Printing Service NEW1Stephen Shaw
1011Darci PoquetteFrance2026-05-17Rousseaux, Michael Esq QUALIFIED78Ioni Bowcher
1012Ricardo GauchoFrance2026-05-24Morlong Associates PROPOSAL11Amy Elsner
1013Arvin AlbaresSpain2026-04-27Chanay, Jeffrey A Esq UNQUALIFIED30Onyama Limba
1014Deepesh ChuiGermany2026-05-06Morlong Associates UNQUALIFIED21Anna Fali
1015Rodrigues CampainUnited Kingdom2026-05-12King, Christopher A Esq PROPOSAL99Ioni Bowcher
1016Nicolas IturbideUnited Kingdom2026-05-14Chemel, James L Cpa PROPOSAL42Bernardo Dominic
1017Juan WieserUnited Kingdom2026-05-09Commercial Press PROPOSAL90Asiya Javayant
1018David DarakjySpain2026-05-12Feiner Bros PROPOSAL24Ioni Bowcher
1019Tony FollerFrance2026-05-08Printing Dimensions QUALIFIED77Elwin Sharvill
1020Chavez BriddickJapan2026-04-27Truhlar And Truhlar Attys NEW70Xuxue Feng
1021Jennifer AmigonRussia2026-05-03Chemel, James L Cpa PROPOSAL1Ioni Bowcher
1022Clifford RimJapan2026-05-06Rousseaux, Michael Esq UNQUALIFIED86Anna Fali
1023Smith GlickUnited Kingdom2026-05-24Feiner Bros PROPOSAL52Xuxue Feng
1024Jefferson SchemmerRussia2026-05-24Chanay, Jeffrey A Esq RENEWAL18Asiya Javayant
1025Octavia MaletSpain2026-04-25Truhlar And Truhlar Attys PROPOSAL97Bernardo Dominic
1026Smith GlickJapan2026-05-18Rangoni Of Florence NEGOTIATION88Amy Elsner
1027Ivar PaprockiCanada2026-05-23Commercial Press UNQUALIFIED77Onyama Limba
1028Johnson SergiSpain2026-05-12Chemel, James L Cpa QUALIFIED16Asiya Javayant
1029Deepesh ChuiRussia2026-05-16Rangoni Of Florence NEW87Ioni Bowcher
1030Deepesh ChuiGermany2026-05-11Rousseaux, Michael Esq UNQUALIFIED18Ivan Magalhaes
1031Izzy GarufiCanada2026-05-10Feiner Bros RENEWAL37Ivan Magalhaes
1032Ivar PaprockiJapan2026-05-24Rousseaux, Michael Esq QUALIFIED73Xuxue Feng
1033Julie StensethArgentina2026-05-06Dorl, James J Esq RENEWAL62Xuxue Feng
1034Francesco ShinkoIndia2026-05-03Dorl, James J Esq NEW61Anna Fali
1035Johnson SergiFrance2026-05-22Chanay, Jeffrey A Esq UNQUALIFIED45Amy Elsner
1036Juan WieserGermany2026-05-09Chanay, Jeffrey A Esq NEW18Stephen Shaw
1037Isabel BowleyItaly2026-04-27Truhlar And Truhlar Attys NEGOTIATION93Onyama Limba
1038Mujtaba NickaIndia2026-04-29Chemel, James L Cpa NEGOTIATION90Elwin Sharvill
1039Chavez BriddickArgentina2026-05-02Buckley Miller Wright UNQUALIFIED72Anna Fali
1040Francesco ShinkoArgentina2026-05-19Chapman, Ross E Esq QUALIFIED75Asiya Javayant
1041Rodrigues CampainJapan2026-05-23Printing Dimensions PROPOSAL43Asiya Javayant
1042Adams MorascaBrazil2026-04-28King, Christopher A Esq UNQUALIFIED33Stephen Shaw
1043Isabel BowleyCanada2026-05-24Morlong Associates NEGOTIATION54Ioni Bowcher
1044Silvio SlusarskiFrance2026-04-27Benton, John B Jr QUALIFIED34Elwin Sharvill
1045Octavia MaletIndia2026-04-27Truhlar And Truhlar Attys QUALIFIED30Xuxue Feng
1046Aruna FigeroaArgentina2026-05-24Feiner Bros NEGOTIATION6Anna Fali
1047Izzy GarufiGermany2026-05-17Chemel, James L Cpa RENEWAL93Onyama Limba
1048Sinclair WaycottFrance2026-04-28Benton, John B Jr RENEWAL92Onyama Limba
1049Wickens NestleBrazil2026-05-19Dorl, James J Esq QUALIFIED15Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickJapanAmy Elsner QUALIFIED
Greenwood BologniaRussiaIvan Magalhaes RENEWAL
Kadeem FlosiSpainBernardo Dominic NEW
Claire TollnerIndiaStephen Shaw UNQUALIFIED
Misaki RoysterIndiaAnna Fali UNQUALIFIED
Aruna FigeroaIndiaBernardo Dominic NEW
Kaitlin OstroskyUnited KingdomBernardo Dominic PROPOSAL
Ivar PaprockiGermanyAmy Elsner QUALIFIED
Maria MarrierJapanAsiya Javayant RENEWAL
Francesco ShinkoGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaJapanBernardo Dominic RENEWAL
Alejandro PerinRussiaAsiya Javayant NEGOTIATION
Ashley DoeItalyAnna Fali NEGOTIATION
Faith GillianItalyStephen Shaw PROPOSAL
Aditya KuskoRussiaAnna Fali NEGOTIATION
Ricardo GauchoUnited KingdomAmy Elsner NEW
Rodrigues CampainRussiaAsiya Javayant QUALIFIED
Silvio SlusarskiFranceBernardo Dominic UNQUALIFIED
Aruna FigeroaArgentinaAsiya Javayant PROPOSAL
Arvin AlbaresGermanyOnyama Limba RENEWAL
Morrow RutaArgentinaXuxue Feng NEW
James ButtGermanyElwin Sharvill NEGOTIATION
Wickens NestleCanadaAnna Fali NEGOTIATION
Ashley DoeArgentinaAsiya Javayant QUALIFIED
Kaitlin OstroskyBrazilAmy Elsner RENEWAL
Morrow RutaRussiaOnyama Limba PROPOSAL
Jefferson SchemmerIndiaIvan Magalhaes NEW
Murillo MaletRussiaIvan Magalhaes UNQUALIFIED
Aika InouyeItalyXuxue Feng NEGOTIATION
Aruna FigeroaSpainElwin Sharvill QUALIFIED
James ButtJapanBernardo Dominic RENEWAL
Ricardo GauchoUnited KingdomAsiya Javayant NEW
Jeanfrancois VenereItalyBernardo Dominic NEW
Cody SaylorsSpainAmy Elsner QUALIFIED
Tony FollerGermanyAsiya Javayant NEW
Mujtaba NickaRussiaElwin Sharvill NEW
Claire TollnerGermanyElwin Sharvill PROPOSAL
Ashley DoeArgentinaOnyama Limba NEGOTIATION
Misaki RoysterIndiaIvan Magalhaes NEW
David DarakjyIndiaAmy Elsner NEGOTIATION
Claire TollnerCanadaBernardo Dominic NEGOTIATION
Munro FerenczCanadaIoni Bowcher NEW
Mujtaba NickaBrazilElwin Sharvill UNQUALIFIED
Ashley DoeRussiaOnyama Limba RENEWAL
Murillo MaletRussiaOnyama Limba NEGOTIATION
Ivar PaprockiGermanyStephen Shaw PROPOSAL
Antonio CaudyJapanIvan Magalhaes NEGOTIATION
Leja CaldareraAustraliaOnyama Limba RENEWAL
Alejandro PerinUnited KingdomIvan Magalhaes PROPOSAL
Chavez BriddickIndiaBernardo Dominic NEW
Frozen Columns
Name
David Darakjy
Sinclair Waycott
Munro Ferencz
Nicolas Iturbide
Emily Whobrey
Aruna Figeroa
Leon Oldroyd
Misaki Royster
Morrow Ruta
Kadeem Flosi
Jones Vocelka
Juan Wieser
Salvatore Stockham
Munro Ferencz
Arvin Albares
James Butt
Costa Dilliard
Darci Poquette
Faith Gillian
Emily Whobrey
Claire Tollner
Izzy Garufi
Silvio Slusarski
Francesco Shinko
Aika Inouye
Ricardo Gaucho
Darci Poquette
Jennifer Amigon
Emily Whobrey
Jeanfrancois Venere
Smith Glick
Tony Foller
Nicolas Iturbide
Sinclair Waycott
Francesco Shinko
Greenwood Bolognia
Maria Marrier
Stacey Maclead
Darci Poquette
Kadeem Flosi
Munro Ferencz
Octavia Malet
Ivar Paprocki
Ashley Doe
Aruna Figeroa
Johnson Sergi
Smith Glick
Johnson Sergi
Aika Inouye
Kadeem Flosi
IdCountryDate
1000France2026-05-05
1001Canada2026-05-19
1002Argentina2026-05-14
1003Brazil2026-05-16
1004Australia2026-05-02
1005Canada2026-04-29
1006Canada2026-05-24
1007Italy2026-05-11
1008Australia2026-04-30
1009Japan2026-05-19
1010Brazil2026-05-11
1011Argentina2026-05-10
1012Japan2026-05-08
1013Brazil2026-05-11
1014Russia2026-05-14
1015France2026-05-15
1016Brazil2026-05-05
1017India2026-05-17
1018Spain2026-04-25
1019Brazil2026-05-02
1020India2026-04-27
1021Argentina2026-04-27
1022Argentina2026-05-02
1023Australia2026-04-26
1024France2026-04-30
1025India2026-05-21
1026Russia2026-05-22
1027France2026-05-19
1028Germany2026-05-20
1029Japan2026-04-29
1030Italy2026-05-13
1031Canada2026-05-12
1032United Kingdom2026-05-01
1033Brazil2026-05-09
1034United Kingdom2026-05-15
1035Germany2026-04-28
1036Argentina2026-05-19
1037Argentina2026-05-09
1038Germany2026-05-24
1039Brazil2026-05-10
1040Argentina2026-05-19
1041France2026-04-26
1042Japan2026-04-26
1043France2026-04-27
1044Canada2026-05-16
1045United Kingdom2026-04-25
1046Canada2026-05-04
1047Italy2026-05-09
1048India2026-05-13
1049Brazil2026-05-01

On-Demand Data

NameIdCountryDate
Aruna Figeroa1000Japan2026-05-17
Munro Ferencz1001Brazil2026-05-10
Maria Marrier1002France2026-05-06
James Butt1003Germany2026-05-18
Smith Glick1004United Kingdom2026-05-17
Chavez Briddick1005Australia2026-05-21
Cody Saylors1006India2026-04-25
Leon Oldroyd1007India2026-05-14
Leon Oldroyd1008Russia2026-05-24
Ivar Paprocki1009France2026-05-20
Adams Morasca1010Canada2026-05-10
Mujtaba Nicka1011India2026-05-24
Nicolas Iturbide1012Russia2026-05-15
Mujtaba Nicka1013Italy2026-05-12
Morrow Ruta1014Japan2026-05-01
Antonio Caudy1015India2026-05-17
Silvio Slusarski1016Canada2026-05-18
Aruna Figeroa1017India2026-05-22
Jennifer Amigon1018Japan2026-05-21
Arvin Albares1019Spain2026-05-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerAustraliaAnna Fali PROPOSAL
Munro FerenczCanadaOnyama Limba NEW
Izzy GarufiFranceBernardo Dominic UNQUALIFIED
Kaitlin OstroskyCanadaElwin Sharvill QUALIFIED
Murillo MaletCanadaStephen Shaw NEGOTIATION
Kaitlin OstroskyUnited KingdomAmy Elsner RENEWAL
Faith GillianIndiaIvan Magalhaes UNQUALIFIED
Jones VocelkaGermanyStephen Shaw QUALIFIED
Smith GlickAustraliaAmy Elsner RENEWAL
Ashley DoeArgentinaElwin Sharvill NEW
Misaki RoysterIndiaAnna Fali RENEWAL
Cody SaylorsSpainElwin Sharvill RENEWAL
Kaitlin OstroskyFranceOnyama Limba RENEWAL
Leja CaldareraAustraliaAmy Elsner UNQUALIFIED
Adams MorascaRussiaBernardo Dominic NEW
Silvio SlusarskiItalyXuxue Feng PROPOSAL
Jeanfrancois VenereSpainIoni Bowcher NEGOTIATION
Silvio SlusarskiArgentinaBernardo Dominic PROPOSAL
Munro FerenczAustraliaIvan Magalhaes UNQUALIFIED
Chavez BriddickCanadaAnna Fali RENEWAL
Misaki RoysterArgentinaElwin Sharvill RENEWAL
Julie StensethFranceOnyama Limba RENEWAL
Aruna FigeroaCanadaElwin Sharvill RENEWAL
Munro FerenczBrazilAnna Fali PROPOSAL
Francesco ShinkoBrazilAmy Elsner QUALIFIED
Leon OldroydCanadaIoni Bowcher NEGOTIATION
Stacey MacleadFranceXuxue Feng RENEWAL
Wickens NestleFranceAsiya Javayant QUALIFIED
Ashley DoeBrazilOnyama Limba QUALIFIED
Francesco ShinkoGermanyAnna Fali QUALIFIED
Cody SaylorsJapanIvan Magalhaes PROPOSAL
Morrow RutaUnited KingdomOnyama Limba UNQUALIFIED
Alejandro PerinIndiaAsiya Javayant RENEWAL
Jennifer AmigonSpainIvan Magalhaes RENEWAL
Morrow RutaSpainAmy Elsner PROPOSAL
Mujtaba NickaJapanAsiya Javayant NEW
Mayumi KolmetzJapanAsiya Javayant NEGOTIATION
James ButtItalyAmy Elsner NEGOTIATION
Rodrigues CampainAustraliaAnna Fali NEW
Deepesh ChuiIndiaAnna Fali NEGOTIATION

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