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
Ivar PaprockiCanadaAnna Fali PROPOSAL
Murillo MaletJapanIoni Bowcher PROPOSAL
Emily WhobreyRussiaElwin Sharvill RENEWAL
Octavia MaletIndiaIvan Magalhaes QUALIFIED
Aruna FigeroaGermanyStephen Shaw UNQUALIFIED
Jones VocelkaArgentinaAmy Elsner RENEWAL
Alejandro PerinBrazilElwin Sharvill QUALIFIED
Emily WhobreyUnited KingdomOnyama Limba RENEWAL
Morrow RutaCanadaOnyama Limba PROPOSAL
Kadeem FlosiAustraliaIvan Magalhaes PROPOSAL
Johnson SergiIndiaIvan Magalhaes NEW
Costa DilliardSpainOnyama Limba NEGOTIATION
Antonio CaudyItalyIvan Magalhaes NEGOTIATION
Sinclair WaycottGermanyAsiya Javayant RENEWAL
Arvin AlbaresUnited KingdomElwin Sharvill UNQUALIFIED
Juan WieserJapanIoni Bowcher QUALIFIED
Mayumi KolmetzIndiaElwin Sharvill NEW
Francesco ShinkoIndiaElwin Sharvill QUALIFIED
Costa DilliardItalyIoni Bowcher NEGOTIATION
Deepesh ChuiBrazilIvan Magalhaes QUALIFIED
Aika InouyeCanadaBernardo Dominic UNQUALIFIED
Claire TollnerAustraliaElwin Sharvill QUALIFIED
Johnson SergiBrazilXuxue Feng PROPOSAL
Jones VocelkaRussiaAsiya Javayant UNQUALIFIED
Salvatore StockhamGermanyBernardo Dominic RENEWAL
Emily WhobreyFranceIoni Bowcher UNQUALIFIED
Aika InouyeUnited KingdomAnna Fali QUALIFIED
Arvin AlbaresFranceAsiya Javayant NEGOTIATION
Antonio CaudyIndiaIvan Magalhaes NEGOTIATION
Misaki RoysterAustraliaAsiya Javayant NEGOTIATION
David DarakjyIndiaXuxue Feng RENEWAL
Salvatore StockhamGermanyBernardo Dominic NEGOTIATION
Darci PoquetteGermanyElwin Sharvill QUALIFIED
Aruna FigeroaRussiaStephen Shaw QUALIFIED
Johnson SergiRussiaAsiya Javayant QUALIFIED
Johnson SergiRussiaStephen Shaw NEW
Julie StensethRussiaElwin Sharvill RENEWAL
Johnson SergiItalyOnyama Limba UNQUALIFIED
Maisha RulapaughBrazilAnna Fali NEW
Sinclair WaycottJapanOnyama Limba NEGOTIATION
Faith GillianGermanyAnna Fali NEGOTIATION
Kaitlin OstroskyRussiaIoni Bowcher UNQUALIFIED
Wickens NestleSpainStephen Shaw QUALIFIED
Mayumi KolmetzItalyXuxue Feng QUALIFIED
Munro FerenczSpainAnna Fali QUALIFIED
Maisha RulapaughJapanElwin Sharvill NEGOTIATION
Wickens NestleUnited KingdomXuxue Feng RENEWAL
Mujtaba NickaIndiaAmy Elsner RENEWAL
Claire TollnerAustraliaOnyama Limba QUALIFIED
Francesco ShinkoGermanyElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Aika InouyeSpainOnyama Limba RENEWAL
Kadeem FlosiUnited KingdomAsiya Javayant NEGOTIATION
Ricardo GauchoRussiaAsiya Javayant RENEWAL
Juan WieserItalyXuxue Feng NEW
Ivar PaprockiCanadaXuxue Feng PROPOSAL
Ashley DoeFranceElwin Sharvill NEGOTIATION
Cody SaylorsBrazilIoni Bowcher UNQUALIFIED
Izzy GarufiSpainXuxue Feng RENEWAL
Octavia MaletIndiaIoni Bowcher UNQUALIFIED
Arvin AlbaresItalyAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainFrance2026-05-12Buckley Miller Wright QUALIFIED73Bernardo Dominic
1001Aditya KuskoJapan2026-05-05Rangoni Of Florence NEGOTIATION63Amy Elsner
1002Antonio CaudySpain2026-05-15Feltz Printing Service RENEWAL89Ioni Bowcher
1003Misaki RoysterArgentina2026-05-13Chanay, Jeffrey A Esq PROPOSAL20Asiya Javayant
1004Jefferson SchemmerBrazil2026-05-07Feiner Bros PROPOSAL78Xuxue Feng
1005Salvatore StockhamCanada2026-05-07Rousseaux, Michael Esq QUALIFIED20Anna Fali
1006Cody SaylorsItaly2026-05-24Benton, John B Jr RENEWAL25Anna Fali
1007Maria MarrierArgentina2026-05-04Feltz Printing Service NEGOTIATION39Asiya Javayant
1008Mujtaba NickaGermany2026-05-15King, Christopher A Esq PROPOSAL62Anna Fali
1009Ricardo GauchoRussia2026-05-13Morlong Associates RENEWAL70Ioni Bowcher
1010Aruna FigeroaBrazil2026-05-14Morlong Associates UNQUALIFIED58Onyama Limba
1011Nicolas IturbideCanada2026-05-11Rousseaux, Michael Esq RENEWAL14Ioni Bowcher
1012Jeanfrancois VenereIndia2026-05-02Chanay, Jeffrey A Esq RENEWAL17Ioni Bowcher
1013Arvin AlbaresFrance2026-05-22Dorl, James J Esq QUALIFIED40Onyama Limba
1014David DarakjyRussia2026-05-20King, Christopher A Esq NEGOTIATION0Anna Fali
1015Sinclair WaycottCanada2026-05-07King, Christopher A Esq QUALIFIED12Stephen Shaw
1016Maisha RulapaughIndia2026-05-30Chemel, James L Cpa QUALIFIED16Bernardo Dominic
1017Morrow RutaGermany2026-05-04Buckley Miller Wright PROPOSAL75Ivan Magalhaes
1018Antonio CaudyUnited Kingdom2026-05-15King, Christopher A Esq NEW37Elwin Sharvill
1019Jeanfrancois VenereJapan2026-05-05Chanay, Jeffrey A Esq UNQUALIFIED25Xuxue Feng
1020Aruna FigeroaArgentina2026-05-14King, Christopher A Esq NEW71Xuxue Feng
1021Mayumi KolmetzCanada2026-05-09Benton, John B Jr PROPOSAL66Elwin Sharvill
1022David DarakjyAustralia2026-05-10Truhlar And Truhlar Attys PROPOSAL52Ioni Bowcher
1023James ButtArgentina2026-05-07Chapman, Ross E Esq NEW24Bernardo Dominic
1024Aditya KuskoCanada2026-05-28Rangoni Of Florence UNQUALIFIED39Amy Elsner
1025Emily WhobreyArgentina2026-05-23Chapman, Ross E Esq UNQUALIFIED71Amy Elsner
1026Kadeem FlosiRussia2026-05-24Buckley Miller Wright QUALIFIED78Anna Fali
1027Morrow RutaFrance2026-05-09Commercial Press RENEWAL8Stephen Shaw
1028Jeanfrancois VenereItaly2026-05-09Feltz Printing Service NEGOTIATION35Anna Fali
1029Kaitlin OstroskySpain2026-05-24Morlong Associates NEW85Stephen Shaw
1030Antonio CaudyBrazil2026-05-27Truhlar And Truhlar Attys NEW60Anna Fali
1031Jennifer AmigonUnited Kingdom2026-05-24King, Christopher A Esq UNQUALIFIED10Xuxue Feng
1032Misaki RoysterJapan2026-05-19Rangoni Of Florence RENEWAL25Ioni Bowcher
1033Maisha RulapaughSpain2026-05-19Chapman, Ross E Esq PROPOSAL48Elwin Sharvill
1034Ivar PaprockiItaly2026-05-08Chanay, Jeffrey A Esq RENEWAL54Elwin Sharvill
1035Kadeem FlosiUnited Kingdom2026-05-22Morlong Associates PROPOSAL62Amy Elsner
1036Maria MarrierBrazil2026-05-07Rousseaux, Michael Esq NEW95Anna Fali
1037Ricardo GauchoFrance2026-05-20Rangoni Of Florence QUALIFIED80Onyama Limba
1038Aditya KuskoBrazil2026-05-03Feiner Bros QUALIFIED29Ivan Magalhaes
1039Kaitlin OstroskySpain2026-05-16Commercial Press UNQUALIFIED9Asiya Javayant
1040Juan WieserFrance2026-05-23Feiner Bros NEGOTIATION69Amy Elsner
1041Ricardo GauchoRussia2026-05-07Truhlar And Truhlar Attys PROPOSAL85Bernardo Dominic
1042Costa DilliardCanada2026-05-19Benton, John B Jr UNQUALIFIED12Amy Elsner
1043Sinclair WaycottAustralia2026-05-30Rousseaux, Michael Esq UNQUALIFIED31Onyama Limba
1044Misaki RoysterGermany2026-05-24Chanay, Jeffrey A Esq RENEWAL91Onyama Limba
1045Sinclair WaycottIndia2026-05-22Benton, John B Jr QUALIFIED56Stephen Shaw
1046Silvio SlusarskiCanada2026-05-15Printing Dimensions NEGOTIATION25Asiya Javayant
1047Silvio SlusarskiIndia2026-05-15Benton, John B Jr RENEWAL21Ioni Bowcher
1048Mayumi KolmetzCanada2026-05-02Benton, John B Jr NEW93Asiya Javayant
1049Alejandro PerinBrazil2026-05-28Printing Dimensions UNQUALIFIED14Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyBrazilIvan Magalhaes NEGOTIATION
Octavia MaletRussiaBernardo Dominic NEGOTIATION
Greenwood BologniaJapanAsiya Javayant QUALIFIED
Stacey MacleadIndiaBernardo Dominic QUALIFIED
Salvatore StockhamRussiaElwin Sharvill UNQUALIFIED
Cody SaylorsItalyAsiya Javayant NEW
Jennifer AmigonGermanyBernardo Dominic UNQUALIFIED
Chavez BriddickIndiaIvan Magalhaes NEGOTIATION
James ButtGermanyBernardo Dominic NEGOTIATION
Claire TollnerJapanStephen Shaw RENEWAL
Cody SaylorsGermanyAmy Elsner NEW
Leja CaldareraUnited KingdomAmy Elsner QUALIFIED
Adams MorascaJapanXuxue Feng UNQUALIFIED
Maisha RulapaughRussiaAsiya Javayant QUALIFIED
Mayumi KolmetzArgentinaBernardo Dominic NEGOTIATION
Smith GlickIndiaAsiya Javayant RENEWAL
Aika InouyeFranceAnna Fali NEW
Rodrigues CampainGermanyAsiya Javayant NEW
Isabel BowleyGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoBrazilElwin Sharvill QUALIFIED
Salvatore StockhamGermanyAmy Elsner PROPOSAL
Cody SaylorsCanadaElwin Sharvill RENEWAL
Aditya KuskoBrazilAsiya Javayant NEGOTIATION
Jennifer AmigonGermanyAnna Fali NEW
Julie StensethCanadaAnna Fali PROPOSAL
Arvin AlbaresArgentinaAnna Fali UNQUALIFIED
Julie StensethUnited KingdomBernardo Dominic QUALIFIED
Jones VocelkaIndiaStephen Shaw NEGOTIATION
Greenwood BologniaFranceAmy Elsner NEGOTIATION
Aditya KuskoSpainOnyama Limba NEGOTIATION
Jefferson SchemmerRussiaAmy Elsner RENEWAL
Emily WhobreyCanadaStephen Shaw NEW
Jefferson SchemmerRussiaBernardo Dominic QUALIFIED
Smith GlickIndiaXuxue Feng NEW
Deepesh ChuiIndiaStephen Shaw RENEWAL
Greenwood BologniaSpainIoni Bowcher NEGOTIATION
Clifford RimFranceElwin Sharvill RENEWAL
Francesco ShinkoFranceAmy Elsner QUALIFIED
Izzy GarufiAustraliaAsiya Javayant RENEWAL
Chavez BriddickSpainIvan Magalhaes UNQUALIFIED
Francesco ShinkoUnited KingdomElwin Sharvill RENEWAL
Deepesh ChuiItalyIoni Bowcher UNQUALIFIED
Murillo MaletRussiaAnna Fali NEW
Juan WieserBrazilBernardo Dominic QUALIFIED
Ivar PaprockiGermanyElwin Sharvill UNQUALIFIED
Salvatore StockhamJapanStephen Shaw UNQUALIFIED
Rodrigues CampainJapanStephen Shaw NEGOTIATION
David DarakjyAustraliaOnyama Limba PROPOSAL
James ButtRussiaIvan Magalhaes NEGOTIATION
Clifford RimBrazilOnyama Limba UNQUALIFIED
Frozen Columns
Name
Ivar Paprocki
Rodrigues Campain
Smith Glick
Silvio Slusarski
Leon Oldroyd
Deepesh Chui
Francesco Shinko
Silvio Slusarski
Clifford Rim
Greenwood Bolognia
Morrow Ruta
Claire Tollner
Misaki Royster
Antonio Caudy
Julie Stenseth
Deepesh Chui
Deepesh Chui
Misaki Royster
Alejandro Perin
Adams Morasca
Darci Poquette
Antonio Caudy
Claire Tollner
Arvin Albares
Nicolas Iturbide
Greenwood Bolognia
Ivar Paprocki
Ashley Doe
Johnson Sergi
Faith Gillian
Claire Tollner
Salvatore Stockham
Arvin Albares
Nicolas Iturbide
Mujtaba Nicka
Aditya Kusko
Faith Gillian
Aditya Kusko
Murillo Malet
Leja Caldarera
Nicolas Iturbide
Nicolas Iturbide
James Butt
Maisha Rulapaugh
Jefferson Schemmer
Octavia Malet
Cody Saylors
Ashley Doe
Ricardo Gaucho
Antonio Caudy
IdCountryDate
1000Japan2026-05-01
1001Russia2026-05-07
1002United Kingdom2026-05-11
1003Spain2026-05-09
1004Canada2026-05-03
1005Germany2026-05-27
1006Brazil2026-05-17
1007Brazil2026-05-30
1008Germany2026-05-11
1009Brazil2026-05-12
1010Russia2026-05-15
1011India2026-05-16
1012Italy2026-05-26
1013Argentina2026-05-23
1014Brazil2026-05-27
1015Spain2026-05-21
1016United Kingdom2026-05-03
1017Russia2026-05-03
1018Spain2026-05-06
1019Argentina2026-05-21
1020United Kingdom2026-05-18
1021Germany2026-05-08
1022Spain2026-05-17
1023India2026-05-27
1024Japan2026-05-01
1025India2026-05-28
1026United Kingdom2026-05-04
1027France2026-05-06
1028Spain2026-05-19
1029Germany2026-05-04
1030Russia2026-05-18
1031Germany2026-05-13
1032Germany2026-05-24
1033Italy2026-05-15
1034Brazil2026-05-10
1035Australia2026-05-17
1036Argentina2026-05-20
1037Spain2026-05-11
1038Germany2026-05-02
1039Russia2026-05-02
1040Argentina2026-05-09
1041United Kingdom2026-05-03
1042Russia2026-05-17
1043Germany2026-05-29
1044Brazil2026-05-20
1045Australia2026-05-23
1046United Kingdom2026-05-05
1047Australia2026-05-14
1048Spain2026-05-28
1049Spain2026-05-06

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Canada2026-05-01
Ivar Paprocki1001France2026-05-24
Chavez Briddick1002India2026-05-01
Adams Morasca1003India2026-05-09
Darci Poquette1004Italy2026-05-10
Wickens Nestle1005Russia2026-05-25
Deepesh Chui1006Spain2026-05-25
Deepesh Chui1007Japan2026-05-14
Kadeem Flosi1008Argentina2026-05-11
Darci Poquette1009France2026-05-23
Leja Caldarera1010Japan2026-05-27
Clifford Rim1011Japan2026-05-15
Leja Caldarera1012India2026-05-29
Juan Wieser1013Italy2026-05-11
Darci Poquette1014Argentina2026-05-04
Greenwood Bolognia1015Spain2026-05-16
Juan Wieser1016Japan2026-05-19
Aika Inouye1017Brazil2026-05-10
Misaki Royster1018Japan2026-05-03
Octavia Malet1019Russia2026-05-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerCanadaBernardo Dominic NEGOTIATION
Francesco ShinkoFranceAsiya Javayant UNQUALIFIED
Antonio CaudyItalyElwin Sharvill UNQUALIFIED
Antonio CaudyFranceXuxue Feng UNQUALIFIED
Smith GlickRussiaOnyama Limba RENEWAL
Aruna FigeroaCanadaXuxue Feng RENEWAL
Antonio CaudyGermanyAnna Fali UNQUALIFIED
Emily WhobreyIndiaIvan Magalhaes NEGOTIATION
Mujtaba NickaGermanyXuxue Feng RENEWAL
Jennifer AmigonJapanAnna Fali QUALIFIED
David DarakjyGermanyIoni Bowcher RENEWAL
Nicolas IturbideBrazilAsiya Javayant RENEWAL
Ashley DoeSpainOnyama Limba NEW
Mayumi KolmetzGermanyAmy Elsner NEW
Mujtaba NickaItalyAnna Fali NEW
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Isabel BowleyGermanyBernardo Dominic UNQUALIFIED
Leon OldroydArgentinaOnyama Limba UNQUALIFIED
Julie StensethItalyXuxue Feng NEW
Jeanfrancois VenereFranceAsiya Javayant PROPOSAL
David DarakjyRussiaIoni Bowcher PROPOSAL
Izzy GarufiRussiaOnyama Limba UNQUALIFIED
Cody SaylorsGermanyElwin Sharvill PROPOSAL
Antonio CaudyRussiaBernardo Dominic NEW
Salvatore StockhamRussiaBernardo Dominic NEW
Antonio CaudyBrazilAmy Elsner PROPOSAL
David DarakjyRussiaIoni Bowcher UNQUALIFIED
Wickens NestleItalyAnna Fali RENEWAL
Maisha RulapaughFranceElwin Sharvill NEGOTIATION
Johnson SergiArgentinaIoni Bowcher NEGOTIATION
Leon OldroydArgentinaAnna Fali QUALIFIED
Julie StensethSpainOnyama Limba PROPOSAL
Nicolas IturbideItalyAnna Fali QUALIFIED
Chavez BriddickCanadaIvan Magalhaes QUALIFIED
Chavez BriddickBrazilElwin Sharvill NEGOTIATION
Leon OldroydFranceStephen Shaw PROPOSAL
Silvio SlusarskiGermanyIoni Bowcher NEW
Julie StensethCanadaStephen Shaw PROPOSAL
Leja CaldareraSpainStephen Shaw UNQUALIFIED
Rodrigues CampainFranceXuxue Feng RENEWAL

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