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
Maria MarrierRussiaElwin Sharvill QUALIFIED
Mayumi KolmetzRussiaBernardo Dominic QUALIFIED
Ivar PaprockiFranceAnna Fali PROPOSAL
Alejandro PerinIndiaOnyama Limba UNQUALIFIED
Ashley DoeCanadaAnna Fali UNQUALIFIED
Maisha RulapaughIndiaAnna Fali NEGOTIATION
Aika InouyeGermanyAsiya Javayant RENEWAL
Smith GlickArgentinaOnyama Limba RENEWAL
Johnson SergiRussiaOnyama Limba PROPOSAL
Chavez BriddickRussiaAmy Elsner QUALIFIED
Mujtaba NickaCanadaIvan Magalhaes RENEWAL
Rodrigues CampainCanadaAsiya Javayant NEW
Smith GlickIndiaBernardo Dominic PROPOSAL
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Aika InouyeCanadaElwin Sharvill NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw NEW
Salvatore StockhamArgentinaAmy Elsner UNQUALIFIED
Adams MorascaArgentinaIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilXuxue Feng PROPOSAL
Maria MarrierIndiaAmy Elsner PROPOSAL
Wickens NestleAustraliaElwin Sharvill QUALIFIED
Smith GlickSpainStephen Shaw PROPOSAL
Francesco ShinkoRussiaOnyama Limba NEGOTIATION
Kaitlin OstroskyIndiaAnna Fali NEW
Julie StensethItalyBernardo Dominic NEGOTIATION
Rodrigues CampainJapanElwin Sharvill NEW
Deepesh ChuiItalyElwin Sharvill NEW
Aruna FigeroaBrazilAmy Elsner QUALIFIED
Octavia MaletRussiaIoni Bowcher NEW
Greenwood BologniaFranceAnna Fali NEGOTIATION
Deepesh ChuiUnited KingdomXuxue Feng QUALIFIED
Antonio CaudyRussiaAmy Elsner NEGOTIATION
Silvio SlusarskiSpainXuxue Feng QUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher NEW
Jennifer AmigonGermanyElwin Sharvill UNQUALIFIED
Cody SaylorsFranceAmy Elsner PROPOSAL
Kaitlin OstroskyRussiaAmy Elsner NEW
Ivar PaprockiAustraliaStephen Shaw PROPOSAL
Ivar PaprockiAustraliaIvan Magalhaes NEW
Antonio CaudyFranceIoni Bowcher PROPOSAL
Deepesh ChuiSpainAnna Fali PROPOSAL
Izzy GarufiAustraliaStephen Shaw NEW
Adams MorascaItalyIvan Magalhaes RENEWAL
Costa DilliardBrazilIvan Magalhaes PROPOSAL
Antonio CaudyRussiaAsiya Javayant QUALIFIED
James ButtBrazilAmy Elsner RENEWAL
Maria MarrierSpainBernardo Dominic NEGOTIATION
Tony FollerRussiaAnna Fali NEGOTIATION
Wickens NestleAustraliaXuxue Feng NEGOTIATION
Mayumi KolmetzAustraliaStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Adams MorascaIndiaIvan Magalhaes QUALIFIED
Smith GlickSpainXuxue Feng PROPOSAL
Kadeem FlosiSpainAmy Elsner QUALIFIED
Arvin AlbaresRussiaIoni Bowcher RENEWAL
Adams MorascaIndiaIoni Bowcher NEW
Kadeem FlosiAustraliaOnyama Limba UNQUALIFIED
Silvio SlusarskiFranceAmy Elsner UNQUALIFIED
Nicolas IturbideUnited KingdomXuxue Feng PROPOSAL
Aika InouyeRussiaElwin Sharvill PROPOSAL
Adams MorascaArgentinaIvan Magalhaes QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierItaly2025-08-03Buckley Miller Wright UNQUALIFIED43Elwin Sharvill
1001Antonio CaudyArgentina2025-07-26Dorl, James J Esq RENEWAL62Elwin Sharvill
1002Claire TollnerUnited Kingdom2025-07-15Commercial Press UNQUALIFIED77Anna Fali
1003Aditya KuskoRussia2025-07-16Chemel, James L Cpa RENEWAL0Bernardo Dominic
1004Faith GillianRussia2025-07-25Morlong Associates QUALIFIED75Bernardo Dominic
1005Maisha RulapaughCanada2025-07-21Feltz Printing Service QUALIFIED83Anna Fali
1006Kadeem FlosiArgentina2025-07-24Morlong Associates NEW77Bernardo Dominic
1007Rodrigues CampainSpain2025-07-23Rangoni Of Florence UNQUALIFIED30Ioni Bowcher
1008Jones VocelkaItaly2025-08-01King, Christopher A Esq PROPOSAL86Onyama Limba
1009Aika InouyeIndia2025-07-08Feiner Bros NEW98Ivan Magalhaes
1010Johnson SergiRussia2025-07-12Benton, John B Jr PROPOSAL33Elwin Sharvill
1011Salvatore StockhamItaly2025-07-23Benton, John B Jr NEW88Onyama Limba
1012Chavez BriddickUnited Kingdom2025-07-16Morlong Associates UNQUALIFIED44Asiya Javayant
1013Wickens NestleSpain2025-07-05Commercial Press QUALIFIED43Asiya Javayant
1014Salvatore StockhamFrance2025-07-19Chanay, Jeffrey A Esq RENEWAL73Elwin Sharvill
1015Silvio SlusarskiGermany2025-08-03Truhlar And Truhlar Attys PROPOSAL69Bernardo Dominic
1016David DarakjyIndia2025-07-09Dorl, James J Esq PROPOSAL84Asiya Javayant
1017Emily WhobreyFrance2025-07-25Printing Dimensions QUALIFIED38Asiya Javayant
1018Ivar PaprockiAustralia2025-07-18Morlong Associates QUALIFIED87Elwin Sharvill
1019James ButtIndia2025-07-06Rousseaux, Michael Esq QUALIFIED90Onyama Limba
1020Faith GillianRussia2025-07-14Chemel, James L Cpa UNQUALIFIED21Anna Fali
1021Greenwood BologniaIndia2025-07-05Feltz Printing Service NEGOTIATION36Ioni Bowcher
1022Francesco ShinkoIndia2025-07-22Benton, John B Jr NEW95Xuxue Feng
1023Cody SaylorsJapan2025-07-25Dorl, James J Esq QUALIFIED61Stephen Shaw
1024Jennifer AmigonFrance2025-07-19Dorl, James J Esq NEW91Anna Fali
1025Arvin AlbaresBrazil2025-07-13Feltz Printing Service UNQUALIFIED42Xuxue Feng
1026James ButtUnited Kingdom2025-07-22Chemel, James L Cpa UNQUALIFIED97Stephen Shaw
1027Arvin AlbaresJapan2025-07-11Benton, John B Jr NEW38Elwin Sharvill
1028Chavez BriddickJapan2025-07-17Chapman, Ross E Esq QUALIFIED78Onyama Limba
1029Jones VocelkaJapan2025-07-29Chemel, James L Cpa QUALIFIED76Ioni Bowcher
1030Jones VocelkaGermany2025-08-01Rangoni Of Florence NEGOTIATION93Elwin Sharvill
1031James ButtRussia2025-07-15Morlong Associates UNQUALIFIED48Asiya Javayant
1032Chavez BriddickSpain2025-08-02King, Christopher A Esq NEGOTIATION81Ivan Magalhaes
1033Morrow RutaUnited Kingdom2025-07-16Feiner Bros NEGOTIATION90Ioni Bowcher
1034Octavia MaletJapan2025-07-14Dorl, James J Esq NEGOTIATION39Xuxue Feng
1035Claire TollnerArgentina2025-07-29Rousseaux, Michael Esq NEGOTIATION40Anna Fali
1036Clifford RimBrazil2025-07-30Benton, John B Jr UNQUALIFIED22Ioni Bowcher
1037Leja CaldareraBrazil2025-08-02Rousseaux, Michael Esq RENEWAL45Amy Elsner
1038Antonio CaudyBrazil2025-07-12Chemel, James L Cpa QUALIFIED2Anna Fali
1039David DarakjyFrance2025-08-02Dorl, James J Esq NEW43Bernardo Dominic
1040Aruna FigeroaIndia2025-07-13Feiner Bros QUALIFIED88Xuxue Feng
1041Mayumi KolmetzAustralia2025-07-29Benton, John B Jr NEW71Stephen Shaw
1042David DarakjyAustralia2025-07-23Commercial Press UNQUALIFIED55Bernardo Dominic
1043Jeanfrancois VenereBrazil2025-07-14Feiner Bros NEW70Asiya Javayant
1044Clifford RimCanada2025-07-23Commercial Press QUALIFIED96Amy Elsner
1045Clifford RimIndia2025-07-10Dorl, James J Esq QUALIFIED26Onyama Limba
1046Antonio CaudyGermany2025-07-25Truhlar And Truhlar Attys QUALIFIED8Ioni Bowcher
1047Kadeem FlosiAustralia2025-07-06Truhlar And Truhlar Attys RENEWAL23Bernardo Dominic
1048Smith GlickIndia2025-07-11Rangoni Of Florence NEGOTIATION0Anna Fali
1049Mujtaba NickaJapan2025-07-12Rousseaux, Michael Esq UNQUALIFIED57Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Leja CaldareraItalyIvan Magalhaes QUALIFIED
Jennifer AmigonArgentinaOnyama Limba UNQUALIFIED
Adams MorascaBrazilStephen Shaw NEGOTIATION
Ivar PaprockiJapanIoni Bowcher NEGOTIATION
Izzy GarufiFranceBernardo Dominic NEGOTIATION
Julie StensethArgentinaStephen Shaw NEW
Claire TollnerSpainAsiya Javayant NEGOTIATION
Tony FollerSpainElwin Sharvill RENEWAL
Aika InouyeUnited KingdomStephen Shaw QUALIFIED
Tony FollerJapanIoni Bowcher NEW
David DarakjyIndiaOnyama Limba PROPOSAL
Jones VocelkaItalyElwin Sharvill QUALIFIED
Aditya KuskoArgentinaAsiya Javayant UNQUALIFIED
Emily WhobreyUnited KingdomXuxue Feng QUALIFIED
Faith GillianJapanOnyama Limba QUALIFIED
Cody SaylorsBrazilIvan Magalhaes PROPOSAL
Claire TollnerItalyIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereItalyIoni Bowcher RENEWAL
Faith GillianRussiaStephen Shaw NEGOTIATION
Salvatore StockhamCanadaXuxue Feng PROPOSAL
Morrow RutaFranceXuxue Feng NEW
Munro FerenczIndiaStephen Shaw NEGOTIATION
Jeanfrancois VenereJapanAsiya Javayant NEW
Mayumi KolmetzBrazilBernardo Dominic RENEWAL
Octavia MaletBrazilIvan Magalhaes UNQUALIFIED
Octavia MaletFranceAsiya Javayant NEW
Izzy GarufiJapanElwin Sharvill RENEWAL
Darci PoquetteArgentinaIoni Bowcher NEW
Claire TollnerBrazilIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereGermanyAsiya Javayant NEW
Salvatore StockhamSpainIoni Bowcher PROPOSAL
Faith GillianItalyIvan Magalhaes QUALIFIED
Emily WhobreyGermanyXuxue Feng PROPOSAL
Ricardo GauchoUnited KingdomAmy Elsner QUALIFIED
Izzy GarufiItalyStephen Shaw UNQUALIFIED
Stacey MacleadArgentinaAmy Elsner QUALIFIED
David DarakjyFranceIvan Magalhaes RENEWAL
Munro FerenczAustraliaBernardo Dominic UNQUALIFIED
Mujtaba NickaGermanyIoni Bowcher PROPOSAL
Aditya KuskoCanadaElwin Sharvill PROPOSAL
Octavia MaletJapanElwin Sharvill UNQUALIFIED
Antonio CaudyRussiaOnyama Limba QUALIFIED
Juan WieserUnited KingdomIvan Magalhaes UNQUALIFIED
Deepesh ChuiJapanIoni Bowcher RENEWAL
Misaki RoysterArgentinaAsiya Javayant NEGOTIATION
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Nicolas IturbideJapanOnyama Limba RENEWAL
Juan WieserJapanAnna Fali NEW
David DarakjyFranceBernardo Dominic PROPOSAL
Salvatore StockhamBrazilAsiya Javayant NEW
Frozen Columns
Name
Maisha Rulapaugh
Wickens Nestle
Isabel Bowley
James Butt
Emily Whobrey
Isabel Bowley
Sinclair Waycott
Leja Caldarera
Munro Ferencz
Emily Whobrey
Johnson Sergi
Murillo Malet
Emily Whobrey
Leja Caldarera
Darci Poquette
Darci Poquette
Juan Wieser
Kadeem Flosi
Leja Caldarera
Misaki Royster
Ivar Paprocki
Clifford Rim
Ashley Doe
Jones Vocelka
Jones Vocelka
Nicolas Iturbide
Aruna Figeroa
Murillo Malet
Tony Foller
Jones Vocelka
Jefferson Schemmer
Ricardo Gaucho
Francesco Shinko
Arvin Albares
Deepesh Chui
Sinclair Waycott
Darci Poquette
Sinclair Waycott
Chavez Briddick
Wickens Nestle
Maria Marrier
Aditya Kusko
Aika Inouye
Maisha Rulapaugh
Chavez Briddick
Cody Saylors
Wickens Nestle
Faith Gillian
Ivar Paprocki
Francesco Shinko
IdCountryDate
1000Italy2025-07-16
1001France2025-07-16
1002Italy2025-07-25
1003Japan2025-08-01
1004Brazil2025-07-31
1005France2025-08-02
1006Canada2025-07-17
1007Australia2025-07-17
1008Spain2025-07-12
1009Brazil2025-07-09
1010Germany2025-07-14
1011Australia2025-07-27
1012Brazil2025-07-12
1013Canada2025-07-13
1014Australia2025-07-13
1015Spain2025-07-22
1016India2025-07-17
1017India2025-07-29
1018Russia2025-07-08
1019Italy2025-07-17
1020Russia2025-07-21
1021Russia2025-08-03
1022Brazil2025-07-20
1023Brazil2025-07-19
1024Brazil2025-07-18
1025Argentina2025-07-06
1026Australia2025-07-06
1027Australia2025-07-26
1028Spain2025-07-26
1029Argentina2025-07-30
1030France2025-07-11
1031Brazil2025-07-26
1032United Kingdom2025-07-28
1033France2025-07-11
1034Italy2025-08-03
1035Russia2025-07-27
1036Canada2025-07-07
1037France2025-07-19
1038Argentina2025-07-05
1039Argentina2025-07-18
1040Germany2025-07-18
1041Japan2025-07-16
1042Argentina2025-07-26
1043Brazil2025-07-15
1044Russia2025-07-08
1045Canada2025-08-03
1046United Kingdom2025-07-19
1047Italy2025-07-14
1048Brazil2025-07-19
1049Germany2025-08-03

On-Demand Data

NameIdCountryDate
Murillo Malet1000Spain2025-07-27
Antonio Caudy1001Brazil2025-07-20
Cody Saylors1002Australia2025-07-10
Kaitlin Ostrosky1003Australia2025-07-20
Aika Inouye1004Italy2025-07-21
Jennifer Amigon1005United Kingdom2025-07-20
Mujtaba Nicka1006Australia2025-07-23
Leja Caldarera1007Italy2025-07-07
Ivar Paprocki1008Australia2025-07-24
Aika Inouye1009France2025-07-09
Alejandro Perin1010Australia2025-07-31
Greenwood Bolognia1011Australia2025-07-10
Aika Inouye1012Spain2025-07-08
Sinclair Waycott1013Germany2025-08-03
Adams Morasca1014Australia2025-07-27
Chavez Briddick1015Germany2025-07-18
Leja Caldarera1016Spain2025-07-06
Nicolas Iturbide1017Italy2025-07-11
Murillo Malet1018France2025-07-22
David Darakjy1019Japan2025-07-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottCanadaBernardo Dominic UNQUALIFIED
Murillo MaletCanadaAsiya Javayant PROPOSAL
Isabel BowleyArgentinaIvan Magalhaes QUALIFIED
David DarakjyCanadaIoni Bowcher UNQUALIFIED
Salvatore StockhamAustraliaIvan Magalhaes RENEWAL
Jeanfrancois VenereIndiaElwin Sharvill NEW
Costa DilliardSpainAsiya Javayant UNQUALIFIED
Francesco ShinkoGermanyXuxue Feng QUALIFIED
Costa DilliardJapanIvan Magalhaes RENEWAL
Leja CaldareraItalyIvan Magalhaes RENEWAL
Johnson SergiUnited KingdomOnyama Limba RENEWAL
Jones VocelkaBrazilElwin Sharvill QUALIFIED
Sinclair WaycottUnited KingdomBernardo Dominic NEW
Sinclair WaycottFranceIoni Bowcher RENEWAL
Aika InouyeSpainIvan Magalhaes PROPOSAL
Faith GillianItalyBernardo Dominic UNQUALIFIED
Aditya KuskoAustraliaAmy Elsner NEGOTIATION
Rodrigues CampainBrazilIvan Magalhaes PROPOSAL
James ButtSpainStephen Shaw RENEWAL
Leon OldroydItalyAsiya Javayant PROPOSAL
Deepesh ChuiIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzAustraliaAsiya Javayant NEW
Adams MorascaGermanyAmy Elsner RENEWAL
Leja CaldareraSpainAsiya Javayant RENEWAL
Francesco ShinkoBrazilAsiya Javayant NEW
Ivar PaprockiAustraliaBernardo Dominic QUALIFIED
Mayumi KolmetzAustraliaIoni Bowcher RENEWAL
Maisha RulapaughUnited KingdomIoni Bowcher RENEWAL
Juan WieserArgentinaIvan Magalhaes QUALIFIED
Juan WieserSpainStephen Shaw NEW
James ButtIndiaElwin Sharvill NEW
Rodrigues CampainJapanIoni Bowcher PROPOSAL
Ivar PaprockiItalyAnna Fali QUALIFIED
Aditya KuskoBrazilStephen Shaw NEW
Stacey MacleadSpainOnyama Limba PROPOSAL
Johnson SergiIndiaIvan Magalhaes UNQUALIFIED
Maria MarrierAustraliaIvan Magalhaes UNQUALIFIED
Faith GillianJapanAnna Fali UNQUALIFIED
Jefferson SchemmerSpainBernardo Dominic UNQUALIFIED
Isabel BowleyItalyAsiya Javayant PROPOSAL

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