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
Alejandro PerinArgentinaStephen Shaw NEW
Leja CaldareraUnited KingdomAsiya Javayant NEW
Costa DilliardJapanAmy Elsner QUALIFIED
Octavia MaletSpainIvan Magalhaes RENEWAL
Antonio CaudyFranceAnna Fali NEW
Leja CaldareraJapanBernardo Dominic PROPOSAL
Jennifer AmigonJapanIvan Magalhaes QUALIFIED
Leon OldroydCanadaElwin Sharvill PROPOSAL
Aditya KuskoJapanIvan Magalhaes UNQUALIFIED
Chavez BriddickArgentinaIvan Magalhaes NEGOTIATION
Silvio SlusarskiFranceXuxue Feng UNQUALIFIED
Johnson SergiJapanOnyama Limba UNQUALIFIED
Ivar PaprockiRussiaAsiya Javayant NEGOTIATION
Alejandro PerinFranceAnna Fali NEW
Salvatore StockhamAustraliaAsiya Javayant RENEWAL
Deepesh ChuiCanadaElwin Sharvill QUALIFIED
Morrow RutaAustraliaAnna Fali RENEWAL
Alejandro PerinUnited KingdomAsiya Javayant NEGOTIATION
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Silvio SlusarskiBrazilStephen Shaw PROPOSAL
David DarakjyBrazilIvan Magalhaes QUALIFIED
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Deepesh ChuiUnited KingdomIvan Magalhaes NEW
Clifford RimBrazilAmy Elsner NEGOTIATION
Aruna FigeroaCanadaElwin Sharvill NEGOTIATION
Jennifer AmigonSpainBernardo Dominic PROPOSAL
Misaki RoysterItalyAmy Elsner UNQUALIFIED
Emily WhobreySpainStephen Shaw NEW
Adams MorascaCanadaAnna Fali UNQUALIFIED
Julie StensethItalyXuxue Feng NEGOTIATION
Sinclair WaycottCanadaBernardo Dominic PROPOSAL
Adams MorascaCanadaStephen Shaw NEGOTIATION
Jefferson SchemmerSpainStephen Shaw NEGOTIATION
Johnson SergiBrazilElwin Sharvill RENEWAL
David DarakjyJapanBernardo Dominic PROPOSAL
Jennifer AmigonIndiaOnyama Limba UNQUALIFIED
Arvin AlbaresAustraliaXuxue Feng QUALIFIED
Mayumi KolmetzIndiaAsiya Javayant NEGOTIATION
Kadeem FlosiGermanyOnyama Limba RENEWAL
Francesco ShinkoRussiaAsiya Javayant RENEWAL
Salvatore StockhamIndiaIoni Bowcher UNQUALIFIED
Munro FerenczIndiaBernardo Dominic PROPOSAL
Leja CaldareraFranceXuxue Feng NEW
Kaitlin OstroskyUnited KingdomIvan Magalhaes PROPOSAL
Wickens NestleGermanyIvan Magalhaes NEW
Silvio SlusarskiBrazilBernardo Dominic UNQUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes UNQUALIFIED
Mujtaba NickaUnited KingdomAsiya Javayant NEGOTIATION
Rodrigues CampainUnited KingdomOnyama Limba QUALIFIED
Tony FollerBrazilAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maria MarrierCanadaStephen Shaw QUALIFIED
Mujtaba NickaIndiaAsiya Javayant PROPOSAL
Sinclair WaycottUnited KingdomIvan Magalhaes NEGOTIATION
Jeanfrancois VenereIndiaElwin Sharvill QUALIFIED
Morrow RutaRussiaAsiya Javayant NEGOTIATION
Octavia MaletGermanyIoni Bowcher UNQUALIFIED
Maisha RulapaughGermanyAsiya Javayant NEGOTIATION
Rodrigues CampainUnited KingdomBernardo Dominic NEGOTIATION
Deepesh ChuiAustraliaAmy Elsner UNQUALIFIED
James ButtJapanIvan Magalhaes QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiFrance2025-09-12Truhlar And Truhlar Attys PROPOSAL55Ioni Bowcher
1001Mujtaba NickaFrance2025-09-25Rousseaux, Michael Esq NEGOTIATION77Bernardo Dominic
1002Clifford RimFrance2025-09-04Benton, John B Jr PROPOSAL8Anna Fali
1003Antonio CaudyBrazil2025-09-20Buckley Miller Wright NEW74Amy Elsner
1004Murillo MaletUnited Kingdom2025-09-09King, Christopher A Esq QUALIFIED29Elwin Sharvill
1005Juan WieserJapan2025-09-25Feltz Printing Service PROPOSAL36Ivan Magalhaes
1006Maria MarrierIndia2025-09-11Commercial Press QUALIFIED64Stephen Shaw
1007Morrow RutaAustralia2025-09-27Chemel, James L Cpa NEGOTIATION43Elwin Sharvill
1008Aditya KuskoBrazil2025-09-26Rousseaux, Michael Esq PROPOSAL66Amy Elsner
1009Aditya KuskoFrance2025-09-06Morlong Associates NEW80Asiya Javayant
1010Morrow RutaCanada2025-09-26Truhlar And Truhlar Attys NEW14Anna Fali
1011Claire TollnerArgentina2025-09-20Chapman, Ross E Esq QUALIFIED21Ivan Magalhaes
1012Emily WhobreyArgentina2025-09-16Dorl, James J Esq PROPOSAL66Amy Elsner
1013Izzy GarufiRussia2025-09-18Chapman, Ross E Esq NEGOTIATION77Asiya Javayant
1014Jeanfrancois VenereUnited Kingdom2025-09-17Feltz Printing Service RENEWAL61Ivan Magalhaes
1015Chavez BriddickGermany2025-08-31Morlong Associates NEW21Ivan Magalhaes
1016Rodrigues CampainSpain2025-09-21Chanay, Jeffrey A Esq PROPOSAL42Anna Fali
1017Adams MorascaCanada2025-09-03Morlong Associates NEW85Anna Fali
1018Maria MarrierRussia2025-09-20Printing Dimensions UNQUALIFIED6Ioni Bowcher
1019Leja CaldareraIndia2025-09-14Buckley Miller Wright UNQUALIFIED37Amy Elsner
1020Ricardo GauchoArgentina2025-09-14Printing Dimensions NEW46Asiya Javayant
1021Maria MarrierFrance2025-09-11Rangoni Of Florence PROPOSAL72Amy Elsner
1022Stacey MacleadJapan2025-09-02Feltz Printing Service RENEWAL44Onyama Limba
1023Juan WieserGermany2025-09-26Benton, John B Jr UNQUALIFIED67Bernardo Dominic
1024Adams MorascaArgentina2025-09-01Feiner Bros QUALIFIED21Ioni Bowcher
1025Greenwood BologniaRussia2025-09-02Chanay, Jeffrey A Esq NEGOTIATION26Ioni Bowcher
1026Izzy GarufiBrazil2025-09-03Chanay, Jeffrey A Esq NEW81Anna Fali
1027Alejandro PerinAustralia2025-09-16Chapman, Ross E Esq NEGOTIATION25Onyama Limba
1028Adams MorascaFrance2025-09-11Chapman, Ross E Esq PROPOSAL57Xuxue Feng
1029Munro FerenczArgentina2025-09-12Buckley Miller Wright RENEWAL97Xuxue Feng
1030Clifford RimItaly2025-08-29Morlong Associates NEGOTIATION75Bernardo Dominic
1031Johnson SergiIndia2025-09-20Morlong Associates UNQUALIFIED14Onyama Limba
1032Chavez BriddickUnited Kingdom2025-09-05Feltz Printing Service UNQUALIFIED92Bernardo Dominic
1033Deepesh ChuiBrazil2025-09-14Chanay, Jeffrey A Esq NEW41Ivan Magalhaes
1034Ashley DoeAustralia2025-09-03Chemel, James L Cpa NEGOTIATION79Bernardo Dominic
1035David DarakjyAustralia2025-09-01Rangoni Of Florence RENEWAL48Elwin Sharvill
1036Kaitlin OstroskySpain2025-09-23Benton, John B Jr NEGOTIATION23Bernardo Dominic
1037Kadeem FlosiRussia2025-09-17Feltz Printing Service QUALIFIED54Onyama Limba
1038David DarakjyFrance2025-09-07Truhlar And Truhlar Attys RENEWAL54Bernardo Dominic
1039Mayumi KolmetzSpain2025-09-04Chapman, Ross E Esq QUALIFIED93Stephen Shaw
1040Salvatore StockhamRussia2025-09-07Feiner Bros NEGOTIATION58Elwin Sharvill
1041Antonio CaudyAustralia2025-09-13Feiner Bros UNQUALIFIED83Onyama Limba
1042Misaki RoysterAustralia2025-09-18Buckley Miller Wright RENEWAL75Anna Fali
1043Julie StensethAustralia2025-09-09Commercial Press NEGOTIATION61Anna Fali
1044Leon OldroydSpain2025-09-06Feltz Printing Service PROPOSAL57Ivan Magalhaes
1045Morrow RutaGermany2025-08-31Rangoni Of Florence PROPOSAL99Ivan Magalhaes
1046Leon OldroydJapan2025-09-22Benton, John B Jr QUALIFIED51Stephen Shaw
1047Antonio CaudyArgentina2025-09-24Feltz Printing Service RENEWAL24Stephen Shaw
1048Misaki RoysterSpain2025-09-21Chemel, James L Cpa RENEWAL39Ioni Bowcher
1049Kaitlin OstroskyRussia2025-09-23Truhlar And Truhlar Attys NEGOTIATION86Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiBrazilIoni Bowcher PROPOSAL
Greenwood BologniaBrazilIvan Magalhaes UNQUALIFIED
Ivar PaprockiIndiaXuxue Feng UNQUALIFIED
Chavez BriddickBrazilOnyama Limba PROPOSAL
Julie StensethRussiaAnna Fali QUALIFIED
Murillo MaletFranceStephen Shaw PROPOSAL
Kadeem FlosiArgentinaIvan Magalhaes QUALIFIED
Leja CaldareraUnited KingdomAsiya Javayant RENEWAL
Johnson SergiCanadaIvan Magalhaes PROPOSAL
Silvio SlusarskiItalyAsiya Javayant NEW
Mayumi KolmetzUnited KingdomXuxue Feng QUALIFIED
Francesco ShinkoArgentinaElwin Sharvill PROPOSAL
Arvin AlbaresUnited KingdomBernardo Dominic QUALIFIED
Jefferson SchemmerFranceAsiya Javayant NEW
Maisha RulapaughUnited KingdomIvan Magalhaes PROPOSAL
Juan WieserUnited KingdomElwin Sharvill QUALIFIED
Greenwood BologniaBrazilElwin Sharvill PROPOSAL
Kaitlin OstroskyUnited KingdomXuxue Feng QUALIFIED
Clifford RimSpainAsiya Javayant RENEWAL
Morrow RutaIndiaOnyama Limba QUALIFIED
Tony FollerGermanyAnna Fali QUALIFIED
Tony FollerItalyElwin Sharvill QUALIFIED
Jeanfrancois VenereGermanyOnyama Limba UNQUALIFIED
Misaki RoysterRussiaXuxue Feng PROPOSAL
Cody SaylorsSpainElwin Sharvill RENEWAL
Alejandro PerinCanadaIvan Magalhaes PROPOSAL
Kaitlin OstroskyIndiaAsiya Javayant NEW
Claire TollnerGermanyElwin Sharvill NEW
Izzy GarufiRussiaAsiya Javayant NEGOTIATION
Julie StensethJapanAmy Elsner RENEWAL
Murillo MaletGermanyIoni Bowcher PROPOSAL
Francesco ShinkoCanadaStephen Shaw PROPOSAL
Maria MarrierGermanyBernardo Dominic PROPOSAL
Silvio SlusarskiFranceIoni Bowcher NEGOTIATION
Stacey MacleadBrazilBernardo Dominic NEGOTIATION
Cody SaylorsGermanyAsiya Javayant NEGOTIATION
James ButtBrazilOnyama Limba NEGOTIATION
Francesco ShinkoUnited KingdomIoni Bowcher NEGOTIATION
Antonio CaudyCanadaOnyama Limba NEGOTIATION
Munro FerenczCanadaOnyama Limba UNQUALIFIED
Jones VocelkaCanadaOnyama Limba RENEWAL
Leja CaldareraRussiaIvan Magalhaes UNQUALIFIED
Aruna FigeroaItalyXuxue Feng PROPOSAL
Stacey MacleadUnited KingdomElwin Sharvill NEGOTIATION
Johnson SergiFranceAnna Fali NEW
Izzy GarufiJapanXuxue Feng NEW
Arvin AlbaresIndiaIoni Bowcher QUALIFIED
Aruna FigeroaCanadaAsiya Javayant NEGOTIATION
Wickens NestleJapanAmy Elsner NEGOTIATION
Leja CaldareraCanadaAnna Fali NEGOTIATION
Frozen Columns
Name
Maria Marrier
Silvio Slusarski
Smith Glick
Arvin Albares
Wickens Nestle
Leja Caldarera
Salvatore Stockham
Maria Marrier
Misaki Royster
Nicolas Iturbide
Jennifer Amigon
Rodrigues Campain
Cody Saylors
Antonio Caudy
Tony Foller
Nicolas Iturbide
Faith Gillian
Jefferson Schemmer
Jones Vocelka
Mujtaba Nicka
Isabel Bowley
Maria Marrier
Francesco Shinko
Darci Poquette
Ashley Doe
Nicolas Iturbide
Chavez Briddick
Misaki Royster
Julie Stenseth
Julie Stenseth
Juan Wieser
Aditya Kusko
Kaitlin Ostrosky
Costa Dilliard
Rodrigues Campain
Ashley Doe
Isabel Bowley
Jennifer Amigon
Adams Morasca
Aditya Kusko
Cody Saylors
Jeanfrancois Venere
Aika Inouye
Maisha Rulapaugh
Aika Inouye
Ivar Paprocki
Munro Ferencz
Nicolas Iturbide
Ashley Doe
Ricardo Gaucho
IdCountryDate
1000Russia2025-08-31
1001Australia2025-09-16
1002France2025-08-29
1003France2025-09-04
1004Spain2025-09-01
1005United Kingdom2025-08-30
1006Argentina2025-09-05
1007Germany2025-09-05
1008United Kingdom2025-09-27
1009Spain2025-09-25
1010Germany2025-09-18
1011Brazil2025-09-25
1012Brazil2025-09-18
1013India2025-08-30
1014Australia2025-09-20
1015Argentina2025-09-17
1016Germany2025-09-22
1017Canada2025-09-13
1018Brazil2025-09-07
1019Australia2025-08-30
1020India2025-09-21
1021France2025-09-06
1022Australia2025-09-04
1023India2025-09-01
1024United Kingdom2025-09-24
1025Germany2025-08-31
1026France2025-09-05
1027Brazil2025-09-07
1028France2025-09-10
1029Spain2025-09-26
1030France2025-09-08
1031Spain2025-09-21
1032Italy2025-09-25
1033Australia2025-08-30
1034Spain2025-08-31
1035Australia2025-09-21
1036Spain2025-09-16
1037Japan2025-09-15
1038Australia2025-09-08
1039Argentina2025-09-09
1040Australia2025-09-11
1041Japan2025-09-08
1042Canada2025-09-16
1043Australia2025-08-29
1044Brazil2025-09-27
1045France2025-09-06
1046Argentina2025-09-06
1047Canada2025-09-18
1048Spain2025-09-11
1049Japan2025-08-29

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Italy2025-09-05
David Darakjy1001United Kingdom2025-09-27
Izzy Garufi1002United Kingdom2025-09-25
Aruna Figeroa1003Japan2025-09-21
Rodrigues Campain1004Russia2025-09-19
Costa Dilliard1005France2025-09-27
Mujtaba Nicka1006France2025-09-25
Octavia Malet1007Russia2025-09-23
Tony Foller1008Australia2025-09-05
Jones Vocelka1009Canada2025-09-11
Claire Tollner1010Australia2025-09-23
Emily Whobrey1011Japan2025-09-24
Munro Ferencz1012Spain2025-09-21
Clifford Rim1013India2025-09-12
Ivar Paprocki1014Brazil2025-09-17
Nicolas Iturbide1015Italy2025-08-30
Chavez Briddick1016United Kingdom2025-09-12
Izzy Garufi1017Australia2025-09-05
Francesco Shinko1018United Kingdom2025-09-21
Jennifer Amigon1019United Kingdom2025-09-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ashley DoeUnited KingdomXuxue Feng NEGOTIATION
Nicolas IturbideIndiaXuxue Feng UNQUALIFIED
Octavia MaletCanadaAmy Elsner NEGOTIATION
Smith GlickFranceOnyama Limba UNQUALIFIED
Leon OldroydBrazilBernardo Dominic UNQUALIFIED
Juan WieserRussiaStephen Shaw NEGOTIATION
Tony FollerRussiaBernardo Dominic NEGOTIATION
Stacey MacleadIndiaXuxue Feng NEW
Faith GillianBrazilOnyama Limba QUALIFIED
Adams MorascaBrazilAmy Elsner PROPOSAL
Stacey MacleadRussiaBernardo Dominic UNQUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner RENEWAL
Chavez BriddickGermanyOnyama Limba NEGOTIATION
Wickens NestleArgentinaStephen Shaw NEW
Morrow RutaAustraliaAsiya Javayant NEW
Leon OldroydCanadaStephen Shaw QUALIFIED
Murillo MaletSpainStephen Shaw NEW
Aika InouyeFranceAnna Fali UNQUALIFIED
Juan WieserRussiaElwin Sharvill UNQUALIFIED
Johnson SergiBrazilXuxue Feng NEGOTIATION
Jones VocelkaFranceXuxue Feng RENEWAL
Mayumi KolmetzJapanBernardo Dominic QUALIFIED
Murillo MaletAustraliaElwin Sharvill UNQUALIFIED
Rodrigues CampainArgentinaAmy Elsner NEW
Jeanfrancois VenereRussiaIvan Magalhaes NEW
Juan WieserBrazilAmy Elsner QUALIFIED
Claire TollnerBrazilAnna Fali RENEWAL
Silvio SlusarskiJapanBernardo Dominic RENEWAL
Octavia MaletFranceXuxue Feng RENEWAL
Ricardo GauchoRussiaAsiya Javayant NEGOTIATION
David DarakjyItalyAnna Fali RENEWAL
Rodrigues CampainJapanAmy Elsner UNQUALIFIED
Julie StensethArgentinaAsiya Javayant RENEWAL
Jefferson SchemmerUnited KingdomElwin Sharvill QUALIFIED
Greenwood BologniaFranceIoni Bowcher PROPOSAL
Leon OldroydAustraliaXuxue Feng NEGOTIATION
Emily WhobreyGermanyOnyama Limba NEW
Kaitlin OstroskySpainAmy Elsner NEGOTIATION
James ButtCanadaStephen Shaw PROPOSAL
Costa DilliardUnited KingdomAsiya 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>