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
Mujtaba NickaBrazilAsiya Javayant NEW
Adams MorascaSpainAnna Fali NEGOTIATION
Salvatore StockhamIndiaOnyama Limba QUALIFIED
Cody SaylorsAustraliaBernardo Dominic NEW
Sinclair WaycottArgentinaIoni Bowcher PROPOSAL
Juan WieserItalyIoni Bowcher NEGOTIATION
Smith GlickJapanIvan Magalhaes NEGOTIATION
Maria MarrierItalyOnyama Limba RENEWAL
Ashley DoeBrazilOnyama Limba PROPOSAL
Francesco ShinkoItalyIvan Magalhaes QUALIFIED
Leja CaldareraItalyAnna Fali UNQUALIFIED
Mujtaba NickaItalyAmy Elsner PROPOSAL
Izzy GarufiBrazilElwin Sharvill NEGOTIATION
Wickens NestleAustraliaXuxue Feng UNQUALIFIED
Rodrigues CampainFranceIoni Bowcher QUALIFIED
Ivar PaprockiFranceXuxue Feng PROPOSAL
Mayumi KolmetzUnited KingdomOnyama Limba PROPOSAL
Jefferson SchemmerIndiaXuxue Feng NEGOTIATION
Chavez BriddickFranceIoni Bowcher UNQUALIFIED
Francesco ShinkoArgentinaIvan Magalhaes NEW
Leja CaldareraFranceAsiya Javayant NEGOTIATION
Jeanfrancois VenereUnited KingdomAmy Elsner QUALIFIED
Emily WhobreyUnited KingdomAsiya Javayant UNQUALIFIED
Morrow RutaGermanyElwin Sharvill UNQUALIFIED
Ivar PaprockiAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaAmy Elsner NEGOTIATION
Emily WhobreyItalyBernardo Dominic RENEWAL
Faith GillianIndiaElwin Sharvill NEW
Greenwood BologniaCanadaIoni Bowcher NEGOTIATION
Adams MorascaRussiaStephen Shaw NEW
Tony FollerUnited KingdomElwin Sharvill NEGOTIATION
Johnson SergiIndiaAnna Fali NEW
Ricardo GauchoArgentinaXuxue Feng NEGOTIATION
Aika InouyeAustraliaStephen Shaw NEW
Faith GillianArgentinaStephen Shaw NEW
Rodrigues CampainFranceElwin Sharvill RENEWAL
David DarakjyArgentinaElwin Sharvill NEW
Cody SaylorsFranceIoni Bowcher QUALIFIED
Smith GlickArgentinaElwin Sharvill PROPOSAL
Rodrigues CampainAustraliaAmy Elsner NEW
Faith GillianSpainAnna Fali NEW
Stacey MacleadJapanAnna Fali NEW
Deepesh ChuiRussiaStephen Shaw NEGOTIATION
Izzy GarufiBrazilElwin Sharvill NEGOTIATION
David DarakjyArgentinaOnyama Limba PROPOSAL
Aditya KuskoSpainAmy Elsner RENEWAL
Emily WhobreyArgentinaXuxue Feng NEW
Morrow RutaFranceBernardo Dominic NEGOTIATION
Munro FerenczUnited KingdomElwin Sharvill PROPOSAL
Sinclair WaycottFranceAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Sinclair WaycottFranceXuxue Feng PROPOSAL
Kaitlin OstroskyIndiaIvan Magalhaes NEGOTIATION
Darci PoquetteArgentinaAsiya Javayant PROPOSAL
Jones VocelkaGermanyAmy Elsner NEW
Leon OldroydSpainAnna Fali RENEWAL
Jefferson SchemmerSpainAnna Fali QUALIFIED
Stacey MacleadCanadaAnna Fali PROPOSAL
Arvin AlbaresUnited KingdomAmy Elsner NEW
Alejandro PerinJapanBernardo Dominic RENEWAL
Octavia MaletItalyAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaArgentina2025-10-12Truhlar And Truhlar Attys NEW88Ioni Bowcher
1001Jefferson SchemmerSpain2025-10-05Printing Dimensions PROPOSAL14Anna Fali
1002Emily WhobreyItaly2025-10-23Rousseaux, Michael Esq NEGOTIATION53Anna Fali
1003Stacey MacleadJapan2025-10-15Chanay, Jeffrey A Esq NEGOTIATION1Elwin Sharvill
1004Stacey MacleadCanada2025-10-08Morlong Associates NEW73Stephen Shaw
1005Alejandro PerinUnited Kingdom2025-10-17Chanay, Jeffrey A Esq QUALIFIED57Xuxue Feng
1006Murillo MaletRussia2025-10-03Rangoni Of Florence NEW81Ioni Bowcher
1007Greenwood BologniaItaly2025-10-08King, Christopher A Esq PROPOSAL84Anna Fali
1008Arvin AlbaresCanada2025-10-23Benton, John B Jr QUALIFIED8Onyama Limba
1009Nicolas IturbideSpain2025-10-15Chapman, Ross E Esq NEGOTIATION6Ioni Bowcher
1010Isabel BowleyAustralia2025-10-04Rousseaux, Michael Esq RENEWAL34Bernardo Dominic
1011Tony FollerBrazil2025-10-22Rousseaux, Michael Esq NEW23Onyama Limba
1012Jennifer AmigonIndia2025-10-08Commercial Press UNQUALIFIED54Asiya Javayant
1013Silvio SlusarskiJapan2025-10-13Rangoni Of Florence QUALIFIED90Anna Fali
1014Cody SaylorsJapan2025-09-29Chapman, Ross E Esq UNQUALIFIED60Elwin Sharvill
1015Mayumi KolmetzUnited Kingdom2025-10-09Chanay, Jeffrey A Esq RENEWAL24Onyama Limba
1016Jeanfrancois VenereAustralia2025-10-17Truhlar And Truhlar Attys NEGOTIATION3Xuxue Feng
1017Juan WieserRussia2025-10-19Feiner Bros NEW1Anna Fali
1018Leon OldroydCanada2025-10-04Feiner Bros NEW35Ivan Magalhaes
1019Darci PoquetteSpain2025-10-15Truhlar And Truhlar Attys QUALIFIED10Bernardo Dominic
1020Julie StensethItaly2025-09-29Rangoni Of Florence UNQUALIFIED80Xuxue Feng
1021Aika InouyeSpain2025-10-10Feiner Bros UNQUALIFIED71Ioni Bowcher
1022Greenwood BologniaRussia2025-10-15Benton, John B Jr NEGOTIATION0Asiya Javayant
1023Antonio CaudyBrazil2025-10-08Morlong Associates UNQUALIFIED36Anna Fali
1024David DarakjyItaly2025-10-12Rousseaux, Michael Esq PROPOSAL54Onyama Limba
1025Rodrigues CampainSpain2025-10-01Chemel, James L Cpa QUALIFIED47Elwin Sharvill
1026Darci PoquetteIndia2025-09-29King, Christopher A Esq QUALIFIED53Asiya Javayant
1027Murillo MaletRussia2025-10-07Chemel, James L Cpa RENEWAL35Xuxue Feng
1028Murillo MaletFrance2025-09-27Morlong Associates NEGOTIATION31Asiya Javayant
1029Wickens NestleJapan2025-10-15Printing Dimensions RENEWAL36Onyama Limba
1030Antonio CaudySpain2025-10-09Commercial Press QUALIFIED2Anna Fali
1031Antonio CaudyUnited Kingdom2025-10-07Truhlar And Truhlar Attys RENEWAL80Amy Elsner
1032Silvio SlusarskiAustralia2025-10-20Chanay, Jeffrey A Esq QUALIFIED50Ioni Bowcher
1033Darci PoquetteBrazil2025-10-21Rousseaux, Michael Esq RENEWAL99Ioni Bowcher
1034Kadeem FlosiUnited Kingdom2025-10-24Truhlar And Truhlar Attys NEW79Ioni Bowcher
1035Mayumi KolmetzUnited Kingdom2025-10-17Morlong Associates PROPOSAL47Xuxue Feng
1036Misaki RoysterArgentina2025-10-11Dorl, James J Esq PROPOSAL83Ioni Bowcher
1037Kaitlin OstroskySpain2025-10-19Chapman, Ross E Esq PROPOSAL57Stephen Shaw
1038Clifford RimFrance2025-09-26Chemel, James L Cpa RENEWAL88Amy Elsner
1039Chavez BriddickFrance2025-09-28Rangoni Of Florence QUALIFIED76Asiya Javayant
1040Ashley DoeCanada2025-10-24Chapman, Ross E Esq NEGOTIATION30Elwin Sharvill
1041Ashley DoeItaly2025-09-30Buckley Miller Wright QUALIFIED22Ivan Magalhaes
1042Leja CaldareraUnited Kingdom2025-09-26Rousseaux, Michael Esq NEW12Ioni Bowcher
1043Murillo MaletIndia2025-10-07Chanay, Jeffrey A Esq QUALIFIED11Amy Elsner
1044Maria MarrierAustralia2025-10-05Benton, John B Jr UNQUALIFIED38Asiya Javayant
1045Octavia MaletRussia2025-10-07Morlong Associates QUALIFIED55Stephen Shaw
1046Ashley DoeJapan2025-10-13Truhlar And Truhlar Attys PROPOSAL46Ioni Bowcher
1047Deepesh ChuiFrance2025-09-25Rousseaux, Michael Esq UNQUALIFIED16Onyama Limba
1048Octavia MaletCanada2025-09-26Benton, John B Jr QUALIFIED42Anna Fali
1049Smith GlickArgentina2025-09-25Commercial Press NEGOTIATION83Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaAustraliaElwin Sharvill RENEWAL
Sinclair WaycottRussiaBernardo Dominic RENEWAL
Salvatore StockhamCanadaOnyama Limba RENEWAL
Salvatore StockhamBrazilElwin Sharvill NEW
Morrow RutaFranceBernardo Dominic NEW
Chavez BriddickArgentinaElwin Sharvill RENEWAL
Deepesh ChuiAustraliaAsiya Javayant UNQUALIFIED
Smith GlickSpainOnyama Limba RENEWAL
Smith GlickGermanyAnna Fali QUALIFIED
Ricardo GauchoUnited KingdomIoni Bowcher NEW
Aruna FigeroaItalyElwin Sharvill NEGOTIATION
Emily WhobreyArgentinaElwin Sharvill NEW
Cody SaylorsRussiaAsiya Javayant NEGOTIATION
Nicolas IturbideSpainStephen Shaw UNQUALIFIED
Ashley DoeRussiaAmy Elsner NEGOTIATION
James ButtGermanyElwin Sharvill UNQUALIFIED
Juan WieserSpainIvan Magalhaes NEGOTIATION
Darci PoquetteBrazilAmy Elsner QUALIFIED
Jefferson SchemmerAustraliaElwin Sharvill NEGOTIATION
Costa DilliardJapanAnna Fali NEW
Emily WhobreyGermanyAmy Elsner PROPOSAL
Rodrigues CampainAustraliaOnyama Limba NEW
Deepesh ChuiAustraliaIvan Magalhaes RENEWAL
Mujtaba NickaGermanyOnyama Limba NEGOTIATION
Octavia MaletUnited KingdomAmy Elsner RENEWAL
Maria MarrierUnited KingdomOnyama Limba QUALIFIED
Jefferson SchemmerIndiaAnna Fali NEW
Jeanfrancois VenereUnited KingdomStephen Shaw UNQUALIFIED
Clifford RimUnited KingdomOnyama Limba QUALIFIED
Claire TollnerIndiaStephen Shaw NEGOTIATION
Munro FerenczBrazilAsiya Javayant QUALIFIED
Munro FerenczSpainAmy Elsner UNQUALIFIED
Aditya KuskoBrazilElwin Sharvill NEW
Morrow RutaFranceAsiya Javayant NEGOTIATION
Kaitlin OstroskyItalyXuxue Feng PROPOSAL
Misaki RoysterArgentinaElwin Sharvill UNQUALIFIED
Adams MorascaUnited KingdomAnna Fali RENEWAL
Kaitlin OstroskyGermanyIvan Magalhaes UNQUALIFIED
Murillo MaletIndiaElwin Sharvill NEW
Antonio CaudySpainAmy Elsner PROPOSAL
Leon OldroydGermanyAmy Elsner UNQUALIFIED
Mujtaba NickaFranceIvan Magalhaes NEW
Tony FollerItalyBernardo Dominic NEW
Morrow RutaJapanIoni Bowcher NEGOTIATION
Sinclair WaycottIndiaAnna Fali NEGOTIATION
Munro FerenczCanadaElwin Sharvill PROPOSAL
Tony FollerItalyAnna Fali QUALIFIED
Smith GlickSpainAsiya Javayant RENEWAL
Adams MorascaIndiaElwin Sharvill QUALIFIED
Octavia MaletGermanyIoni Bowcher RENEWAL
Frozen Columns
Name
Chavez Briddick
Alejandro Perin
Stacey Maclead
Jeanfrancois Venere
Izzy Garufi
Faith Gillian
Ivar Paprocki
Murillo Malet
Cody Saylors
Salvatore Stockham
Leon Oldroyd
Tony Foller
Aika Inouye
Smith Glick
Octavia Malet
Munro Ferencz
Antonio Caudy
Julie Stenseth
Greenwood Bolognia
Murillo Malet
Arvin Albares
Silvio Slusarski
Jefferson Schemmer
Jones Vocelka
Izzy Garufi
Clifford Rim
Wickens Nestle
Nicolas Iturbide
Octavia Malet
Salvatore Stockham
Faith Gillian
Wickens Nestle
Antonio Caudy
Stacey Maclead
Mujtaba Nicka
Arvin Albares
Juan Wieser
Kaitlin Ostrosky
Greenwood Bolognia
Jennifer Amigon
David Darakjy
Misaki Royster
Juan Wieser
Clifford Rim
James Butt
David Darakjy
Emily Whobrey
Adams Morasca
Jones Vocelka
Isabel Bowley
IdCountryDate
1000France2025-10-01
1001Russia2025-10-18
1002Germany2025-10-23
1003France2025-10-08
1004Argentina2025-10-20
1005Brazil2025-10-23
1006Japan2025-10-01
1007United Kingdom2025-10-04
1008Argentina2025-10-08
1009Australia2025-10-02
1010Canada2025-10-24
1011Japan2025-09-29
1012Japan2025-10-12
1013France2025-10-22
1014Spain2025-10-01
1015Australia2025-10-05
1016Argentina2025-10-12
1017Australia2025-10-09
1018Argentina2025-09-29
1019Australia2025-10-12
1020Brazil2025-10-14
1021Canada2025-09-27
1022Argentina2025-10-24
1023France2025-10-03
1024Argentina2025-09-26
1025Spain2025-09-27
1026Germany2025-09-29
1027India2025-09-25
1028United Kingdom2025-10-01
1029France2025-10-23
1030Japan2025-09-29
1031Canada2025-10-19
1032Brazil2025-09-27
1033France2025-10-02
1034Japan2025-10-17
1035United Kingdom2025-10-12
1036France2025-09-28
1037Russia2025-10-18
1038United Kingdom2025-09-29
1039United Kingdom2025-10-13
1040United Kingdom2025-10-19
1041Argentina2025-10-24
1042India2025-09-28
1043Italy2025-10-06
1044Canada2025-10-12
1045United Kingdom2025-09-28
1046Japan2025-10-16
1047Germany2025-10-22
1048Canada2025-10-21
1049Spain2025-10-03

On-Demand Data

NameIdCountryDate
Deepesh Chui1000Germany2025-10-09
Smith Glick1001Argentina2025-10-13
Kadeem Flosi1002Brazil2025-10-19
Jefferson Schemmer1003France2025-09-30
Alejandro Perin1004United Kingdom2025-10-12
Kadeem Flosi1005France2025-09-28
Arvin Albares1006Russia2025-10-19
Mujtaba Nicka1007Russia2025-10-05
Munro Ferencz1008Germany2025-10-04
Cody Saylors1009Japan2025-09-25
Deepesh Chui1010United Kingdom2025-09-30
Deepesh Chui1011Canada2025-10-04
Ricardo Gaucho1012Germany2025-10-16
Adams Morasca1013Brazil2025-10-01
Johnson Sergi1014India2025-10-06
Costa Dilliard1015Argentina2025-10-20
Misaki Royster1016Italy2025-10-22
Costa Dilliard1017Japan2025-09-26
James Butt1018Australia2025-10-22
Wickens Nestle1019India2025-10-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsJapanBernardo Dominic RENEWAL
Cody SaylorsRussiaIvan Magalhaes UNQUALIFIED
James ButtItalyXuxue Feng PROPOSAL
Wickens NestleArgentinaElwin Sharvill RENEWAL
Mayumi KolmetzJapanXuxue Feng RENEWAL
Alejandro PerinBrazilIvan Magalhaes NEW
Greenwood BologniaGermanyAsiya Javayant RENEWAL
Julie StensethCanadaIoni Bowcher RENEWAL
Maisha RulapaughSpainBernardo Dominic UNQUALIFIED
Aruna FigeroaIndiaStephen Shaw RENEWAL
Stacey MacleadBrazilStephen Shaw QUALIFIED
Darci PoquetteFranceXuxue Feng RENEWAL
Antonio CaudySpainElwin Sharvill NEW
Maisha RulapaughJapanXuxue Feng NEW
Wickens NestleRussiaStephen Shaw UNQUALIFIED
Jones VocelkaItalyOnyama Limba QUALIFIED
Stacey MacleadRussiaBernardo Dominic RENEWAL
Claire TollnerArgentinaElwin Sharvill UNQUALIFIED
Aditya KuskoFranceElwin Sharvill QUALIFIED
Jennifer AmigonItalyBernardo Dominic NEGOTIATION
Ashley DoeUnited KingdomStephen Shaw NEGOTIATION
Julie StensethItalyXuxue Feng NEGOTIATION
Arvin AlbaresArgentinaAsiya Javayant NEGOTIATION
Costa DilliardUnited KingdomBernardo Dominic NEGOTIATION
Morrow RutaArgentinaAnna Fali RENEWAL
Tony FollerUnited KingdomAmy Elsner PROPOSAL
Ricardo GauchoBrazilOnyama Limba NEW
Adams MorascaFranceBernardo Dominic NEGOTIATION
Morrow RutaGermanyOnyama Limba UNQUALIFIED
Murillo MaletGermanyBernardo Dominic RENEWAL
Arvin AlbaresItalyBernardo Dominic RENEWAL
Clifford RimIndiaStephen Shaw RENEWAL
Clifford RimBrazilAmy Elsner NEW
Smith GlickCanadaAnna Fali NEGOTIATION
Kaitlin OstroskyAustraliaAnna Fali PROPOSAL
Greenwood BologniaUnited KingdomIvan Magalhaes QUALIFIED
Izzy GarufiItalyAmy Elsner NEGOTIATION
Alejandro PerinAustraliaBernardo Dominic NEGOTIATION
Salvatore StockhamIndiaElwin Sharvill UNQUALIFIED
Darci PoquetteArgentinaOnyama 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>