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
Jones VocelkaArgentinaIoni Bowcher RENEWAL
Ivar PaprockiFranceIvan Magalhaes NEGOTIATION
Jennifer AmigonFranceIoni Bowcher QUALIFIED
Francesco ShinkoJapanAsiya Javayant NEGOTIATION
Emily WhobreyUnited KingdomStephen Shaw PROPOSAL
Darci PoquetteRussiaAsiya Javayant UNQUALIFIED
Costa DilliardFranceAsiya Javayant NEW
Tony FollerCanadaXuxue Feng UNQUALIFIED
Arvin AlbaresArgentinaAsiya Javayant PROPOSAL
Munro FerenczSpainBernardo Dominic QUALIFIED
Juan WieserIndiaIvan Magalhaes UNQUALIFIED
Johnson SergiAustraliaElwin Sharvill NEW
Smith GlickFranceStephen Shaw UNQUALIFIED
Misaki RoysterFranceStephen Shaw NEW
Chavez BriddickAustraliaIoni Bowcher NEW
Mayumi KolmetzIndiaAsiya Javayant UNQUALIFIED
Mayumi KolmetzIndiaXuxue Feng NEGOTIATION
Juan WieserAustraliaAsiya Javayant PROPOSAL
Kaitlin OstroskySpainOnyama Limba QUALIFIED
Misaki RoysterBrazilOnyama Limba PROPOSAL
Aruna FigeroaCanadaElwin Sharvill RENEWAL
Morrow RutaGermanyIvan Magalhaes NEGOTIATION
Julie StensethSpainIoni Bowcher PROPOSAL
Mujtaba NickaArgentinaIoni Bowcher PROPOSAL
Nicolas IturbideRussiaAmy Elsner QUALIFIED
Murillo MaletUnited KingdomAsiya Javayant NEW
Alejandro PerinFranceOnyama Limba PROPOSAL
Aruna FigeroaAustraliaBernardo Dominic UNQUALIFIED
Aika InouyeArgentinaOnyama Limba RENEWAL
Kaitlin OstroskySpainXuxue Feng PROPOSAL
Sinclair WaycottJapanOnyama Limba UNQUALIFIED
Kaitlin OstroskySpainOnyama Limba PROPOSAL
Johnson SergiSpainIoni Bowcher RENEWAL
Maisha RulapaughFranceXuxue Feng QUALIFIED
Juan WieserFranceOnyama Limba UNQUALIFIED
Wickens NestleCanadaBernardo Dominic UNQUALIFIED
Darci PoquetteItalyXuxue Feng RENEWAL
Adams MorascaRussiaXuxue Feng RENEWAL
Octavia MaletCanadaXuxue Feng UNQUALIFIED
Jeanfrancois VenereGermanyBernardo Dominic NEGOTIATION
Emily WhobreyJapanXuxue Feng NEGOTIATION
Jennifer AmigonFranceAmy Elsner RENEWAL
Silvio SlusarskiBrazilStephen Shaw RENEWAL
Cody SaylorsJapanXuxue Feng NEW
Johnson SergiJapanIoni Bowcher RENEWAL
Stacey MacleadBrazilBernardo Dominic UNQUALIFIED
Costa DilliardAustraliaElwin Sharvill QUALIFIED
Munro FerenczAustraliaAnna Fali NEW
Wickens NestleIndiaStephen Shaw QUALIFIED
Jeanfrancois VenereCanadaXuxue Feng NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Francesco ShinkoArgentinaOnyama Limba PROPOSAL
Arvin AlbaresAustraliaXuxue Feng RENEWAL
Maria MarrierItalyIvan Magalhaes UNQUALIFIED
Juan WieserAustraliaAsiya Javayant RENEWAL
Smith GlickRussiaXuxue Feng PROPOSAL
Chavez BriddickGermanyOnyama Limba QUALIFIED
James ButtAustraliaIvan Magalhaes NEW
Kadeem FlosiGermanyAsiya Javayant QUALIFIED
Silvio SlusarskiCanadaAnna Fali RENEWAL
Julie StensethJapanOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiRussia2026-03-28Commercial Press RENEWAL73Amy Elsner
1001Jennifer AmigonSpain2026-04-13Rangoni Of Florence QUALIFIED12Amy Elsner
1002Salvatore StockhamArgentina2026-04-13Feltz Printing Service UNQUALIFIED90Onyama Limba
1003Deepesh ChuiSpain2026-04-18Feltz Printing Service UNQUALIFIED5Bernardo Dominic
1004Rodrigues CampainIndia2026-04-02Feiner Bros RENEWAL52Onyama Limba
1005Tony FollerGermany2026-04-20Feiner Bros RENEWAL71Ioni Bowcher
1006Clifford RimAustralia2026-04-15Chanay, Jeffrey A Esq NEGOTIATION64Amy Elsner
1007Mayumi KolmetzRussia2026-04-14Feltz Printing Service RENEWAL58Asiya Javayant
1008Adams MorascaAustralia2026-04-16Feltz Printing Service NEGOTIATION71Ioni Bowcher
1009Ashley DoeCanada2026-04-07Chapman, Ross E Esq NEW77Ioni Bowcher
1010Francesco ShinkoSpain2026-04-18King, Christopher A Esq PROPOSAL38Ivan Magalhaes
1011Francesco ShinkoGermany2026-04-16Chanay, Jeffrey A Esq NEW79Amy Elsner
1012Aruna FigeroaSpain2026-03-28Chemel, James L Cpa RENEWAL25Asiya Javayant
1013Francesco ShinkoCanada2026-04-14Chapman, Ross E Esq NEW58Stephen Shaw
1014Antonio CaudyCanada2026-04-12Rangoni Of Florence QUALIFIED47Ivan Magalhaes
1015Stacey MacleadUnited Kingdom2026-04-12Rousseaux, Michael Esq UNQUALIFIED53Stephen Shaw
1016Ricardo GauchoIndia2026-04-18Chemel, James L Cpa NEW82Elwin Sharvill
1017James ButtCanada2026-04-10Rangoni Of Florence PROPOSAL63Ioni Bowcher
1018Maria MarrierCanada2026-04-09Chapman, Ross E Esq PROPOSAL50Anna Fali
1019Izzy GarufiItaly2026-04-07Morlong Associates NEGOTIATION28Xuxue Feng
1020Murillo MaletItaly2026-04-06Feiner Bros NEGOTIATION60Ioni Bowcher
1021Clifford RimJapan2026-04-20Rousseaux, Michael Esq UNQUALIFIED11Bernardo Dominic
1022Antonio CaudyFrance2026-04-04Rousseaux, Michael Esq PROPOSAL84Amy Elsner
1023Emily WhobreyAustralia2026-04-14Rangoni Of Florence NEGOTIATION74Ioni Bowcher
1024Salvatore StockhamJapan2026-04-06Dorl, James J Esq NEW62Bernardo Dominic
1025Jeanfrancois VenereSpain2026-04-17Commercial Press NEW8Ivan Magalhaes
1026Greenwood BologniaItaly2026-04-13Chapman, Ross E Esq PROPOSAL20Onyama Limba
1027Maria MarrierJapan2026-03-29Commercial Press RENEWAL53Ioni Bowcher
1028Aika InouyeGermany2026-03-28Feltz Printing Service NEGOTIATION54Stephen Shaw
1029Ashley DoeUnited Kingdom2026-04-19Feiner Bros RENEWAL52Bernardo Dominic
1030Isabel BowleyGermany2026-04-18Commercial Press QUALIFIED96Ioni Bowcher
1031Cody SaylorsCanada2026-04-20Commercial Press NEGOTIATION76Ivan Magalhaes
1032Stacey MacleadFrance2026-04-01Chanay, Jeffrey A Esq QUALIFIED97Ivan Magalhaes
1033Stacey MacleadIndia2026-03-27Buckley Miller Wright NEGOTIATION58Ivan Magalhaes
1034Tony FollerBrazil2026-03-27Feiner Bros NEW67Stephen Shaw
1035Claire TollnerSpain2026-04-16Benton, John B Jr NEGOTIATION86Ivan Magalhaes
1036Salvatore StockhamAustralia2026-04-08King, Christopher A Esq NEW1Ivan Magalhaes
1037Silvio SlusarskiItaly2026-04-19Chapman, Ross E Esq PROPOSAL1Elwin Sharvill
1038Smith GlickCanada2026-04-15Rangoni Of Florence QUALIFIED21Ivan Magalhaes
1039Wickens NestleIndia2026-03-28King, Christopher A Esq QUALIFIED11Xuxue Feng
1040Maisha RulapaughUnited Kingdom2026-03-27King, Christopher A Esq RENEWAL68Anna Fali
1041Jefferson SchemmerJapan2026-03-28Chapman, Ross E Esq NEW73Amy Elsner
1042Johnson SergiFrance2026-03-30Benton, John B Jr NEW60Amy Elsner
1043Maria MarrierFrance2026-04-23Chanay, Jeffrey A Esq UNQUALIFIED46Amy Elsner
1044Antonio CaudyFrance2026-04-18Morlong Associates QUALIFIED46Elwin Sharvill
1045Leon OldroydItaly2026-04-23Rangoni Of Florence PROPOSAL73Ioni Bowcher
1046Juan WieserCanada2026-04-12King, Christopher A Esq NEGOTIATION47Bernardo Dominic
1047Leon OldroydIndia2026-03-28Chapman, Ross E Esq UNQUALIFIED82Asiya Javayant
1048Cody SaylorsItaly2026-04-20Commercial Press QUALIFIED11Stephen Shaw
1049Misaki RoysterCanada2026-04-11Dorl, James J Esq QUALIFIED62Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiSpainIvan Magalhaes RENEWAL
Maria MarrierArgentinaBernardo Dominic RENEWAL
Misaki RoysterIndiaIoni Bowcher QUALIFIED
Emily WhobreyArgentinaIvan Magalhaes NEW
Octavia MaletCanadaAmy Elsner RENEWAL
Ivar PaprockiIndiaAmy Elsner PROPOSAL
Ashley DoeCanadaAsiya Javayant PROPOSAL
Leon OldroydSpainAnna Fali RENEWAL
Clifford RimGermanyAsiya Javayant NEW
Johnson SergiGermanyAmy Elsner PROPOSAL
Wickens NestleCanadaStephen Shaw UNQUALIFIED
Ashley DoeGermanyStephen Shaw NEGOTIATION
Ivar PaprockiJapanIoni Bowcher NEGOTIATION
Misaki RoysterJapanAmy Elsner QUALIFIED
Aruna FigeroaUnited KingdomXuxue Feng RENEWAL
Francesco ShinkoUnited KingdomIoni Bowcher RENEWAL
Aruna FigeroaCanadaOnyama Limba NEW
Silvio SlusarskiIndiaBernardo Dominic PROPOSAL
Aruna FigeroaCanadaBernardo Dominic NEW
Arvin AlbaresIndiaIoni Bowcher RENEWAL
Sinclair WaycottIndiaAsiya Javayant NEGOTIATION
Mujtaba NickaItalyIoni Bowcher UNQUALIFIED
Johnson SergiIndiaXuxue Feng QUALIFIED
Sinclair WaycottCanadaOnyama Limba NEGOTIATION
Adams MorascaArgentinaStephen Shaw NEW
Jeanfrancois VenereUnited KingdomAmy Elsner RENEWAL
Munro FerenczFranceXuxue Feng PROPOSAL
Leon OldroydItalyIoni Bowcher UNQUALIFIED
Arvin AlbaresBrazilAsiya Javayant PROPOSAL
Emily WhobreyCanadaAmy Elsner RENEWAL
Francesco ShinkoGermanyBernardo Dominic RENEWAL
Juan WieserJapanIvan Magalhaes NEW
Mujtaba NickaSpainBernardo Dominic PROPOSAL
Izzy GarufiArgentinaElwin Sharvill QUALIFIED
Maisha RulapaughAustraliaElwin Sharvill NEW
Morrow RutaJapanIvan Magalhaes RENEWAL
Leja CaldareraArgentinaXuxue Feng QUALIFIED
Salvatore StockhamAustraliaIoni Bowcher NEGOTIATION
Jeanfrancois VenereRussiaBernardo Dominic NEW
Jefferson SchemmerUnited KingdomStephen Shaw UNQUALIFIED
Izzy GarufiJapanStephen Shaw NEW
Ashley DoeAustraliaIvan Magalhaes UNQUALIFIED
Faith GillianSpainBernardo Dominic UNQUALIFIED
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
Arvin AlbaresIndiaIoni Bowcher UNQUALIFIED
Aruna FigeroaSpainIvan Magalhaes NEW
Leon OldroydCanadaAmy Elsner NEGOTIATION
Octavia MaletArgentinaXuxue Feng PROPOSAL
Maisha RulapaughJapanElwin Sharvill NEW
Nicolas IturbideUnited KingdomIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Jefferson Schemmer
Francesco Shinko
Sinclair Waycott
Deepesh Chui
Izzy Garufi
Silvio Slusarski
Clifford Rim
Aditya Kusko
Juan Wieser
Stacey Maclead
Murillo Malet
Greenwood Bolognia
Izzy Garufi
Jefferson Schemmer
Stacey Maclead
Rodrigues Campain
Salvatore Stockham
Wickens Nestle
Kadeem Flosi
Julie Stenseth
Maria Marrier
James Butt
Stacey Maclead
Leja Caldarera
Aruna Figeroa
Aruna Figeroa
Jones Vocelka
Deepesh Chui
Ricardo Gaucho
Leon Oldroyd
Jeanfrancois Venere
Alejandro Perin
Mujtaba Nicka
Smith Glick
Izzy Garufi
Deepesh Chui
Johnson Sergi
Morrow Ruta
Isabel Bowley
Salvatore Stockham
Johnson Sergi
Costa Dilliard
Jennifer Amigon
Ashley Doe
Aditya Kusko
Leon Oldroyd
Aruna Figeroa
Tony Foller
Faith Gillian
Izzy Garufi
IdCountryDate
1000Argentina2026-04-03
1001Brazil2026-03-31
1002Argentina2026-04-10
1003Canada2026-04-20
1004Brazil2026-04-04
1005Germany2026-04-02
1006Russia2026-04-10
1007Canada2026-04-14
1008Brazil2026-03-27
1009Spain2026-04-09
1010Argentina2026-04-05
1011Germany2026-04-10
1012Argentina2026-04-03
1013Brazil2026-03-28
1014Italy2026-04-07
1015India2026-04-09
1016Canada2026-04-08
1017Italy2026-04-02
1018France2026-04-05
1019Australia2026-03-25
1020Brazil2026-04-23
1021Canada2026-03-26
1022Argentina2026-04-10
1023Italy2026-03-25
1024India2026-04-20
1025India2026-04-05
1026Argentina2026-04-21
1027Canada2026-04-21
1028Spain2026-03-26
1029Germany2026-03-29
1030India2026-04-09
1031Spain2026-04-12
1032India2026-04-07
1033India2026-04-08
1034Japan2026-04-10
1035Germany2026-04-13
1036Brazil2026-04-21
1037Spain2026-04-09
1038United Kingdom2026-03-30
1039Canada2026-04-05
1040Canada2026-04-04
1041Japan2026-04-10
1042France2026-04-04
1043Germany2026-04-17
1044Italy2026-03-26
1045Russia2026-04-02
1046Australia2026-04-04
1047Germany2026-03-31
1048Japan2026-04-18
1049Germany2026-04-23

On-Demand Data

NameIdCountryDate
Tony Foller1000Germany2026-03-27
Murillo Malet1001Canada2026-03-30
Cody Saylors1002Australia2026-04-10
Stacey Maclead1003India2026-04-15
Maisha Rulapaugh1004Germany2026-04-12
Kaitlin Ostrosky1005Germany2026-04-12
Chavez Briddick1006Spain2026-04-06
Izzy Garufi1007Canada2026-04-21
Julie Stenseth1008Italy2026-03-25
Aditya Kusko1009Russia2026-03-25
Cody Saylors1010Australia2026-04-21
Salvatore Stockham1011India2026-04-21
Ashley Doe1012Germany2026-04-06
Isabel Bowley1013Brazil2026-04-21
Aruna Figeroa1014Spain2026-03-31
Costa Dilliard1015Germany2026-03-26
Greenwood Bolognia1016Russia2026-04-13
Aruna Figeroa1017United Kingdom2026-04-14
Munro Ferencz1018Italy2026-04-12
Faith Gillian1019Italy2026-03-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoUnited KingdomStephen Shaw NEW
Aruna FigeroaGermanyStephen Shaw PROPOSAL
Ashley DoeSpainBernardo Dominic NEGOTIATION
Murillo MaletIndiaAsiya Javayant RENEWAL
Costa DilliardCanadaStephen Shaw RENEWAL
Ivar PaprockiArgentinaBernardo Dominic NEW
Mujtaba NickaItalyIvan Magalhaes NEGOTIATION
Smith GlickItalyAsiya Javayant PROPOSAL
Octavia MaletGermanyOnyama Limba UNQUALIFIED
Antonio CaudyUnited KingdomBernardo Dominic QUALIFIED
Ivar PaprockiItalyElwin Sharvill QUALIFIED
Silvio SlusarskiJapanAmy Elsner UNQUALIFIED
Aditya KuskoGermanyBernardo Dominic NEW
Arvin AlbaresArgentinaOnyama Limba RENEWAL
Aika InouyeCanadaAmy Elsner NEW
Silvio SlusarskiBrazilIoni Bowcher UNQUALIFIED
Mujtaba NickaSpainAsiya Javayant UNQUALIFIED
Nicolas IturbideGermanyXuxue Feng UNQUALIFIED
Stacey MacleadFranceIvan Magalhaes NEGOTIATION
Rodrigues CampainArgentinaOnyama Limba PROPOSAL
Faith GillianItalyIoni Bowcher NEW
Ricardo GauchoArgentinaAsiya Javayant QUALIFIED
Mujtaba NickaArgentinaIoni Bowcher NEGOTIATION
Jefferson SchemmerIndiaStephen Shaw UNQUALIFIED
Cody SaylorsSpainIoni Bowcher NEGOTIATION
Leon OldroydAustraliaIvan Magalhaes UNQUALIFIED
Salvatore StockhamGermanyElwin Sharvill NEW
Misaki RoysterCanadaAsiya Javayant UNQUALIFIED
Faith GillianItalyXuxue Feng NEGOTIATION
Leon OldroydBrazilStephen Shaw RENEWAL
Isabel BowleyFranceStephen Shaw PROPOSAL
Ivar PaprockiUnited KingdomElwin Sharvill QUALIFIED
Kaitlin OstroskyRussiaXuxue Feng NEGOTIATION
Greenwood BologniaAustraliaStephen Shaw PROPOSAL
Maria MarrierItalyIoni Bowcher NEGOTIATION
Stacey MacleadGermanyElwin Sharvill UNQUALIFIED
Sinclair WaycottUnited KingdomAmy Elsner NEGOTIATION
Aditya KuskoBrazilIvan Magalhaes NEW
Johnson SergiUnited KingdomIoni Bowcher PROPOSAL
Maisha RulapaughUnited KingdomXuxue Feng 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>