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
Morrow RutaIndiaXuxue Feng NEW
Arvin AlbaresUnited KingdomBernardo Dominic QUALIFIED
Juan WieserRussiaXuxue Feng NEGOTIATION
Deepesh ChuiBrazilBernardo Dominic PROPOSAL
Wickens NestleJapanStephen Shaw NEGOTIATION
Kaitlin OstroskyFranceOnyama Limba NEW
Arvin AlbaresFranceIvan Magalhaes PROPOSAL
Claire TollnerFranceIvan Magalhaes UNQUALIFIED
Munro FerenczUnited KingdomElwin Sharvill NEGOTIATION
Cody SaylorsIndiaAnna Fali QUALIFIED
Adams MorascaItalyStephen Shaw UNQUALIFIED
Izzy GarufiGermanyIvan Magalhaes NEGOTIATION
Aika InouyeIndiaAsiya Javayant RENEWAL
Faith GillianSpainXuxue Feng QUALIFIED
Morrow RutaArgentinaAnna Fali QUALIFIED
Nicolas IturbideUnited KingdomOnyama Limba RENEWAL
Faith GillianFranceStephen Shaw UNQUALIFIED
Jeanfrancois VenereFranceIoni Bowcher UNQUALIFIED
Stacey MacleadUnited KingdomXuxue Feng UNQUALIFIED
Juan WieserAustraliaAmy Elsner UNQUALIFIED
Aika InouyeCanadaStephen Shaw NEGOTIATION
Jones VocelkaItalyElwin Sharvill NEW
Morrow RutaBrazilIvan Magalhaes QUALIFIED
Johnson SergiCanadaAsiya Javayant RENEWAL
Ivar PaprockiRussiaOnyama Limba NEW
Alejandro PerinBrazilAmy Elsner PROPOSAL
David DarakjyCanadaIoni Bowcher NEGOTIATION
Jones VocelkaUnited KingdomXuxue Feng NEGOTIATION
Silvio SlusarskiSpainIoni Bowcher QUALIFIED
Maisha RulapaughAustraliaIvan Magalhaes RENEWAL
Arvin AlbaresFranceAmy Elsner QUALIFIED
Morrow RutaRussiaXuxue Feng PROPOSAL
Johnson SergiUnited KingdomAnna Fali NEGOTIATION
Claire TollnerCanadaOnyama Limba QUALIFIED
Juan WieserFranceIvan Magalhaes NEGOTIATION
Aditya KuskoArgentinaIoni Bowcher RENEWAL
Salvatore StockhamBrazilIvan Magalhaes NEW
Jennifer AmigonJapanAsiya Javayant RENEWAL
Deepesh ChuiBrazilXuxue Feng RENEWAL
Murillo MaletUnited KingdomAmy Elsner RENEWAL
Clifford RimSpainIoni Bowcher UNQUALIFIED
Maria MarrierFranceElwin Sharvill NEGOTIATION
Ricardo GauchoGermanyBernardo Dominic PROPOSAL
Jones VocelkaCanadaAsiya Javayant RENEWAL
Murillo MaletBrazilOnyama Limba QUALIFIED
Costa DilliardAustraliaOnyama Limba PROPOSAL
Stacey MacleadGermanyAsiya Javayant NEW
Sinclair WaycottCanadaOnyama Limba RENEWAL
Mayumi KolmetzUnited KingdomIoni Bowcher RENEWAL
Alejandro PerinCanadaAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Aika InouyeSpainOnyama Limba RENEWAL
Morrow RutaBrazilXuxue Feng UNQUALIFIED
Leja CaldareraIndiaIoni Bowcher QUALIFIED
Deepesh ChuiItalyAsiya Javayant NEW
Claire TollnerFranceIvan Magalhaes NEW
Mujtaba NickaItalyXuxue Feng RENEWAL
Morrow RutaUnited KingdomIvan Magalhaes QUALIFIED
Ashley DoeAustraliaIoni Bowcher QUALIFIED
Greenwood BologniaIndiaAnna Fali QUALIFIED
Ivar PaprockiCanadaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Stacey MacleadJapan2025-09-25Printing Dimensions PROPOSAL66Asiya Javayant
1001Munro FerenczItaly2025-09-27Commercial Press NEGOTIATION19Anna Fali
1002Mujtaba NickaRussia2025-10-09Truhlar And Truhlar Attys NEGOTIATION55Xuxue Feng
1003Greenwood BologniaAustralia2025-09-23Rousseaux, Michael Esq NEW10Ivan Magalhaes
1004Aruna FigeroaCanada2025-10-08Morlong Associates PROPOSAL72Anna Fali
1005Jefferson SchemmerJapan2025-09-22Feltz Printing Service NEGOTIATION38Onyama Limba
1006Ricardo GauchoArgentina2025-10-07Printing Dimensions NEW18Xuxue Feng
1007Antonio CaudyRussia2025-10-04Commercial Press RENEWAL79Elwin Sharvill
1008Ashley DoeUnited Kingdom2025-10-10Rangoni Of Florence QUALIFIED90Bernardo Dominic
1009Chavez BriddickGermany2025-10-15Feltz Printing Service PROPOSAL3Ioni Bowcher
1010Ivar PaprockiCanada2025-10-11Rangoni Of Florence PROPOSAL88Onyama Limba
1011Wickens NestleItaly2025-10-16Chapman, Ross E Esq NEW96Xuxue Feng
1012Salvatore StockhamBrazil2025-10-13Printing Dimensions QUALIFIED46Xuxue Feng
1013Aditya KuskoRussia2025-10-10Printing Dimensions RENEWAL56Elwin Sharvill
1014Ricardo GauchoGermany2025-09-30Buckley Miller Wright NEW57Ioni Bowcher
1015Johnson SergiRussia2025-10-09Rousseaux, Michael Esq NEGOTIATION99Onyama Limba
1016Leon OldroydSpain2025-10-04Chanay, Jeffrey A Esq QUALIFIED47Anna Fali
1017Silvio SlusarskiAustralia2025-09-19Rangoni Of Florence NEW62Anna Fali
1018Salvatore StockhamSpain2025-09-25Chemel, James L Cpa RENEWAL62Elwin Sharvill
1019Emily WhobreyIndia2025-10-11Commercial Press NEGOTIATION84Elwin Sharvill
1020Darci PoquetteArgentina2025-09-21Printing Dimensions NEGOTIATION57Elwin Sharvill
1021Chavez BriddickItaly2025-09-27Truhlar And Truhlar Attys NEW87Onyama Limba
1022Wickens NestleBrazil2025-10-03Buckley Miller Wright NEW88Ioni Bowcher
1023Jeanfrancois VenereCanada2025-09-23Rangoni Of Florence QUALIFIED5Elwin Sharvill
1024Sinclair WaycottIndia2025-09-19Dorl, James J Esq UNQUALIFIED62Elwin Sharvill
1025Kaitlin OstroskyAustralia2025-09-26Printing Dimensions NEGOTIATION59Ioni Bowcher
1026Smith GlickUnited Kingdom2025-10-17Chapman, Ross E Esq RENEWAL45Xuxue Feng
1027Jefferson SchemmerItaly2025-09-25King, Christopher A Esq UNQUALIFIED42Ivan Magalhaes
1028Arvin AlbaresGermany2025-09-20Rangoni Of Florence PROPOSAL48Anna Fali
1029Jefferson SchemmerItaly2025-10-10Buckley Miller Wright RENEWAL47Onyama Limba
1030Kaitlin OstroskyBrazil2025-09-22Feiner Bros PROPOSAL33Ivan Magalhaes
1031Munro FerenczAustralia2025-10-07Chapman, Ross E Esq RENEWAL67Bernardo Dominic
1032Darci PoquetteAustralia2025-09-28King, Christopher A Esq NEGOTIATION80Ivan Magalhaes
1033Darci PoquetteAustralia2025-10-09Rousseaux, Michael Esq UNQUALIFIED8Xuxue Feng
1034Greenwood BologniaGermany2025-10-01Feltz Printing Service NEGOTIATION57Bernardo Dominic
1035Leon OldroydUnited Kingdom2025-10-07Commercial Press NEGOTIATION95Ioni Bowcher
1036Tony FollerFrance2025-10-12Commercial Press RENEWAL37Bernardo Dominic
1037Jefferson SchemmerSpain2025-10-08King, Christopher A Esq UNQUALIFIED93Anna Fali
1038Juan WieserArgentina2025-09-23Dorl, James J Esq RENEWAL38Ioni Bowcher
1039Ricardo GauchoJapan2025-09-28Truhlar And Truhlar Attys NEW44Amy Elsner
1040Salvatore StockhamArgentina2025-10-04Dorl, James J Esq QUALIFIED78Stephen Shaw
1041Alejandro PerinCanada2025-09-22Feiner Bros PROPOSAL84Bernardo Dominic
1042Aika InouyeAustralia2025-10-12Feiner Bros NEGOTIATION39Xuxue Feng
1043Johnson SergiJapan2025-09-27Feltz Printing Service RENEWAL56Asiya Javayant
1044Salvatore StockhamArgentina2025-09-27Chapman, Ross E Esq RENEWAL54Stephen Shaw
1045Murillo MaletItaly2025-09-27Commercial Press PROPOSAL86Xuxue Feng
1046Faith GillianArgentina2025-09-25Morlong Associates QUALIFIED7Onyama Limba
1047Octavia MaletUnited Kingdom2025-10-11Chanay, Jeffrey A Esq QUALIFIED98Onyama Limba
1048Julie StensethFrance2025-09-25Chapman, Ross E Esq QUALIFIED55Asiya Javayant
1049Jeanfrancois VenereUnited Kingdom2025-09-28King, Christopher A Esq PROPOSAL66Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Izzy GarufiIndiaBernardo Dominic UNQUALIFIED
Emily WhobreyItalyAsiya Javayant NEGOTIATION
Rodrigues CampainSpainAsiya Javayant QUALIFIED
Mujtaba NickaAustraliaIvan Magalhaes NEW
Maisha RulapaughCanadaOnyama Limba PROPOSAL
Leja CaldareraFranceAmy Elsner NEGOTIATION
Leja CaldareraGermanyBernardo Dominic NEW
Costa DilliardBrazilBernardo Dominic NEGOTIATION
Clifford RimJapanXuxue Feng NEW
James ButtArgentinaIvan Magalhaes NEGOTIATION
David DarakjyAustraliaOnyama Limba PROPOSAL
Izzy GarufiItalyIvan Magalhaes PROPOSAL
Rodrigues CampainArgentinaAmy Elsner RENEWAL
Emily WhobreyAustraliaAmy Elsner QUALIFIED
James ButtCanadaXuxue Feng NEW
Nicolas IturbideUnited KingdomAsiya Javayant NEGOTIATION
Kaitlin OstroskySpainOnyama Limba RENEWAL
Chavez BriddickAustraliaIoni Bowcher NEGOTIATION
Aika InouyeIndiaIvan Magalhaes PROPOSAL
Clifford RimFranceElwin Sharvill UNQUALIFIED
Tony FollerGermanyStephen Shaw RENEWAL
Morrow RutaGermanyAnna Fali RENEWAL
Ashley DoeItalyXuxue Feng NEGOTIATION
Rodrigues CampainUnited KingdomElwin Sharvill RENEWAL
Julie StensethRussiaBernardo Dominic UNQUALIFIED
Mayumi KolmetzArgentinaAnna Fali NEGOTIATION
Ashley DoeAustraliaBernardo Dominic QUALIFIED
Costa DilliardArgentinaOnyama Limba RENEWAL
Jefferson SchemmerUnited KingdomXuxue Feng PROPOSAL
Ashley DoeJapanBernardo Dominic QUALIFIED
Silvio SlusarskiRussiaAnna Fali NEW
Jones VocelkaCanadaAnna Fali PROPOSAL
Mayumi KolmetzIndiaElwin Sharvill PROPOSAL
Alejandro PerinAustraliaAsiya Javayant NEW
Leon OldroydArgentinaElwin Sharvill NEW
David DarakjyFranceBernardo Dominic NEGOTIATION
David DarakjyIndiaAsiya Javayant UNQUALIFIED
Octavia MaletRussiaStephen Shaw NEW
Munro FerenczSpainAnna Fali PROPOSAL
Wickens NestleGermanyElwin Sharvill QUALIFIED
Izzy GarufiJapanStephen Shaw NEGOTIATION
Aditya KuskoRussiaIoni Bowcher PROPOSAL
Juan WieserAustraliaElwin Sharvill RENEWAL
Ricardo GauchoArgentinaIvan Magalhaes RENEWAL
Stacey MacleadBrazilAmy Elsner NEGOTIATION
Maisha RulapaughIndiaAsiya Javayant NEGOTIATION
James ButtAustraliaStephen Shaw UNQUALIFIED
Jones VocelkaBrazilStephen Shaw NEGOTIATION
Maria MarrierCanadaXuxue Feng UNQUALIFIED
Arvin AlbaresGermanyAnna Fali NEGOTIATION
Frozen Columns
Name
Jones Vocelka
Leon Oldroyd
Octavia Malet
Isabel Bowley
Emily Whobrey
Octavia Malet
Ricardo Gaucho
Jefferson Schemmer
Jeanfrancois Venere
Isabel Bowley
Arvin Albares
Stacey Maclead
Ashley Doe
Kaitlin Ostrosky
Smith Glick
Faith Gillian
Johnson Sergi
Jefferson Schemmer
Greenwood Bolognia
Leja Caldarera
Ricardo Gaucho
Rodrigues Campain
Leon Oldroyd
Arvin Albares
Mayumi Kolmetz
Jefferson Schemmer
Greenwood Bolognia
Munro Ferencz
Sinclair Waycott
Julie Stenseth
Sinclair Waycott
Leja Caldarera
Morrow Ruta
Munro Ferencz
Chavez Briddick
Izzy Garufi
Aditya Kusko
Jones Vocelka
Antonio Caudy
Octavia Malet
Stacey Maclead
Clifford Rim
Sinclair Waycott
Kaitlin Ostrosky
Aruna Figeroa
Faith Gillian
Mujtaba Nicka
Adams Morasca
Chavez Briddick
Costa Dilliard
IdCountryDate
1000Russia2025-10-10
1001Australia2025-10-10
1002Russia2025-10-13
1003Australia2025-10-09
1004Brazil2025-10-15
1005Italy2025-10-13
1006Italy2025-10-08
1007Japan2025-10-06
1008Russia2025-10-18
1009United Kingdom2025-10-15
1010France2025-10-01
1011Spain2025-09-30
1012United Kingdom2025-10-14
1013Argentina2025-09-24
1014Italy2025-10-01
1015United Kingdom2025-10-12
1016Spain2025-10-01
1017France2025-09-21
1018Japan2025-10-02
1019France2025-10-08
1020United Kingdom2025-09-30
1021Australia2025-09-27
1022Brazil2025-10-14
1023Japan2025-10-17
1024Spain2025-10-17
1025India2025-10-18
1026Spain2025-09-27
1027Russia2025-10-18
1028Russia2025-10-18
1029Russia2025-10-12
1030Japan2025-10-09
1031Russia2025-10-03
1032United Kingdom2025-10-05
1033Italy2025-10-13
1034Spain2025-09-22
1035France2025-10-08
1036Australia2025-10-03
1037Australia2025-10-16
1038Spain2025-10-16
1039Russia2025-10-07
1040Spain2025-10-11
1041Spain2025-10-09
1042Germany2025-10-13
1043Brazil2025-09-23
1044Brazil2025-10-06
1045Spain2025-09-27
1046France2025-10-18
1047Italy2025-09-21
1048Japan2025-09-26
1049Australia2025-09-27

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000Australia2025-09-21
James Butt1001Italy2025-10-09
Adams Morasca1002India2025-09-19
Juan Wieser1003France2025-09-26
Misaki Royster1004India2025-10-17
Darci Poquette1005Russia2025-09-20
Francesco Shinko1006Japan2025-09-27
Jefferson Schemmer1007Italy2025-09-19
Leon Oldroyd1008Spain2025-10-08
David Darakjy1009Australia2025-10-08
Arvin Albares1010Russia2025-10-07
Greenwood Bolognia1011United Kingdom2025-09-19
Francesco Shinko1012Canada2025-09-27
Jones Vocelka1013Spain2025-09-25
Isabel Bowley1014Spain2025-10-11
Faith Gillian1015Argentina2025-09-24
Nicolas Iturbide1016India2025-10-12
Mayumi Kolmetz1017India2025-10-14
Cody Saylors1018Argentina2025-09-24
Cody Saylors1019Argentina2025-09-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaUnited KingdomXuxue Feng RENEWAL
Izzy GarufiItalyIoni Bowcher QUALIFIED
David DarakjySpainOnyama Limba NEGOTIATION
Kadeem FlosiAustraliaXuxue Feng NEGOTIATION
Jefferson SchemmerItalyStephen Shaw RENEWAL
Misaki RoysterArgentinaAnna Fali NEW
Mayumi KolmetzItalyOnyama Limba NEW
Chavez BriddickBrazilAnna Fali QUALIFIED
Deepesh ChuiUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaGermanyIvan Magalhaes PROPOSAL
Izzy GarufiUnited KingdomElwin Sharvill NEW
Kaitlin OstroskyRussiaIvan Magalhaes PROPOSAL
Faith GillianGermanyAsiya Javayant PROPOSAL
Costa DilliardUnited KingdomOnyama Limba PROPOSAL
Ricardo GauchoArgentinaIvan Magalhaes NEGOTIATION
Adams MorascaArgentinaAmy Elsner RENEWAL
Jefferson SchemmerArgentinaOnyama Limba NEGOTIATION
Silvio SlusarskiFranceAnna Fali NEGOTIATION
Costa DilliardArgentinaAsiya Javayant PROPOSAL
Stacey MacleadItalyAnna Fali UNQUALIFIED
Aditya KuskoIndiaAnna Fali RENEWAL
David DarakjyItalyAnna Fali PROPOSAL
Cody SaylorsCanadaIoni Bowcher QUALIFIED
Claire TollnerCanadaStephen Shaw QUALIFIED
Jefferson SchemmerSpainBernardo Dominic UNQUALIFIED
Munro FerenczBrazilIoni Bowcher QUALIFIED
Murillo MaletUnited KingdomIvan Magalhaes PROPOSAL
Antonio CaudyArgentinaAnna Fali QUALIFIED
Jefferson SchemmerBrazilIvan Magalhaes UNQUALIFIED
Rodrigues CampainSpainBernardo Dominic QUALIFIED
Mayumi KolmetzSpainIoni Bowcher NEW
Chavez BriddickRussiaIvan Magalhaes PROPOSAL
Stacey MacleadCanadaStephen Shaw NEW
Francesco ShinkoIndiaAmy Elsner PROPOSAL
Stacey MacleadUnited KingdomElwin Sharvill NEGOTIATION
Jeanfrancois VenereJapanStephen Shaw NEW
Cody SaylorsBrazilAmy Elsner PROPOSAL
Smith GlickGermanyElwin Sharvill QUALIFIED
Clifford RimSpainXuxue Feng QUALIFIED
Ashley DoeBrazilAsiya Javayant 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>