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
Aditya KuskoCanadaBernardo Dominic NEGOTIATION
Jeanfrancois VenereItalyElwin Sharvill UNQUALIFIED
Octavia MaletItalyBernardo Dominic NEGOTIATION
Julie StensethJapanXuxue Feng UNQUALIFIED
Mujtaba NickaUnited KingdomStephen Shaw QUALIFIED
Aditya KuskoCanadaOnyama Limba PROPOSAL
Faith GillianCanadaBernardo Dominic PROPOSAL
Kadeem FlosiUnited KingdomAnna Fali NEGOTIATION
Kadeem FlosiItalyElwin Sharvill NEGOTIATION
Antonio CaudyUnited KingdomBernardo Dominic PROPOSAL
Cody SaylorsArgentinaBernardo Dominic QUALIFIED
Murillo MaletCanadaIvan Magalhaes PROPOSAL
Arvin AlbaresCanadaAnna Fali NEGOTIATION
Rodrigues CampainRussiaAmy Elsner RENEWAL
Wickens NestleBrazilStephen Shaw RENEWAL
David DarakjyIndiaIoni Bowcher RENEWAL
Claire TollnerGermanyIvan Magalhaes NEGOTIATION
Adams MorascaSpainIoni Bowcher NEW
Aruna FigeroaSpainIoni Bowcher NEW
Sinclair WaycottFranceStephen Shaw UNQUALIFIED
Aruna FigeroaSpainIoni Bowcher PROPOSAL
Mayumi KolmetzRussiaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereAustraliaOnyama Limba RENEWAL
Maisha RulapaughJapanAnna Fali NEGOTIATION
Jones VocelkaBrazilAsiya Javayant NEW
Stacey MacleadIndiaAmy Elsner RENEWAL
Greenwood BologniaBrazilElwin Sharvill NEGOTIATION
Sinclair WaycottAustraliaOnyama Limba UNQUALIFIED
Maria MarrierItalyAmy Elsner NEGOTIATION
Faith GillianRussiaAsiya Javayant PROPOSAL
Darci PoquetteIndiaElwin Sharvill NEW
Isabel BowleyIndiaAnna Fali NEW
Cody SaylorsJapanOnyama Limba QUALIFIED
Antonio CaudyJapanBernardo Dominic NEW
Chavez BriddickGermanyBernardo Dominic UNQUALIFIED
Claire TollnerRussiaAmy Elsner PROPOSAL
Mujtaba NickaSpainElwin Sharvill NEW
Deepesh ChuiUnited KingdomAsiya Javayant PROPOSAL
Alejandro PerinJapanIvan Magalhaes QUALIFIED
Juan WieserGermanyAsiya Javayant QUALIFIED
Ashley DoeBrazilAmy Elsner RENEWAL
Claire TollnerGermanyBernardo Dominic NEGOTIATION
Salvatore StockhamIndiaAsiya Javayant QUALIFIED
Chavez BriddickCanadaAmy Elsner NEW
Tony FollerRussiaAsiya Javayant NEW
Ricardo GauchoBrazilAsiya Javayant PROPOSAL
Smith GlickIndiaXuxue Feng NEW
Arvin AlbaresCanadaXuxue Feng NEGOTIATION
Clifford RimIndiaAmy Elsner PROPOSAL
Leja CaldareraJapanIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaRussiaBernardo Dominic RENEWAL
Costa DilliardGermanyElwin Sharvill PROPOSAL
Jones VocelkaCanadaElwin Sharvill RENEWAL
Darci PoquetteItalyAsiya Javayant NEW
Misaki RoysterAustraliaIvan Magalhaes PROPOSAL
Octavia MaletBrazilStephen Shaw PROPOSAL
Octavia MaletCanadaAsiya Javayant NEGOTIATION
Clifford RimItalyAnna Fali QUALIFIED
Faith GillianJapanOnyama Limba RENEWAL
Greenwood BologniaItalyStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jefferson SchemmerSpain2026-05-14Rousseaux, Michael Esq NEGOTIATION95Xuxue Feng
1001David DarakjyFrance2026-05-16Chemel, James L Cpa PROPOSAL76Amy Elsner
1002Silvio SlusarskiUnited Kingdom2026-05-26Feiner Bros PROPOSAL84Onyama Limba
1003Claire TollnerFrance2026-05-25Rousseaux, Michael Esq UNQUALIFIED72Bernardo Dominic
1004Maria MarrierSpain2026-05-05Rangoni Of Florence NEW43Ivan Magalhaes
1005Salvatore StockhamBrazil2026-05-15Dorl, James J Esq PROPOSAL54Bernardo Dominic
1006Maisha RulapaughCanada2026-05-25King, Christopher A Esq UNQUALIFIED53Ioni Bowcher
1007Isabel BowleyBrazil2026-05-25Truhlar And Truhlar Attys NEW96Bernardo Dominic
1008Isabel BowleyCanada2026-05-09Rousseaux, Michael Esq NEW41Asiya Javayant
1009Stacey MacleadAustralia2026-05-06Dorl, James J Esq NEW28Asiya Javayant
1010Rodrigues CampainUnited Kingdom2026-05-24Truhlar And Truhlar Attys RENEWAL87Onyama Limba
1011Costa DilliardGermany2026-05-16Rousseaux, Michael Esq NEW84Ivan Magalhaes
1012Leon OldroydBrazil2026-05-15Commercial Press UNQUALIFIED14Anna Fali
1013Mayumi KolmetzGermany2026-05-31King, Christopher A Esq PROPOSAL94Onyama Limba
1014Nicolas IturbideFrance2026-05-15Truhlar And Truhlar Attys NEGOTIATION34Asiya Javayant
1015Ashley DoeItaly2026-05-22Rousseaux, Michael Esq QUALIFIED42Ivan Magalhaes
1016Munro FerenczBrazil2026-05-04Chapman, Ross E Esq NEGOTIATION23Onyama Limba
1017Morrow RutaAustralia2026-05-21Commercial Press PROPOSAL55Ivan Magalhaes
1018Maria MarrierBrazil2026-05-19Chanay, Jeffrey A Esq PROPOSAL91Anna Fali
1019Murillo MaletCanada2026-05-10Morlong Associates QUALIFIED50Ioni Bowcher
1020Jones VocelkaUnited Kingdom2026-05-11Chanay, Jeffrey A Esq RENEWAL91Amy Elsner
1021Maisha RulapaughJapan2026-05-21Rangoni Of Florence NEGOTIATION28Anna Fali
1022Chavez BriddickGermany2026-05-30Commercial Press NEGOTIATION88Xuxue Feng
1023Mayumi KolmetzFrance2026-05-26Benton, John B Jr QUALIFIED11Xuxue Feng
1024Jeanfrancois VenereAustralia2026-05-12Rousseaux, Michael Esq PROPOSAL23Onyama Limba
1025Leon OldroydGermany2026-05-05Rangoni Of Florence UNQUALIFIED5Elwin Sharvill
1026Julie StensethGermany2026-05-27Buckley Miller Wright PROPOSAL74Ioni Bowcher
1027Salvatore StockhamUnited Kingdom2026-05-18Rousseaux, Michael Esq UNQUALIFIED49Amy Elsner
1028Ricardo GauchoRussia2026-05-22Chapman, Ross E Esq NEW74Amy Elsner
1029Smith GlickItaly2026-05-11Feltz Printing Service QUALIFIED48Xuxue Feng
1030Leon OldroydJapan2026-05-31Commercial Press NEW83Anna Fali
1031Jennifer AmigonAustralia2026-05-30Chapman, Ross E Esq UNQUALIFIED11Amy Elsner
1032Isabel BowleyArgentina2026-05-05Feiner Bros UNQUALIFIED21Xuxue Feng
1033Antonio CaudyItaly2026-05-18Buckley Miller Wright RENEWAL5Ioni Bowcher
1034Emily WhobreyFrance2026-05-03King, Christopher A Esq NEW11Anna Fali
1035Francesco ShinkoCanada2026-05-17Truhlar And Truhlar Attys RENEWAL7Amy Elsner
1036Aruna FigeroaGermany2026-05-28Buckley Miller Wright NEW38Xuxue Feng
1037Izzy GarufiSpain2026-05-21Buckley Miller Wright NEW5Anna Fali
1038Adams MorascaBrazil2026-05-05Buckley Miller Wright NEGOTIATION39Anna Fali
1039Kaitlin OstroskyFrance2026-05-06Commercial Press PROPOSAL18Stephen Shaw
1040Costa DilliardBrazil2026-05-12Feiner Bros QUALIFIED24Asiya Javayant
1041Chavez BriddickFrance2026-05-09Commercial Press RENEWAL69Anna Fali
1042Greenwood BologniaArgentina2026-05-16Benton, John B Jr NEW7Ivan Magalhaes
1043Ashley DoeItaly2026-05-13Benton, John B Jr UNQUALIFIED87Ioni Bowcher
1044Rodrigues CampainJapan2026-05-14Chanay, Jeffrey A Esq NEW20Onyama Limba
1045Salvatore StockhamItaly2026-05-23Morlong Associates NEGOTIATION55Anna Fali
1046Ivar PaprockiIndia2026-05-31Rangoni Of Florence QUALIFIED37Ioni Bowcher
1047Leja CaldareraJapan2026-05-27Rousseaux, Michael Esq QUALIFIED43Xuxue Feng
1048Kadeem FlosiArgentina2026-05-19Truhlar And Truhlar Attys UNQUALIFIED77Elwin Sharvill
1049Leja CaldareraArgentina2026-05-18Feltz Printing Service QUALIFIED74Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierJapanIvan Magalhaes UNQUALIFIED
Johnson SergiArgentinaStephen Shaw RENEWAL
James ButtSpainIvan Magalhaes NEW
Smith GlickSpainElwin Sharvill RENEWAL
Tony FollerItalyBernardo Dominic QUALIFIED
Salvatore StockhamBrazilElwin Sharvill NEW
Juan WieserSpainXuxue Feng PROPOSAL
Ivar PaprockiBrazilIoni Bowcher NEW
Jones VocelkaItalyElwin Sharvill PROPOSAL
Deepesh ChuiAustraliaElwin Sharvill NEGOTIATION
James ButtSpainXuxue Feng RENEWAL
Rodrigues CampainAustraliaXuxue Feng QUALIFIED
Morrow RutaJapanXuxue Feng UNQUALIFIED
Kaitlin OstroskyRussiaXuxue Feng PROPOSAL
Leon OldroydAustraliaIoni Bowcher PROPOSAL
Alejandro PerinIndiaElwin Sharvill PROPOSAL
Murillo MaletBrazilAnna Fali NEGOTIATION
Mayumi KolmetzCanadaElwin Sharvill PROPOSAL
Costa DilliardBrazilAmy Elsner UNQUALIFIED
Alejandro PerinArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresRussiaOnyama Limba RENEWAL
Deepesh ChuiFranceOnyama Limba NEW
Jeanfrancois VenereAustraliaBernardo Dominic QUALIFIED
Aruna FigeroaGermanyBernardo Dominic NEW
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
Tony FollerCanadaIvan Magalhaes NEW
Kadeem FlosiSpainBernardo Dominic NEGOTIATION
Ivar PaprockiArgentinaOnyama Limba NEW
Sinclair WaycottIndiaAnna Fali UNQUALIFIED
Murillo MaletJapanXuxue Feng QUALIFIED
Francesco ShinkoRussiaStephen Shaw RENEWAL
Stacey MacleadJapanAsiya Javayant PROPOSAL
Smith GlickJapanAnna Fali PROPOSAL
Jeanfrancois VenereIndiaXuxue Feng RENEWAL
Wickens NestleRussiaIvan Magalhaes NEGOTIATION
Nicolas IturbideUnited KingdomXuxue Feng QUALIFIED
Deepesh ChuiIndiaElwin Sharvill QUALIFIED
Adams MorascaBrazilAnna Fali RENEWAL
Leon OldroydUnited KingdomOnyama Limba RENEWAL
Rodrigues CampainBrazilAnna Fali UNQUALIFIED
Rodrigues CampainJapanElwin Sharvill PROPOSAL
Kaitlin OstroskyArgentinaAmy Elsner UNQUALIFIED
Sinclair WaycottRussiaElwin Sharvill NEGOTIATION
Juan WieserJapanIoni Bowcher PROPOSAL
Munro FerenczItalyIoni Bowcher NEW
Kadeem FlosiItalyIvan Magalhaes NEGOTIATION
Ashley DoeArgentinaIoni Bowcher PROPOSAL
Ashley DoeFranceIvan Magalhaes UNQUALIFIED
Maisha RulapaughRussiaElwin Sharvill QUALIFIED
Smith GlickJapanOnyama Limba PROPOSAL
Frozen Columns
Name
Ivar Paprocki
Silvio Slusarski
Sinclair Waycott
Arvin Albares
James Butt
Kaitlin Ostrosky
Ivar Paprocki
Francesco Shinko
Chavez Briddick
Ricardo Gaucho
Jones Vocelka
David Darakjy
Morrow Ruta
Octavia Malet
Murillo Malet
Johnson Sergi
Aika Inouye
Mayumi Kolmetz
Misaki Royster
Maisha Rulapaugh
Rodrigues Campain
Isabel Bowley
Aruna Figeroa
Octavia Malet
Sinclair Waycott
Leon Oldroyd
Alejandro Perin
Kaitlin Ostrosky
Munro Ferencz
Leon Oldroyd
Darci Poquette
Cody Saylors
Aruna Figeroa
Octavia Malet
Sinclair Waycott
Francesco Shinko
Munro Ferencz
Emily Whobrey
Murillo Malet
Aditya Kusko
Aika Inouye
Misaki Royster
Faith Gillian
Jennifer Amigon
Stacey Maclead
Greenwood Bolognia
David Darakjy
Mayumi Kolmetz
Kaitlin Ostrosky
Ivar Paprocki
IdCountryDate
1000Brazil2026-05-19
1001United Kingdom2026-05-20
1002Argentina2026-05-04
1003Russia2026-05-12
1004Germany2026-05-15
1005Australia2026-05-21
1006Germany2026-05-15
1007Argentina2026-05-05
1008United Kingdom2026-05-30
1009Spain2026-05-02
1010India2026-05-04
1011India2026-05-04
1012Argentina2026-05-30
1013Germany2026-05-12
1014Italy2026-05-18
1015France2026-05-21
1016United Kingdom2026-05-27
1017Germany2026-05-19
1018Australia2026-05-10
1019Russia2026-05-31
1020Japan2026-05-24
1021United Kingdom2026-05-30
1022United Kingdom2026-05-22
1023Russia2026-05-16
1024France2026-05-27
1025Japan2026-05-22
1026Australia2026-05-06
1027India2026-05-15
1028United Kingdom2026-05-08
1029India2026-05-25
1030Australia2026-05-06
1031Russia2026-05-04
1032Argentina2026-05-04
1033Australia2026-05-15
1034Australia2026-05-28
1035France2026-05-17
1036Argentina2026-05-08
1037Japan2026-05-13
1038France2026-05-17
1039France2026-05-24
1040France2026-05-21
1041India2026-05-17
1042Russia2026-05-09
1043Japan2026-05-06
1044Brazil2026-05-07
1045Germany2026-05-16
1046Canada2026-05-29
1047Italy2026-05-27
1048Russia2026-05-30
1049Argentina2026-05-19

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Canada2026-05-14
Munro Ferencz1001India2026-05-14
Leon Oldroyd1002Japan2026-05-17
Wickens Nestle1003Spain2026-05-12
Jennifer Amigon1004India2026-05-26
Leon Oldroyd1005United Kingdom2026-05-29
Nicolas Iturbide1006Italy2026-05-31
Sinclair Waycott1007India2026-05-04
Nicolas Iturbide1008Italy2026-05-15
Mujtaba Nicka1009Italy2026-05-09
Julie Stenseth1010Brazil2026-05-08
Maria Marrier1011India2026-05-08
Ashley Doe1012India2026-05-19
Sinclair Waycott1013Australia2026-05-03
Darci Poquette1014Brazil2026-05-31
Chavez Briddick1015Japan2026-05-13
Maisha Rulapaugh1016Russia2026-05-08
Misaki Royster1017France2026-05-02
Ivar Paprocki1018United Kingdom2026-05-05
Deepesh Chui1019Canada2026-05-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyJapanAmy Elsner RENEWAL
Munro FerenczUnited KingdomBernardo Dominic RENEWAL
Cody SaylorsJapanAnna Fali QUALIFIED
David DarakjyFranceOnyama Limba NEGOTIATION
Chavez BriddickJapanAnna Fali NEW
Aditya KuskoBrazilAmy Elsner NEGOTIATION
Ivar PaprockiBrazilAmy Elsner RENEWAL
Tony FollerRussiaIvan Magalhaes NEW
Deepesh ChuiUnited KingdomStephen Shaw NEW
Clifford RimUnited KingdomElwin Sharvill NEW
Chavez BriddickSpainStephen Shaw RENEWAL
Jennifer AmigonItalyAmy Elsner QUALIFIED
Aruna FigeroaJapanStephen Shaw PROPOSAL
Wickens NestleRussiaIvan Magalhaes RENEWAL
Kadeem FlosiIndiaOnyama Limba PROPOSAL
Maisha RulapaughBrazilXuxue Feng UNQUALIFIED
Alejandro PerinFranceAmy Elsner RENEWAL
Aditya KuskoFranceBernardo Dominic NEW
Salvatore StockhamFranceBernardo Dominic UNQUALIFIED
Aditya KuskoFranceAsiya Javayant NEGOTIATION
Ashley DoeCanadaXuxue Feng QUALIFIED
Ricardo GauchoSpainIvan Magalhaes NEW
Izzy GarufiCanadaIvan Magalhaes RENEWAL
Ricardo GauchoItalyStephen Shaw QUALIFIED
Jennifer AmigonJapanXuxue Feng NEW
Salvatore StockhamJapanElwin Sharvill PROPOSAL
Faith GillianArgentinaXuxue Feng RENEWAL
Jefferson SchemmerJapanElwin Sharvill QUALIFIED
Juan WieserGermanyOnyama Limba NEW
Juan WieserSpainElwin Sharvill PROPOSAL
Kaitlin OstroskySpainXuxue Feng PROPOSAL
Greenwood BologniaArgentinaAsiya Javayant NEW
Greenwood BologniaArgentinaIoni Bowcher PROPOSAL
Jefferson SchemmerRussiaIvan Magalhaes QUALIFIED
Nicolas IturbideRussiaAsiya Javayant NEW
Isabel BowleyRussiaOnyama Limba UNQUALIFIED
Wickens NestleSpainOnyama Limba PROPOSAL
Clifford RimGermanyXuxue Feng UNQUALIFIED
Murillo MaletArgentinaAnna Fali NEW
Costa DilliardIndiaXuxue Feng UNQUALIFIED

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