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
Munro FerenczUnited KingdomXuxue Feng PROPOSAL
David DarakjyArgentinaAnna Fali RENEWAL
David DarakjyRussiaAnna Fali NEGOTIATION
Maisha RulapaughGermanyXuxue Feng PROPOSAL
Leon OldroydUnited KingdomIoni Bowcher UNQUALIFIED
Ashley DoeItalyIoni Bowcher NEW
Ivar PaprockiGermanyXuxue Feng RENEWAL
James ButtFranceIvan Magalhaes UNQUALIFIED
David DarakjyCanadaIvan Magalhaes RENEWAL
Aruna FigeroaIndiaXuxue Feng NEGOTIATION
Jefferson SchemmerSpainElwin Sharvill UNQUALIFIED
Darci PoquetteArgentinaIoni Bowcher UNQUALIFIED
Murillo MaletCanadaElwin Sharvill RENEWAL
Maisha RulapaughJapanOnyama Limba PROPOSAL
Kadeem FlosiArgentinaAmy Elsner UNQUALIFIED
Johnson SergiGermanyAnna Fali QUALIFIED
Aruna FigeroaRussiaIoni Bowcher QUALIFIED
Deepesh ChuiBrazilStephen Shaw UNQUALIFIED
Emily WhobreyUnited KingdomAnna Fali RENEWAL
Murillo MaletItalyBernardo Dominic UNQUALIFIED
Alejandro PerinCanadaStephen Shaw QUALIFIED
Greenwood BologniaArgentinaAmy Elsner RENEWAL
Tony FollerArgentinaAnna Fali RENEWAL
Isabel BowleyUnited KingdomOnyama Limba RENEWAL
Misaki RoysterUnited KingdomAnna Fali NEW
Mujtaba NickaUnited KingdomAmy Elsner NEW
Ashley DoeUnited KingdomStephen Shaw QUALIFIED
Silvio SlusarskiJapanAsiya Javayant QUALIFIED
Aditya KuskoArgentinaAmy Elsner RENEWAL
David DarakjyGermanyStephen Shaw PROPOSAL
Maisha RulapaughRussiaIoni Bowcher NEGOTIATION
Leon OldroydItalyIvan Magalhaes NEW
Arvin AlbaresJapanIvan Magalhaes NEW
Darci PoquetteItalyAmy Elsner QUALIFIED
Mayumi KolmetzAustraliaIoni Bowcher RENEWAL
Kadeem FlosiAustraliaAnna Fali RENEWAL
Chavez BriddickRussiaBernardo Dominic NEW
Costa DilliardArgentinaElwin Sharvill NEGOTIATION
Jeanfrancois VenereItalyStephen Shaw NEW
Octavia MaletSpainAnna Fali QUALIFIED
Jennifer AmigonItalyAmy Elsner PROPOSAL
Isabel BowleyIndiaBernardo Dominic RENEWAL
Faith GillianBrazilBernardo Dominic UNQUALIFIED
Jennifer AmigonSpainAmy Elsner QUALIFIED
Ashley DoeSpainElwin Sharvill NEW
Jefferson SchemmerAustraliaAmy Elsner NEW
Munro FerenczArgentinaElwin Sharvill PROPOSAL
Octavia MaletGermanyXuxue Feng QUALIFIED
Costa DilliardJapanStephen Shaw PROPOSAL
Darci PoquetteAustraliaStephen Shaw UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaGermanyBernardo Dominic RENEWAL
Darci PoquetteAustraliaIoni Bowcher RENEWAL
Jones VocelkaSpainBernardo Dominic QUALIFIED
Aruna FigeroaRussiaXuxue Feng PROPOSAL
Deepesh ChuiJapanIoni Bowcher QUALIFIED
Munro FerenczSpainIoni Bowcher NEW
Jones VocelkaJapanIvan Magalhaes RENEWAL
Nicolas IturbideBrazilElwin Sharvill UNQUALIFIED
Cody SaylorsGermanyAmy Elsner UNQUALIFIED
Cody SaylorsItalyStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Octavia MaletUnited Kingdom2026-04-11Buckley Miller Wright QUALIFIED83Bernardo Dominic
1001Deepesh ChuiUnited Kingdom2026-04-03Dorl, James J Esq PROPOSAL8Asiya Javayant
1002Arvin AlbaresArgentina2026-03-23Buckley Miller Wright QUALIFIED35Ivan Magalhaes
1003Aika InouyeCanada2026-04-01King, Christopher A Esq PROPOSAL81Asiya Javayant
1004Nicolas IturbideRussia2026-03-26Rangoni Of Florence UNQUALIFIED94Stephen Shaw
1005Sinclair WaycottAustralia2026-04-15Chemel, James L Cpa UNQUALIFIED3Ioni Bowcher
1006Jones VocelkaGermany2026-03-23Benton, John B Jr QUALIFIED9Ioni Bowcher
1007Juan WieserCanada2026-03-31Dorl, James J Esq NEGOTIATION97Xuxue Feng
1008Stacey MacleadJapan2026-03-24King, Christopher A Esq RENEWAL40Asiya Javayant
1009Emily WhobreySpain2026-04-04Rousseaux, Michael Esq NEGOTIATION53Bernardo Dominic
1010James ButtJapan2026-04-03King, Christopher A Esq NEGOTIATION68Bernardo Dominic
1011Morrow RutaSpain2026-04-05Feiner Bros UNQUALIFIED21Amy Elsner
1012Aruna FigeroaRussia2026-04-13Buckley Miller Wright PROPOSAL50Asiya Javayant
1013Rodrigues CampainArgentina2026-04-15Feiner Bros NEW45Bernardo Dominic
1014Ivar PaprockiCanada2026-03-26Truhlar And Truhlar Attys QUALIFIED49Xuxue Feng
1015Sinclair WaycottBrazil2026-04-06Morlong Associates NEGOTIATION81Onyama Limba
1016Misaki RoysterSpain2026-04-01Printing Dimensions RENEWAL27Onyama Limba
1017Claire TollnerIndia2026-04-01Commercial Press QUALIFIED73Onyama Limba
1018Darci PoquetteCanada2026-04-06Dorl, James J Esq PROPOSAL70Amy Elsner
1019Cody SaylorsSpain2026-03-28Buckley Miller Wright QUALIFIED86Xuxue Feng
1020Rodrigues CampainAustralia2026-04-07Dorl, James J Esq NEGOTIATION48Stephen Shaw
1021Rodrigues CampainBrazil2026-04-09Chanay, Jeffrey A Esq NEGOTIATION21Stephen Shaw
1022Jefferson SchemmerJapan2026-04-11Truhlar And Truhlar Attys RENEWAL15Bernardo Dominic
1023Aditya KuskoItaly2026-04-05Buckley Miller Wright RENEWAL71Amy Elsner
1024Nicolas IturbideRussia2026-04-12Rousseaux, Michael Esq NEGOTIATION9Onyama Limba
1025Izzy GarufiAustralia2026-04-03Feltz Printing Service UNQUALIFIED88Ioni Bowcher
1026Clifford RimUnited Kingdom2026-03-23Chanay, Jeffrey A Esq NEGOTIATION4Bernardo Dominic
1027Emily WhobreySpain2026-04-01Chapman, Ross E Esq NEW91Elwin Sharvill
1028Sinclair WaycottJapan2026-04-12King, Christopher A Esq NEW1Amy Elsner
1029Jones VocelkaGermany2026-03-29Chanay, Jeffrey A Esq NEGOTIATION77Onyama Limba
1030Francesco ShinkoGermany2026-03-27Benton, John B Jr QUALIFIED39Xuxue Feng
1031Antonio CaudySpain2026-04-01Rangoni Of Florence NEW89Amy Elsner
1032Emily WhobreyFrance2026-03-28Feiner Bros UNQUALIFIED21Xuxue Feng
1033Mayumi KolmetzJapan2026-04-07Buckley Miller Wright NEW72Onyama Limba
1034Greenwood BologniaJapan2026-04-05Buckley Miller Wright NEW32Onyama Limba
1035Chavez BriddickJapan2026-04-02Rangoni Of Florence NEGOTIATION68Elwin Sharvill
1036Murillo MaletAustralia2026-03-24Rangoni Of Florence RENEWAL79Elwin Sharvill
1037Smith GlickRussia2026-03-30King, Christopher A Esq PROPOSAL50Elwin Sharvill
1038Stacey MacleadUnited Kingdom2026-04-18Chanay, Jeffrey A Esq QUALIFIED23Bernardo Dominic
1039Izzy GarufiArgentina2026-04-11Feiner Bros UNQUALIFIED61Onyama Limba
1040Silvio SlusarskiItaly2026-04-17Printing Dimensions UNQUALIFIED80Onyama Limba
1041Jefferson SchemmerJapan2026-04-02Chapman, Ross E Esq NEW11Ivan Magalhaes
1042Costa DilliardGermany2026-04-06Benton, John B Jr NEW56Amy Elsner
1043Aditya KuskoGermany2026-04-06Rangoni Of Florence NEGOTIATION38Xuxue Feng
1044Cody SaylorsItaly2026-04-03Commercial Press QUALIFIED66Onyama Limba
1045Smith GlickJapan2026-04-14Truhlar And Truhlar Attys UNQUALIFIED75Asiya Javayant
1046Greenwood BologniaCanada2026-03-24Truhlar And Truhlar Attys PROPOSAL74Asiya Javayant
1047Wickens NestleUnited Kingdom2026-04-13Truhlar And Truhlar Attys UNQUALIFIED59Ioni Bowcher
1048Cody SaylorsIndia2026-04-07Chapman, Ross E Esq QUALIFIED25Ivan Magalhaes
1049Rodrigues CampainAustralia2026-04-10King, Christopher A Esq NEW44Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Mayumi KolmetzIndiaOnyama Limba PROPOSAL
Ricardo GauchoUnited KingdomXuxue Feng UNQUALIFIED
Cody SaylorsAustraliaAmy Elsner PROPOSAL
Francesco ShinkoJapanOnyama Limba NEGOTIATION
Tony FollerFranceXuxue Feng NEW
Francesco ShinkoGermanyXuxue Feng RENEWAL
Ricardo GauchoFranceElwin Sharvill UNQUALIFIED
Juan WieserFranceBernardo Dominic NEGOTIATION
Johnson SergiSpainAmy Elsner NEW
Jones VocelkaArgentinaAmy Elsner UNQUALIFIED
Aditya KuskoItalyStephen Shaw QUALIFIED
Jefferson SchemmerBrazilAnna Fali NEGOTIATION
Salvatore StockhamFranceAsiya Javayant PROPOSAL
Wickens NestleItalyBernardo Dominic QUALIFIED
Wickens NestleFranceAsiya Javayant UNQUALIFIED
Leja CaldareraSpainIoni Bowcher NEGOTIATION
David DarakjyBrazilIoni Bowcher UNQUALIFIED
Juan WieserJapanOnyama Limba UNQUALIFIED
Costa DilliardSpainBernardo Dominic NEGOTIATION
Munro FerenczAustraliaStephen Shaw RENEWAL
Munro FerenczGermanyElwin Sharvill NEW
Deepesh ChuiBrazilElwin Sharvill NEW
Kaitlin OstroskyBrazilAmy Elsner NEW
Jefferson SchemmerUnited KingdomOnyama Limba NEW
Antonio CaudyCanadaOnyama Limba NEW
Faith GillianItalyBernardo Dominic UNQUALIFIED
Smith GlickUnited KingdomBernardo Dominic NEGOTIATION
Johnson SergiItalyStephen Shaw UNQUALIFIED
Costa DilliardFranceAmy Elsner PROPOSAL
Kaitlin OstroskyGermanyAmy Elsner RENEWAL
Cody SaylorsCanadaOnyama Limba PROPOSAL
Arvin AlbaresRussiaIoni Bowcher RENEWAL
Ricardo GauchoUnited KingdomBernardo Dominic PROPOSAL
Darci PoquetteArgentinaIoni Bowcher UNQUALIFIED
Mujtaba NickaGermanyElwin Sharvill QUALIFIED
Wickens NestleIndiaElwin Sharvill PROPOSAL
Aruna FigeroaArgentinaAnna Fali RENEWAL
Alejandro PerinIndiaStephen Shaw UNQUALIFIED
Kadeem FlosiBrazilElwin Sharvill UNQUALIFIED
Leon OldroydAustraliaBernardo Dominic NEW
David DarakjySpainIoni Bowcher NEGOTIATION
Darci PoquetteCanadaAsiya Javayant PROPOSAL
Silvio SlusarskiGermanyStephen Shaw PROPOSAL
Tony FollerArgentinaBernardo Dominic NEGOTIATION
Leja CaldareraIndiaAmy Elsner QUALIFIED
Isabel BowleyBrazilElwin Sharvill UNQUALIFIED
Tony FollerFranceIoni Bowcher UNQUALIFIED
Silvio SlusarskiIndiaBernardo Dominic QUALIFIED
Claire TollnerFranceAnna Fali RENEWAL
Aruna FigeroaUnited KingdomAnna Fali UNQUALIFIED
Frozen Columns
Name
Stacey Maclead
Aruna Figeroa
Kaitlin Ostrosky
Ashley Doe
Misaki Royster
Costa Dilliard
Ricardo Gaucho
Darci Poquette
David Darakjy
Leon Oldroyd
Maria Marrier
Aruna Figeroa
Misaki Royster
Mujtaba Nicka
Deepesh Chui
Julie Stenseth
David Darakjy
Misaki Royster
Leja Caldarera
Antonio Caudy
Smith Glick
Misaki Royster
Greenwood Bolognia
Emily Whobrey
David Darakjy
Jones Vocelka
Leja Caldarera
Leon Oldroyd
Deepesh Chui
Smith Glick
Faith Gillian
Aditya Kusko
Kaitlin Ostrosky
Costa Dilliard
Antonio Caudy
Smith Glick
Maria Marrier
Mujtaba Nicka
Aika Inouye
Isabel Bowley
Francesco Shinko
Jones Vocelka
Ashley Doe
Ivar Paprocki
Silvio Slusarski
Ashley Doe
Chavez Briddick
Tony Foller
Leon Oldroyd
Costa Dilliard
IdCountryDate
1000Canada2026-04-11
1001Japan2026-03-27
1002Russia2026-04-11
1003Japan2026-03-27
1004Japan2026-03-25
1005Spain2026-04-14
1006United Kingdom2026-03-28
1007Spain2026-04-19
1008Russia2026-03-27
1009Germany2026-03-28
1010Italy2026-04-13
1011France2026-04-19
1012France2026-03-22
1013Argentina2026-03-22
1014Brazil2026-04-19
1015France2026-04-18
1016Japan2026-04-18
1017France2026-04-03
1018Spain2026-04-14
1019Canada2026-03-31
1020Germany2026-03-25
1021Italy2026-04-01
1022India2026-03-25
1023Argentina2026-04-03
1024Brazil2026-04-09
1025Italy2026-04-07
1026Australia2026-03-23
1027Russia2026-03-28
1028Australia2026-03-30
1029Germany2026-04-01
1030France2026-04-01
1031Canada2026-04-07
1032Italy2026-04-16
1033Russia2026-03-28
1034United Kingdom2026-04-11
1035India2026-04-11
1036France2026-04-06
1037Canada2026-03-22
1038France2026-03-23
1039Argentina2026-04-12
1040Brazil2026-04-04
1041Russia2026-04-08
1042France2026-04-17
1043Germany2026-04-17
1044Canada2026-04-01
1045France2026-03-29
1046India2026-04-06
1047Brazil2026-03-27
1048Japan2026-04-09
1049Spain2026-04-16

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Canada2026-03-27
Greenwood Bolognia1001Japan2026-04-16
Tony Foller1002France2026-03-24
Francesco Shinko1003Italy2026-04-13
Darci Poquette1004United Kingdom2026-04-14
Mayumi Kolmetz1005Canada2026-04-05
James Butt1006Brazil2026-03-26
Arvin Albares1007United Kingdom2026-04-13
Rodrigues Campain1008Germany2026-04-01
Sinclair Waycott1009United Kingdom2026-04-02
Juan Wieser1010France2026-03-31
Murillo Malet1011France2026-03-26
Cody Saylors1012Italy2026-04-08
Greenwood Bolognia1013Russia2026-04-17
Smith Glick1014Italy2026-03-25
Munro Ferencz1015Argentina2026-04-16
Octavia Malet1016Germany2026-04-14
Aruna Figeroa1017Germany2026-04-07
Maisha Rulapaugh1018Russia2026-03-24
Adams Morasca1019Russia2026-04-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones VocelkaGermanyIvan Magalhaes NEGOTIATION
Mujtaba NickaCanadaOnyama Limba NEGOTIATION
Antonio CaudyFranceXuxue Feng NEW
Juan WieserSpainAmy Elsner PROPOSAL
Salvatore StockhamFranceStephen Shaw UNQUALIFIED
Jennifer AmigonSpainOnyama Limba RENEWAL
Chavez BriddickItalyElwin Sharvill NEGOTIATION
Jennifer AmigonItalyXuxue Feng NEW
Deepesh ChuiJapanStephen Shaw RENEWAL
Kadeem FlosiCanadaStephen Shaw RENEWAL
Ricardo GauchoBrazilXuxue Feng UNQUALIFIED
Johnson SergiFranceAsiya Javayant PROPOSAL
Jones VocelkaRussiaAsiya Javayant RENEWAL
Greenwood BologniaAustraliaAmy Elsner NEW
Rodrigues CampainRussiaIoni Bowcher PROPOSAL
Leon OldroydJapanStephen Shaw RENEWAL
Murillo MaletFranceIoni Bowcher UNQUALIFIED
Sinclair WaycottAustraliaOnyama Limba PROPOSAL
Francesco ShinkoAustraliaIvan Magalhaes UNQUALIFIED
Clifford RimFranceStephen Shaw NEW
Kadeem FlosiBrazilAsiya Javayant PROPOSAL
Aruna FigeroaBrazilOnyama Limba NEGOTIATION
Silvio SlusarskiJapanElwin Sharvill QUALIFIED
Ivar PaprockiFranceXuxue Feng QUALIFIED
Alejandro PerinBrazilOnyama Limba NEGOTIATION
Chavez BriddickBrazilOnyama Limba NEGOTIATION
Costa DilliardBrazilStephen Shaw PROPOSAL
Ivar PaprockiBrazilAmy Elsner PROPOSAL
Costa DilliardArgentinaXuxue Feng NEW
Jennifer AmigonAustraliaOnyama Limba NEGOTIATION
Leja CaldareraIndiaAnna Fali PROPOSAL
Murillo MaletCanadaIvan Magalhaes NEW
Jennifer AmigonFranceAmy Elsner RENEWAL
Adams MorascaBrazilXuxue Feng RENEWAL
Isabel BowleyBrazilAsiya Javayant NEW
Claire TollnerItalyElwin Sharvill PROPOSAL
Johnson SergiSpainIoni Bowcher PROPOSAL
Smith GlickUnited KingdomAsiya Javayant NEW
Chavez BriddickAustraliaElwin Sharvill UNQUALIFIED
David DarakjyItalyStephen Shaw 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>