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
Johnson SergiBrazilIoni Bowcher UNQUALIFIED
Jennifer AmigonIndiaIoni Bowcher RENEWAL
Sinclair WaycottArgentinaAmy Elsner RENEWAL
Johnson SergiFranceElwin Sharvill NEW
Ivar PaprockiUnited KingdomXuxue Feng QUALIFIED
Aruna FigeroaJapanBernardo Dominic RENEWAL
David DarakjyArgentinaOnyama Limba NEW
Francesco ShinkoRussiaBernardo Dominic UNQUALIFIED
Alejandro PerinGermanyBernardo Dominic NEGOTIATION
Chavez BriddickBrazilAnna Fali NEW
Kadeem FlosiAustraliaXuxue Feng UNQUALIFIED
Mayumi KolmetzSpainBernardo Dominic NEW
Stacey MacleadItalyElwin Sharvill UNQUALIFIED
Jefferson SchemmerCanadaAsiya Javayant NEGOTIATION
Mujtaba NickaGermanyStephen Shaw NEGOTIATION
Greenwood BologniaUnited KingdomAmy Elsner QUALIFIED
Aika InouyeUnited KingdomIvan Magalhaes NEW
Francesco ShinkoJapanAnna Fali RENEWAL
Costa DilliardBrazilXuxue Feng RENEWAL
Mayumi KolmetzCanadaStephen Shaw NEGOTIATION
Isabel BowleyAustraliaElwin Sharvill UNQUALIFIED
Johnson SergiCanadaAsiya Javayant QUALIFIED
Aika InouyeIndiaAnna Fali QUALIFIED
Julie StensethIndiaAsiya Javayant PROPOSAL
Kaitlin OstroskyRussiaAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomAnna Fali NEGOTIATION
Cody SaylorsRussiaXuxue Feng QUALIFIED
Mayumi KolmetzGermanyAmy Elsner NEW
Arvin AlbaresUnited KingdomAmy Elsner QUALIFIED
Jeanfrancois VenereBrazilStephen Shaw QUALIFIED
Claire TollnerGermanyIvan Magalhaes NEGOTIATION
Ivar PaprockiSpainXuxue Feng QUALIFIED
Silvio SlusarskiJapanXuxue Feng PROPOSAL
Johnson SergiArgentinaIvan Magalhaes RENEWAL
Jefferson SchemmerIndiaStephen Shaw NEW
Aditya KuskoSpainElwin Sharvill QUALIFIED
Murillo MaletBrazilAmy Elsner NEGOTIATION
Rodrigues CampainAustraliaIoni Bowcher QUALIFIED
Aruna FigeroaRussiaAnna Fali NEW
Clifford RimItalyAnna Fali RENEWAL
Faith GillianUnited KingdomIvan Magalhaes PROPOSAL
Stacey MacleadSpainXuxue Feng RENEWAL
Leja CaldareraJapanBernardo Dominic NEW
Kadeem FlosiFranceStephen Shaw RENEWAL
Chavez BriddickBrazilStephen Shaw UNQUALIFIED
Adams MorascaBrazilIvan Magalhaes QUALIFIED
Deepesh ChuiItalyIoni Bowcher NEW
Wickens NestleArgentinaElwin Sharvill NEGOTIATION
Jefferson SchemmerSpainIoni Bowcher NEGOTIATION
Ivar PaprockiAustraliaOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteGermanyXuxue Feng RENEWAL
Nicolas IturbideFranceElwin Sharvill QUALIFIED
Kaitlin OstroskyRussiaStephen Shaw NEW
Greenwood BologniaRussiaAnna Fali NEGOTIATION
Francesco ShinkoIndiaAsiya Javayant RENEWAL
Leja CaldareraIndiaOnyama Limba UNQUALIFIED
Deepesh ChuiBrazilAnna Fali QUALIFIED
Deepesh ChuiItalyIoni Bowcher RENEWAL
Costa DilliardCanadaIvan Magalhaes RENEWAL
Mayumi KolmetzGermanyStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoUnited Kingdom2026-04-13Rangoni Of Florence RENEWAL46Onyama Limba
1001Julie StensethCanada2026-04-21Morlong Associates RENEWAL50Anna Fali
1002Deepesh ChuiCanada2026-04-23Feiner Bros PROPOSAL94Elwin Sharvill
1003Clifford RimGermany2026-04-03Rangoni Of Florence UNQUALIFIED17Amy Elsner
1004Leja CaldareraItaly2026-03-31Benton, John B Jr NEGOTIATION26Ioni Bowcher
1005Adams MorascaArgentina2026-04-14Chemel, James L Cpa UNQUALIFIED32Bernardo Dominic
1006Clifford RimSpain2026-04-24Buckley Miller Wright RENEWAL49Xuxue Feng
1007Faith GillianBrazil2026-04-19Commercial Press UNQUALIFIED58Xuxue Feng
1008Johnson SergiBrazil2026-04-01Feltz Printing Service PROPOSAL74Ivan Magalhaes
1009Munro FerenczItaly2026-04-05Chapman, Ross E Esq QUALIFIED74Amy Elsner
1010Murillo MaletFrance2026-04-03Chapman, Ross E Esq QUALIFIED31Asiya Javayant
1011Jones VocelkaUnited Kingdom2026-04-17King, Christopher A Esq NEGOTIATION68Xuxue Feng
1012Greenwood BologniaArgentina2026-04-04Chanay, Jeffrey A Esq QUALIFIED60Ioni Bowcher
1013Murillo MaletUnited Kingdom2026-04-11Commercial Press NEGOTIATION43Xuxue Feng
1014Kadeem FlosiGermany2026-04-20Benton, John B Jr QUALIFIED57Xuxue Feng
1015Maria MarrierIndia2026-04-04Rangoni Of Florence NEW74Xuxue Feng
1016Arvin AlbaresSpain2026-04-16Printing Dimensions RENEWAL13Bernardo Dominic
1017Johnson SergiGermany2026-03-26King, Christopher A Esq QUALIFIED46Stephen Shaw
1018Maisha RulapaughIndia2026-04-07Chapman, Ross E Esq NEW90Xuxue Feng
1019Johnson SergiJapan2026-04-03Rangoni Of Florence PROPOSAL40Stephen Shaw
1020Izzy GarufiAustralia2026-03-31Buckley Miller Wright RENEWAL45Ivan Magalhaes
1021Nicolas IturbideCanada2026-04-20Morlong Associates NEW77Bernardo Dominic
1022Aika InouyeFrance2026-04-07Chapman, Ross E Esq NEGOTIATION71Asiya Javayant
1023Juan WieserRussia2026-04-23Benton, John B Jr PROPOSAL93Asiya Javayant
1024Maria MarrierGermany2026-04-13Printing Dimensions NEW64Bernardo Dominic
1025Stacey MacleadAustralia2026-03-31Buckley Miller Wright NEGOTIATION65Ioni Bowcher
1026Isabel BowleyAustralia2026-03-27Printing Dimensions QUALIFIED79Bernardo Dominic
1027Maisha RulapaughAustralia2026-03-30Buckley Miller Wright QUALIFIED64Bernardo Dominic
1028Emily WhobreyGermany2026-04-20Printing Dimensions PROPOSAL46Ioni Bowcher
1029Izzy GarufiArgentina2026-04-02Chanay, Jeffrey A Esq UNQUALIFIED24Xuxue Feng
1030Francesco ShinkoCanada2026-04-19Morlong Associates UNQUALIFIED74Bernardo Dominic
1031Sinclair WaycottUnited Kingdom2026-03-30King, Christopher A Esq PROPOSAL40Anna Fali
1032Darci PoquetteSpain2026-04-19Rousseaux, Michael Esq NEGOTIATION39Asiya Javayant
1033Mayumi KolmetzJapan2026-04-02Morlong Associates NEW16Stephen Shaw
1034Mujtaba NickaGermany2026-04-19Rousseaux, Michael Esq NEW56Amy Elsner
1035Maria MarrierAustralia2026-04-22King, Christopher A Esq RENEWAL42Onyama Limba
1036Chavez BriddickIndia2026-04-13Dorl, James J Esq RENEWAL9Ivan Magalhaes
1037Arvin AlbaresRussia2026-04-05Chemel, James L Cpa UNQUALIFIED46Stephen Shaw
1038Sinclair WaycottAustralia2026-04-13Truhlar And Truhlar Attys RENEWAL71Xuxue Feng
1039Claire TollnerRussia2026-03-29Buckley Miller Wright UNQUALIFIED88Asiya Javayant
1040Emily WhobreyGermany2026-04-18Chapman, Ross E Esq UNQUALIFIED63Bernardo Dominic
1041Silvio SlusarskiJapan2026-04-21Chanay, Jeffrey A Esq UNQUALIFIED57Amy Elsner
1042Misaki RoysterJapan2026-04-14Feiner Bros NEW75Ioni Bowcher
1043Johnson SergiIndia2026-04-07Chanay, Jeffrey A Esq RENEWAL55Ivan Magalhaes
1044Tony FollerIndia2026-04-12Feltz Printing Service PROPOSAL88Xuxue Feng
1045James ButtFrance2026-04-14Chanay, Jeffrey A Esq UNQUALIFIED4Bernardo Dominic
1046Silvio SlusarskiSpain2026-04-10Dorl, James J Esq UNQUALIFIED9Stephen Shaw
1047Emily WhobreyBrazil2026-04-15Printing Dimensions RENEWAL3Onyama Limba
1048Murillo MaletGermany2026-04-10Feiner Bros NEGOTIATION32Anna Fali
1049Ivar PaprockiUnited Kingdom2026-04-12Commercial Press PROPOSAL4Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaArgentinaBernardo Dominic QUALIFIED
James ButtIndiaStephen Shaw NEW
Jones VocelkaJapanAsiya Javayant PROPOSAL
Maria MarrierCanadaIoni Bowcher UNQUALIFIED
Aditya KuskoFranceAmy Elsner NEGOTIATION
Aditya KuskoAustraliaOnyama Limba RENEWAL
Morrow RutaFranceBernardo Dominic QUALIFIED
Kadeem FlosiFranceXuxue Feng RENEWAL
Ashley DoeArgentinaStephen Shaw QUALIFIED
Munro FerenczIndiaElwin Sharvill NEGOTIATION
Aika InouyeItalyIvan Magalhaes NEW
Faith GillianItalyOnyama Limba NEW
Munro FerenczBrazilXuxue Feng PROPOSAL
Aditya KuskoJapanBernardo Dominic UNQUALIFIED
Murillo MaletBrazilStephen Shaw QUALIFIED
Greenwood BologniaUnited KingdomOnyama Limba RENEWAL
Jeanfrancois VenereAustraliaAsiya Javayant RENEWAL
Nicolas IturbideBrazilIoni Bowcher RENEWAL
Costa DilliardRussiaElwin Sharvill NEGOTIATION
Mayumi KolmetzGermanyBernardo Dominic NEGOTIATION
Jennifer AmigonUnited KingdomElwin Sharvill UNQUALIFIED
Aditya KuskoArgentinaStephen Shaw PROPOSAL
Francesco ShinkoSpainAsiya Javayant PROPOSAL
Jefferson SchemmerGermanyAmy Elsner NEW
Darci PoquetteUnited KingdomIvan Magalhaes PROPOSAL
James ButtBrazilBernardo Dominic UNQUALIFIED
Kadeem FlosiCanadaIoni Bowcher UNQUALIFIED
Salvatore StockhamGermanyXuxue Feng NEW
Clifford RimSpainStephen Shaw QUALIFIED
Aika InouyeGermanyElwin Sharvill UNQUALIFIED
Cody SaylorsRussiaIoni Bowcher QUALIFIED
Mayumi KolmetzGermanyOnyama Limba UNQUALIFIED
Claire TollnerGermanyIoni Bowcher RENEWAL
Johnson SergiAustraliaElwin Sharvill NEGOTIATION
Antonio CaudySpainOnyama Limba UNQUALIFIED
Clifford RimUnited KingdomOnyama Limba UNQUALIFIED
Leon OldroydIndiaIvan Magalhaes RENEWAL
Mujtaba NickaIndiaIoni Bowcher RENEWAL
James ButtFranceBernardo Dominic UNQUALIFIED
Aruna FigeroaJapanStephen Shaw UNQUALIFIED
Aruna FigeroaSpainStephen Shaw NEW
Octavia MaletArgentinaAmy Elsner NEGOTIATION
Darci PoquetteCanadaStephen Shaw RENEWAL
Jennifer AmigonItalyStephen Shaw NEGOTIATION
Claire TollnerSpainIvan Magalhaes NEGOTIATION
Alejandro PerinBrazilAmy Elsner PROPOSAL
Jefferson SchemmerJapanStephen Shaw NEW
David DarakjySpainIvan Magalhaes QUALIFIED
Jones VocelkaIndiaElwin Sharvill UNQUALIFIED
James ButtItalyXuxue Feng QUALIFIED
Frozen Columns
Name
Tony Foller
Greenwood Bolognia
Julie Stenseth
Faith Gillian
Stacey Maclead
Ivar Paprocki
Arvin Albares
Octavia Malet
Adams Morasca
Aika Inouye
Greenwood Bolognia
Deepesh Chui
Emily Whobrey
Cody Saylors
Aruna Figeroa
Smith Glick
Ashley Doe
Munro Ferencz
Jennifer Amigon
Leja Caldarera
Jefferson Schemmer
Juan Wieser
Ashley Doe
Maisha Rulapaugh
Clifford Rim
Izzy Garufi
Arvin Albares
Aika Inouye
Emily Whobrey
Leon Oldroyd
Tony Foller
Izzy Garufi
Izzy Garufi
Cody Saylors
Ivar Paprocki
Francesco Shinko
Isabel Bowley
Maisha Rulapaugh
Claire Tollner
Jeanfrancois Venere
Adams Morasca
Juan Wieser
Aruna Figeroa
Smith Glick
Emily Whobrey
Deepesh Chui
Octavia Malet
Murillo Malet
Emily Whobrey
Chavez Briddick
IdCountryDate
1000Germany2026-04-09
1001Italy2026-04-17
1002Japan2026-03-27
1003Canada2026-04-14
1004Japan2026-04-08
1005Canada2026-03-27
1006Japan2026-04-05
1007Germany2026-04-03
1008Russia2026-04-15
1009Brazil2026-04-05
1010Brazil2026-04-11
1011Argentina2026-04-11
1012Japan2026-04-01
1013Australia2026-04-17
1014Italy2026-03-30
1015Germany2026-04-11
1016Japan2026-04-07
1017Italy2026-04-10
1018United Kingdom2026-04-01
1019France2026-04-06
1020Russia2026-04-10
1021Spain2026-03-30
1022Russia2026-04-04
1023Argentina2026-04-09
1024France2026-03-27
1025Argentina2026-03-26
1026Russia2026-04-12
1027Spain2026-03-28
1028Russia2026-04-02
1029India2026-04-12
1030Argentina2026-04-05
1031Brazil2026-04-13
1032Brazil2026-04-02
1033Italy2026-04-01
1034Canada2026-04-04
1035Spain2026-04-03
1036Argentina2026-04-06
1037Germany2026-04-18
1038France2026-04-23
1039Argentina2026-04-17
1040Italy2026-03-26
1041Japan2026-03-28
1042Spain2026-04-18
1043Germany2026-04-19
1044India2026-04-13
1045France2026-04-05
1046India2026-04-23
1047Japan2026-04-05
1048India2026-04-02
1049India2026-04-08

On-Demand Data

NameIdCountryDate
Stacey Maclead1000Australia2026-03-29
Ivar Paprocki1001India2026-03-31
James Butt1002Brazil2026-04-24
Deepesh Chui1003Japan2026-04-03
Faith Gillian1004Brazil2026-04-11
Claire Tollner1005France2026-03-29
Mujtaba Nicka1006Spain2026-04-10
David Darakjy1007Australia2026-04-02
Nicolas Iturbide1008India2026-03-27
Jefferson Schemmer1009Russia2026-04-17
Wickens Nestle1010United Kingdom2026-04-07
Leon Oldroyd1011Argentina2026-04-11
Wickens Nestle1012United Kingdom2026-04-04
Izzy Garufi1013Argentina2026-04-06
Sinclair Waycott1014Japan2026-04-19
Maisha Rulapaugh1015France2026-04-12
Aditya Kusko1016United Kingdom2026-04-19
Antonio Caudy1017India2026-04-16
Jeanfrancois Venere1018India2026-04-13
Francesco Shinko1019Argentina2026-03-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyBrazilIoni Bowcher PROPOSAL
Ricardo GauchoUnited KingdomIoni Bowcher PROPOSAL
Alejandro PerinJapanAnna Fali UNQUALIFIED
Nicolas IturbideJapanIvan Magalhaes NEW
Julie StensethCanadaIoni Bowcher QUALIFIED
Maisha RulapaughJapanXuxue Feng PROPOSAL
Misaki RoysterArgentinaIoni Bowcher NEGOTIATION
Julie StensethGermanyIoni Bowcher PROPOSAL
Francesco ShinkoArgentinaIvan Magalhaes NEGOTIATION
Ashley DoeJapanBernardo Dominic PROPOSAL
Kadeem FlosiGermanyAsiya Javayant NEW
Ricardo GauchoUnited KingdomStephen Shaw NEW
Rodrigues CampainFranceIoni Bowcher UNQUALIFIED
Francesco ShinkoRussiaIvan Magalhaes QUALIFIED
Aruna FigeroaIndiaAmy Elsner QUALIFIED
Faith GillianBrazilBernardo Dominic UNQUALIFIED
Salvatore StockhamFranceAnna Fali NEGOTIATION
Munro FerenczUnited KingdomIoni Bowcher QUALIFIED
Izzy GarufiGermanyBernardo Dominic PROPOSAL
Aditya KuskoArgentinaIvan Magalhaes PROPOSAL
James ButtCanadaIvan Magalhaes NEW
Octavia MaletUnited KingdomIoni Bowcher NEGOTIATION
Ivar PaprockiIndiaAsiya Javayant RENEWAL
Kadeem FlosiArgentinaAsiya Javayant NEGOTIATION
Johnson SergiItalyOnyama Limba QUALIFIED
Alejandro PerinBrazilIoni Bowcher NEGOTIATION
Silvio SlusarskiFranceStephen Shaw QUALIFIED
Mujtaba NickaBrazilIoni Bowcher RENEWAL
Morrow RutaArgentinaAmy Elsner NEW
Maria MarrierGermanyAnna Fali PROPOSAL
Darci PoquetteAustraliaAnna Fali RENEWAL
Ivar PaprockiRussiaAmy Elsner NEGOTIATION
Aditya KuskoSpainAmy Elsner UNQUALIFIED
James ButtJapanOnyama Limba NEGOTIATION
Francesco ShinkoBrazilAmy Elsner NEW
Antonio CaudyGermanyAsiya Javayant QUALIFIED
Arvin AlbaresJapanIvan Magalhaes RENEWAL
Jennifer AmigonGermanyElwin Sharvill NEGOTIATION
Munro FerenczBrazilIvan Magalhaes NEGOTIATION
Costa DilliardItalyAsiya Javayant 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>