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
David DarakjyUnited KingdomIvan Magalhaes NEGOTIATION
Emily WhobreyCanadaAnna Fali RENEWAL
Salvatore StockhamUnited KingdomBernardo Dominic NEGOTIATION
Morrow RutaFranceElwin Sharvill UNQUALIFIED
Juan WieserSpainStephen Shaw UNQUALIFIED
Leja CaldareraUnited KingdomAmy Elsner RENEWAL
Aika InouyeGermanyBernardo Dominic NEGOTIATION
Kadeem FlosiArgentinaXuxue Feng UNQUALIFIED
Jeanfrancois VenereItalyAsiya Javayant PROPOSAL
Clifford RimBrazilStephen Shaw RENEWAL
Juan WieserCanadaStephen Shaw QUALIFIED
Costa DilliardArgentinaIoni Bowcher NEGOTIATION
Johnson SergiJapanIoni Bowcher NEW
Ivar PaprockiIndiaOnyama Limba UNQUALIFIED
Maria MarrierGermanyBernardo Dominic UNQUALIFIED
Aika InouyeBrazilIvan Magalhaes NEGOTIATION
Jefferson SchemmerCanadaAnna Fali QUALIFIED
Maria MarrierUnited KingdomXuxue Feng PROPOSAL
Kaitlin OstroskyIndiaAsiya Javayant NEGOTIATION
Izzy GarufiUnited KingdomBernardo Dominic RENEWAL
Deepesh ChuiSpainOnyama Limba UNQUALIFIED
Mujtaba NickaJapanBernardo Dominic UNQUALIFIED
Smith GlickIndiaStephen Shaw NEGOTIATION
Smith GlickSpainAsiya Javayant PROPOSAL
Julie StensethItalyAsiya Javayant RENEWAL
Aika InouyeSpainBernardo Dominic NEGOTIATION
Jennifer AmigonCanadaOnyama Limba RENEWAL
Juan WieserUnited KingdomBernardo Dominic NEGOTIATION
Ashley DoeBrazilIoni Bowcher UNQUALIFIED
Salvatore StockhamArgentinaAnna Fali NEGOTIATION
Salvatore StockhamBrazilOnyama Limba RENEWAL
Antonio CaudyArgentinaStephen Shaw NEGOTIATION
Smith GlickAustraliaIvan Magalhaes NEW
Sinclair WaycottItalyAsiya Javayant NEW
Cody SaylorsBrazilStephen Shaw QUALIFIED
David DarakjyGermanyIoni Bowcher NEW
Aruna FigeroaBrazilXuxue Feng RENEWAL
Tony FollerRussiaXuxue Feng RENEWAL
Kaitlin OstroskyGermanyAsiya Javayant QUALIFIED
Jeanfrancois VenereCanadaIoni Bowcher NEGOTIATION
Misaki RoysterGermanyXuxue Feng QUALIFIED
David DarakjyArgentinaXuxue Feng QUALIFIED
Aruna FigeroaFranceXuxue Feng NEW
Antonio CaudyItalyIvan Magalhaes UNQUALIFIED
Jefferson SchemmerFranceElwin Sharvill QUALIFIED
Maria MarrierItalyElwin Sharvill NEW
Jennifer AmigonUnited KingdomXuxue Feng QUALIFIED
Nicolas IturbideRussiaAmy Elsner RENEWAL
Silvio SlusarskiIndiaAnna Fali NEW
Salvatore StockhamGermanyOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonAustraliaAmy Elsner QUALIFIED
Octavia MaletUnited KingdomIoni Bowcher PROPOSAL
Adams MorascaArgentinaIoni Bowcher NEGOTIATION
Munro FerenczIndiaBernardo Dominic PROPOSAL
Deepesh ChuiFranceXuxue Feng PROPOSAL
Morrow RutaBrazilBernardo Dominic NEW
Nicolas IturbideArgentinaOnyama Limba NEW
Isabel BowleyArgentinaAsiya Javayant NEW
Ricardo GauchoBrazilStephen Shaw PROPOSAL
Antonio CaudyGermanyElwin Sharvill QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio CaudyFrance2026-06-05Chemel, James L Cpa QUALIFIED6Ioni Bowcher
1001Sinclair WaycottAustralia2026-05-23Chapman, Ross E Esq NEW86Xuxue Feng
1002Morrow RutaArgentina2026-06-01King, Christopher A Esq NEW96Ioni Bowcher
1003Juan WieserIndia2026-06-09Chanay, Jeffrey A Esq QUALIFIED92Asiya Javayant
1004Wickens NestleSpain2026-06-09King, Christopher A Esq RENEWAL84Xuxue Feng
1005Murillo MaletAustralia2026-05-31Commercial Press UNQUALIFIED28Asiya Javayant
1006Isabel BowleyRussia2026-06-08Rangoni Of Florence PROPOSAL11Asiya Javayant
1007Arvin AlbaresSpain2026-05-29Chemel, James L Cpa NEW98Asiya Javayant
1008Mayumi KolmetzJapan2026-05-28Chemel, James L Cpa NEGOTIATION26Anna Fali
1009Jennifer AmigonRussia2026-05-24Morlong Associates QUALIFIED67Anna Fali
1010Murillo MaletGermany2026-05-23King, Christopher A Esq PROPOSAL43Xuxue Feng
1011Costa DilliardSpain2026-06-01Benton, John B Jr NEGOTIATION54Ioni Bowcher
1012Wickens NestleItaly2026-06-20Feltz Printing Service NEW37Onyama Limba
1013Jefferson SchemmerFrance2026-06-06Rangoni Of Florence RENEWAL29Amy Elsner
1014Nicolas IturbideGermany2026-05-26Feiner Bros NEGOTIATION69Asiya Javayant
1015Misaki RoysterJapan2026-06-19Buckley Miller Wright NEGOTIATION92Stephen Shaw
1016Ivar PaprockiSpain2026-06-11Printing Dimensions NEGOTIATION77Elwin Sharvill
1017Munro FerenczItaly2026-06-20Feiner Bros QUALIFIED25Bernardo Dominic
1018Johnson SergiCanada2026-05-25Benton, John B Jr QUALIFIED57Bernardo Dominic
1019Aditya KuskoGermany2026-06-07Truhlar And Truhlar Attys UNQUALIFIED29Bernardo Dominic
1020Ricardo GauchoSpain2026-05-26Chapman, Ross E Esq RENEWAL82Bernardo Dominic
1021Greenwood BologniaUnited Kingdom2026-05-26Printing Dimensions QUALIFIED44Anna Fali
1022Misaki RoysterFrance2026-06-03Benton, John B Jr PROPOSAL1Bernardo Dominic
1023Johnson SergiBrazil2026-06-20Benton, John B Jr PROPOSAL97Anna Fali
1024Clifford RimJapan2026-05-30Commercial Press NEGOTIATION95Ioni Bowcher
1025Misaki RoysterCanada2026-06-13Morlong Associates RENEWAL27Elwin Sharvill
1026Misaki RoysterRussia2026-06-04Commercial Press RENEWAL19Elwin Sharvill
1027Misaki RoysterAustralia2026-06-20Buckley Miller Wright QUALIFIED1Stephen Shaw
1028Jones VocelkaItaly2026-06-04Chemel, James L Cpa NEGOTIATION5Anna Fali
1029Salvatore StockhamItaly2026-05-31Buckley Miller Wright UNQUALIFIED79Bernardo Dominic
1030Misaki RoysterIndia2026-06-15Buckley Miller Wright NEGOTIATION67Amy Elsner
1031Salvatore StockhamIndia2026-05-26Feiner Bros QUALIFIED76Ivan Magalhaes
1032Murillo MaletCanada2026-06-15Printing Dimensions RENEWAL77Asiya Javayant
1033Misaki RoysterArgentina2026-05-29Rangoni Of Florence PROPOSAL37Anna Fali
1034Nicolas IturbideIndia2026-06-20Commercial Press NEGOTIATION69Bernardo Dominic
1035Deepesh ChuiGermany2026-06-05Benton, John B Jr RENEWAL45Xuxue Feng
1036Cody SaylorsGermany2026-05-28Feiner Bros RENEWAL63Asiya Javayant
1037Kaitlin OstroskyBrazil2026-05-23Rousseaux, Michael Esq NEGOTIATION6Stephen Shaw
1038Ricardo GauchoAustralia2026-06-21Commercial Press NEGOTIATION18Bernardo Dominic
1039Emily WhobreyIndia2026-06-04Printing Dimensions PROPOSAL77Xuxue Feng
1040Darci PoquetteIndia2026-05-26King, Christopher A Esq RENEWAL54Elwin Sharvill
1041Stacey MacleadRussia2026-06-05King, Christopher A Esq QUALIFIED21Ivan Magalhaes
1042Salvatore StockhamSpain2026-06-13Buckley Miller Wright NEW64Onyama Limba
1043Johnson SergiBrazil2026-06-10Dorl, James J Esq UNQUALIFIED15Asiya Javayant
1044Deepesh ChuiItaly2026-06-19Truhlar And Truhlar Attys PROPOSAL58Ivan Magalhaes
1045Mayumi KolmetzUnited Kingdom2026-06-16Commercial Press NEW23Onyama Limba
1046Murillo MaletJapan2026-05-24Chemel, James L Cpa QUALIFIED83Anna Fali
1047Alejandro PerinIndia2026-06-11Chemel, James L Cpa RENEWAL95Amy Elsner
1048Murillo MaletJapan2026-06-03Feiner Bros PROPOSAL71Anna Fali
1049Misaki RoysterCanada2026-05-26Dorl, James J Esq NEW24Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaGermanyOnyama Limba NEGOTIATION
Murillo MaletRussiaAmy Elsner QUALIFIED
Kaitlin OstroskyIndiaAnna Fali NEGOTIATION
Ivar PaprockiItalyIvan Magalhaes NEW
Aruna FigeroaCanadaStephen Shaw NEGOTIATION
Munro FerenczJapanOnyama Limba RENEWAL
Jefferson SchemmerFranceAmy Elsner NEW
Rodrigues CampainSpainBernardo Dominic UNQUALIFIED
Johnson SergiGermanyStephen Shaw NEGOTIATION
Darci PoquetteSpainXuxue Feng NEW
Arvin AlbaresFranceXuxue Feng RENEWAL
Salvatore StockhamSpainXuxue Feng UNQUALIFIED
Leja CaldareraAustraliaXuxue Feng NEW
Isabel BowleyBrazilIoni Bowcher UNQUALIFIED
Jefferson SchemmerArgentinaBernardo Dominic PROPOSAL
Salvatore StockhamGermanyBernardo Dominic UNQUALIFIED
Ricardo GauchoFranceAnna Fali RENEWAL
Mayumi KolmetzUnited KingdomBernardo Dominic QUALIFIED
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
Costa DilliardBrazilIvan Magalhaes RENEWAL
Francesco ShinkoUnited KingdomAnna Fali NEW
Nicolas IturbideGermanyBernardo Dominic RENEWAL
Munro FerenczJapanStephen Shaw NEGOTIATION
Smith GlickBrazilOnyama Limba NEW
Jones VocelkaItalyXuxue Feng UNQUALIFIED
Rodrigues CampainIndiaAmy Elsner NEGOTIATION
Arvin AlbaresCanadaOnyama Limba UNQUALIFIED
Kadeem FlosiRussiaXuxue Feng RENEWAL
James ButtUnited KingdomAmy Elsner UNQUALIFIED
Maisha RulapaughItalyAmy Elsner NEW
Silvio SlusarskiRussiaIoni Bowcher RENEWAL
Leja CaldareraIndiaAmy Elsner PROPOSAL
Chavez BriddickArgentinaXuxue Feng NEW
Adams MorascaUnited KingdomIoni Bowcher PROPOSAL
Tony FollerItalyAmy Elsner NEGOTIATION
Octavia MaletCanadaElwin Sharvill PROPOSAL
Mayumi KolmetzRussiaIvan Magalhaes PROPOSAL
Maisha RulapaughSpainBernardo Dominic PROPOSAL
Adams MorascaCanadaAnna Fali PROPOSAL
Clifford RimRussiaStephen Shaw RENEWAL
Wickens NestleBrazilAnna Fali QUALIFIED
Jones VocelkaFranceStephen Shaw RENEWAL
Ricardo GauchoItalyIoni Bowcher NEGOTIATION
Jeanfrancois VenereUnited KingdomOnyama Limba NEGOTIATION
Darci PoquetteArgentinaOnyama Limba QUALIFIED
Claire TollnerGermanyAsiya Javayant NEW
Wickens NestleArgentinaIvan Magalhaes NEGOTIATION
Julie StensethCanadaAsiya Javayant QUALIFIED
Alejandro PerinUnited KingdomIvan Magalhaes QUALIFIED
Johnson SergiIndiaElwin Sharvill NEGOTIATION
Frozen Columns
Name
Leon Oldroyd
James Butt
Darci Poquette
Jones Vocelka
Nicolas Iturbide
Greenwood Bolognia
Cody Saylors
Leon Oldroyd
Juan Wieser
Ashley Doe
Tony Foller
Izzy Garufi
Mayumi Kolmetz
Jeanfrancois Venere
Arvin Albares
Stacey Maclead
Adams Morasca
Alejandro Perin
Leja Caldarera
Ashley Doe
Julie Stenseth
Aditya Kusko
Maria Marrier
Maria Marrier
Stacey Maclead
Jones Vocelka
Tony Foller
Izzy Garufi
Smith Glick
Alejandro Perin
Kadeem Flosi
Adams Morasca
Adams Morasca
Leon Oldroyd
Antonio Caudy
Emily Whobrey
Tony Foller
Arvin Albares
Murillo Malet
Alejandro Perin
Ashley Doe
Deepesh Chui
Maria Marrier
Antonio Caudy
Ricardo Gaucho
Munro Ferencz
Maria Marrier
Octavia Malet
Faith Gillian
Ashley Doe
IdCountryDate
1000Russia2026-06-05
1001Spain2026-06-18
1002France2026-06-21
1003Australia2026-06-07
1004Spain2026-05-28
1005Japan2026-05-24
1006Italy2026-06-11
1007Brazil2026-05-25
1008Italy2026-06-04
1009Germany2026-06-13
1010France2026-06-11
1011Canada2026-06-03
1012Argentina2026-05-29
1013Canada2026-06-08
1014Germany2026-05-29
1015Japan2026-06-21
1016Germany2026-06-06
1017Italy2026-06-16
1018Argentina2026-05-30
1019Brazil2026-06-11
1020United Kingdom2026-06-08
1021Japan2026-06-12
1022Italy2026-06-07
1023Japan2026-06-20
1024Argentina2026-05-24
1025Spain2026-05-30
1026United Kingdom2026-05-23
1027Russia2026-05-26
1028Argentina2026-06-01
1029Canada2026-05-24
1030United Kingdom2026-05-30
1031Australia2026-05-27
1032Spain2026-05-30
1033Australia2026-06-19
1034Brazil2026-06-08
1035Germany2026-06-06
1036Italy2026-06-15
1037Argentina2026-06-04
1038India2026-06-07
1039United Kingdom2026-06-05
1040France2026-06-05
1041Germany2026-06-14
1042Australia2026-06-10
1043Australia2026-05-24
1044Brazil2026-06-14
1045Spain2026-06-15
1046Brazil2026-05-25
1047Russia2026-06-09
1048Australia2026-06-11
1049Canada2026-06-18

On-Demand Data

NameIdCountryDate
Ashley Doe1000Canada2026-06-06
Clifford Rim1001India2026-06-05
Darci Poquette1002United Kingdom2026-06-08
Leon Oldroyd1003Spain2026-06-06
Ashley Doe1004India2026-05-31
Jefferson Schemmer1005Germany2026-06-17
Aruna Figeroa1006Brazil2026-06-04
Jeanfrancois Venere1007Italy2026-06-01
Sinclair Waycott1008Spain2026-06-03
Ashley Doe1009Australia2026-05-31
Silvio Slusarski1010Italy2026-06-19
Jennifer Amigon1011Australia2026-05-27
Faith Gillian1012Brazil2026-06-11
Antonio Caudy1013Argentina2026-05-27
David Darakjy1014United Kingdom2026-05-29
Murillo Malet1015Italy2026-05-29
Octavia Malet1016Russia2026-06-02
Cody Saylors1017Germany2026-06-03
Greenwood Bolognia1018Japan2026-06-17
Chavez Briddick1019Spain2026-06-13
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonRussiaIvan Magalhaes RENEWAL
Stacey MacleadItalyIvan Magalhaes UNQUALIFIED
Darci PoquetteCanadaElwin Sharvill NEW
Johnson SergiFranceXuxue Feng UNQUALIFIED
Murillo MaletGermanyAnna Fali PROPOSAL
Smith GlickBrazilOnyama Limba PROPOSAL
Misaki RoysterIndiaBernardo Dominic NEGOTIATION
Jefferson SchemmerItalyElwin Sharvill RENEWAL
Rodrigues CampainCanadaOnyama Limba NEGOTIATION
Jennifer AmigonBrazilAmy Elsner UNQUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant NEW
Ashley DoeArgentinaOnyama Limba QUALIFIED
Mujtaba NickaGermanyStephen Shaw NEGOTIATION
Maisha RulapaughBrazilElwin Sharvill RENEWAL
Wickens NestleIndiaBernardo Dominic PROPOSAL
Maria MarrierCanadaStephen Shaw NEW
Izzy GarufiIndiaIvan Magalhaes QUALIFIED
Clifford RimRussiaIvan Magalhaes RENEWAL
Murillo MaletGermanyAnna Fali QUALIFIED
Juan WieserBrazilElwin Sharvill UNQUALIFIED
Deepesh ChuiCanadaStephen Shaw NEGOTIATION
Jones VocelkaGermanyIvan Magalhaes QUALIFIED
Jefferson SchemmerItalyOnyama Limba UNQUALIFIED
Maria MarrierBrazilStephen Shaw UNQUALIFIED
Ricardo GauchoSpainIoni Bowcher NEW
Maria MarrierItalyOnyama Limba QUALIFIED
Octavia MaletItalyAmy Elsner NEGOTIATION
Sinclair WaycottCanadaBernardo Dominic PROPOSAL
Murillo MaletRussiaAmy Elsner UNQUALIFIED
Nicolas IturbideGermanyAmy Elsner NEW
Adams MorascaAustraliaAnna Fali NEGOTIATION
Maria MarrierIndiaAmy Elsner NEW
Jeanfrancois VenereGermanyIoni Bowcher NEGOTIATION
Cody SaylorsSpainXuxue Feng UNQUALIFIED
David DarakjyGermanyAnna Fali QUALIFIED
Jennifer AmigonAustraliaAmy Elsner PROPOSAL
Morrow RutaUnited KingdomAmy Elsner QUALIFIED
Johnson SergiIndiaElwin Sharvill RENEWAL
Greenwood BologniaJapanBernardo Dominic UNQUALIFIED
Maria MarrierAustraliaXuxue Feng 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>