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
Leja CaldareraIndiaElwin Sharvill UNQUALIFIED
Faith GillianCanadaXuxue Feng NEGOTIATION
Wickens NestleUnited KingdomOnyama Limba PROPOSAL
Mayumi KolmetzCanadaAmy Elsner PROPOSAL
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Darci PoquetteRussiaAnna Fali PROPOSAL
Aditya KuskoArgentinaIvan Magalhaes PROPOSAL
Arvin AlbaresAustraliaElwin Sharvill NEW
Misaki RoysterGermanyStephen Shaw RENEWAL
Kadeem FlosiUnited KingdomStephen Shaw NEW
Aditya KuskoArgentinaXuxue Feng QUALIFIED
Cody SaylorsAustraliaOnyama Limba QUALIFIED
Leon OldroydCanadaOnyama Limba RENEWAL
Emily WhobreyFranceAnna Fali PROPOSAL
Nicolas IturbideArgentinaAsiya Javayant UNQUALIFIED
Ashley DoeCanadaStephen Shaw PROPOSAL
Julie StensethCanadaElwin Sharvill NEW
James ButtBrazilIoni Bowcher QUALIFIED
Adams MorascaSpainElwin Sharvill NEW
Kaitlin OstroskyItalyIvan Magalhaes NEGOTIATION
Leja CaldareraArgentinaElwin Sharvill NEGOTIATION
Jefferson SchemmerRussiaElwin Sharvill QUALIFIED
Jefferson SchemmerCanadaXuxue Feng NEGOTIATION
Emily WhobreyGermanyStephen Shaw QUALIFIED
Darci PoquetteCanadaAsiya Javayant NEW
Sinclair WaycottCanadaAsiya Javayant NEGOTIATION
Kadeem FlosiIndiaIvan Magalhaes NEW
Aika InouyeUnited KingdomBernardo Dominic RENEWAL
Arvin AlbaresItalyAnna Fali PROPOSAL
Munro FerenczItalyIoni Bowcher PROPOSAL
Greenwood BologniaRussiaAmy Elsner UNQUALIFIED
Arvin AlbaresBrazilBernardo Dominic NEW
Maria MarrierBrazilStephen Shaw NEGOTIATION
Silvio SlusarskiFranceAnna Fali UNQUALIFIED
Darci PoquetteFranceAmy Elsner PROPOSAL
Antonio CaudyUnited KingdomAnna Fali QUALIFIED
Faith GillianUnited KingdomElwin Sharvill RENEWAL
Maisha RulapaughRussiaAsiya Javayant RENEWAL
Smith GlickGermanyBernardo Dominic NEW
Misaki RoysterIndiaStephen Shaw UNQUALIFIED
Mayumi KolmetzRussiaAmy Elsner NEW
Tony FollerFranceBernardo Dominic QUALIFIED
Jefferson SchemmerCanadaAmy Elsner QUALIFIED
David DarakjySpainBernardo Dominic PROPOSAL
Misaki RoysterBrazilXuxue Feng UNQUALIFIED
Leon OldroydBrazilIoni Bowcher RENEWAL
Leja CaldareraUnited KingdomAsiya Javayant PROPOSAL
Aditya KuskoGermanyOnyama Limba NEGOTIATION
Jefferson SchemmerJapanXuxue Feng UNQUALIFIED
Faith GillianSpainStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Stacey MacleadGermanyAmy Elsner UNQUALIFIED
Munro FerenczFranceAnna Fali NEGOTIATION
Darci PoquetteFranceAnna Fali PROPOSAL
Ashley DoeArgentinaIvan Magalhaes NEW
Rodrigues CampainIndiaAnna Fali UNQUALIFIED
Faith GillianSpainXuxue Feng PROPOSAL
Jeanfrancois VenereGermanyXuxue Feng NEGOTIATION
Ashley DoeRussiaAmy Elsner PROPOSAL
Leja CaldareraItalyOnyama Limba PROPOSAL
Jones VocelkaFranceIoni Bowcher NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Johnson SergiItaly2025-08-03Chapman, Ross E Esq NEW72Bernardo Dominic
1001Maisha RulapaughJapan2025-08-13Chemel, James L Cpa NEGOTIATION14Bernardo Dominic
1002Alejandro PerinAustralia2025-08-21Feltz Printing Service NEGOTIATION43Asiya Javayant
1003Smith GlickItaly2025-08-13King, Christopher A Esq QUALIFIED17Stephen Shaw
1004Clifford RimArgentina2025-08-24Buckley Miller Wright NEW6Bernardo Dominic
1005Costa DilliardJapan2025-08-15Truhlar And Truhlar Attys NEGOTIATION59Ioni Bowcher
1006Sinclair WaycottRussia2025-08-20Dorl, James J Esq PROPOSAL68Onyama Limba
1007Darci PoquetteIndia2025-08-16Chapman, Ross E Esq RENEWAL73Xuxue Feng
1008Leja CaldareraBrazil2025-08-26Chapman, Ross E Esq PROPOSAL17Onyama Limba
1009Stacey MacleadGermany2025-08-01Chapman, Ross E Esq NEW92Ioni Bowcher
1010Nicolas IturbideRussia2025-08-18Morlong Associates RENEWAL31Anna Fali
1011Jones VocelkaItaly2025-08-15Benton, John B Jr PROPOSAL75Xuxue Feng
1012Misaki RoysterJapan2025-08-14Chanay, Jeffrey A Esq QUALIFIED9Bernardo Dominic
1013Ashley DoeAustralia2025-08-10Feiner Bros NEGOTIATION2Asiya Javayant
1014Aika InouyeUnited Kingdom2025-08-14Printing Dimensions UNQUALIFIED23Asiya Javayant
1015Aditya KuskoJapan2025-08-11Truhlar And Truhlar Attys QUALIFIED53Ioni Bowcher
1016Costa DilliardBrazil2025-08-08Feltz Printing Service NEW17Bernardo Dominic
1017Emily WhobreyArgentina2025-08-18Feltz Printing Service NEW43Ivan Magalhaes
1018Mujtaba NickaGermany2025-08-06Chemel, James L Cpa NEW28Ioni Bowcher
1019Chavez BriddickCanada2025-08-15Benton, John B Jr PROPOSAL98Ioni Bowcher
1020Leon OldroydItaly2025-08-24Morlong Associates PROPOSAL64Asiya Javayant
1021Mayumi KolmetzIndia2025-07-31Buckley Miller Wright UNQUALIFIED65Stephen Shaw
1022Jones VocelkaBrazil2025-08-22Truhlar And Truhlar Attys QUALIFIED86Elwin Sharvill
1023Jennifer AmigonBrazil2025-07-29Commercial Press NEW94Amy Elsner
1024Wickens NestleItaly2025-08-17Buckley Miller Wright NEW7Ioni Bowcher
1025Darci PoquetteBrazil2025-08-06Printing Dimensions QUALIFIED55Amy Elsner
1026Tony FollerSpain2025-08-15Dorl, James J Esq UNQUALIFIED88Asiya Javayant
1027Alejandro PerinBrazil2025-08-08Commercial Press PROPOSAL47Onyama Limba
1028James ButtCanada2025-08-27Chapman, Ross E Esq UNQUALIFIED11Bernardo Dominic
1029David DarakjyBrazil2025-08-05Chanay, Jeffrey A Esq NEW31Asiya Javayant
1030Francesco ShinkoArgentina2025-08-19Dorl, James J Esq RENEWAL64Onyama Limba
1031Jefferson SchemmerFrance2025-08-02Chapman, Ross E Esq NEGOTIATION55Anna Fali
1032Maisha RulapaughGermany2025-08-01Feltz Printing Service UNQUALIFIED22Xuxue Feng
1033Antonio CaudyBrazil2025-08-08Chemel, James L Cpa NEW31Onyama Limba
1034Isabel BowleyFrance2025-08-07Benton, John B Jr NEGOTIATION39Xuxue Feng
1035Deepesh ChuiSpain2025-08-07Morlong Associates UNQUALIFIED85Amy Elsner
1036Kaitlin OstroskyRussia2025-08-11Chemel, James L Cpa UNQUALIFIED24Ioni Bowcher
1037Johnson SergiAustralia2025-08-03Feiner Bros RENEWAL56Bernardo Dominic
1038Rodrigues CampainRussia2025-08-19Chemel, James L Cpa RENEWAL58Ivan Magalhaes
1039Chavez BriddickArgentina2025-08-02Benton, John B Jr UNQUALIFIED65Asiya Javayant
1040Kaitlin OstroskyCanada2025-08-06Chapman, Ross E Esq PROPOSAL98Asiya Javayant
1041Aditya KuskoSpain2025-08-05Morlong Associates RENEWAL95Onyama Limba
1042Ivar PaprockiAustralia2025-08-03Buckley Miller Wright PROPOSAL57Amy Elsner
1043Jones VocelkaItaly2025-07-30Rangoni Of Florence PROPOSAL83Stephen Shaw
1044Greenwood BologniaArgentina2025-08-02King, Christopher A Esq NEW86Ivan Magalhaes
1045Morrow RutaGermany2025-08-16Chanay, Jeffrey A Esq NEW72Amy Elsner
1046Johnson SergiIndia2025-08-15Rangoni Of Florence UNQUALIFIED55Ioni Bowcher
1047Murillo MaletItaly2025-08-05Chanay, Jeffrey A Esq UNQUALIFIED88Ioni Bowcher
1048Salvatore StockhamAustralia2025-08-27Morlong Associates PROPOSAL73Asiya Javayant
1049Antonio CaudySpain2025-08-20Benton, John B Jr NEW74Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Juan WieserCanadaAsiya Javayant NEGOTIATION
Izzy GarufiGermanyOnyama Limba RENEWAL
Kaitlin OstroskyArgentinaIvan Magalhaes UNQUALIFIED
Arvin AlbaresCanadaElwin Sharvill PROPOSAL
Maria MarrierItalyAnna Fali NEGOTIATION
David DarakjyIndiaBernardo Dominic QUALIFIED
Darci PoquetteCanadaIvan Magalhaes QUALIFIED
Octavia MaletIndiaElwin Sharvill QUALIFIED
Leja CaldareraFranceOnyama Limba QUALIFIED
Arvin AlbaresFranceAmy Elsner NEGOTIATION
Aika InouyeIndiaXuxue Feng NEW
Jennifer AmigonBrazilStephen Shaw NEW
Munro FerenczRussiaIoni Bowcher PROPOSAL
Nicolas IturbideBrazilOnyama Limba NEGOTIATION
Kaitlin OstroskyUnited KingdomAnna Fali RENEWAL
Kaitlin OstroskyItalyAnna Fali RENEWAL
Murillo MaletSpainAsiya Javayant PROPOSAL
Jefferson SchemmerAustraliaElwin Sharvill PROPOSAL
Wickens NestleFranceAsiya Javayant NEGOTIATION
Juan WieserRussiaAnna Fali QUALIFIED
Octavia MaletAustraliaBernardo Dominic NEW
Mujtaba NickaJapanStephen Shaw UNQUALIFIED
Munro FerenczCanadaIoni Bowcher QUALIFIED
Morrow RutaJapanIoni Bowcher UNQUALIFIED
Stacey MacleadGermanyIoni Bowcher NEGOTIATION
Adams MorascaJapanIoni Bowcher NEW
Kadeem FlosiJapanIoni Bowcher NEW
Isabel BowleyCanadaBernardo Dominic NEW
Munro FerenczItalyAnna Fali NEW
Jefferson SchemmerFranceIvan Magalhaes NEGOTIATION
Arvin AlbaresRussiaIvan Magalhaes UNQUALIFIED
Adams MorascaIndiaBernardo Dominic UNQUALIFIED
Maisha RulapaughFranceBernardo Dominic NEW
Munro FerenczSpainStephen Shaw RENEWAL
Claire TollnerUnited KingdomOnyama Limba NEGOTIATION
Arvin AlbaresJapanElwin Sharvill RENEWAL
David DarakjyArgentinaAmy Elsner UNQUALIFIED
Kadeem FlosiGermanyAsiya Javayant NEW
Aruna FigeroaAustraliaIoni Bowcher NEGOTIATION
Darci PoquetteIndiaXuxue Feng NEW
James ButtAustraliaAmy Elsner QUALIFIED
Darci PoquetteSpainIvan Magalhaes RENEWAL
Chavez BriddickCanadaStephen Shaw QUALIFIED
Claire TollnerSpainAmy Elsner UNQUALIFIED
Antonio CaudyRussiaIvan Magalhaes NEW
Aditya KuskoGermanyIvan Magalhaes NEGOTIATION
Greenwood BologniaBrazilXuxue Feng UNQUALIFIED
Silvio SlusarskiItalyAmy Elsner NEGOTIATION
Jefferson SchemmerArgentinaStephen Shaw NEW
Nicolas IturbideFranceAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Kadeem Flosi
Jennifer Amigon
Maisha Rulapaugh
Tony Foller
Juan Wieser
Greenwood Bolognia
Tony Foller
Silvio Slusarski
Ashley Doe
Julie Stenseth
Darci Poquette
Emily Whobrey
Leja Caldarera
Mujtaba Nicka
Francesco Shinko
Izzy Garufi
Adams Morasca
Kaitlin Ostrosky
Juan Wieser
Darci Poquette
Aditya Kusko
Clifford Rim
Deepesh Chui
Mujtaba Nicka
Ricardo Gaucho
Smith Glick
Chavez Briddick
Julie Stenseth
Tony Foller
Maisha Rulapaugh
Kaitlin Ostrosky
Ashley Doe
Julie Stenseth
Sinclair Waycott
David Darakjy
Francesco Shinko
Tony Foller
Octavia Malet
Deepesh Chui
Munro Ferencz
James Butt
Aika Inouye
Izzy Garufi
Kaitlin Ostrosky
Leja Caldarera
Jennifer Amigon
Ricardo Gaucho
Arvin Albares
Darci Poquette
Mayumi Kolmetz
IdCountryDate
1000Brazil2025-08-15
1001Argentina2025-08-13
1002Argentina2025-07-31
1003Canada2025-08-01
1004Australia2025-08-11
1005Italy2025-08-20
1006Spain2025-08-20
1007Germany2025-08-03
1008Australia2025-08-26
1009Germany2025-08-10
1010Japan2025-07-31
1011Argentina2025-08-08
1012Canada2025-08-06
1013Russia2025-08-24
1014Italy2025-08-03
1015Italy2025-08-16
1016India2025-08-05
1017Canada2025-08-22
1018United Kingdom2025-08-05
1019Russia2025-08-08
1020United Kingdom2025-08-21
1021Australia2025-08-06
1022India2025-07-31
1023Russia2025-08-21
1024India2025-08-02
1025United Kingdom2025-08-23
1026Spain2025-08-19
1027Canada2025-08-16
1028Australia2025-08-01
1029India2025-08-19
1030Spain2025-08-19
1031Brazil2025-08-26
1032Australia2025-07-31
1033United Kingdom2025-08-23
1034Brazil2025-08-12
1035Brazil2025-08-13
1036Italy2025-08-25
1037Japan2025-08-10
1038Australia2025-08-08
1039Japan2025-08-19
1040United Kingdom2025-08-23
1041Spain2025-08-16
1042Germany2025-08-25
1043Italy2025-08-03
1044Argentina2025-08-03
1045Russia2025-08-21
1046Germany2025-08-05
1047Russia2025-07-30
1048Australia2025-08-23
1049Brazil2025-08-22

On-Demand Data

NameIdCountryDate
Deepesh Chui1000Australia2025-07-29
Stacey Maclead1001Spain2025-08-19
Emily Whobrey1002Russia2025-08-09
Mujtaba Nicka1003Russia2025-08-02
Ashley Doe1004India2025-07-30
Cody Saylors1005Italy2025-08-20
Clifford Rim1006India2025-08-15
Alejandro Perin1007Spain2025-08-10
Aruna Figeroa1008Germany2025-08-26
Juan Wieser1009Argentina2025-08-11
Costa Dilliard1010Spain2025-08-02
Arvin Albares1011Australia2025-08-18
Clifford Rim1012Germany2025-08-24
Clifford Rim1013Australia2025-08-22
Costa Dilliard1014Spain2025-08-20
Deepesh Chui1015United Kingdom2025-08-07
Morrow Ruta1016Russia2025-08-12
Alejandro Perin1017Germany2025-08-26
Costa Dilliard1018United Kingdom2025-08-14
Murillo Malet1019France2025-08-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mayumi KolmetzUnited KingdomXuxue Feng RENEWAL
Misaki RoysterJapanIoni Bowcher NEW
Ivar PaprockiItalyElwin Sharvill QUALIFIED
Costa DilliardArgentinaAnna Fali QUALIFIED
Salvatore StockhamCanadaBernardo Dominic NEW
Jennifer AmigonIndiaAsiya Javayant RENEWAL
James ButtJapanStephen Shaw QUALIFIED
Alejandro PerinAustraliaIvan Magalhaes QUALIFIED
Claire TollnerFranceAnna Fali UNQUALIFIED
Alejandro PerinBrazilAsiya Javayant PROPOSAL
Clifford RimUnited KingdomAsiya Javayant QUALIFIED
Misaki RoysterFranceAsiya Javayant UNQUALIFIED
Aika InouyeJapanElwin Sharvill RENEWAL
Isabel BowleyFranceAnna Fali UNQUALIFIED
Nicolas IturbideSpainOnyama Limba NEGOTIATION
Johnson SergiJapanOnyama Limba NEW
Chavez BriddickArgentinaElwin Sharvill NEGOTIATION
Adams MorascaJapanAsiya Javayant PROPOSAL
Nicolas IturbideCanadaIoni Bowcher UNQUALIFIED
Mayumi KolmetzUnited KingdomStephen Shaw QUALIFIED
Costa DilliardJapanIvan Magalhaes NEW
Octavia MaletBrazilAnna Fali RENEWAL
Costa DilliardCanadaBernardo Dominic UNQUALIFIED
Misaki RoysterArgentinaIoni Bowcher PROPOSAL
Ashley DoeFranceElwin Sharvill NEW
Stacey MacleadUnited KingdomElwin Sharvill RENEWAL
Munro FerenczCanadaXuxue Feng QUALIFIED
Izzy GarufiArgentinaOnyama Limba PROPOSAL
Morrow RutaRussiaElwin Sharvill NEW
Juan WieserAustraliaBernardo Dominic QUALIFIED
Faith GillianBrazilStephen Shaw QUALIFIED
Ivar PaprockiItalyOnyama Limba NEGOTIATION
Smith GlickJapanIvan Magalhaes UNQUALIFIED
Aruna FigeroaRussiaAnna Fali QUALIFIED
Greenwood BologniaArgentinaOnyama Limba PROPOSAL
Maisha RulapaughRussiaIoni Bowcher NEW
Murillo MaletFranceAmy Elsner QUALIFIED
Juan WieserGermanyAnna Fali NEW
Aruna FigeroaUnited KingdomBernardo Dominic NEGOTIATION
Silvio SlusarskiAustraliaBernardo Dominic 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>