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
Faith GillianItalyAmy Elsner QUALIFIED
Salvatore StockhamRussiaAsiya Javayant PROPOSAL
Stacey MacleadUnited KingdomBernardo Dominic NEW
Julie StensethFranceAmy Elsner RENEWAL
Ricardo GauchoUnited KingdomBernardo Dominic NEW
Smith GlickUnited KingdomAsiya Javayant NEW
Smith GlickBrazilIvan Magalhaes RENEWAL
Clifford RimSpainAnna Fali QUALIFIED
Murillo MaletJapanElwin Sharvill PROPOSAL
Isabel BowleyArgentinaIoni Bowcher NEGOTIATION
Aika InouyeArgentinaIoni Bowcher NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes UNQUALIFIED
Cody SaylorsSpainXuxue Feng UNQUALIFIED
David DarakjyIndiaAsiya Javayant RENEWAL
Antonio CaudyIndiaAnna Fali PROPOSAL
Johnson SergiArgentinaXuxue Feng NEW
Leja CaldareraItalyOnyama Limba QUALIFIED
Jefferson SchemmerRussiaAmy Elsner NEW
Ricardo GauchoGermanyBernardo Dominic PROPOSAL
Aditya KuskoAustraliaAmy Elsner NEW
Leja CaldareraArgentinaIoni Bowcher NEW
Clifford RimBrazilStephen Shaw RENEWAL
Morrow RutaRussiaElwin Sharvill RENEWAL
Chavez BriddickSpainIoni Bowcher QUALIFIED
Aruna FigeroaIndiaElwin Sharvill RENEWAL
Tony FollerCanadaElwin Sharvill QUALIFIED
Mujtaba NickaIndiaOnyama Limba RENEWAL
Aruna FigeroaItalyElwin Sharvill NEW
Francesco ShinkoBrazilOnyama Limba RENEWAL
Izzy GarufiGermanyXuxue Feng QUALIFIED
Chavez BriddickIndiaBernardo Dominic UNQUALIFIED
Francesco ShinkoJapanAsiya Javayant NEW
Smith GlickRussiaAmy Elsner RENEWAL
Jennifer AmigonRussiaXuxue Feng NEW
Tony FollerGermanyXuxue Feng UNQUALIFIED
Octavia MaletUnited KingdomAnna Fali NEW
Ashley DoeJapanIvan Magalhaes NEW
Sinclair WaycottIndiaStephen Shaw NEGOTIATION
Claire TollnerAustraliaAmy Elsner QUALIFIED
Jones VocelkaArgentinaAnna Fali NEGOTIATION
Juan WieserSpainXuxue Feng QUALIFIED
Juan WieserUnited KingdomAsiya Javayant UNQUALIFIED
Costa DilliardUnited KingdomIvan Magalhaes QUALIFIED
Jeanfrancois VenereRussiaAsiya Javayant PROPOSAL
Silvio SlusarskiUnited KingdomAmy Elsner UNQUALIFIED
Izzy GarufiArgentinaAnna Fali NEGOTIATION
Morrow RutaBrazilAnna Fali NEGOTIATION
Greenwood BologniaArgentinaXuxue Feng RENEWAL
Jefferson SchemmerRussiaAmy Elsner UNQUALIFIED
Munro FerenczCanadaAmy Elsner PROPOSAL
Horizontal
NameCountryRepresentativeStatus
James ButtUnited KingdomAnna Fali PROPOSAL
Ashley DoeBrazilElwin Sharvill NEGOTIATION
David DarakjyRussiaAsiya Javayant QUALIFIED
Sinclair WaycottUnited KingdomAmy Elsner NEGOTIATION
Mujtaba NickaCanadaXuxue Feng NEW
Leja CaldareraSpainAsiya Javayant RENEWAL
Silvio SlusarskiCanadaElwin Sharvill NEGOTIATION
Misaki RoysterAustraliaAsiya Javayant QUALIFIED
Juan WieserBrazilAmy Elsner QUALIFIED
James ButtFranceStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaAustralia2025-10-06Chanay, Jeffrey A Esq PROPOSAL41Ioni Bowcher
1001Nicolas IturbideItaly2025-09-14Feltz Printing Service UNQUALIFIED20Asiya Javayant
1002Johnson SergiItaly2025-09-23Chanay, Jeffrey A Esq PROPOSAL26Amy Elsner
1003Chavez BriddickArgentina2025-09-29Truhlar And Truhlar Attys NEW44Anna Fali
1004Morrow RutaRussia2025-10-09Buckley Miller Wright PROPOSAL67Xuxue Feng
1005Alejandro PerinItaly2025-09-20Morlong Associates UNQUALIFIED56Ioni Bowcher
1006Jones VocelkaRussia2025-10-08Rangoni Of Florence UNQUALIFIED9Anna Fali
1007Isabel BowleyArgentina2025-10-04Printing Dimensions RENEWAL25Elwin Sharvill
1008Aruna FigeroaJapan2025-09-23Feltz Printing Service NEW19Onyama Limba
1009Jeanfrancois VenereUnited Kingdom2025-09-22Feiner Bros NEW59Stephen Shaw
1010Costa DilliardUnited Kingdom2025-10-03King, Christopher A Esq UNQUALIFIED56Ivan Magalhaes
1011Morrow RutaArgentina2025-09-23Dorl, James J Esq QUALIFIED93Amy Elsner
1012Ashley DoeJapan2025-09-27Chanay, Jeffrey A Esq UNQUALIFIED80Xuxue Feng
1013Francesco ShinkoSpain2025-10-01Printing Dimensions NEGOTIATION86Amy Elsner
1014Alejandro PerinUnited Kingdom2025-09-19Feltz Printing Service QUALIFIED93Ivan Magalhaes
1015Kaitlin OstroskyGermany2025-09-12Benton, John B Jr NEGOTIATION44Onyama Limba
1016Sinclair WaycottJapan2025-09-12Chanay, Jeffrey A Esq RENEWAL23Bernardo Dominic
1017Misaki RoysterRussia2025-09-13Printing Dimensions NEW68Elwin Sharvill
1018Aika InouyeItaly2025-09-30Benton, John B Jr PROPOSAL11Elwin Sharvill
1019Chavez BriddickBrazil2025-09-24Buckley Miller Wright QUALIFIED78Onyama Limba
1020Tony FollerCanada2025-09-20Feiner Bros PROPOSAL62Xuxue Feng
1021Kaitlin OstroskyIndia2025-09-26Commercial Press NEW28Bernardo Dominic
1022Leja CaldareraUnited Kingdom2025-09-18Rousseaux, Michael Esq RENEWAL27Anna Fali
1023Munro FerenczRussia2025-09-13Chapman, Ross E Esq NEGOTIATION21Onyama Limba
1024Mujtaba NickaGermany2025-09-16Buckley Miller Wright UNQUALIFIED42Stephen Shaw
1025Chavez BriddickBrazil2025-09-28Truhlar And Truhlar Attys PROPOSAL43Amy Elsner
1026Kadeem FlosiIndia2025-10-11Dorl, James J Esq PROPOSAL98Amy Elsner
1027Ricardo GauchoGermany2025-09-27Chanay, Jeffrey A Esq RENEWAL25Ivan Magalhaes
1028Mayumi KolmetzIndia2025-09-21Dorl, James J Esq UNQUALIFIED47Amy Elsner
1029Morrow RutaArgentina2025-10-08Chemel, James L Cpa QUALIFIED25Stephen Shaw
1030Mujtaba NickaUnited Kingdom2025-09-22Chanay, Jeffrey A Esq NEW82Ioni Bowcher
1031Kaitlin OstroskyGermany2025-10-07Morlong Associates QUALIFIED49Xuxue Feng
1032Clifford RimCanada2025-10-09Feltz Printing Service NEGOTIATION86Stephen Shaw
1033Jeanfrancois VenereSpain2025-10-03Morlong Associates NEGOTIATION81Onyama Limba
1034Tony FollerArgentina2025-10-02Rousseaux, Michael Esq RENEWAL48Anna Fali
1035Sinclair WaycottFrance2025-09-22Chanay, Jeffrey A Esq UNQUALIFIED3Xuxue Feng
1036Mujtaba NickaIndia2025-09-24Buckley Miller Wright RENEWAL50Bernardo Dominic
1037Nicolas IturbideAustralia2025-09-17Feltz Printing Service UNQUALIFIED46Onyama Limba
1038Alejandro PerinUnited Kingdom2025-10-09Truhlar And Truhlar Attys NEW98Ioni Bowcher
1039Misaki RoysterSpain2025-09-25Feltz Printing Service RENEWAL63Anna Fali
1040Murillo MaletAustralia2025-09-29Feiner Bros PROPOSAL86Anna Fali
1041Kadeem FlosiUnited Kingdom2025-09-28Chapman, Ross E Esq QUALIFIED88Bernardo Dominic
1042Julie StensethIndia2025-09-21Buckley Miller Wright QUALIFIED40Ivan Magalhaes
1043Jefferson SchemmerArgentina2025-10-09Buckley Miller Wright NEW45Stephen Shaw
1044Adams MorascaFrance2025-09-17King, Christopher A Esq UNQUALIFIED37Stephen Shaw
1045Ashley DoeRussia2025-09-29Rousseaux, Michael Esq RENEWAL24Xuxue Feng
1046Costa DilliardJapan2025-09-13Dorl, James J Esq NEW95Elwin Sharvill
1047Arvin AlbaresIndia2025-10-10King, Christopher A Esq UNQUALIFIED75Bernardo Dominic
1048Greenwood BologniaItaly2025-09-25Buckley Miller Wright RENEWAL93Asiya Javayant
1049Maisha RulapaughCanada2025-10-06Printing Dimensions RENEWAL91Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Francesco ShinkoCanadaXuxue Feng QUALIFIED
Kadeem FlosiFranceIvan Magalhaes UNQUALIFIED
Morrow RutaBrazilAmy Elsner UNQUALIFIED
Jefferson SchemmerCanadaElwin Sharvill RENEWAL
Jeanfrancois VenereItalyAsiya Javayant PROPOSAL
Ricardo GauchoArgentinaAmy Elsner RENEWAL
Mujtaba NickaIndiaXuxue Feng UNQUALIFIED
Stacey MacleadUnited KingdomStephen Shaw PROPOSAL
Emily WhobreyFranceOnyama Limba UNQUALIFIED
Kadeem FlosiIndiaBernardo Dominic QUALIFIED
Costa DilliardCanadaIoni Bowcher UNQUALIFIED
James ButtUnited KingdomStephen Shaw PROPOSAL
Costa DilliardGermanyXuxue Feng PROPOSAL
Leon OldroydFranceIvan Magalhaes RENEWAL
Juan WieserArgentinaIoni Bowcher NEGOTIATION
Aruna FigeroaCanadaOnyama Limba NEGOTIATION
Francesco ShinkoJapanAmy Elsner NEW
Salvatore StockhamJapanIvan Magalhaes NEGOTIATION
Salvatore StockhamArgentinaAsiya Javayant RENEWAL
Smith GlickGermanyAnna Fali RENEWAL
Ricardo GauchoArgentinaAnna Fali UNQUALIFIED
Aditya KuskoSpainOnyama Limba PROPOSAL
Nicolas IturbideJapanXuxue Feng NEW
Johnson SergiUnited KingdomAnna Fali QUALIFIED
Emily WhobreyFranceElwin Sharvill UNQUALIFIED
Ricardo GauchoJapanOnyama Limba QUALIFIED
Deepesh ChuiFranceAmy Elsner RENEWAL
Jefferson SchemmerRussiaBernardo Dominic UNQUALIFIED
Juan WieserGermanyOnyama Limba NEW
Faith GillianBrazilXuxue Feng QUALIFIED
Munro FerenczGermanyIoni Bowcher NEW
Emily WhobreyJapanStephen Shaw NEGOTIATION
Deepesh ChuiSpainAnna Fali RENEWAL
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Salvatore StockhamUnited KingdomAnna Fali NEGOTIATION
Jeanfrancois VenereIndiaAsiya Javayant QUALIFIED
Misaki RoysterGermanyIvan Magalhaes QUALIFIED
Maria MarrierUnited KingdomBernardo Dominic NEGOTIATION
Greenwood BologniaRussiaOnyama Limba UNQUALIFIED
Octavia MaletSpainAsiya Javayant QUALIFIED
Faith GillianArgentinaOnyama Limba QUALIFIED
Kadeem FlosiCanadaAnna Fali UNQUALIFIED
Costa DilliardIndiaElwin Sharvill UNQUALIFIED
Francesco ShinkoUnited KingdomStephen Shaw UNQUALIFIED
Antonio CaudyCanadaXuxue Feng QUALIFIED
Chavez BriddickItalyAmy Elsner QUALIFIED
Francesco ShinkoItalyAmy Elsner RENEWAL
Kadeem FlosiUnited KingdomXuxue Feng QUALIFIED
Julie StensethCanadaBernardo Dominic RENEWAL
Claire TollnerUnited KingdomAnna Fali UNQUALIFIED
Frozen Columns
Name
Nicolas Iturbide
Alejandro Perin
Rodrigues Campain
Maria Marrier
Kaitlin Ostrosky
Jones Vocelka
Johnson Sergi
Adams Morasca
Misaki Royster
Francesco Shinko
Smith Glick
Isabel Bowley
Costa Dilliard
Clifford Rim
Cody Saylors
Nicolas Iturbide
Munro Ferencz
Jefferson Schemmer
Silvio Slusarski
Ashley Doe
Octavia Malet
Costa Dilliard
Jennifer Amigon
Maisha Rulapaugh
Clifford Rim
Darci Poquette
Alejandro Perin
Costa Dilliard
Chavez Briddick
Octavia Malet
Jefferson Schemmer
Adams Morasca
Clifford Rim
Isabel Bowley
Leon Oldroyd
Jones Vocelka
Francesco Shinko
Julie Stenseth
Maisha Rulapaugh
Julie Stenseth
Aika Inouye
Cody Saylors
Kaitlin Ostrosky
Ashley Doe
Antonio Caudy
Misaki Royster
Morrow Ruta
Isabel Bowley
Adams Morasca
Maisha Rulapaugh
IdCountryDate
1000Russia2025-09-18
1001India2025-09-17
1002Japan2025-10-01
1003Brazil2025-10-10
1004Russia2025-09-18
1005Italy2025-09-20
1006Germany2025-09-21
1007India2025-10-03
1008India2025-10-02
1009United Kingdom2025-10-01
1010United Kingdom2025-09-24
1011Australia2025-09-28
1012Canada2025-09-25
1013France2025-09-13
1014Italy2025-09-17
1015Germany2025-09-14
1016United Kingdom2025-09-25
1017Japan2025-09-29
1018United Kingdom2025-09-22
1019Italy2025-10-05
1020Spain2025-09-24
1021Germany2025-10-07
1022Argentina2025-10-05
1023Italy2025-09-15
1024Canada2025-10-05
1025India2025-09-13
1026Argentina2025-10-08
1027Canada2025-09-21
1028Australia2025-10-08
1029Russia2025-09-18
1030Italy2025-10-06
1031India2025-10-09
1032France2025-09-24
1033Australia2025-09-14
1034United Kingdom2025-09-23
1035France2025-09-25
1036India2025-09-14
1037Argentina2025-09-24
1038Brazil2025-09-26
1039Spain2025-09-28
1040Japan2025-09-27
1041Brazil2025-09-14
1042India2025-10-02
1043Brazil2025-10-10
1044Russia2025-09-30
1045India2025-10-09
1046Canada2025-10-11
1047Brazil2025-10-08
1048Canada2025-09-16
1049Japan2025-09-20

On-Demand Data

NameIdCountryDate
Faith Gillian1000Italy2025-10-03
Leja Caldarera1001Spain2025-09-28
Kadeem Flosi1002Russia2025-10-04
Silvio Slusarski1003Brazil2025-09-12
Stacey Maclead1004Germany2025-09-14
Mayumi Kolmetz1005United Kingdom2025-10-11
Francesco Shinko1006Germany2025-09-24
David Darakjy1007Japan2025-10-02
Rodrigues Campain1008Spain2025-10-02
Darci Poquette1009Russia2025-09-18
Maria Marrier1010Argentina2025-09-15
Ricardo Gaucho1011India2025-09-17
Jefferson Schemmer1012France2025-10-03
Rodrigues Campain1013Italy2025-09-15
Izzy Garufi1014Argentina2025-09-12
Arvin Albares1015Argentina2025-09-29
Munro Ferencz1016Italy2025-09-22
Maisha Rulapaugh1017Australia2025-09-23
Adams Morasca1018Germany2025-10-08
Johnson Sergi1019Argentina2025-10-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Johnson SergiItalyIvan Magalhaes RENEWAL
Leon OldroydFranceXuxue Feng PROPOSAL
Nicolas IturbideCanadaXuxue Feng NEGOTIATION
Silvio SlusarskiFranceIoni Bowcher NEGOTIATION
Costa DilliardItalyAnna Fali PROPOSAL
Adams MorascaAustraliaIoni Bowcher RENEWAL
Leon OldroydUnited KingdomIvan Magalhaes NEW
Kadeem FlosiBrazilAnna Fali RENEWAL
James ButtUnited KingdomElwin Sharvill RENEWAL
Julie StensethRussiaAnna Fali NEGOTIATION
Ashley DoeJapanAsiya Javayant QUALIFIED
James ButtGermanyAmy Elsner QUALIFIED
Aruna FigeroaItalyStephen Shaw RENEWAL
Aika InouyeAustraliaAmy Elsner PROPOSAL
Francesco ShinkoArgentinaAsiya Javayant RENEWAL
Juan WieserSpainStephen Shaw PROPOSAL
Nicolas IturbideSpainIvan Magalhaes RENEWAL
Chavez BriddickSpainIvan Magalhaes QUALIFIED
Alejandro PerinAustraliaAnna Fali NEGOTIATION
Juan WieserIndiaOnyama Limba QUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant NEW
Clifford RimIndiaElwin Sharvill NEW
Francesco ShinkoRussiaIoni Bowcher QUALIFIED
Adams MorascaRussiaAmy Elsner RENEWAL
Murillo MaletFranceBernardo Dominic NEGOTIATION
Izzy GarufiSpainOnyama Limba RENEWAL
Johnson SergiJapanIoni Bowcher RENEWAL
Francesco ShinkoRussiaStephen Shaw UNQUALIFIED
Antonio CaudyGermanyElwin Sharvill RENEWAL
Juan WieserCanadaIvan Magalhaes QUALIFIED
Isabel BowleyAustraliaAnna Fali RENEWAL
Aruna FigeroaSpainOnyama Limba NEW
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Ivar PaprockiBrazilAmy Elsner RENEWAL
Greenwood BologniaUnited KingdomStephen Shaw UNQUALIFIED
David DarakjyArgentinaAsiya Javayant RENEWAL
Leja CaldareraUnited KingdomIvan Magalhaes NEGOTIATION
Darci PoquetteArgentinaElwin Sharvill RENEWAL
Rodrigues CampainIndiaIvan Magalhaes RENEWAL
Aika InouyeBrazilStephen Shaw NEW

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