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
Isabel BowleyJapanAmy Elsner RENEWAL
Ivar PaprockiBrazilAmy Elsner NEGOTIATION
Aika InouyeFranceAnna Fali QUALIFIED
Leon OldroydCanadaAsiya Javayant PROPOSAL
Darci PoquetteJapanOnyama Limba PROPOSAL
Adams MorascaJapanElwin Sharvill RENEWAL
Izzy GarufiCanadaStephen Shaw PROPOSAL
Jeanfrancois VenereFranceOnyama Limba PROPOSAL
Silvio SlusarskiItalyIvan Magalhaes UNQUALIFIED
Leon OldroydBrazilBernardo Dominic NEGOTIATION
Leja CaldareraItalyOnyama Limba NEGOTIATION
Antonio CaudyFranceXuxue Feng NEW
Izzy GarufiGermanyIvan Magalhaes UNQUALIFIED
Leon OldroydItalyBernardo Dominic QUALIFIED
James ButtFranceStephen Shaw QUALIFIED
Adams MorascaSpainIoni Bowcher PROPOSAL
Costa DilliardUnited KingdomElwin Sharvill UNQUALIFIED
Smith GlickSpainIvan Magalhaes UNQUALIFIED
Francesco ShinkoItalyBernardo Dominic RENEWAL
Cody SaylorsFranceOnyama Limba NEGOTIATION
Darci PoquetteIndiaXuxue Feng NEW
Maisha RulapaughUnited KingdomIoni Bowcher QUALIFIED
Silvio SlusarskiArgentinaStephen Shaw PROPOSAL
Arvin AlbaresAustraliaAmy Elsner UNQUALIFIED
Alejandro PerinAustraliaIoni Bowcher QUALIFIED
Silvio SlusarskiUnited KingdomXuxue Feng QUALIFIED
Sinclair WaycottUnited KingdomIvan Magalhaes QUALIFIED
Maria MarrierFranceStephen Shaw RENEWAL
Deepesh ChuiBrazilBernardo Dominic NEW
Ivar PaprockiItalyBernardo Dominic NEW
Ivar PaprockiSpainAmy Elsner NEGOTIATION
Leja CaldareraJapanOnyama Limba QUALIFIED
Aruna FigeroaCanadaAnna Fali NEGOTIATION
Stacey MacleadAustraliaAnna Fali PROPOSAL
Julie StensethAustraliaBernardo Dominic NEGOTIATION
Arvin AlbaresIndiaOnyama Limba UNQUALIFIED
Jefferson SchemmerAustraliaStephen Shaw QUALIFIED
David DarakjyRussiaIvan Magalhaes NEGOTIATION
Clifford RimIndiaStephen Shaw NEGOTIATION
Alejandro PerinGermanyAmy Elsner UNQUALIFIED
Aruna FigeroaAustraliaIoni Bowcher UNQUALIFIED
Jefferson SchemmerItalyStephen Shaw RENEWAL
Leon OldroydFranceOnyama Limba RENEWAL
Maisha RulapaughArgentinaAsiya Javayant PROPOSAL
Cody SaylorsGermanyIvan Magalhaes UNQUALIFIED
Rodrigues CampainRussiaAnna Fali NEGOTIATION
Deepesh ChuiJapanAmy Elsner NEW
Wickens NestleJapanStephen Shaw NEW
Aditya KuskoFranceIvan Magalhaes QUALIFIED
Maisha RulapaughGermanyBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
James ButtGermanyElwin Sharvill NEGOTIATION
Sinclair WaycottAustraliaAsiya Javayant UNQUALIFIED
Aditya KuskoAustraliaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiBrazilBernardo Dominic UNQUALIFIED
Murillo MaletCanadaIvan Magalhaes RENEWAL
James ButtIndiaXuxue Feng RENEWAL
Jefferson SchemmerFranceIoni Bowcher UNQUALIFIED
Morrow RutaRussiaAnna Fali NEGOTIATION
Ivar PaprockiRussiaIoni Bowcher QUALIFIED
Faith GillianJapanAmy Elsner NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiSpain2026-04-26Feiner Bros NEW16Ivan Magalhaes
1001Ashley DoeJapan2026-05-03Morlong Associates NEGOTIATION37Elwin Sharvill
1002Nicolas IturbideUnited Kingdom2026-04-12Commercial Press RENEWAL46Onyama Limba
1003Morrow RutaBrazil2026-05-09Buckley Miller Wright NEGOTIATION37Elwin Sharvill
1004Octavia MaletArgentina2026-04-26King, Christopher A Esq UNQUALIFIED88Bernardo Dominic
1005Faith GillianFrance2026-04-22Rangoni Of Florence UNQUALIFIED62Xuxue Feng
1006Adams MorascaArgentina2026-04-13Feltz Printing Service UNQUALIFIED58Xuxue Feng
1007Nicolas IturbideGermany2026-05-01Feiner Bros UNQUALIFIED57Bernardo Dominic
1008Kadeem FlosiItaly2026-04-13Rangoni Of Florence UNQUALIFIED10Stephen Shaw
1009Isabel BowleyItaly2026-04-17Chapman, Ross E Esq NEGOTIATION0Bernardo Dominic
1010Izzy GarufiAustralia2026-04-24Rangoni Of Florence QUALIFIED33Ioni Bowcher
1011Clifford RimRussia2026-05-03Printing Dimensions QUALIFIED82Xuxue Feng
1012Kadeem FlosiJapan2026-04-16Rangoni Of Florence NEW19Xuxue Feng
1013Deepesh ChuiFrance2026-04-15King, Christopher A Esq UNQUALIFIED22Stephen Shaw
1014Arvin AlbaresArgentina2026-04-15Chemel, James L Cpa PROPOSAL86Bernardo Dominic
1015Munro FerenczCanada2026-05-06Morlong Associates QUALIFIED93Anna Fali
1016Mujtaba NickaGermany2026-04-14King, Christopher A Esq NEW91Onyama Limba
1017Juan WieserJapan2026-04-23Dorl, James J Esq QUALIFIED23Onyama Limba
1018Tony FollerRussia2026-04-19Printing Dimensions QUALIFIED2Stephen Shaw
1019Octavia MaletFrance2026-04-13Rangoni Of Florence NEGOTIATION54Anna Fali
1020Alejandro PerinCanada2026-04-14Buckley Miller Wright RENEWAL14Xuxue Feng
1021Antonio CaudyBrazil2026-04-26King, Christopher A Esq PROPOSAL35Amy Elsner
1022Clifford RimCanada2026-04-13Feiner Bros PROPOSAL26Elwin Sharvill
1023Aditya KuskoCanada2026-04-21Dorl, James J Esq NEGOTIATION73Onyama Limba
1024Julie StensethUnited Kingdom2026-04-22Feiner Bros NEGOTIATION71Amy Elsner
1025Leon OldroydBrazil2026-05-09Rangoni Of Florence NEGOTIATION72Amy Elsner
1026David DarakjyCanada2026-04-18Commercial Press NEGOTIATION11Asiya Javayant
1027Jeanfrancois VenereJapan2026-05-09Truhlar And Truhlar Attys PROPOSAL0Ivan Magalhaes
1028Munro FerenczJapan2026-04-14Printing Dimensions UNQUALIFIED58Amy Elsner
1029Claire TollnerBrazil2026-04-15Printing Dimensions UNQUALIFIED73Xuxue Feng
1030Jennifer AmigonSpain2026-04-18Truhlar And Truhlar Attys RENEWAL88Elwin Sharvill
1031Kaitlin OstroskySpain2026-05-09Chapman, Ross E Esq NEW15Ioni Bowcher
1032Faith GillianGermany2026-05-04Feiner Bros NEGOTIATION99Xuxue Feng
1033Morrow RutaItaly2026-04-24Chanay, Jeffrey A Esq NEW17Anna Fali
1034Jennifer AmigonGermany2026-05-06Morlong Associates NEGOTIATION47Ivan Magalhaes
1035Jeanfrancois VenereCanada2026-05-04Rousseaux, Michael Esq UNQUALIFIED63Ioni Bowcher
1036Francesco ShinkoSpain2026-05-06Buckley Miller Wright PROPOSAL9Ivan Magalhaes
1037Faith GillianCanada2026-05-09Chapman, Ross E Esq UNQUALIFIED19Anna Fali
1038Jeanfrancois VenereCanada2026-04-20Commercial Press NEW21Amy Elsner
1039Stacey MacleadItaly2026-04-11King, Christopher A Esq NEGOTIATION72Onyama Limba
1040Izzy GarufiFrance2026-05-01King, Christopher A Esq NEGOTIATION66Ioni Bowcher
1041Greenwood BologniaCanada2026-04-12Chemel, James L Cpa UNQUALIFIED71Asiya Javayant
1042Aruna FigeroaArgentina2026-04-16Buckley Miller Wright RENEWAL5Anna Fali
1043Arvin AlbaresAustralia2026-04-25Printing Dimensions UNQUALIFIED48Stephen Shaw
1044Johnson SergiCanada2026-04-17Chanay, Jeffrey A Esq PROPOSAL54Anna Fali
1045Aruna FigeroaUnited Kingdom2026-04-16Truhlar And Truhlar Attys NEW75Amy Elsner
1046Arvin AlbaresIndia2026-04-28Truhlar And Truhlar Attys PROPOSAL35Amy Elsner
1047Silvio SlusarskiIndia2026-04-22Feiner Bros NEW97Ioni Bowcher
1048Kaitlin OstroskyBrazil2026-04-13Rangoni Of Florence RENEWAL73Stephen Shaw
1049Izzy GarufiCanada2026-04-23Feiner Bros PROPOSAL48Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterUnited KingdomOnyama Limba NEW
Adams MorascaIndiaIoni Bowcher RENEWAL
Murillo MaletBrazilXuxue Feng RENEWAL
Deepesh ChuiRussiaAmy Elsner NEW
Ivar PaprockiGermanyAsiya Javayant QUALIFIED
Mayumi KolmetzCanadaAsiya Javayant QUALIFIED
Clifford RimArgentinaBernardo Dominic UNQUALIFIED
Antonio CaudyAustraliaBernardo Dominic RENEWAL
Chavez BriddickIndiaXuxue Feng PROPOSAL
Izzy GarufiUnited KingdomXuxue Feng NEGOTIATION
Morrow RutaRussiaOnyama Limba QUALIFIED
Morrow RutaItalyBernardo Dominic PROPOSAL
James ButtFranceIvan Magalhaes RENEWAL
Aika InouyeRussiaElwin Sharvill NEGOTIATION
Jefferson SchemmerArgentinaStephen Shaw RENEWAL
Silvio SlusarskiFranceOnyama Limba PROPOSAL
Munro FerenczSpainElwin Sharvill QUALIFIED
Izzy GarufiSpainElwin Sharvill NEW
Greenwood BologniaAustraliaIvan Magalhaes UNQUALIFIED
Nicolas IturbideBrazilXuxue Feng PROPOSAL
Aditya KuskoBrazilStephen Shaw NEGOTIATION
Emily WhobreyItalyElwin Sharvill UNQUALIFIED
Nicolas IturbideFranceBernardo Dominic NEGOTIATION
Octavia MaletIndiaBernardo Dominic NEW
Tony FollerFranceStephen Shaw NEW
Arvin AlbaresItalyAnna Fali NEGOTIATION
Juan WieserUnited KingdomElwin Sharvill NEW
Ivar PaprockiArgentinaOnyama Limba RENEWAL
Cody SaylorsArgentinaStephen Shaw UNQUALIFIED
Ricardo GauchoBrazilIvan Magalhaes QUALIFIED
Leon OldroydCanadaAnna Fali RENEWAL
Faith GillianArgentinaAsiya Javayant NEW
Aika InouyeFranceStephen Shaw RENEWAL
Cody SaylorsItalyIoni Bowcher RENEWAL
Jones VocelkaItalyStephen Shaw NEGOTIATION
Adams MorascaFranceElwin Sharvill QUALIFIED
Kaitlin OstroskyJapanBernardo Dominic UNQUALIFIED
Kaitlin OstroskyFranceElwin Sharvill UNQUALIFIED
Leon OldroydArgentinaAsiya Javayant NEW
Clifford RimBrazilIvan Magalhaes UNQUALIFIED
Julie StensethFranceAsiya Javayant NEW
David DarakjyItalyOnyama Limba NEW
Jennifer AmigonSpainBernardo Dominic NEGOTIATION
Ivar PaprockiSpainBernardo Dominic NEW
Jennifer AmigonCanadaStephen Shaw NEW
Ashley DoeItalyIoni Bowcher NEW
Leon OldroydGermanyOnyama Limba NEGOTIATION
Francesco ShinkoArgentinaAnna Fali RENEWAL
Alejandro PerinBrazilIvan Magalhaes RENEWAL
Antonio CaudyGermanyIvan Magalhaes RENEWAL
Frozen Columns
Name
Ivar Paprocki
Smith Glick
Mayumi Kolmetz
Aditya Kusko
Francesco Shinko
Kadeem Flosi
Cody Saylors
Nicolas Iturbide
Ashley Doe
Munro Ferencz
Kaitlin Ostrosky
Aika Inouye
Morrow Ruta
Ricardo Gaucho
Julie Stenseth
Cody Saylors
Nicolas Iturbide
Ashley Doe
Emily Whobrey
Costa Dilliard
Smith Glick
Leon Oldroyd
Johnson Sergi
James Butt
Johnson Sergi
Leon Oldroyd
James Butt
Arvin Albares
Aruna Figeroa
James Butt
Francesco Shinko
Greenwood Bolognia
Jones Vocelka
David Darakjy
Ricardo Gaucho
Greenwood Bolognia
Aditya Kusko
Jones Vocelka
Aika Inouye
Kadeem Flosi
Maisha Rulapaugh
Izzy Garufi
Nicolas Iturbide
Alejandro Perin
Isabel Bowley
Octavia Malet
Emily Whobrey
Leon Oldroyd
Costa Dilliard
Izzy Garufi
IdCountryDate
1000Japan2026-05-03
1001Spain2026-04-19
1002Italy2026-04-16
1003Spain2026-05-07
1004Spain2026-04-18
1005Spain2026-04-21
1006Spain2026-04-22
1007Australia2026-04-29
1008Canada2026-04-28
1009Argentina2026-05-01
1010Canada2026-04-28
1011Japan2026-05-08
1012Japan2026-04-26
1013United Kingdom2026-04-15
1014United Kingdom2026-04-26
1015Spain2026-04-11
1016Brazil2026-04-12
1017Australia2026-04-21
1018Canada2026-04-23
1019France2026-04-10
1020Spain2026-04-23
1021Russia2026-05-06
1022India2026-04-30
1023France2026-05-06
1024Italy2026-05-07
1025United Kingdom2026-04-21
1026Russia2026-04-16
1027United Kingdom2026-04-15
1028Brazil2026-04-21
1029Germany2026-05-05
1030Argentina2026-04-28
1031United Kingdom2026-04-26
1032Russia2026-04-25
1033Argentina2026-05-05
1034Spain2026-05-02
1035Brazil2026-05-05
1036Japan2026-04-13
1037Japan2026-04-18
1038India2026-05-09
1039Brazil2026-05-01
1040United Kingdom2026-04-24
1041India2026-04-29
1042Italy2026-04-29
1043United Kingdom2026-05-08
1044Russia2026-04-12
1045Germany2026-04-25
1046Brazil2026-05-05
1047United Kingdom2026-05-09
1048Germany2026-04-25
1049Canada2026-05-05

On-Demand Data

NameIdCountryDate
Misaki Royster1000Japan2026-04-14
Munro Ferencz1001Australia2026-05-06
Darci Poquette1002Brazil2026-04-12
Mayumi Kolmetz1003Japan2026-04-12
Rodrigues Campain1004India2026-04-15
Cody Saylors1005Canada2026-04-26
Darci Poquette1006Italy2026-04-12
Octavia Malet1007Germany2026-04-12
Aika Inouye1008Japan2026-04-12
Stacey Maclead1009Australia2026-05-01
Clifford Rim1010Brazil2026-05-02
Ivar Paprocki1011United Kingdom2026-04-23
Johnson Sergi1012India2026-04-26
Isabel Bowley1013Brazil2026-04-28
Johnson Sergi1014United Kingdom2026-04-27
Faith Gillian1015Australia2026-04-12
Cody Saylors1016Brazil2026-04-28
Aika Inouye1017Argentina2026-04-15
Mujtaba Nicka1018Russia2026-04-29
Maria Marrier1019Spain2026-04-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteBrazilAnna Fali NEW
Darci PoquetteFranceAmy Elsner UNQUALIFIED
Darci PoquetteItalyXuxue Feng PROPOSAL
David DarakjyAustraliaStephen Shaw RENEWAL
Darci PoquetteSpainElwin Sharvill NEW
Aruna FigeroaFranceBernardo Dominic NEW
Alejandro PerinGermanyElwin Sharvill RENEWAL
Clifford RimJapanIoni Bowcher UNQUALIFIED
David DarakjyRussiaAsiya Javayant QUALIFIED
Faith GillianBrazilStephen Shaw PROPOSAL
Octavia MaletJapanIoni Bowcher UNQUALIFIED
Misaki RoysterBrazilIoni Bowcher PROPOSAL
Munro FerenczAustraliaAsiya Javayant NEGOTIATION
Mujtaba NickaFranceBernardo Dominic RENEWAL
Izzy GarufiRussiaAmy Elsner NEW
James ButtRussiaStephen Shaw QUALIFIED
Morrow RutaSpainElwin Sharvill QUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant NEW
Greenwood BologniaCanadaElwin Sharvill UNQUALIFIED
Wickens NestleJapanIvan Magalhaes QUALIFIED
Deepesh ChuiRussiaAsiya Javayant NEW
Murillo MaletIndiaAnna Fali PROPOSAL
Faith GillianJapanXuxue Feng RENEWAL
Greenwood BologniaArgentinaXuxue Feng NEW
Isabel BowleyUnited KingdomXuxue Feng RENEWAL
Octavia MaletCanadaXuxue Feng QUALIFIED
Ivar PaprockiUnited KingdomXuxue Feng NEGOTIATION
Ivar PaprockiFranceXuxue Feng RENEWAL
Adams MorascaAustraliaXuxue Feng NEGOTIATION
Sinclair WaycottAustraliaBernardo Dominic QUALIFIED
Aditya KuskoIndiaXuxue Feng UNQUALIFIED
Rodrigues CampainJapanStephen Shaw RENEWAL
Deepesh ChuiIndiaOnyama Limba QUALIFIED
Claire TollnerBrazilXuxue Feng QUALIFIED
Isabel BowleyRussiaAsiya Javayant UNQUALIFIED
Aika InouyeCanadaOnyama Limba PROPOSAL
Mayumi KolmetzIndiaXuxue Feng QUALIFIED
Maria MarrierFranceAsiya Javayant PROPOSAL
Ricardo GauchoArgentinaAsiya Javayant UNQUALIFIED
Salvatore StockhamGermanyAmy Elsner QUALIFIED

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