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
David DarakjyIndiaAsiya Javayant PROPOSAL
Clifford RimFranceIvan Magalhaes UNQUALIFIED
Silvio SlusarskiItalyBernardo Dominic UNQUALIFIED
Greenwood BologniaFranceIoni Bowcher UNQUALIFIED
Maria MarrierAustraliaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereJapanAmy Elsner QUALIFIED
Johnson SergiArgentinaStephen Shaw NEGOTIATION
Sinclair WaycottJapanOnyama Limba QUALIFIED
Ashley DoeUnited KingdomStephen Shaw NEW
Tony FollerJapanElwin Sharvill QUALIFIED
James ButtJapanBernardo Dominic PROPOSAL
James ButtItalyBernardo Dominic NEW
Greenwood BologniaItalyIvan Magalhaes RENEWAL
Leja CaldareraGermanyAnna Fali PROPOSAL
Sinclair WaycottBrazilBernardo Dominic NEW
Sinclair WaycottArgentinaXuxue Feng PROPOSAL
Wickens NestleCanadaStephen Shaw NEGOTIATION
Morrow RutaSpainIvan Magalhaes UNQUALIFIED
Johnson SergiGermanyStephen Shaw RENEWAL
Jefferson SchemmerSpainAsiya Javayant QUALIFIED
Rodrigues CampainCanadaAmy Elsner UNQUALIFIED
Arvin AlbaresBrazilBernardo Dominic QUALIFIED
Munro FerenczCanadaXuxue Feng UNQUALIFIED
Sinclair WaycottIndiaIvan Magalhaes UNQUALIFIED
Costa DilliardItalyXuxue Feng NEGOTIATION
Tony FollerUnited KingdomAsiya Javayant UNQUALIFIED
Isabel BowleyJapanAsiya Javayant NEW
Leon OldroydCanadaIvan Magalhaes UNQUALIFIED
Emily WhobreySpainOnyama Limba RENEWAL
Jeanfrancois VenereRussiaAmy Elsner NEGOTIATION
Claire TollnerGermanyIoni Bowcher PROPOSAL
Claire TollnerIndiaIvan Magalhaes UNQUALIFIED
Julie StensethAustraliaAmy Elsner UNQUALIFIED
Johnson SergiIndiaIoni Bowcher QUALIFIED
Costa DilliardItalyIvan Magalhaes NEGOTIATION
Morrow RutaAustraliaAmy Elsner PROPOSAL
Ricardo GauchoSpainXuxue Feng NEGOTIATION
Arvin AlbaresGermanyStephen Shaw PROPOSAL
Octavia MaletIndiaAsiya Javayant RENEWAL
Nicolas IturbideArgentinaBernardo Dominic NEW
Misaki RoysterJapanAmy Elsner PROPOSAL
Leja CaldareraIndiaAsiya Javayant UNQUALIFIED
Isabel BowleyJapanAmy Elsner NEW
Salvatore StockhamItalyIvan Magalhaes NEW
Antonio CaudyArgentinaOnyama Limba RENEWAL
David DarakjyIndiaIvan Magalhaes NEGOTIATION
Kadeem FlosiIndiaElwin Sharvill PROPOSAL
Aditya KuskoIndiaStephen Shaw QUALIFIED
Cody SaylorsUnited KingdomIoni Bowcher QUALIFIED
Morrow RutaItalyXuxue Feng NEW
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaRussiaIoni Bowcher UNQUALIFIED
Alejandro PerinAustraliaElwin Sharvill UNQUALIFIED
Octavia MaletAustraliaStephen Shaw RENEWAL
Aika InouyeCanadaXuxue Feng NEW
Sinclair WaycottJapanIvan Magalhaes NEGOTIATION
Stacey MacleadAustraliaOnyama Limba RENEWAL
Smith GlickFranceXuxue Feng NEGOTIATION
Julie StensethRussiaAmy Elsner PROPOSAL
Murillo MaletRussiaXuxue Feng NEGOTIATION
Juan WieserAustraliaIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzItaly2026-04-06Chemel, James L Cpa PROPOSAL0Stephen Shaw
1001Alejandro PerinGermany2026-04-03King, Christopher A Esq NEW11Ivan Magalhaes
1002Emily WhobreyJapan2026-04-29Rangoni Of Florence UNQUALIFIED62Onyama Limba
1003Jefferson SchemmerIndia2026-04-17Printing Dimensions QUALIFIED76Ioni Bowcher
1004Arvin AlbaresFrance2026-04-11Chapman, Ross E Esq PROPOSAL51Anna Fali
1005Morrow RutaCanada2026-04-12Rangoni Of Florence RENEWAL89Xuxue Feng
1006Octavia MaletArgentina2026-04-02Rousseaux, Michael Esq PROPOSAL46Asiya Javayant
1007Antonio CaudyItaly2026-04-26Rousseaux, Michael Esq NEW3Xuxue Feng
1008Alejandro PerinGermany2026-04-12Chanay, Jeffrey A Esq RENEWAL21Xuxue Feng
1009Ricardo GauchoCanada2026-04-01Printing Dimensions PROPOSAL19Asiya Javayant
1010Alejandro PerinRussia2026-04-08Chapman, Ross E Esq PROPOSAL85Onyama Limba
1011Jeanfrancois VenereFrance2026-04-12Rangoni Of Florence NEW93Ioni Bowcher
1012Ricardo GauchoAustralia2026-04-25Commercial Press NEW23Asiya Javayant
1013Izzy GarufiJapan2026-04-11Chanay, Jeffrey A Esq RENEWAL65Xuxue Feng
1014Octavia MaletArgentina2026-04-12Buckley Miller Wright NEGOTIATION63Asiya Javayant
1015Octavia MaletAustralia2026-04-25Chanay, Jeffrey A Esq NEGOTIATION20Asiya Javayant
1016Salvatore StockhamJapan2026-04-01Buckley Miller Wright RENEWAL61Onyama Limba
1017Faith GillianFrance2026-04-14Feiner Bros PROPOSAL64Ivan Magalhaes
1018Mujtaba NickaUnited Kingdom2026-04-22Feiner Bros QUALIFIED38Stephen Shaw
1019Jefferson SchemmerFrance2026-04-26King, Christopher A Esq RENEWAL32Asiya Javayant
1020Rodrigues CampainSpain2026-04-12Rangoni Of Florence QUALIFIED12Bernardo Dominic
1021Ashley DoeUnited Kingdom2026-04-12Benton, John B Jr QUALIFIED28Elwin Sharvill
1022Mujtaba NickaSpain2026-04-05Buckley Miller Wright QUALIFIED65Bernardo Dominic
1023Mujtaba NickaArgentina2026-04-20Feiner Bros RENEWAL2Anna Fali
1024Aruna FigeroaArgentina2026-04-05Rangoni Of Florence NEW54Ioni Bowcher
1025Leon OldroydRussia2026-04-11King, Christopher A Esq PROPOSAL84Onyama Limba
1026Ricardo GauchoSpain2026-04-04Chemel, James L Cpa UNQUALIFIED76Anna Fali
1027Deepesh ChuiGermany2026-04-19Morlong Associates NEGOTIATION12Elwin Sharvill
1028Jefferson SchemmerArgentina2026-04-26Rousseaux, Michael Esq UNQUALIFIED20Asiya Javayant
1029Deepesh ChuiBrazil2026-03-31Truhlar And Truhlar Attys NEGOTIATION39Ivan Magalhaes
1030Aruna FigeroaItaly2026-04-02Buckley Miller Wright UNQUALIFIED74Stephen Shaw
1031Clifford RimItaly2026-04-20Printing Dimensions UNQUALIFIED5Stephen Shaw
1032David DarakjyGermany2026-04-08Benton, John B Jr PROPOSAL64Ivan Magalhaes
1033Alejandro PerinCanada2026-04-17Truhlar And Truhlar Attys RENEWAL59Amy Elsner
1034Costa DilliardRussia2026-04-25Rousseaux, Michael Esq NEGOTIATION59Stephen Shaw
1035Mayumi KolmetzBrazil2026-04-04Commercial Press NEW34Ioni Bowcher
1036Kadeem FlosiIndia2026-04-04Commercial Press RENEWAL33Ivan Magalhaes
1037Morrow RutaJapan2026-04-08Feltz Printing Service NEW46Elwin Sharvill
1038Silvio SlusarskiSpain2026-04-11Feiner Bros QUALIFIED94Bernardo Dominic
1039Stacey MacleadGermany2026-04-17Chapman, Ross E Esq UNQUALIFIED11Stephen Shaw
1040Silvio SlusarskiSpain2026-04-15Chemel, James L Cpa QUALIFIED0Anna Fali
1041James ButtCanada2026-04-20Feltz Printing Service QUALIFIED16Onyama Limba
1042Sinclair WaycottArgentina2026-04-09Chapman, Ross E Esq NEGOTIATION49Onyama Limba
1043Julie StensethAustralia2026-04-01Benton, John B Jr RENEWAL91Ivan Magalhaes
1044Kadeem FlosiIndia2026-04-26Chapman, Ross E Esq PROPOSAL67Elwin Sharvill
1045Isabel BowleyCanada2026-04-08Truhlar And Truhlar Attys NEW83Ioni Bowcher
1046Aruna FigeroaItaly2026-04-15Chapman, Ross E Esq UNQUALIFIED16Ioni Bowcher
1047Ashley DoeAustralia2026-04-01Truhlar And Truhlar Attys PROPOSAL87Stephen Shaw
1048Mayumi KolmetzItaly2026-04-05Dorl, James J Esq NEGOTIATION67Stephen Shaw
1049Aditya KuskoFrance2026-04-14Feltz Printing Service RENEWAL66Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Faith GillianItalyOnyama Limba RENEWAL
Claire TollnerCanadaAmy Elsner NEW
Greenwood BologniaIndiaAmy Elsner QUALIFIED
Juan WieserSpainAmy Elsner RENEWAL
Adams MorascaSpainStephen Shaw UNQUALIFIED
Salvatore StockhamCanadaElwin Sharvill PROPOSAL
Juan WieserUnited KingdomBernardo Dominic NEW
Isabel BowleySpainIoni Bowcher NEW
Smith GlickGermanyElwin Sharvill RENEWAL
Costa DilliardIndiaAmy Elsner UNQUALIFIED
Izzy GarufiIndiaStephen Shaw PROPOSAL
David DarakjyCanadaAnna Fali NEGOTIATION
Stacey MacleadIndiaOnyama Limba PROPOSAL
Francesco ShinkoArgentinaStephen Shaw RENEWAL
Leon OldroydAustraliaIoni Bowcher NEW
Julie StensethUnited KingdomAnna Fali UNQUALIFIED
Misaki RoysterGermanyIvan Magalhaes PROPOSAL
Cody SaylorsUnited KingdomAmy Elsner UNQUALIFIED
Jennifer AmigonItalyStephen Shaw NEGOTIATION
Izzy GarufiFranceAsiya Javayant NEGOTIATION
Tony FollerRussiaXuxue Feng NEW
Johnson SergiUnited KingdomAsiya Javayant NEW
Nicolas IturbideIndiaIvan Magalhaes NEGOTIATION
Deepesh ChuiFranceAmy Elsner RENEWAL
Clifford RimIndiaIoni Bowcher NEW
Jennifer AmigonIndiaXuxue Feng NEW
Faith GillianJapanIoni Bowcher UNQUALIFIED
Antonio CaudyRussiaAsiya Javayant NEGOTIATION
Kadeem FlosiUnited KingdomXuxue Feng NEW
Francesco ShinkoGermanyStephen Shaw UNQUALIFIED
Faith GillianSpainBernardo Dominic QUALIFIED
Ricardo GauchoCanadaElwin Sharvill UNQUALIFIED
Jennifer AmigonItalyAnna Fali QUALIFIED
Ashley DoeUnited KingdomStephen Shaw UNQUALIFIED
Munro FerenczItalyBernardo Dominic PROPOSAL
Alejandro PerinAustraliaOnyama Limba QUALIFIED
Kaitlin OstroskyArgentinaStephen Shaw NEW
Emily WhobreyAustraliaElwin Sharvill NEW
Faith GillianRussiaIoni Bowcher UNQUALIFIED
Francesco ShinkoFranceBernardo Dominic NEGOTIATION
David DarakjySpainIoni Bowcher UNQUALIFIED
Alejandro PerinUnited KingdomElwin Sharvill RENEWAL
Octavia MaletCanadaAmy Elsner UNQUALIFIED
Wickens NestleSpainAnna Fali PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba NEGOTIATION
Mayumi KolmetzFranceIoni Bowcher RENEWAL
Misaki RoysterAustraliaIvan Magalhaes RENEWAL
Kadeem FlosiFranceAmy Elsner UNQUALIFIED
Claire TollnerRussiaIvan Magalhaes QUALIFIED
Mujtaba NickaItalyAnna Fali RENEWAL
Frozen Columns
Name
Smith Glick
Aika Inouye
Arvin Albares
Cody Saylors
Maisha Rulapaugh
Salvatore Stockham
Ricardo Gaucho
Chavez Briddick
Aditya Kusko
Jones Vocelka
Claire Tollner
Antonio Caudy
Jones Vocelka
Ashley Doe
Jeanfrancois Venere
Munro Ferencz
Alejandro Perin
Jones Vocelka
Izzy Garufi
Ricardo Gaucho
Rodrigues Campain
Stacey Maclead
Kaitlin Ostrosky
Jennifer Amigon
Clifford Rim
Johnson Sergi
Cody Saylors
Alejandro Perin
Jefferson Schemmer
Ricardo Gaucho
Deepesh Chui
Maria Marrier
Aika Inouye
Faith Gillian
Kadeem Flosi
Salvatore Stockham
Stacey Maclead
Nicolas Iturbide
Antonio Caudy
Sinclair Waycott
Ivar Paprocki
Johnson Sergi
Mujtaba Nicka
Stacey Maclead
Aditya Kusko
Aditya Kusko
Maria Marrier
Kaitlin Ostrosky
Octavia Malet
Stacey Maclead
IdCountryDate
1000Canada2026-04-06
1001India2026-04-27
1002Spain2026-04-06
1003Japan2026-04-07
1004Spain2026-04-24
1005Brazil2026-04-05
1006Japan2026-04-18
1007France2026-03-31
1008Japan2026-04-11
1009Russia2026-04-19
1010Canada2026-04-06
1011France2026-04-27
1012India2026-04-02
1013Canada2026-04-26
1014Canada2026-04-12
1015Canada2026-04-03
1016Argentina2026-04-23
1017Spain2026-04-25
1018Brazil2026-04-16
1019Italy2026-04-11
1020France2026-04-03
1021Brazil2026-04-11
1022Germany2026-04-18
1023Canada2026-04-01
1024Russia2026-04-20
1025Spain2026-04-27
1026Italy2026-04-03
1027Russia2026-04-18
1028India2026-04-07
1029Japan2026-04-19
1030Argentina2026-04-22
1031Germany2026-04-06
1032Germany2026-04-19
1033Italy2026-04-16
1034Italy2026-04-24
1035Russia2026-04-16
1036Germany2026-04-02
1037Canada2026-04-25
1038Japan2026-04-05
1039Russia2026-04-24
1040Russia2026-04-24
1041Canada2026-04-10
1042Australia2026-04-07
1043Argentina2026-04-28
1044Australia2026-04-13
1045Japan2026-04-23
1046France2026-04-21
1047Italy2026-04-29
1048United Kingdom2026-04-01
1049Brazil2026-04-13

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Canada2026-04-24
Jennifer Amigon1001Germany2026-04-14
Jones Vocelka1002Australia2026-04-15
Maria Marrier1003France2026-04-10
Munro Ferencz1004France2026-04-03
Munro Ferencz1005United Kingdom2026-04-02
Jeanfrancois Venere1006Italy2026-04-28
Aika Inouye1007Japan2026-04-05
Leja Caldarera1008United Kingdom2026-04-02
Kaitlin Ostrosky1009United Kingdom2026-04-01
Juan Wieser1010United Kingdom2026-04-02
David Darakjy1011Australia2026-04-15
Rodrigues Campain1012Argentina2026-04-01
Jennifer Amigon1013Argentina2026-04-11
Francesco Shinko1014India2026-04-19
Faith Gillian1015Australia2026-04-11
Smith Glick1016Argentina2026-03-31
Claire Tollner1017Canada2026-04-29
Greenwood Bolognia1018Australia2026-04-17
Ashley Doe1019Germany2026-04-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczItalyIvan Magalhaes NEW
Leja CaldareraJapanAnna Fali PROPOSAL
Faith GillianUnited KingdomXuxue Feng QUALIFIED
Murillo MaletAustraliaAsiya Javayant UNQUALIFIED
Aika InouyeArgentinaOnyama Limba NEW
Murillo MaletIndiaXuxue Feng UNQUALIFIED
Izzy GarufiBrazilIoni Bowcher QUALIFIED
Aika InouyeSpainIoni Bowcher UNQUALIFIED
Johnson SergiJapanElwin Sharvill UNQUALIFIED
Munro FerenczItalyStephen Shaw NEGOTIATION
Misaki RoysterSpainXuxue Feng NEGOTIATION
Aruna FigeroaAustraliaIoni Bowcher PROPOSAL
Leon OldroydGermanyIvan Magalhaes RENEWAL
Morrow RutaCanadaAmy Elsner PROPOSAL
Jennifer AmigonIndiaIoni Bowcher NEGOTIATION
Kaitlin OstroskyUnited KingdomStephen Shaw PROPOSAL
David DarakjyIndiaElwin Sharvill QUALIFIED
Aika InouyeSpainAsiya Javayant PROPOSAL
James ButtArgentinaElwin Sharvill QUALIFIED
Darci PoquetteCanadaElwin Sharvill NEGOTIATION
Francesco ShinkoRussiaStephen Shaw RENEWAL
Kadeem FlosiCanadaIvan Magalhaes QUALIFIED
Octavia MaletRussiaAsiya Javayant NEGOTIATION
Ivar PaprockiRussiaAmy Elsner NEGOTIATION
Jeanfrancois VenereCanadaXuxue Feng PROPOSAL
Johnson SergiCanadaIvan Magalhaes QUALIFIED
Misaki RoysterBrazilXuxue Feng QUALIFIED
Kadeem FlosiSpainXuxue Feng PROPOSAL
Isabel BowleyJapanAnna Fali NEGOTIATION
Kaitlin OstroskyGermanyOnyama Limba UNQUALIFIED
Deepesh ChuiUnited KingdomAnna Fali PROPOSAL
Sinclair WaycottSpainAnna Fali UNQUALIFIED
Adams MorascaItalyXuxue Feng UNQUALIFIED
Mayumi KolmetzFranceAmy Elsner UNQUALIFIED
Chavez BriddickIndiaAnna Fali QUALIFIED
Maisha RulapaughSpainXuxue Feng NEGOTIATION
Deepesh ChuiGermanyIoni Bowcher NEGOTIATION
Misaki RoysterFranceXuxue Feng NEW
James ButtSpainElwin Sharvill PROPOSAL
Kaitlin OstroskyArgentinaXuxue Feng QUALIFIED

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