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
Ashley DoeCanadaIvan Magalhaes QUALIFIED
Emily WhobreyFranceOnyama Limba PROPOSAL
James ButtSpainIoni Bowcher UNQUALIFIED
Jefferson SchemmerIndiaXuxue Feng QUALIFIED
Maria MarrierGermanyAmy Elsner NEGOTIATION
Francesco ShinkoIndiaStephen Shaw UNQUALIFIED
Isabel BowleyArgentinaAnna Fali QUALIFIED
Cody SaylorsRussiaBernardo Dominic NEW
Greenwood BologniaJapanElwin Sharvill PROPOSAL
Leja CaldareraArgentinaIoni Bowcher UNQUALIFIED
Silvio SlusarskiGermanyAsiya Javayant UNQUALIFIED
Nicolas IturbideGermanyAmy Elsner RENEWAL
Murillo MaletIndiaStephen Shaw UNQUALIFIED
Misaki RoysterFranceXuxue Feng PROPOSAL
Cody SaylorsUnited KingdomOnyama Limba NEGOTIATION
Kaitlin OstroskyRussiaBernardo Dominic PROPOSAL
Kaitlin OstroskyFranceXuxue Feng QUALIFIED
Mujtaba NickaIndiaBernardo Dominic RENEWAL
Izzy GarufiGermanyIoni Bowcher QUALIFIED
Claire TollnerIndiaAsiya Javayant NEW
Morrow RutaJapanOnyama Limba NEGOTIATION
Leja CaldareraItalyAmy Elsner PROPOSAL
Johnson SergiFranceBernardo Dominic RENEWAL
Kadeem FlosiBrazilIvan Magalhaes NEGOTIATION
Deepesh ChuiAustraliaAnna Fali QUALIFIED
Maria MarrierUnited KingdomXuxue Feng UNQUALIFIED
Alejandro PerinItalyAsiya Javayant UNQUALIFIED
Murillo MaletBrazilBernardo Dominic QUALIFIED
Emily WhobreyGermanyXuxue Feng UNQUALIFIED
Cody SaylorsArgentinaElwin Sharvill NEGOTIATION
Stacey MacleadCanadaOnyama Limba NEW
Cody SaylorsArgentinaBernardo Dominic PROPOSAL
Mayumi KolmetzAustraliaStephen Shaw UNQUALIFIED
Claire TollnerJapanElwin Sharvill QUALIFIED
Mujtaba NickaArgentinaIvan Magalhaes RENEWAL
Clifford RimItalyAsiya Javayant UNQUALIFIED
Clifford RimSpainElwin Sharvill RENEWAL
Nicolas IturbideBrazilStephen Shaw UNQUALIFIED
Maria MarrierBrazilXuxue Feng NEW
David DarakjyRussiaAnna Fali PROPOSAL
Kadeem FlosiCanadaOnyama Limba UNQUALIFIED
Maria MarrierJapanAsiya Javayant NEW
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Faith GillianJapanXuxue Feng NEGOTIATION
Octavia MaletArgentinaStephen Shaw QUALIFIED
Mayumi KolmetzFranceOnyama Limba RENEWAL
Ricardo GauchoRussiaOnyama Limba NEW
David DarakjySpainOnyama Limba PROPOSAL
Ashley DoeIndiaAnna Fali PROPOSAL
Juan WieserRussiaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Clifford RimRussiaAmy Elsner PROPOSAL
Ivar PaprockiAustraliaXuxue Feng PROPOSAL
James ButtRussiaIoni Bowcher QUALIFIED
Maria MarrierIndiaXuxue Feng NEGOTIATION
Claire TollnerBrazilIoni Bowcher PROPOSAL
Francesco ShinkoFranceStephen Shaw NEW
Misaki RoysterBrazilAmy Elsner UNQUALIFIED
Kadeem FlosiArgentinaAsiya Javayant NEGOTIATION
Salvatore StockhamItalyElwin Sharvill NEW
Wickens NestleFranceOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Emily WhobreyCanada2026-05-12Feltz Printing Service NEW6Bernardo Dominic
1001Smith GlickJapan2026-05-15Rangoni Of Florence NEGOTIATION8Asiya Javayant
1002Aika InouyeItaly2026-05-28Benton, John B Jr NEGOTIATION88Anna Fali
1003Rodrigues CampainItaly2026-05-12Printing Dimensions RENEWAL45Ioni Bowcher
1004Rodrigues CampainUnited Kingdom2026-05-29Chanay, Jeffrey A Esq QUALIFIED54Elwin Sharvill
1005Adams MorascaFrance2026-05-12Rangoni Of Florence PROPOSAL2Ivan Magalhaes
1006Francesco ShinkoUnited Kingdom2026-05-08Dorl, James J Esq UNQUALIFIED57Ioni Bowcher
1007Costa DilliardFrance2026-05-17Truhlar And Truhlar Attys PROPOSAL76Ivan Magalhaes
1008Salvatore StockhamUnited Kingdom2026-05-10Dorl, James J Esq UNQUALIFIED77Ivan Magalhaes
1009Jeanfrancois VenereJapan2026-06-01Morlong Associates PROPOSAL55Ioni Bowcher
1010Chavez BriddickBrazil2026-05-13Printing Dimensions NEW20Anna Fali
1011Adams MorascaJapan2026-06-04Feiner Bros UNQUALIFIED53Elwin Sharvill
1012Stacey MacleadRussia2026-05-16Printing Dimensions QUALIFIED50Stephen Shaw
1013Francesco ShinkoArgentina2026-05-14Commercial Press QUALIFIED90Bernardo Dominic
1014Ricardo GauchoUnited Kingdom2026-05-27Truhlar And Truhlar Attys PROPOSAL19Anna Fali
1015Antonio CaudyArgentina2026-05-09Truhlar And Truhlar Attys UNQUALIFIED9Onyama Limba
1016Deepesh ChuiSpain2026-05-08Printing Dimensions RENEWAL49Onyama Limba
1017Jennifer AmigonGermany2026-05-21Printing Dimensions NEW7Elwin Sharvill
1018Nicolas IturbideUnited Kingdom2026-05-22Rousseaux, Michael Esq RENEWAL50Onyama Limba
1019Silvio SlusarskiBrazil2026-05-26Rousseaux, Michael Esq QUALIFIED79Ivan Magalhaes
1020Maisha RulapaughRussia2026-05-28Truhlar And Truhlar Attys NEW56Asiya Javayant
1021Jefferson SchemmerIndia2026-05-22Commercial Press NEW90Amy Elsner
1022Octavia MaletGermany2026-05-17Feiner Bros NEGOTIATION0Bernardo Dominic
1023Juan WieserSpain2026-05-28Buckley Miller Wright UNQUALIFIED63Asiya Javayant
1024Misaki RoysterCanada2026-05-24Dorl, James J Esq RENEWAL90Anna Fali
1025Faith GillianRussia2026-05-08Feiner Bros QUALIFIED10Bernardo Dominic
1026Antonio CaudyRussia2026-05-28Morlong Associates UNQUALIFIED30Amy Elsner
1027Leon OldroydFrance2026-05-21Dorl, James J Esq NEW31Ivan Magalhaes
1028Costa DilliardIndia2026-05-17Commercial Press QUALIFIED48Asiya Javayant
1029Stacey MacleadRussia2026-05-22Truhlar And Truhlar Attys QUALIFIED64Elwin Sharvill
1030Leja CaldareraBrazil2026-05-27Feltz Printing Service RENEWAL30Ioni Bowcher
1031Octavia MaletRussia2026-05-21King, Christopher A Esq NEGOTIATION82Stephen Shaw
1032Mayumi KolmetzCanada2026-05-26King, Christopher A Esq NEW56Anna Fali
1033Julie StensethCanada2026-05-26Chapman, Ross E Esq UNQUALIFIED44Ivan Magalhaes
1034Nicolas IturbideUnited Kingdom2026-05-30Rangoni Of Florence UNQUALIFIED38Xuxue Feng
1035Leon OldroydGermany2026-05-20King, Christopher A Esq UNQUALIFIED10Onyama Limba
1036Aruna FigeroaRussia2026-05-29Morlong Associates NEW12Asiya Javayant
1037Juan WieserItaly2026-05-15Chapman, Ross E Esq UNQUALIFIED21Ioni Bowcher
1038Greenwood BologniaUnited Kingdom2026-05-08Rangoni Of Florence UNQUALIFIED61Bernardo Dominic
1039Johnson SergiItaly2026-05-23Rangoni Of Florence NEGOTIATION5Ioni Bowcher
1040Antonio CaudyGermany2026-05-11Rangoni Of Florence QUALIFIED60Anna Fali
1041Julie StensethGermany2026-05-27Buckley Miller Wright QUALIFIED79Amy Elsner
1042Ricardo GauchoJapan2026-05-30Feiner Bros UNQUALIFIED1Ivan Magalhaes
1043Greenwood BologniaJapan2026-05-12Truhlar And Truhlar Attys NEGOTIATION71Elwin Sharvill
1044James ButtAustralia2026-05-11Chemel, James L Cpa UNQUALIFIED80Amy Elsner
1045Clifford RimUnited Kingdom2026-06-03Chanay, Jeffrey A Esq NEW15Anna Fali
1046Cody SaylorsCanada2026-05-19Feiner Bros UNQUALIFIED91Amy Elsner
1047Salvatore StockhamArgentina2026-06-01Printing Dimensions PROPOSAL6Amy Elsner
1048Adams MorascaSpain2026-05-07Rousseaux, Michael Esq UNQUALIFIED94Stephen Shaw
1049Jones VocelkaJapan2026-05-20Truhlar And Truhlar Attys NEGOTIATION24Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Mayumi KolmetzArgentinaIvan Magalhaes QUALIFIED
Cody SaylorsSpainElwin Sharvill RENEWAL
Jeanfrancois VenereRussiaOnyama Limba NEGOTIATION
Jennifer AmigonCanadaAnna Fali UNQUALIFIED
Costa DilliardUnited KingdomElwin Sharvill NEW
Isabel BowleyRussiaIvan Magalhaes PROPOSAL
Jones VocelkaGermanyAmy Elsner UNQUALIFIED
Emily WhobreyBrazilOnyama Limba QUALIFIED
Deepesh ChuiJapanElwin Sharvill UNQUALIFIED
Stacey MacleadUnited KingdomBernardo Dominic QUALIFIED
Aika InouyeAustraliaAsiya Javayant PROPOSAL
Munro FerenczBrazilAnna Fali UNQUALIFIED
Leon OldroydJapanOnyama Limba PROPOSAL
Morrow RutaGermanyAsiya Javayant UNQUALIFIED
Munro FerenczRussiaAsiya Javayant RENEWAL
Aditya KuskoBrazilIoni Bowcher NEW
Jefferson SchemmerFranceAmy Elsner RENEWAL
Octavia MaletArgentinaStephen Shaw RENEWAL
Chavez BriddickAustraliaXuxue Feng NEW
Octavia MaletArgentinaAnna Fali RENEWAL
Tony FollerItalyElwin Sharvill NEGOTIATION
Kaitlin OstroskyCanadaStephen Shaw UNQUALIFIED
Adams MorascaSpainElwin Sharvill UNQUALIFIED
Izzy GarufiGermanyAnna Fali UNQUALIFIED
Johnson SergiAustraliaAmy Elsner QUALIFIED
Leja CaldareraIndiaAsiya Javayant NEW
Sinclair WaycottRussiaAnna Fali QUALIFIED
Aika InouyeBrazilXuxue Feng NEW
Adams MorascaFranceAnna Fali QUALIFIED
Claire TollnerSpainAnna Fali PROPOSAL
Darci PoquetteFranceAsiya Javayant NEGOTIATION
Jennifer AmigonFranceBernardo Dominic UNQUALIFIED
Alejandro PerinArgentinaBernardo Dominic UNQUALIFIED
Faith GillianArgentinaXuxue Feng NEGOTIATION
Clifford RimItalyXuxue Feng QUALIFIED
Clifford RimCanadaXuxue Feng PROPOSAL
Smith GlickRussiaAmy Elsner NEW
Aditya KuskoUnited KingdomXuxue Feng NEW
Mujtaba NickaBrazilStephen Shaw QUALIFIED
Aika InouyeGermanyBernardo Dominic PROPOSAL
Ashley DoeBrazilAmy Elsner RENEWAL
Alejandro PerinIndiaBernardo Dominic PROPOSAL
Mujtaba NickaJapanElwin Sharvill NEW
Claire TollnerCanadaElwin Sharvill NEGOTIATION
Cody SaylorsBrazilXuxue Feng UNQUALIFIED
Faith GillianItalyIvan Magalhaes NEGOTIATION
Greenwood BologniaCanadaXuxue Feng RENEWAL
David DarakjyGermanyIoni Bowcher UNQUALIFIED
Faith GillianCanadaXuxue Feng QUALIFIED
Leja CaldareraGermanyStephen Shaw UNQUALIFIED
Frozen Columns
Name
Jefferson Schemmer
Stacey Maclead
Jeanfrancois Venere
Kaitlin Ostrosky
Aditya Kusko
Darci Poquette
Jeanfrancois Venere
Aditya Kusko
Jones Vocelka
Emily Whobrey
Aika Inouye
Kadeem Flosi
Aruna Figeroa
Sinclair Waycott
David Darakjy
Juan Wieser
Antonio Caudy
Wickens Nestle
Johnson Sergi
Octavia Malet
Ricardo Gaucho
Salvatore Stockham
Maisha Rulapaugh
Mayumi Kolmetz
Jennifer Amigon
Adams Morasca
Jennifer Amigon
Ricardo Gaucho
Francesco Shinko
Deepesh Chui
James Butt
Greenwood Bolognia
Greenwood Bolognia
Munro Ferencz
Kaitlin Ostrosky
Isabel Bowley
Rodrigues Campain
James Butt
Aruna Figeroa
Claire Tollner
Juan Wieser
Chavez Briddick
James Butt
Clifford Rim
Leja Caldarera
Izzy Garufi
Faith Gillian
Misaki Royster
Adams Morasca
Jeanfrancois Venere
IdCountryDate
1000Brazil2026-05-25
1001Australia2026-05-19
1002Russia2026-05-12
1003Japan2026-05-10
1004Brazil2026-05-11
1005Russia2026-06-05
1006Canada2026-05-19
1007Australia2026-05-31
1008United Kingdom2026-05-22
1009Japan2026-05-13
1010Canada2026-05-14
1011Argentina2026-05-17
1012Japan2026-05-15
1013Spain2026-05-25
1014India2026-05-25
1015Germany2026-05-17
1016Japan2026-05-30
1017Argentina2026-05-09
1018Brazil2026-05-14
1019Canada2026-05-31
1020France2026-05-29
1021Russia2026-05-27
1022France2026-05-28
1023Italy2026-06-03
1024Canada2026-06-02
1025Spain2026-05-21
1026Australia2026-05-17
1027Australia2026-06-05
1028Spain2026-05-16
1029Russia2026-06-01
1030Russia2026-06-02
1031United Kingdom2026-05-17
1032Spain2026-05-09
1033Spain2026-05-20
1034Australia2026-05-12
1035Spain2026-05-21
1036Australia2026-05-09
1037France2026-05-23
1038Germany2026-05-31
1039Russia2026-05-22
1040Germany2026-05-31
1041Canada2026-05-21
1042Canada2026-05-16
1043Canada2026-05-30
1044Italy2026-05-25
1045Brazil2026-06-02
1046Italy2026-05-15
1047Canada2026-05-09
1048Russia2026-05-13
1049India2026-05-22

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Spain2026-05-26
Aika Inouye1001India2026-05-21
Octavia Malet1002Brazil2026-05-17
Mayumi Kolmetz1003India2026-05-11
Murillo Malet1004Brazil2026-05-09
Izzy Garufi1005France2026-06-05
Claire Tollner1006Spain2026-05-25
Deepesh Chui1007Russia2026-05-15
Isabel Bowley1008Russia2026-05-09
Jefferson Schemmer1009United Kingdom2026-05-14
Salvatore Stockham1010Canada2026-05-14
Francesco Shinko1011Russia2026-06-01
Misaki Royster1012Japan2026-06-05
Ashley Doe1013Australia2026-06-03
Alejandro Perin1014India2026-05-31
Izzy Garufi1015India2026-05-16
Sinclair Waycott1016Russia2026-06-05
Claire Tollner1017United Kingdom2026-06-05
Wickens Nestle1018India2026-05-11
Chavez Briddick1019Italy2026-05-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Tony FollerItalyBernardo Dominic PROPOSAL
Stacey MacleadIndiaXuxue Feng UNQUALIFIED
Juan WieserAustraliaIvan Magalhaes UNQUALIFIED
Ricardo GauchoIndiaOnyama Limba PROPOSAL
Leja CaldareraAustraliaAnna Fali NEW
Alejandro PerinFranceIvan Magalhaes NEW
Claire TollnerArgentinaIoni Bowcher UNQUALIFIED
Chavez BriddickIndiaStephen Shaw QUALIFIED
Stacey MacleadUnited KingdomXuxue Feng NEGOTIATION
Costa DilliardArgentinaIoni Bowcher NEW
Rodrigues CampainAustraliaIoni Bowcher PROPOSAL
Clifford RimFranceIoni Bowcher UNQUALIFIED
Greenwood BologniaJapanAmy Elsner PROPOSAL
Deepesh ChuiCanadaIoni Bowcher RENEWAL
Wickens NestleBrazilBernardo Dominic NEW
Emily WhobreyIndiaAsiya Javayant NEW
Nicolas IturbideArgentinaAsiya Javayant UNQUALIFIED
Leja CaldareraJapanElwin Sharvill RENEWAL
Silvio SlusarskiIndiaBernardo Dominic NEW
Morrow RutaJapanIoni Bowcher PROPOSAL
Tony FollerItalyAsiya Javayant QUALIFIED
Francesco ShinkoUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaJapanOnyama Limba QUALIFIED
Antonio CaudyJapanOnyama Limba PROPOSAL
Misaki RoysterItalyAmy Elsner PROPOSAL
Aditya KuskoAustraliaIvan Magalhaes NEGOTIATION
Isabel BowleyArgentinaOnyama Limba QUALIFIED
Smith GlickArgentinaOnyama Limba NEGOTIATION
Tony FollerItalyAmy Elsner NEGOTIATION
Leja CaldareraFranceAsiya Javayant RENEWAL
Claire TollnerJapanOnyama Limba RENEWAL
Octavia MaletJapanAmy Elsner QUALIFIED
Maria MarrierBrazilAnna Fali UNQUALIFIED
Juan WieserArgentinaAmy Elsner QUALIFIED
Adams MorascaGermanyAmy Elsner RENEWAL
Deepesh ChuiIndiaAmy Elsner RENEWAL
Costa DilliardAustraliaStephen Shaw UNQUALIFIED
Chavez BriddickAustraliaAnna Fali NEW
Munro FerenczFranceIoni Bowcher NEGOTIATION
Misaki RoysterCanadaAnna Fali 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>