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
Tony FollerSpainIoni Bowcher RENEWAL
Izzy GarufiSpainIoni Bowcher QUALIFIED
Juan WieserRussiaAsiya Javayant QUALIFIED
Silvio SlusarskiRussiaElwin Sharvill NEW
Izzy GarufiBrazilIvan Magalhaes QUALIFIED
James ButtJapanAsiya Javayant QUALIFIED
Silvio SlusarskiSpainElwin Sharvill NEGOTIATION
Isabel BowleyFranceBernardo Dominic RENEWAL
Kaitlin OstroskyRussiaAsiya Javayant QUALIFIED
Johnson SergiIndiaAmy Elsner QUALIFIED
Jefferson SchemmerRussiaAmy Elsner NEW
Maisha RulapaughIndiaAsiya Javayant NEGOTIATION
Alejandro PerinFranceOnyama Limba RENEWAL
Munro FerenczJapanOnyama Limba UNQUALIFIED
Rodrigues CampainSpainElwin Sharvill RENEWAL
Isabel BowleyGermanyIvan Magalhaes NEGOTIATION
Mujtaba NickaUnited KingdomAsiya Javayant RENEWAL
Kadeem FlosiGermanyXuxue Feng QUALIFIED
Jeanfrancois VenereJapanBernardo Dominic UNQUALIFIED
Cody SaylorsAustraliaStephen Shaw NEW
Jennifer AmigonSpainAmy Elsner QUALIFIED
Francesco ShinkoAustraliaXuxue Feng PROPOSAL
Arvin AlbaresSpainStephen Shaw UNQUALIFIED
Smith GlickAustraliaAnna Fali NEGOTIATION
Leja CaldareraItalyXuxue Feng RENEWAL
Mujtaba NickaAustraliaStephen Shaw NEGOTIATION
Emily WhobreyBrazilIvan Magalhaes NEGOTIATION
Mayumi KolmetzFranceIoni Bowcher PROPOSAL
Kadeem FlosiBrazilIoni Bowcher NEGOTIATION
Claire TollnerUnited KingdomAnna Fali PROPOSAL
Kadeem FlosiRussiaBernardo Dominic NEW
Octavia MaletJapanAsiya Javayant UNQUALIFIED
Ashley DoeSpainBernardo Dominic UNQUALIFIED
Claire TollnerCanadaIoni Bowcher UNQUALIFIED
Leon OldroydItalyAmy Elsner NEGOTIATION
Jennifer AmigonFranceBernardo Dominic NEGOTIATION
Ivar PaprockiGermanyIoni Bowcher RENEWAL
Aruna FigeroaUnited KingdomAsiya Javayant PROPOSAL
Nicolas IturbideUnited KingdomAnna Fali NEW
Ricardo GauchoArgentinaXuxue Feng NEW
Mayumi KolmetzAustraliaOnyama Limba NEGOTIATION
Chavez BriddickFranceXuxue Feng NEW
Emily WhobreyFranceElwin Sharvill NEW
Emily WhobreySpainAnna Fali NEGOTIATION
Emily WhobreyRussiaStephen Shaw QUALIFIED
Ivar PaprockiGermanyAnna Fali UNQUALIFIED
Costa DilliardItalyIoni Bowcher PROPOSAL
Arvin AlbaresBrazilIvan Magalhaes RENEWAL
Jones VocelkaUnited KingdomElwin Sharvill PROPOSAL
Darci PoquetteFranceIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Francesco ShinkoIndiaIoni Bowcher RENEWAL
Greenwood BologniaItalyElwin Sharvill PROPOSAL
Jennifer AmigonFranceXuxue Feng NEGOTIATION
Julie StensethFranceStephen Shaw PROPOSAL
Adams MorascaIndiaIoni Bowcher NEGOTIATION
Johnson SergiIndiaIoni Bowcher UNQUALIFIED
Aditya KuskoAustraliaStephen Shaw UNQUALIFIED
Isabel BowleyItalyElwin Sharvill PROPOSAL
Francesco ShinkoJapanXuxue Feng NEW
Murillo MaletRussiaIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerUnited Kingdom2026-06-16Dorl, James J Esq NEW99Anna Fali
1001Chavez BriddickJapan2026-06-11Buckley Miller Wright NEGOTIATION81Stephen Shaw
1002Alejandro PerinArgentina2026-05-24Feiner Bros PROPOSAL63Amy Elsner
1003Maisha RulapaughJapan2026-06-18Chemel, James L Cpa NEW57Anna Fali
1004Juan WieserItaly2026-06-02Rangoni Of Florence NEW20Bernardo Dominic
1005Maisha RulapaughUnited Kingdom2026-06-12Rousseaux, Michael Esq PROPOSAL8Xuxue Feng
1006Morrow RutaItaly2026-06-07Chanay, Jeffrey A Esq NEGOTIATION86Bernardo Dominic
1007Octavia MaletItaly2026-06-06King, Christopher A Esq QUALIFIED69Bernardo Dominic
1008Francesco ShinkoSpain2026-06-06Chanay, Jeffrey A Esq QUALIFIED29Elwin Sharvill
1009Julie StensethArgentina2026-05-26Feiner Bros NEW57Ioni Bowcher
1010Chavez BriddickJapan2026-06-09Feiner Bros NEGOTIATION10Elwin Sharvill
1011Faith GillianGermany2026-05-27Feltz Printing Service NEW3Ioni Bowcher
1012Ivar PaprockiJapan2026-05-25Feltz Printing Service UNQUALIFIED86Onyama Limba
1013Francesco ShinkoGermany2026-06-18Truhlar And Truhlar Attys NEGOTIATION32Xuxue Feng
1014Claire TollnerRussia2026-06-03Chapman, Ross E Esq NEW54Xuxue Feng
1015Izzy GarufiItaly2026-06-01Rousseaux, Michael Esq PROPOSAL55Elwin Sharvill
1016Mujtaba NickaRussia2026-05-23Truhlar And Truhlar Attys RENEWAL67Ioni Bowcher
1017Maisha RulapaughBrazil2026-06-08Buckley Miller Wright RENEWAL97Ivan Magalhaes
1018Tony FollerSpain2026-06-14King, Christopher A Esq NEGOTIATION95Ivan Magalhaes
1019Octavia MaletAustralia2026-06-10Commercial Press NEW84Elwin Sharvill
1020Ricardo GauchoJapan2026-06-15Dorl, James J Esq QUALIFIED14Asiya Javayant
1021Tony FollerUnited Kingdom2026-06-04Benton, John B Jr QUALIFIED72Onyama Limba
1022Ashley DoeFrance2026-05-31Commercial Press NEGOTIATION65Ivan Magalhaes
1023Mujtaba NickaJapan2026-06-09Commercial Press RENEWAL25Ioni Bowcher
1024Aruna FigeroaAustralia2026-06-04Feltz Printing Service RENEWAL52Amy Elsner
1025Jeanfrancois VenereGermany2026-06-13Chemel, James L Cpa NEGOTIATION26Stephen Shaw
1026David DarakjyCanada2026-06-10Truhlar And Truhlar Attys UNQUALIFIED93Xuxue Feng
1027Salvatore StockhamJapan2026-06-17Buckley Miller Wright QUALIFIED99Anna Fali
1028Misaki RoysterIndia2026-06-02Morlong Associates QUALIFIED47Amy Elsner
1029Isabel BowleyItaly2026-06-07Benton, John B Jr UNQUALIFIED56Asiya Javayant
1030Leja CaldareraRussia2026-06-18Chemel, James L Cpa QUALIFIED52Ioni Bowcher
1031Izzy GarufiFrance2026-06-10Chemel, James L Cpa RENEWAL96Elwin Sharvill
1032Antonio CaudyBrazil2026-06-17Rangoni Of Florence QUALIFIED91Stephen Shaw
1033Smith GlickSpain2026-06-12Rangoni Of Florence NEGOTIATION45Elwin Sharvill
1034Munro FerenczIndia2026-06-13Truhlar And Truhlar Attys NEW43Asiya Javayant
1035Misaki RoysterJapan2026-06-14Printing Dimensions NEGOTIATION6Amy Elsner
1036Nicolas IturbideRussia2026-05-23Chanay, Jeffrey A Esq NEW78Elwin Sharvill
1037Octavia MaletArgentina2026-06-09Dorl, James J Esq NEGOTIATION71Bernardo Dominic
1038Cody SaylorsArgentina2026-06-13Chemel, James L Cpa NEW60Stephen Shaw
1039Faith GillianRussia2026-06-07Feiner Bros RENEWAL29Ivan Magalhaes
1040Mayumi KolmetzJapan2026-05-23Printing Dimensions QUALIFIED12Amy Elsner
1041Silvio SlusarskiSpain2026-05-29King, Christopher A Esq NEW19Bernardo Dominic
1042Costa DilliardArgentina2026-05-28Morlong Associates UNQUALIFIED38Onyama Limba
1043Deepesh ChuiIndia2026-06-05Morlong Associates RENEWAL78Onyama Limba
1044Maisha RulapaughFrance2026-06-04Truhlar And Truhlar Attys NEGOTIATION27Xuxue Feng
1045Jennifer AmigonBrazil2026-05-24Dorl, James J Esq NEGOTIATION98Stephen Shaw
1046Francesco ShinkoIndia2026-06-04Printing Dimensions NEGOTIATION44Stephen Shaw
1047Aditya KuskoItaly2026-06-08Commercial Press NEGOTIATION81Ioni Bowcher
1048Johnson SergiItaly2026-06-02Morlong Associates RENEWAL28Asiya Javayant
1049Nicolas IturbideIndia2026-05-24Rousseaux, Michael Esq UNQUALIFIED22Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Darci PoquetteBrazilIvan Magalhaes PROPOSAL
Aditya KuskoBrazilOnyama Limba NEW
Ashley DoeUnited KingdomBernardo Dominic RENEWAL
James ButtBrazilIvan Magalhaes NEW
James ButtArgentinaAsiya Javayant UNQUALIFIED
Arvin AlbaresIndiaXuxue Feng UNQUALIFIED
Aruna FigeroaArgentinaAnna Fali PROPOSAL
Costa DilliardRussiaAsiya Javayant NEGOTIATION
Wickens NestleItalyAsiya Javayant NEW
Jones VocelkaItalyBernardo Dominic NEGOTIATION
Deepesh ChuiFranceIvan Magalhaes NEGOTIATION
Emily WhobreyGermanyIoni Bowcher PROPOSAL
Emily WhobreyIndiaAsiya Javayant QUALIFIED
Silvio SlusarskiSpainAmy Elsner RENEWAL
Maisha RulapaughAustraliaAsiya Javayant PROPOSAL
Izzy GarufiArgentinaIvan Magalhaes PROPOSAL
Tony FollerItalyStephen Shaw NEW
Aruna FigeroaAustraliaOnyama Limba NEGOTIATION
Costa DilliardGermanyIvan Magalhaes NEW
Jennifer AmigonRussiaIvan Magalhaes UNQUALIFIED
Deepesh ChuiIndiaAmy Elsner UNQUALIFIED
Faith GillianFranceAmy Elsner RENEWAL
Kadeem FlosiFranceIoni Bowcher NEGOTIATION
Darci PoquetteAustraliaXuxue Feng UNQUALIFIED
Aditya KuskoSpainOnyama Limba RENEWAL
Izzy GarufiArgentinaOnyama Limba RENEWAL
James ButtFranceAmy Elsner NEGOTIATION
Cody SaylorsIndiaAmy Elsner NEW
Francesco ShinkoIndiaAnna Fali PROPOSAL
Sinclair WaycottUnited KingdomBernardo Dominic NEGOTIATION
Izzy GarufiRussiaXuxue Feng NEW
Cody SaylorsFranceOnyama Limba NEW
Stacey MacleadUnited KingdomXuxue Feng PROPOSAL
Arvin AlbaresCanadaIvan Magalhaes RENEWAL
Leja CaldareraAustraliaAmy Elsner NEW
Darci PoquetteJapanBernardo Dominic QUALIFIED
Greenwood BologniaCanadaAmy Elsner UNQUALIFIED
Leon OldroydFranceIvan Magalhaes UNQUALIFIED
Tony FollerCanadaOnyama Limba QUALIFIED
Kaitlin OstroskyUnited KingdomOnyama Limba NEW
Darci PoquetteSpainBernardo Dominic PROPOSAL
Ashley DoeRussiaElwin Sharvill QUALIFIED
Leja CaldareraAustraliaBernardo Dominic PROPOSAL
Izzy GarufiIndiaIvan Magalhaes PROPOSAL
Leon OldroydCanadaXuxue Feng RENEWAL
Leja CaldareraIndiaOnyama Limba NEGOTIATION
Wickens NestleJapanAsiya Javayant NEGOTIATION
Ivar PaprockiIndiaElwin Sharvill RENEWAL
Francesco ShinkoItalyAmy Elsner QUALIFIED
Chavez BriddickGermanyIvan Magalhaes PROPOSAL
Frozen Columns
Name
Emily Whobrey
Aruna Figeroa
Chavez Briddick
Ricardo Gaucho
Greenwood Bolognia
Murillo Malet
Leja Caldarera
Nicolas Iturbide
Antonio Caudy
Maria Marrier
Mujtaba Nicka
Aika Inouye
Munro Ferencz
Ricardo Gaucho
Juan Wieser
Alejandro Perin
Mayumi Kolmetz
Mujtaba Nicka
Smith Glick
Wickens Nestle
Costa Dilliard
Maisha Rulapaugh
Nicolas Iturbide
Murillo Malet
Costa Dilliard
Misaki Royster
Leon Oldroyd
Misaki Royster
Jones Vocelka
Stacey Maclead
Julie Stenseth
Emily Whobrey
Kaitlin Ostrosky
Silvio Slusarski
Chavez Briddick
Munro Ferencz
Claire Tollner
Leja Caldarera
Julie Stenseth
Julie Stenseth
Ashley Doe
Emily Whobrey
Julie Stenseth
Aika Inouye
Johnson Sergi
Tony Foller
Misaki Royster
Murillo Malet
Jones Vocelka
Octavia Malet
IdCountryDate
1000India2026-06-11
1001Brazil2026-05-22
1002Japan2026-05-24
1003Australia2026-06-08
1004Argentina2026-05-25
1005Spain2026-06-09
1006Japan2026-06-09
1007India2026-06-06
1008Italy2026-05-26
1009Japan2026-05-21
1010India2026-06-08
1011Australia2026-05-31
1012Canada2026-06-08
1013Canada2026-06-12
1014India2026-06-04
1015Australia2026-05-26
1016Germany2026-05-25
1017United Kingdom2026-05-24
1018Canada2026-05-22
1019United Kingdom2026-05-24
1020Russia2026-05-25
1021Russia2026-05-20
1022United Kingdom2026-05-22
1023Italy2026-05-25
1024Spain2026-05-28
1025Italy2026-06-17
1026Spain2026-06-01
1027Canada2026-06-02
1028Brazil2026-05-29
1029Brazil2026-06-10
1030Italy2026-06-14
1031France2026-06-17
1032Germany2026-05-28
1033Russia2026-06-18
1034India2026-06-03
1035India2026-06-14
1036Spain2026-05-21
1037Italy2026-05-30
1038India2026-06-05
1039Argentina2026-06-18
1040France2026-06-06
1041Japan2026-05-28
1042India2026-06-16
1043Japan2026-06-09
1044France2026-06-06
1045Japan2026-05-29
1046Australia2026-06-13
1047Australia2026-06-07
1048India2026-06-13
1049Germany2026-06-01

On-Demand Data

NameIdCountryDate
Costa Dilliard1000Japan2026-06-10
Wickens Nestle1001Spain2026-06-14
Nicolas Iturbide1002India2026-05-28
Morrow Ruta1003Argentina2026-06-11
Izzy Garufi1004India2026-05-27
Aruna Figeroa1005United Kingdom2026-06-03
Johnson Sergi1006Canada2026-06-16
Ricardo Gaucho1007Argentina2026-06-14
Kaitlin Ostrosky1008Japan2026-06-17
Antonio Caudy1009Russia2026-06-14
Johnson Sergi1010Brazil2026-06-14
Emily Whobrey1011Russia2026-06-11
Munro Ferencz1012Argentina2026-06-18
Arvin Albares1013Australia2026-06-13
Darci Poquette1014France2026-05-22
Morrow Ruta1015Spain2026-06-01
Kadeem Flosi1016Canada2026-05-23
James Butt1017Japan2026-05-27
Smith Glick1018Argentina2026-06-18
Aika Inouye1019Italy2026-06-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaItalyIoni Bowcher RENEWAL
Maria MarrierBrazilAmy Elsner NEW
Alejandro PerinGermanyElwin Sharvill UNQUALIFIED
Aruna FigeroaRussiaBernardo Dominic UNQUALIFIED
Aditya KuskoSpainIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaStephen Shaw NEW
Jones VocelkaUnited KingdomElwin Sharvill NEW
Sinclair WaycottAustraliaAsiya Javayant PROPOSAL
Silvio SlusarskiJapanAmy Elsner PROPOSAL
Jeanfrancois VenereUnited KingdomAmy Elsner NEW
David DarakjyArgentinaAsiya Javayant QUALIFIED
Leon OldroydArgentinaStephen Shaw RENEWAL
Jeanfrancois VenereJapanIoni Bowcher PROPOSAL
Adams MorascaGermanyBernardo Dominic QUALIFIED
Chavez BriddickFranceOnyama Limba QUALIFIED
Jennifer AmigonCanadaIvan Magalhaes NEW
Munro FerenczRussiaElwin Sharvill RENEWAL
Stacey MacleadArgentinaXuxue Feng QUALIFIED
Antonio CaudySpainIvan Magalhaes NEGOTIATION
Nicolas IturbideUnited KingdomElwin Sharvill NEW
Adams MorascaArgentinaXuxue Feng RENEWAL
Morrow RutaFranceElwin Sharvill RENEWAL
Ivar PaprockiUnited KingdomAnna Fali UNQUALIFIED
Leja CaldareraItalyBernardo Dominic NEGOTIATION
Faith GillianArgentinaAsiya Javayant NEGOTIATION
Misaki RoysterFranceXuxue Feng NEGOTIATION
Faith GillianFranceXuxue Feng NEW
Deepesh ChuiArgentinaAsiya Javayant NEW
Emily WhobreyBrazilAnna Fali RENEWAL
Claire TollnerSpainAsiya Javayant PROPOSAL
Silvio SlusarskiFranceBernardo Dominic QUALIFIED
Jennifer AmigonUnited KingdomAnna Fali QUALIFIED
Arvin AlbaresFranceOnyama Limba UNQUALIFIED
Aika InouyeCanadaAmy Elsner NEGOTIATION
Francesco ShinkoAustraliaAsiya Javayant RENEWAL
Antonio CaudyUnited KingdomBernardo Dominic PROPOSAL
Maisha RulapaughFranceIvan Magalhaes RENEWAL
Adams MorascaGermanyXuxue Feng NEGOTIATION
Costa DilliardBrazilAsiya Javayant PROPOSAL
Maria MarrierUnited KingdomStephen Shaw 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>