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
Julie StensethJapanAsiya Javayant NEW
Jennifer AmigonRussiaAnna Fali PROPOSAL
Ivar PaprockiCanadaStephen Shaw QUALIFIED
Arvin AlbaresFranceAsiya Javayant NEW
Leon OldroydJapanAsiya Javayant NEGOTIATION
Kaitlin OstroskyGermanyAmy Elsner QUALIFIED
Kadeem FlosiItalyAnna Fali NEGOTIATION
Octavia MaletBrazilElwin Sharvill NEW
Kadeem FlosiRussiaOnyama Limba PROPOSAL
Wickens NestleCanadaOnyama Limba RENEWAL
Misaki RoysterJapanAnna Fali NEGOTIATION
Sinclair WaycottUnited KingdomAnna Fali UNQUALIFIED
Ashley DoeJapanXuxue Feng PROPOSAL
Jeanfrancois VenereSpainStephen Shaw QUALIFIED
Emily WhobreyJapanElwin Sharvill NEW
David DarakjyRussiaStephen Shaw UNQUALIFIED
Johnson SergiUnited KingdomXuxue Feng PROPOSAL
James ButtRussiaAnna Fali QUALIFIED
Clifford RimJapanBernardo Dominic NEW
Sinclair WaycottRussiaOnyama Limba RENEWAL
Leja CaldareraBrazilStephen Shaw PROPOSAL
Maisha RulapaughIndiaIoni Bowcher NEW
Aruna FigeroaRussiaAsiya Javayant UNQUALIFIED
Ricardo GauchoAustraliaXuxue Feng PROPOSAL
Izzy GarufiArgentinaElwin Sharvill NEW
Ivar PaprockiBrazilXuxue Feng RENEWAL
Aditya KuskoSpainAsiya Javayant NEGOTIATION
Julie StensethBrazilIoni Bowcher RENEWAL
Nicolas IturbideSpainStephen Shaw PROPOSAL
Aruna FigeroaBrazilAmy Elsner PROPOSAL
Munro FerenczArgentinaElwin Sharvill NEGOTIATION
Aika InouyeSpainAmy Elsner NEGOTIATION
David DarakjyArgentinaOnyama Limba QUALIFIED
Greenwood BologniaItalyAsiya Javayant NEW
Kaitlin OstroskyAustraliaBernardo Dominic RENEWAL
Mujtaba NickaIndiaBernardo Dominic NEGOTIATION
Smith GlickJapanAsiya Javayant RENEWAL
Maisha RulapaughJapanAnna Fali NEGOTIATION
Cody SaylorsRussiaAmy Elsner PROPOSAL
Clifford RimFranceStephen Shaw RENEWAL
Ashley DoeCanadaOnyama Limba NEW
Ricardo GauchoSpainElwin Sharvill UNQUALIFIED
Maisha RulapaughArgentinaIvan Magalhaes RENEWAL
Emily WhobreyIndiaIoni Bowcher QUALIFIED
Octavia MaletAustraliaOnyama Limba PROPOSAL
Izzy GarufiJapanIvan Magalhaes RENEWAL
Mujtaba NickaSpainBernardo Dominic UNQUALIFIED
Aika InouyeBrazilOnyama Limba RENEWAL
Faith GillianIndiaIvan Magalhaes RENEWAL
Leja CaldareraJapanXuxue Feng NEW
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereIndiaOnyama Limba QUALIFIED
Emily WhobreyGermanyIoni Bowcher NEGOTIATION
Claire TollnerCanadaAsiya Javayant NEGOTIATION
Chavez BriddickGermanyStephen Shaw UNQUALIFIED
Aruna FigeroaBrazilElwin Sharvill RENEWAL
Silvio SlusarskiGermanyElwin Sharvill NEW
Jefferson SchemmerBrazilAmy Elsner NEW
Morrow RutaCanadaAmy Elsner PROPOSAL
Kaitlin OstroskyRussiaBernardo Dominic NEGOTIATION
Alejandro PerinGermanyOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyUnited Kingdom2025-07-17Commercial Press NEW91Ivan Magalhaes
1001Francesco ShinkoJapan2025-07-18Chapman, Ross E Esq UNQUALIFIED84Elwin Sharvill
1002Jeanfrancois VenereRussia2025-07-30Chemel, James L Cpa QUALIFIED8Bernardo Dominic
1003Costa DilliardIndia2025-07-29Buckley Miller Wright NEW19Ivan Magalhaes
1004Aruna FigeroaRussia2025-07-15Printing Dimensions QUALIFIED75Ivan Magalhaes
1005Wickens NestleIndia2025-07-31Feltz Printing Service UNQUALIFIED94Xuxue Feng
1006Izzy GarufiUnited Kingdom2025-07-22Dorl, James J Esq PROPOSAL89Amy Elsner
1007Izzy GarufiFrance2025-07-24Chemel, James L Cpa NEGOTIATION20Ivan Magalhaes
1008Costa DilliardGermany2025-08-02King, Christopher A Esq NEW83Amy Elsner
1009Izzy GarufiAustralia2025-07-30Feiner Bros UNQUALIFIED79Xuxue Feng
1010Isabel BowleyItaly2025-07-13Truhlar And Truhlar Attys NEGOTIATION87Elwin Sharvill
1011Wickens NestleGermany2025-07-29Commercial Press UNQUALIFIED28Ioni Bowcher
1012Leon OldroydRussia2025-07-17Feiner Bros RENEWAL92Asiya Javayant
1013Munro FerenczIndia2025-07-30Dorl, James J Esq QUALIFIED24Stephen Shaw
1014Leon OldroydRussia2025-07-30Chanay, Jeffrey A Esq PROPOSAL11Xuxue Feng
1015Claire TollnerSpain2025-08-05Truhlar And Truhlar Attys NEW2Ivan Magalhaes
1016Darci PoquetteAustralia2025-07-12Feiner Bros PROPOSAL0Asiya Javayant
1017Izzy GarufiFrance2025-08-05Chanay, Jeffrey A Esq RENEWAL81Stephen Shaw
1018Johnson SergiGermany2025-08-01Buckley Miller Wright PROPOSAL13Elwin Sharvill
1019Jeanfrancois VenereFrance2025-08-08Feltz Printing Service QUALIFIED86Bernardo Dominic
1020Mayumi KolmetzJapan2025-07-31King, Christopher A Esq NEGOTIATION68Asiya Javayant
1021Silvio SlusarskiSpain2025-07-31Rousseaux, Michael Esq RENEWAL20Bernardo Dominic
1022Greenwood BologniaFrance2025-07-22Dorl, James J Esq PROPOSAL40Xuxue Feng
1023Alejandro PerinGermany2025-08-06Rangoni Of Florence PROPOSAL85Xuxue Feng
1024David DarakjyItaly2025-08-05Commercial Press NEW75Asiya Javayant
1025Johnson SergiUnited Kingdom2025-08-03Morlong Associates NEW82Bernardo Dominic
1026Salvatore StockhamBrazil2025-07-25Printing Dimensions NEW96Onyama Limba
1027Costa DilliardItaly2025-08-01King, Christopher A Esq QUALIFIED18Bernardo Dominic
1028Smith GlickGermany2025-07-11Dorl, James J Esq NEW83Xuxue Feng
1029Julie StensethGermany2025-07-11Chanay, Jeffrey A Esq UNQUALIFIED9Onyama Limba
1030Smith GlickSpain2025-08-06Dorl, James J Esq NEGOTIATION83Xuxue Feng
1031Francesco ShinkoGermany2025-08-04Commercial Press UNQUALIFIED45Stephen Shaw
1032Salvatore StockhamAustralia2025-08-01Chapman, Ross E Esq QUALIFIED91Asiya Javayant
1033Jennifer AmigonGermany2025-07-14Commercial Press UNQUALIFIED82Amy Elsner
1034Ricardo GauchoItaly2025-08-06Feiner Bros NEW28Bernardo Dominic
1035Silvio SlusarskiFrance2025-07-11Feltz Printing Service UNQUALIFIED88Stephen Shaw
1036Alejandro PerinUnited Kingdom2025-07-11Chanay, Jeffrey A Esq RENEWAL17Onyama Limba
1037Deepesh ChuiGermany2025-07-23Commercial Press NEW66Xuxue Feng
1038Aruna FigeroaIndia2025-07-29Chanay, Jeffrey A Esq RENEWAL7Ivan Magalhaes
1039Wickens NestleRussia2025-08-02King, Christopher A Esq PROPOSAL0Elwin Sharvill
1040Jennifer AmigonAustralia2025-07-19Feiner Bros QUALIFIED58Ivan Magalhaes
1041James ButtItaly2025-07-15Printing Dimensions NEGOTIATION19Anna Fali
1042Aruna FigeroaAustralia2025-07-21Buckley Miller Wright UNQUALIFIED23Xuxue Feng
1043Munro FerenczAustralia2025-07-26Buckley Miller Wright NEW40Xuxue Feng
1044Wickens NestleAustralia2025-07-17Morlong Associates PROPOSAL71Stephen Shaw
1045James ButtAustralia2025-07-30Chapman, Ross E Esq NEGOTIATION74Xuxue Feng
1046Sinclair WaycottArgentina2025-08-06Chanay, Jeffrey A Esq PROPOSAL64Asiya Javayant
1047Wickens NestleFrance2025-07-29Chanay, Jeffrey A Esq NEW9Stephen Shaw
1048Leon OldroydAustralia2025-07-25Feltz Printing Service RENEWAL81Xuxue Feng
1049Aika InouyeItaly2025-07-23Morlong Associates QUALIFIED95Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Juan WieserRussiaStephen Shaw QUALIFIED
Silvio SlusarskiUnited KingdomIoni Bowcher UNQUALIFIED
Greenwood BologniaJapanIoni Bowcher QUALIFIED
Mujtaba NickaJapanAmy Elsner PROPOSAL
Morrow RutaUnited KingdomAnna Fali NEGOTIATION
Greenwood BologniaCanadaXuxue Feng PROPOSAL
Jennifer AmigonUnited KingdomIvan Magalhaes QUALIFIED
Aditya KuskoCanadaIoni Bowcher PROPOSAL
Jeanfrancois VenereArgentinaBernardo Dominic PROPOSAL
Arvin AlbaresGermanyIvan Magalhaes NEGOTIATION
Faith GillianJapanBernardo Dominic RENEWAL
Smith GlickJapanOnyama Limba NEGOTIATION
Leja CaldareraFranceOnyama Limba NEGOTIATION
Morrow RutaIndiaIoni Bowcher PROPOSAL
Alejandro PerinItalyBernardo Dominic UNQUALIFIED
Alejandro PerinFranceIvan Magalhaes PROPOSAL
Greenwood BologniaGermanyIvan Magalhaes RENEWAL
Aruna FigeroaIndiaAmy Elsner QUALIFIED
Greenwood BologniaSpainBernardo Dominic PROPOSAL
Ashley DoeRussiaIvan Magalhaes RENEWAL
Alejandro PerinRussiaIoni Bowcher NEW
Leon OldroydRussiaXuxue Feng UNQUALIFIED
Darci PoquetteSpainAnna Fali NEW
Silvio SlusarskiRussiaXuxue Feng NEW
Kaitlin OstroskyItalyIoni Bowcher PROPOSAL
Jennifer AmigonItalyAmy Elsner NEGOTIATION
Ricardo GauchoRussiaAsiya Javayant PROPOSAL
Maisha RulapaughAustraliaBernardo Dominic NEGOTIATION
Clifford RimItalyStephen Shaw UNQUALIFIED
Clifford RimCanadaBernardo Dominic QUALIFIED
Octavia MaletSpainIoni Bowcher UNQUALIFIED
Arvin AlbaresGermanyStephen Shaw NEGOTIATION
Jones VocelkaUnited KingdomElwin Sharvill UNQUALIFIED
Jones VocelkaAustraliaElwin Sharvill NEGOTIATION
Murillo MaletArgentinaXuxue Feng QUALIFIED
Deepesh ChuiJapanAmy Elsner UNQUALIFIED
Juan WieserBrazilStephen Shaw QUALIFIED
Jennifer AmigonGermanyIvan Magalhaes UNQUALIFIED
Ashley DoeItalyAsiya Javayant NEGOTIATION
Jones VocelkaGermanyAsiya Javayant UNQUALIFIED
Tony FollerItalyBernardo Dominic UNQUALIFIED
Kadeem FlosiAustraliaXuxue Feng PROPOSAL
Sinclair WaycottBrazilStephen Shaw QUALIFIED
Munro FerenczGermanyIvan Magalhaes PROPOSAL
Jennifer AmigonUnited KingdomIoni Bowcher QUALIFIED
Ivar PaprockiRussiaAsiya Javayant RENEWAL
Silvio SlusarskiItalyAmy Elsner NEW
Isabel BowleyArgentinaIvan Magalhaes NEW
Ricardo GauchoJapanAnna Fali QUALIFIED
Johnson SergiItalyAsiya Javayant RENEWAL
Frozen Columns
Name
Arvin Albares
Aika Inouye
Darci Poquette
David Darakjy
Tony Foller
Mujtaba Nicka
Morrow Ruta
Arvin Albares
Isabel Bowley
Aditya Kusko
Mujtaba Nicka
David Darakjy
Kadeem Flosi
Sinclair Waycott
Jefferson Schemmer
Costa Dilliard
Claire Tollner
Munro Ferencz
Silvio Slusarski
Clifford Rim
Smith Glick
Nicolas Iturbide
Kaitlin Ostrosky
Arvin Albares
Juan Wieser
Clifford Rim
Isabel Bowley
Sinclair Waycott
Mujtaba Nicka
Octavia Malet
Maisha Rulapaugh
Alejandro Perin
Faith Gillian
Maria Marrier
Ashley Doe
David Darakjy
Emily Whobrey
Munro Ferencz
Maisha Rulapaugh
Wickens Nestle
Darci Poquette
Francesco Shinko
Silvio Slusarski
Ivar Paprocki
Kadeem Flosi
Isabel Bowley
Jefferson Schemmer
Sinclair Waycott
Tony Foller
Deepesh Chui
IdCountryDate
1000India2025-07-30
1001France2025-08-04
1002Brazil2025-07-17
1003Brazil2025-07-25
1004Germany2025-07-27
1005France2025-07-31
1006Germany2025-07-19
1007Brazil2025-07-31
1008India2025-07-16
1009Russia2025-08-05
1010Germany2025-07-23
1011Canada2025-07-23
1012France2025-07-31
1013Australia2025-07-25
1014Italy2025-07-11
1015France2025-07-20
1016United Kingdom2025-07-11
1017Australia2025-07-29
1018Canada2025-07-20
1019Russia2025-07-26
1020Australia2025-07-24
1021Australia2025-07-21
1022Argentina2025-07-21
1023Brazil2025-07-28
1024Australia2025-07-21
1025Brazil2025-07-10
1026Brazil2025-08-06
1027Australia2025-07-21
1028Spain2025-08-02
1029France2025-08-07
1030Canada2025-07-18
1031Canada2025-07-16
1032United Kingdom2025-07-13
1033Italy2025-07-20
1034Italy2025-08-01
1035Australia2025-07-23
1036United Kingdom2025-07-19
1037Argentina2025-07-25
1038United Kingdom2025-07-21
1039India2025-08-07
1040Brazil2025-08-03
1041Germany2025-07-20
1042Brazil2025-08-03
1043Italy2025-08-04
1044Australia2025-07-19
1045Brazil2025-07-15
1046France2025-07-31
1047Argentina2025-08-01
1048Canada2025-07-31
1049Australia2025-07-11

On-Demand Data

NameIdCountryDate
Morrow Ruta1000Brazil2025-08-06
Jones Vocelka1001United Kingdom2025-07-20
Stacey Maclead1002Argentina2025-07-20
Ashley Doe1003Germany2025-07-24
Alejandro Perin1004Japan2025-07-16
Ivar Paprocki1005Brazil2025-08-06
Adams Morasca1006Australia2025-07-27
Chavez Briddick1007Spain2025-08-07
Chavez Briddick1008Brazil2025-07-19
Alejandro Perin1009Argentina2025-07-23
Nicolas Iturbide1010Canada2025-07-17
Kaitlin Ostrosky1011Australia2025-07-10
Deepesh Chui1012Italy2025-08-05
Stacey Maclead1013India2025-07-14
Kaitlin Ostrosky1014India2025-07-13
Octavia Malet1015Brazil2025-08-01
Emily Whobrey1016Japan2025-07-23
Ashley Doe1017Germany2025-07-11
Maria Marrier1018Germany2025-07-13
Julie Stenseth1019India2025-07-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Octavia MaletJapanXuxue Feng NEGOTIATION
Julie StensethSpainXuxue Feng UNQUALIFIED
Tony FollerGermanyElwin Sharvill NEGOTIATION
Greenwood BologniaCanadaIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilAnna Fali QUALIFIED
Leja CaldareraRussiaAsiya Javayant PROPOSAL
Isabel BowleyIndiaBernardo Dominic UNQUALIFIED
Mayumi KolmetzSpainIoni Bowcher PROPOSAL
Cody SaylorsBrazilXuxue Feng RENEWAL
Antonio CaudyCanadaAnna Fali UNQUALIFIED
Darci PoquetteCanadaBernardo Dominic PROPOSAL
Jefferson SchemmerBrazilOnyama Limba NEW
Murillo MaletArgentinaElwin Sharvill QUALIFIED
Emily WhobreySpainOnyama Limba PROPOSAL
Kadeem FlosiJapanOnyama Limba RENEWAL
Aruna FigeroaCanadaBernardo Dominic PROPOSAL
Francesco ShinkoItalyIoni Bowcher RENEWAL
Cody SaylorsRussiaOnyama Limba NEW
Ashley DoeCanadaIoni Bowcher UNQUALIFIED
Munro FerenczCanadaElwin Sharvill RENEWAL
Aika InouyeUnited KingdomAnna Fali RENEWAL
Stacey MacleadIndiaOnyama Limba NEGOTIATION
Rodrigues CampainArgentinaElwin Sharvill NEW
Morrow RutaFranceOnyama Limba QUALIFIED
Maria MarrierFranceElwin Sharvill PROPOSAL
Johnson SergiRussiaAmy Elsner NEGOTIATION
James ButtRussiaAnna Fali RENEWAL
Arvin AlbaresUnited KingdomAsiya Javayant UNQUALIFIED
Francesco ShinkoAustraliaElwin Sharvill UNQUALIFIED
Leja CaldareraItalyIoni Bowcher NEW
Julie StensethCanadaAmy Elsner NEW
Jones VocelkaArgentinaAsiya Javayant NEW
Jennifer AmigonCanadaXuxue Feng QUALIFIED
Greenwood BologniaGermanyIoni Bowcher PROPOSAL
James ButtGermanyAmy Elsner PROPOSAL
Ricardo GauchoArgentinaIoni Bowcher RENEWAL
James ButtFranceAmy Elsner RENEWAL
Johnson SergiJapanXuxue Feng UNQUALIFIED
Jennifer AmigonRussiaBernardo Dominic UNQUALIFIED
Isabel BowleyFranceBernardo 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>