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
Emily WhobreyJapanAnna Fali RENEWAL
Munro FerenczJapanStephen Shaw PROPOSAL
Ashley DoeJapanElwin Sharvill RENEWAL
Leja CaldareraRussiaBernardo Dominic PROPOSAL
Wickens NestleRussiaAnna Fali QUALIFIED
Salvatore StockhamBrazilIvan Magalhaes NEGOTIATION
Leja CaldareraFranceIvan Magalhaes PROPOSAL
Ivar PaprockiFranceStephen Shaw NEW
Silvio SlusarskiCanadaAnna Fali NEW
Emily WhobreyCanadaAsiya Javayant RENEWAL
Wickens NestleAustraliaXuxue Feng PROPOSAL
Antonio CaudyGermanyElwin Sharvill PROPOSAL
Chavez BriddickJapanIvan Magalhaes NEW
Leja CaldareraJapanAnna Fali RENEWAL
Jennifer AmigonRussiaIoni Bowcher NEGOTIATION
Maisha RulapaughRussiaBernardo Dominic QUALIFIED
Chavez BriddickArgentinaAmy Elsner UNQUALIFIED
Antonio CaudySpainAsiya Javayant UNQUALIFIED
Smith GlickItalyStephen Shaw RENEWAL
Izzy GarufiBrazilBernardo Dominic PROPOSAL
Stacey MacleadCanadaStephen Shaw UNQUALIFIED
Claire TollnerItalyIoni Bowcher NEW
Wickens NestleJapanAnna Fali PROPOSAL
Arvin AlbaresJapanIoni Bowcher UNQUALIFIED
Jeanfrancois VenereJapanAmy Elsner NEW
David DarakjyUnited KingdomOnyama Limba PROPOSAL
Smith GlickItalyIoni Bowcher UNQUALIFIED
Jeanfrancois VenereBrazilIvan Magalhaes PROPOSAL
Antonio CaudyCanadaIoni Bowcher PROPOSAL
Adams MorascaCanadaAmy Elsner NEW
Francesco ShinkoItalyAmy Elsner UNQUALIFIED
Silvio SlusarskiGermanyBernardo Dominic UNQUALIFIED
Ashley DoeArgentinaElwin Sharvill NEW
Antonio CaudyBrazilIoni Bowcher RENEWAL
Munro FerenczGermanyIvan Magalhaes PROPOSAL
Ricardo GauchoJapanBernardo Dominic PROPOSAL
Jefferson SchemmerAustraliaAmy Elsner NEGOTIATION
Jennifer AmigonSpainAsiya Javayant UNQUALIFIED
Aditya KuskoSpainIoni Bowcher NEGOTIATION
Maria MarrierSpainStephen Shaw NEGOTIATION
Faith GillianJapanElwin Sharvill UNQUALIFIED
Maisha RulapaughCanadaXuxue Feng NEGOTIATION
Maria MarrierRussiaAnna Fali RENEWAL
Aika InouyeCanadaStephen Shaw UNQUALIFIED
Morrow RutaItalyAmy Elsner PROPOSAL
Ashley DoeRussiaAmy Elsner QUALIFIED
Salvatore StockhamIndiaElwin Sharvill RENEWAL
Maisha RulapaughGermanyXuxue Feng UNQUALIFIED
David DarakjyArgentinaBernardo Dominic RENEWAL
Isabel BowleyArgentinaIvan Magalhaes QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Wickens NestleGermanyXuxue Feng PROPOSAL
Emily WhobreyFranceElwin Sharvill NEW
James ButtArgentinaBernardo Dominic NEGOTIATION
Salvatore StockhamSpainStephen Shaw NEW
David DarakjyJapanAmy Elsner UNQUALIFIED
Aika InouyeItalyAmy Elsner NEGOTIATION
Isabel BowleySpainXuxue Feng NEW
Smith GlickItalyBernardo Dominic NEW
Clifford RimBrazilOnyama Limba QUALIFIED
Murillo MaletAustraliaIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jefferson SchemmerSpain2026-05-28Morlong Associates PROPOSAL60Elwin Sharvill
1001Emily WhobreyArgentina2026-05-14Dorl, James J Esq UNQUALIFIED52Anna Fali
1002Murillo MaletUnited Kingdom2026-05-24Dorl, James J Esq RENEWAL92Bernardo Dominic
1003Greenwood BologniaSpain2026-05-21Commercial Press RENEWAL52Ivan Magalhaes
1004Deepesh ChuiIndia2026-05-26Feiner Bros NEW10Amy Elsner
1005Ricardo GauchoGermany2026-05-24Commercial Press QUALIFIED20Amy Elsner
1006Aruna FigeroaUnited Kingdom2026-05-11Commercial Press QUALIFIED36Ioni Bowcher
1007Greenwood BologniaItaly2026-05-30Chapman, Ross E Esq PROPOSAL5Anna Fali
1008Aditya KuskoSpain2026-05-14Commercial Press NEW2Elwin Sharvill
1009Johnson SergiGermany2026-05-13Chanay, Jeffrey A Esq UNQUALIFIED9Amy Elsner
1010David DarakjySpain2026-05-16King, Christopher A Esq UNQUALIFIED30Asiya Javayant
1011David DarakjyRussia2026-06-01Truhlar And Truhlar Attys NEW75Asiya Javayant
1012Aika InouyeUnited Kingdom2026-05-14Printing Dimensions NEW16Ivan Magalhaes
1013Alejandro PerinIndia2026-05-28Commercial Press PROPOSAL18Ivan Magalhaes
1014Clifford RimArgentina2026-05-11Chanay, Jeffrey A Esq PROPOSAL19Amy Elsner
1015Murillo MaletBrazil2026-05-19Morlong Associates NEGOTIATION52Asiya Javayant
1016Kadeem FlosiItaly2026-05-23Rangoni Of Florence RENEWAL20Ivan Magalhaes
1017Nicolas IturbideJapan2026-05-24Feltz Printing Service QUALIFIED54Elwin Sharvill
1018Stacey MacleadSpain2026-05-29Dorl, James J Esq QUALIFIED73Amy Elsner
1019Smith GlickRussia2026-05-15Rousseaux, Michael Esq NEW70Amy Elsner
1020Maisha RulapaughFrance2026-05-21Dorl, James J Esq NEW41Elwin Sharvill
1021Johnson SergiSpain2026-05-19Feltz Printing Service NEW12Ioni Bowcher
1022Costa DilliardSpain2026-05-10Feltz Printing Service UNQUALIFIED13Onyama Limba
1023David DarakjyBrazil2026-05-28Chapman, Ross E Esq PROPOSAL14Anna Fali
1024Antonio CaudyArgentina2026-05-22Buckley Miller Wright UNQUALIFIED28Xuxue Feng
1025Munro FerenczJapan2026-05-10Rousseaux, Michael Esq NEGOTIATION82Xuxue Feng
1026Sinclair WaycottUnited Kingdom2026-05-30Commercial Press QUALIFIED67Anna Fali
1027Aditya KuskoAustralia2026-05-22King, Christopher A Esq NEGOTIATION49Onyama Limba
1028Chavez BriddickIndia2026-05-19Chapman, Ross E Esq NEGOTIATION76Elwin Sharvill
1029Aruna FigeroaGermany2026-05-28Dorl, James J Esq PROPOSAL95Ioni Bowcher
1030Smith GlickSpain2026-05-28Buckley Miller Wright NEGOTIATION90Xuxue Feng
1031Julie StensethCanada2026-05-27Chapman, Ross E Esq PROPOSAL64Bernardo Dominic
1032Adams MorascaAustralia2026-05-14Dorl, James J Esq UNQUALIFIED51Anna Fali
1033Nicolas IturbideBrazil2026-05-09Benton, John B Jr NEGOTIATION1Asiya Javayant
1034Juan WieserRussia2026-05-28Buckley Miller Wright RENEWAL66Anna Fali
1035Ricardo GauchoAustralia2026-05-11Benton, John B Jr NEGOTIATION75Stephen Shaw
1036Jeanfrancois VenereGermany2026-05-09Dorl, James J Esq NEGOTIATION9Onyama Limba
1037Leon OldroydUnited Kingdom2026-05-24Buckley Miller Wright NEGOTIATION34Elwin Sharvill
1038Ivar PaprockiBrazil2026-05-03Chanay, Jeffrey A Esq PROPOSAL81Onyama Limba
1039Murillo MaletSpain2026-05-25King, Christopher A Esq PROPOSAL21Ivan Magalhaes
1040Aika InouyeRussia2026-05-10Feiner Bros QUALIFIED19Ivan Magalhaes
1041Aika InouyeItaly2026-05-14Dorl, James J Esq UNQUALIFIED47Amy Elsner
1042Wickens NestleRussia2026-05-14Feiner Bros UNQUALIFIED8Elwin Sharvill
1043Emily WhobreyBrazil2026-05-03Morlong Associates NEW47Asiya Javayant
1044Morrow RutaFrance2026-05-24Benton, John B Jr RENEWAL14Bernardo Dominic
1045Costa DilliardGermany2026-05-16Chapman, Ross E Esq RENEWAL32Ivan Magalhaes
1046James ButtItaly2026-05-18Truhlar And Truhlar Attys PROPOSAL79Stephen Shaw
1047Adams MorascaAustralia2026-05-18Rousseaux, Michael Esq RENEWAL60Xuxue Feng
1048James ButtIndia2026-05-14King, Christopher A Esq NEGOTIATION49Elwin Sharvill
1049Claire TollnerAustralia2026-05-23Benton, John B Jr UNQUALIFIED83Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Emily WhobreyArgentinaAnna Fali UNQUALIFIED
Darci PoquetteAustraliaAsiya Javayant QUALIFIED
Greenwood BologniaRussiaAmy Elsner UNQUALIFIED
Antonio CaudyArgentinaElwin Sharvill NEW
Jeanfrancois VenereItalyStephen Shaw QUALIFIED
Maisha RulapaughArgentinaAsiya Javayant UNQUALIFIED
Izzy GarufiBrazilAsiya Javayant NEGOTIATION
Greenwood BologniaCanadaIvan Magalhaes QUALIFIED
Cody SaylorsAustraliaAnna Fali NEW
Antonio CaudyAustraliaStephen Shaw UNQUALIFIED
Clifford RimIndiaIvan Magalhaes RENEWAL
Francesco ShinkoSpainElwin Sharvill UNQUALIFIED
Smith GlickJapanBernardo Dominic QUALIFIED
Emily WhobreyCanadaElwin Sharvill NEGOTIATION
Aditya KuskoAustraliaXuxue Feng UNQUALIFIED
Leon OldroydFranceBernardo Dominic PROPOSAL
Misaki RoysterArgentinaIvan Magalhaes QUALIFIED
Salvatore StockhamGermanyOnyama Limba QUALIFIED
David DarakjyGermanyIoni Bowcher NEW
Salvatore StockhamCanadaBernardo Dominic NEGOTIATION
Jones VocelkaIndiaStephen Shaw RENEWAL
Jones VocelkaJapanIoni Bowcher NEGOTIATION
Jennifer AmigonAustraliaAsiya Javayant NEGOTIATION
Kaitlin OstroskyGermanyXuxue Feng RENEWAL
Darci PoquetteArgentinaElwin Sharvill PROPOSAL
Deepesh ChuiAustraliaIvan Magalhaes RENEWAL
Kadeem FlosiBrazilXuxue Feng PROPOSAL
Kaitlin OstroskyFranceAnna Fali NEGOTIATION
Adams MorascaGermanyXuxue Feng QUALIFIED
Claire TollnerUnited KingdomElwin Sharvill PROPOSAL
Tony FollerItalyOnyama Limba NEW
Mujtaba NickaBrazilAmy Elsner PROPOSAL
Johnson SergiFranceAmy Elsner PROPOSAL
Maria MarrierSpainAsiya Javayant NEW
Leja CaldareraIndiaElwin Sharvill RENEWAL
Izzy GarufiCanadaOnyama Limba QUALIFIED
Tony FollerBrazilElwin Sharvill RENEWAL
Jones VocelkaGermanyIoni Bowcher UNQUALIFIED
James ButtBrazilStephen Shaw PROPOSAL
Ashley DoeGermanyBernardo Dominic UNQUALIFIED
Emily WhobreyAustraliaAsiya Javayant RENEWAL
James ButtRussiaIvan Magalhaes NEGOTIATION
Darci PoquetteFranceAnna Fali RENEWAL
Tony FollerRussiaIoni Bowcher RENEWAL
Aruna FigeroaJapanBernardo Dominic QUALIFIED
Julie StensethRussiaIvan Magalhaes NEW
Misaki RoysterArgentinaStephen Shaw NEW
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
James ButtGermanyXuxue Feng NEGOTIATION
Jones VocelkaItalyIvan Magalhaes RENEWAL
Frozen Columns
Name
Silvio Slusarski
Ivar Paprocki
Isabel Bowley
Misaki Royster
Leon Oldroyd
Jennifer Amigon
Aika Inouye
Leja Caldarera
Mujtaba Nicka
Maria Marrier
Murillo Malet
Misaki Royster
Chavez Briddick
Greenwood Bolognia
Silvio Slusarski
Nicolas Iturbide
Kadeem Flosi
Salvatore Stockham
David Darakjy
Alejandro Perin
Darci Poquette
Johnson Sergi
Rodrigues Campain
Maria Marrier
Kaitlin Ostrosky
Mayumi Kolmetz
Adams Morasca
Mayumi Kolmetz
Silvio Slusarski
Mujtaba Nicka
Nicolas Iturbide
Wickens Nestle
Leja Caldarera
Smith Glick
Leon Oldroyd
Ricardo Gaucho
Wickens Nestle
Jeanfrancois Venere
Jefferson Schemmer
Sinclair Waycott
Aika Inouye
Julie Stenseth
Arvin Albares
Maria Marrier
Jones Vocelka
Cody Saylors
Morrow Ruta
Smith Glick
Emily Whobrey
Octavia Malet
IdCountryDate
1000Argentina2026-05-19
1001United Kingdom2026-05-08
1002Brazil2026-05-30
1003Australia2026-05-07
1004Russia2026-05-26
1005Canada2026-05-07
1006Spain2026-05-19
1007Australia2026-05-22
1008Germany2026-05-30
1009Australia2026-05-16
1010Germany2026-05-31
1011Brazil2026-06-01
1012Brazil2026-05-04
1013Spain2026-05-08
1014Brazil2026-05-08
1015India2026-05-29
1016United Kingdom2026-05-04
1017Australia2026-05-28
1018Canada2026-05-13
1019France2026-05-06
1020France2026-05-08
1021Russia2026-05-11
1022Japan2026-05-08
1023India2026-05-10
1024Argentina2026-05-18
1025Germany2026-05-07
1026Spain2026-05-09
1027Australia2026-05-11
1028Russia2026-05-18
1029Spain2026-05-29
1030India2026-05-07
1031Canada2026-05-20
1032Spain2026-05-07
1033Spain2026-05-16
1034Argentina2026-05-19
1035France2026-05-09
1036Canada2026-05-19
1037Japan2026-05-18
1038Canada2026-05-21
1039Japan2026-05-05
1040Spain2026-05-18
1041Germany2026-05-10
1042India2026-05-03
1043India2026-05-29
1044Australia2026-05-26
1045Canada2026-05-18
1046Canada2026-05-17
1047France2026-05-08
1048Argentina2026-05-16
1049United Kingdom2026-05-09

On-Demand Data

NameIdCountryDate
Wickens Nestle1000Spain2026-05-29
Clifford Rim1001Russia2026-05-14
Izzy Garufi1002India2026-05-29
David Darakjy1003Canada2026-05-16
Costa Dilliard1004Russia2026-05-16
Leja Caldarera1005Italy2026-05-06
Emily Whobrey1006France2026-05-09
Wickens Nestle1007Brazil2026-06-01
Morrow Ruta1008Russia2026-05-09
Maisha Rulapaugh1009United Kingdom2026-05-22
Aruna Figeroa1010Brazil2026-05-27
Greenwood Bolognia1011Argentina2026-05-10
Munro Ferencz1012Russia2026-05-31
Stacey Maclead1013Canada2026-05-03
Misaki Royster1014Brazil2026-05-22
Adams Morasca1015Germany2026-05-20
Aika Inouye1016Argentina2026-05-20
Antonio Caudy1017Russia2026-05-22
Mujtaba Nicka1018Italy2026-05-03
Adams Morasca1019Brazil2026-05-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleRussiaXuxue Feng NEGOTIATION
David DarakjyRussiaIvan Magalhaes NEW
Morrow RutaJapanElwin Sharvill NEW
Jefferson SchemmerBrazilAmy Elsner NEW
Jennifer AmigonItalyIoni Bowcher NEGOTIATION
Leja CaldareraItalyStephen Shaw UNQUALIFIED
Leja CaldareraAustraliaBernardo Dominic PROPOSAL
Faith GillianUnited KingdomOnyama Limba UNQUALIFIED
Maria MarrierSpainIvan Magalhaes QUALIFIED
Leja CaldareraRussiaIvan Magalhaes PROPOSAL
Izzy GarufiSpainIoni Bowcher PROPOSAL
Adams MorascaArgentinaAmy Elsner UNQUALIFIED
Leja CaldareraSpainStephen Shaw RENEWAL
Octavia MaletItalyIvan Magalhaes RENEWAL
Cody SaylorsSpainBernardo Dominic QUALIFIED
Morrow RutaIndiaElwin Sharvill NEGOTIATION
Faith GillianItalyXuxue Feng RENEWAL
Juan WieserCanadaAsiya Javayant UNQUALIFIED
Octavia MaletIndiaIoni Bowcher QUALIFIED
Murillo MaletJapanIoni Bowcher NEGOTIATION
Julie StensethRussiaStephen Shaw UNQUALIFIED
Isabel BowleyRussiaOnyama Limba RENEWAL
Claire TollnerGermanyIoni Bowcher PROPOSAL
Darci PoquetteItalyIvan Magalhaes UNQUALIFIED
Sinclair WaycottUnited KingdomIvan Magalhaes NEW
Kaitlin OstroskyBrazilAnna Fali NEGOTIATION
Chavez BriddickBrazilXuxue Feng RENEWAL
Leon OldroydJapanElwin Sharvill PROPOSAL
Mayumi KolmetzFranceAnna Fali NEGOTIATION
Mayumi KolmetzCanadaIoni Bowcher NEGOTIATION
Murillo MaletRussiaBernardo Dominic RENEWAL
Salvatore StockhamItalyIvan Magalhaes QUALIFIED
Mayumi KolmetzGermanyAnna Fali RENEWAL
James ButtGermanyElwin Sharvill QUALIFIED
Mujtaba NickaUnited KingdomStephen Shaw UNQUALIFIED
Clifford RimGermanyAmy Elsner RENEWAL
Salvatore StockhamUnited KingdomOnyama Limba RENEWAL
Kadeem FlosiFranceAmy Elsner RENEWAL
Leja CaldareraArgentinaIoni Bowcher NEGOTIATION
Jennifer AmigonBrazilStephen Shaw 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>