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
Costa DilliardAustraliaOnyama Limba PROPOSAL
Alejandro PerinFranceAnna Fali PROPOSAL
Sinclair WaycottAustraliaXuxue Feng UNQUALIFIED
Francesco ShinkoFranceIvan Magalhaes RENEWAL
Maria MarrierRussiaAmy Elsner RENEWAL
Sinclair WaycottAustraliaBernardo Dominic UNQUALIFIED
Faith GillianJapanBernardo Dominic PROPOSAL
Izzy GarufiIndiaOnyama Limba PROPOSAL
Octavia MaletUnited KingdomIvan Magalhaes NEGOTIATION
Francesco ShinkoGermanyAmy Elsner QUALIFIED
Wickens NestleIndiaStephen Shaw QUALIFIED
Greenwood BologniaArgentinaOnyama Limba PROPOSAL
Mayumi KolmetzFranceAsiya Javayant PROPOSAL
Nicolas IturbideBrazilStephen Shaw RENEWAL
James ButtArgentinaAmy Elsner NEW
Tony FollerItalyIvan Magalhaes NEW
Murillo MaletJapanXuxue Feng NEW
Ivar PaprockiGermanyIvan Magalhaes QUALIFIED
Mujtaba NickaGermanyIvan Magalhaes PROPOSAL
Alejandro PerinFranceIvan Magalhaes RENEWAL
Tony FollerArgentinaBernardo Dominic PROPOSAL
Jennifer AmigonCanadaIoni Bowcher RENEWAL
Kadeem FlosiGermanyAnna Fali QUALIFIED
Kaitlin OstroskyIndiaXuxue Feng NEGOTIATION
Francesco ShinkoSpainIoni Bowcher NEGOTIATION
Nicolas IturbideAustraliaIvan Magalhaes NEW
Stacey MacleadBrazilStephen Shaw UNQUALIFIED
Isabel BowleyAustraliaIvan Magalhaes NEW
Smith GlickCanadaOnyama Limba QUALIFIED
Munro FerenczUnited KingdomAnna Fali UNQUALIFIED
Misaki RoysterFranceOnyama Limba QUALIFIED
Jennifer AmigonUnited KingdomElwin Sharvill NEGOTIATION
Mayumi KolmetzCanadaAnna Fali NEGOTIATION
Tony FollerAustraliaIvan Magalhaes RENEWAL
Costa DilliardBrazilAsiya Javayant NEW
Leon OldroydRussiaAmy Elsner QUALIFIED
Kadeem FlosiUnited KingdomAmy Elsner RENEWAL
Claire TollnerCanadaElwin Sharvill NEGOTIATION
Ivar PaprockiSpainStephen Shaw NEW
David DarakjyUnited KingdomIvan Magalhaes RENEWAL
Costa DilliardArgentinaIoni Bowcher NEGOTIATION
Claire TollnerFranceAmy Elsner UNQUALIFIED
Francesco ShinkoRussiaAsiya Javayant PROPOSAL
Ivar PaprockiCanadaBernardo Dominic NEW
Smith GlickSpainBernardo Dominic PROPOSAL
Julie StensethBrazilAmy Elsner NEW
Mayumi KolmetzSpainAsiya Javayant RENEWAL
Darci PoquetteBrazilAsiya Javayant PROPOSAL
Aditya KuskoBrazilIoni Bowcher QUALIFIED
Murillo MaletAustraliaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideCanadaAmy Elsner QUALIFIED
Alejandro PerinUnited KingdomStephen Shaw NEW
Leon OldroydFranceIvan Magalhaes NEGOTIATION
Octavia MaletBrazilAsiya Javayant PROPOSAL
Jeanfrancois VenereItalyIoni Bowcher QUALIFIED
Ivar PaprockiSpainAnna Fali PROPOSAL
Cody SaylorsJapanIoni Bowcher NEW
Jennifer AmigonSpainBernardo Dominic NEGOTIATION
Antonio CaudyCanadaXuxue Feng PROPOSAL
Cody SaylorsCanadaBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerCanada2026-05-23King, Christopher A Esq RENEWAL48Anna Fali
1001Johnson SergiBrazil2026-05-23Rousseaux, Michael Esq NEW0Asiya Javayant
1002Sinclair WaycottBrazil2026-05-22Benton, John B Jr UNQUALIFIED75Stephen Shaw
1003Greenwood BologniaSpain2026-05-30Feiner Bros NEW3Amy Elsner
1004Chavez BriddickAustralia2026-06-04Chemel, James L Cpa RENEWAL94Ioni Bowcher
1005Kadeem FlosiArgentina2026-06-15Rousseaux, Michael Esq PROPOSAL68Xuxue Feng
1006Jones VocelkaRussia2026-06-10King, Christopher A Esq RENEWAL65Bernardo Dominic
1007Mujtaba NickaIndia2026-06-06Chemel, James L Cpa UNQUALIFIED70Xuxue Feng
1008Greenwood BologniaAustralia2026-05-19Benton, John B Jr UNQUALIFIED84Bernardo Dominic
1009Arvin AlbaresBrazil2026-05-21Printing Dimensions NEGOTIATION41Ivan Magalhaes
1010Aika InouyeRussia2026-06-04Chapman, Ross E Esq NEGOTIATION96Ioni Bowcher
1011Aika InouyeArgentina2026-06-06Chanay, Jeffrey A Esq UNQUALIFIED15Xuxue Feng
1012Jennifer AmigonIndia2026-06-07Truhlar And Truhlar Attys PROPOSAL24Ioni Bowcher
1013Deepesh ChuiCanada2026-05-28Benton, John B Jr QUALIFIED83Ioni Bowcher
1014Murillo MaletItaly2026-06-06Buckley Miller Wright NEGOTIATION61Xuxue Feng
1015Cody SaylorsGermany2026-05-31Printing Dimensions PROPOSAL36Asiya Javayant
1016David DarakjyItaly2026-06-04Chanay, Jeffrey A Esq RENEWAL32Amy Elsner
1017Maria MarrierIndia2026-06-02Rousseaux, Michael Esq NEGOTIATION63Stephen Shaw
1018Francesco ShinkoJapan2026-05-28Chemel, James L Cpa RENEWAL3Xuxue Feng
1019Aika InouyeFrance2026-06-02Buckley Miller Wright NEW74Asiya Javayant
1020Jeanfrancois VenereGermany2026-05-25Truhlar And Truhlar Attys UNQUALIFIED90Ivan Magalhaes
1021Juan WieserJapan2026-05-19Benton, John B Jr UNQUALIFIED87Ivan Magalhaes
1022Clifford RimGermany2026-06-03Commercial Press UNQUALIFIED16Ioni Bowcher
1023Aditya KuskoBrazil2026-06-15Chanay, Jeffrey A Esq PROPOSAL98Amy Elsner
1024Faith GillianBrazil2026-06-14Feiner Bros RENEWAL95Xuxue Feng
1025Kaitlin OstroskyAustralia2026-06-02Morlong Associates QUALIFIED98Ioni Bowcher
1026Silvio SlusarskiRussia2026-06-05Morlong Associates RENEWAL5Onyama Limba
1027Adams MorascaAustralia2026-05-30Rousseaux, Michael Esq QUALIFIED0Onyama Limba
1028Kadeem FlosiUnited Kingdom2026-06-04Chapman, Ross E Esq QUALIFIED92Elwin Sharvill
1029Arvin AlbaresItaly2026-06-04Feltz Printing Service NEGOTIATION0Stephen Shaw
1030Sinclair WaycottItaly2026-06-13Benton, John B Jr QUALIFIED26Anna Fali
1031Sinclair WaycottBrazil2026-06-08King, Christopher A Esq QUALIFIED38Xuxue Feng
1032Aika InouyeSpain2026-05-29Feiner Bros PROPOSAL64Amy Elsner
1033Clifford RimArgentina2026-06-06Rousseaux, Michael Esq NEGOTIATION77Bernardo Dominic
1034Johnson SergiIndia2026-06-16Buckley Miller Wright PROPOSAL73Asiya Javayant
1035Ashley DoeUnited Kingdom2026-06-05Printing Dimensions NEGOTIATION45Amy Elsner
1036Jennifer AmigonCanada2026-05-22Dorl, James J Esq NEW75Anna Fali
1037Arvin AlbaresFrance2026-06-10Feltz Printing Service UNQUALIFIED80Stephen Shaw
1038Arvin AlbaresItaly2026-06-07Chapman, Ross E Esq NEW72Anna Fali
1039Aditya KuskoIndia2026-06-13King, Christopher A Esq UNQUALIFIED5Ioni Bowcher
1040Isabel BowleyFrance2026-06-12Rangoni Of Florence UNQUALIFIED23Xuxue Feng
1041Jennifer AmigonCanada2026-06-13King, Christopher A Esq RENEWAL96Xuxue Feng
1042Morrow RutaSpain2026-06-02Chapman, Ross E Esq QUALIFIED98Xuxue Feng
1043Kaitlin OstroskyItaly2026-05-21Chapman, Ross E Esq RENEWAL84Asiya Javayant
1044Clifford RimCanada2026-06-05King, Christopher A Esq PROPOSAL10Ivan Magalhaes
1045Stacey MacleadSpain2026-05-24Printing Dimensions RENEWAL30Asiya Javayant
1046Ivar PaprockiItaly2026-05-23Benton, John B Jr QUALIFIED16Amy Elsner
1047Smith GlickItaly2026-06-01King, Christopher A Esq RENEWAL83Onyama Limba
1048Leon OldroydArgentina2026-06-16Chanay, Jeffrey A Esq NEW67Amy Elsner
1049Rodrigues CampainSpain2026-06-13King, Christopher A Esq UNQUALIFIED47Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Wickens NestleCanadaBernardo Dominic PROPOSAL
Jeanfrancois VenereUnited KingdomElwin Sharvill UNQUALIFIED
Faith GillianAustraliaXuxue Feng NEW
Mayumi KolmetzItalyXuxue Feng PROPOSAL
Chavez BriddickJapanIoni Bowcher NEGOTIATION
Antonio CaudyBrazilAmy Elsner UNQUALIFIED
Adams MorascaItalyAnna Fali NEGOTIATION
David DarakjyUnited KingdomAnna Fali UNQUALIFIED
Alejandro PerinJapanAnna Fali PROPOSAL
Misaki RoysterItalyStephen Shaw PROPOSAL
Deepesh ChuiFranceAmy Elsner NEW
Kaitlin OstroskyItalyAmy Elsner NEGOTIATION
Chavez BriddickAustraliaXuxue Feng QUALIFIED
Juan WieserFranceStephen Shaw NEGOTIATION
Claire TollnerSpainIvan Magalhaes NEGOTIATION
James ButtUnited KingdomAnna Fali QUALIFIED
Stacey MacleadAustraliaAnna Fali PROPOSAL
Aika InouyeBrazilIoni Bowcher NEW
James ButtBrazilXuxue Feng PROPOSAL
Mayumi KolmetzBrazilIoni Bowcher NEW
Octavia MaletItalyXuxue Feng QUALIFIED
Aika InouyeIndiaOnyama Limba NEW
Izzy GarufiArgentinaIvan Magalhaes QUALIFIED
Salvatore StockhamFranceAnna Fali RENEWAL
Nicolas IturbideFranceAnna Fali QUALIFIED
David DarakjyCanadaBernardo Dominic NEGOTIATION
Rodrigues CampainSpainIvan Magalhaes NEGOTIATION
Deepesh ChuiRussiaElwin Sharvill RENEWAL
Darci PoquetteCanadaOnyama Limba NEW
Deepesh ChuiUnited KingdomBernardo Dominic NEGOTIATION
Mujtaba NickaCanadaAmy Elsner RENEWAL
Isabel BowleyUnited KingdomAnna Fali NEGOTIATION
James ButtJapanIoni Bowcher NEGOTIATION
Silvio SlusarskiUnited KingdomOnyama Limba RENEWAL
Salvatore StockhamUnited KingdomIoni Bowcher NEW
Sinclair WaycottIndiaElwin Sharvill NEW
Mayumi KolmetzUnited KingdomIoni Bowcher QUALIFIED
Ashley DoeFranceStephen Shaw NEW
Costa DilliardSpainOnyama Limba QUALIFIED
Jennifer AmigonCanadaIvan Magalhaes RENEWAL
Munro FerenczUnited KingdomElwin Sharvill UNQUALIFIED
Claire TollnerItalyElwin Sharvill PROPOSAL
Sinclair WaycottFranceOnyama Limba NEW
Jones VocelkaGermanyAnna Fali RENEWAL
Alejandro PerinJapanAmy Elsner PROPOSAL
Leja CaldareraCanadaIvan Magalhaes QUALIFIED
Francesco ShinkoArgentinaElwin Sharvill QUALIFIED
Claire TollnerUnited KingdomAmy Elsner NEW
Emily WhobreyRussiaXuxue Feng UNQUALIFIED
Aruna FigeroaIndiaStephen Shaw PROPOSAL
Frozen Columns
Name
Deepesh Chui
Johnson Sergi
Mujtaba Nicka
James Butt
Tony Foller
Nicolas Iturbide
Aruna Figeroa
Jefferson Schemmer
Arvin Albares
Emily Whobrey
Ricardo Gaucho
Ricardo Gaucho
Antonio Caudy
Mayumi Kolmetz
Deepesh Chui
Juan Wieser
Jennifer Amigon
Rodrigues Campain
Adams Morasca
Mujtaba Nicka
Kadeem Flosi
Juan Wieser
Aika Inouye
Aika Inouye
Nicolas Iturbide
Stacey Maclead
Murillo Malet
Rodrigues Campain
Kadeem Flosi
Ashley Doe
Aditya Kusko
Stacey Maclead
Silvio Slusarski
Maria Marrier
Nicolas Iturbide
Octavia Malet
Alejandro Perin
Ivar Paprocki
Smith Glick
Isabel Bowley
Alejandro Perin
Salvatore Stockham
Octavia Malet
Silvio Slusarski
Stacey Maclead
Smith Glick
Kadeem Flosi
Nicolas Iturbide
Darci Poquette
Aruna Figeroa
IdCountryDate
1000Brazil2026-06-01
1001Brazil2026-06-13
1002Russia2026-06-03
1003Germany2026-06-17
1004Japan2026-06-09
1005Russia2026-06-07
1006Russia2026-06-14
1007Canada2026-05-31
1008Spain2026-06-03
1009Brazil2026-05-30
1010United Kingdom2026-05-28
1011Russia2026-06-11
1012Argentina2026-05-28
1013Japan2026-05-24
1014Russia2026-06-08
1015Argentina2026-05-27
1016Australia2026-05-29
1017Germany2026-05-20
1018Japan2026-06-12
1019Russia2026-06-02
1020Australia2026-06-07
1021United Kingdom2026-05-19
1022Spain2026-05-27
1023France2026-06-15
1024Canada2026-05-20
1025Brazil2026-06-04
1026Russia2026-05-23
1027France2026-06-01
1028Italy2026-05-28
1029Japan2026-06-13
1030Russia2026-06-10
1031Russia2026-06-09
1032France2026-05-31
1033Germany2026-06-01
1034Australia2026-06-17
1035Spain2026-06-13
1036Canada2026-06-02
1037Brazil2026-05-24
1038Argentina2026-05-20
1039India2026-06-03
1040Argentina2026-05-26
1041India2026-06-16
1042Australia2026-06-15
1043India2026-06-11
1044France2026-05-30
1045Canada2026-06-13
1046India2026-06-15
1047Spain2026-06-02
1048Brazil2026-06-15
1049United Kingdom2026-05-25

On-Demand Data

NameIdCountryDate
Murillo Malet1000Russia2026-05-26
Deepesh Chui1001Germany2026-06-06
Juan Wieser1002Russia2026-05-21
Kaitlin Ostrosky1003France2026-05-28
Antonio Caudy1004United Kingdom2026-06-10
Ashley Doe1005Russia2026-06-04
Kadeem Flosi1006India2026-06-08
Izzy Garufi1007United Kingdom2026-05-21
Silvio Slusarski1008Argentina2026-05-20
Stacey Maclead1009Japan2026-05-25
Leon Oldroyd1010Russia2026-06-13
David Darakjy1011Spain2026-06-17
Julie Stenseth1012India2026-06-15
Murillo Malet1013Russia2026-06-04
Kadeem Flosi1014Australia2026-05-28
Aika Inouye1015France2026-05-24
James Butt1016Japan2026-06-16
Clifford Rim1017Australia2026-05-24
Jefferson Schemmer1018Argentina2026-06-11
Juan Wieser1019Canada2026-05-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Juan WieserIndiaOnyama Limba QUALIFIED
Johnson SergiJapanIoni Bowcher PROPOSAL
Ivar PaprockiGermanyXuxue Feng PROPOSAL
Jones VocelkaCanadaElwin Sharvill PROPOSAL
Clifford RimRussiaStephen Shaw NEW
Leja CaldareraSpainAsiya Javayant PROPOSAL
Rodrigues CampainCanadaBernardo Dominic PROPOSAL
Deepesh ChuiItalyXuxue Feng PROPOSAL
Darci PoquetteArgentinaAnna Fali PROPOSAL
Tony FollerJapanIvan Magalhaes PROPOSAL
Izzy GarufiIndiaIoni Bowcher RENEWAL
Aditya KuskoCanadaAmy Elsner UNQUALIFIED
Adams MorascaSpainAnna Fali PROPOSAL
Murillo MaletArgentinaBernardo Dominic QUALIFIED
Chavez BriddickGermanyIvan Magalhaes NEW
Julie StensethArgentinaOnyama Limba UNQUALIFIED
Alejandro PerinFranceIoni Bowcher UNQUALIFIED
Leja CaldareraAustraliaBernardo Dominic RENEWAL
Leon OldroydIndiaElwin Sharvill PROPOSAL
Darci PoquetteGermanyXuxue Feng RENEWAL
Leja CaldareraSpainAmy Elsner NEGOTIATION
Morrow RutaBrazilIoni Bowcher NEGOTIATION
Leon OldroydSpainAsiya Javayant UNQUALIFIED
Aditya KuskoJapanIvan Magalhaes NEGOTIATION
Greenwood BologniaUnited KingdomOnyama Limba UNQUALIFIED
Deepesh ChuiUnited KingdomStephen Shaw NEGOTIATION
Wickens NestleRussiaAmy Elsner QUALIFIED
Jones VocelkaUnited KingdomXuxue Feng RENEWAL
Salvatore StockhamBrazilXuxue Feng QUALIFIED
Emily WhobreyArgentinaOnyama Limba RENEWAL
Jeanfrancois VenereBrazilAsiya Javayant UNQUALIFIED
Clifford RimItalyAmy Elsner NEGOTIATION
Johnson SergiSpainAsiya Javayant NEGOTIATION
Francesco ShinkoSpainIvan Magalhaes NEW
Faith GillianArgentinaStephen Shaw NEW
Mayumi KolmetzFranceXuxue Feng QUALIFIED
James ButtBrazilAsiya Javayant RENEWAL
Francesco ShinkoItalyXuxue Feng NEW
Arvin AlbaresItalyElwin Sharvill NEGOTIATION
Ashley DoeRussiaOnyama Limba 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>