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
Salvatore StockhamJapanOnyama Limba UNQUALIFIED
Smith GlickBrazilElwin Sharvill PROPOSAL
Faith GillianBrazilXuxue Feng QUALIFIED
Silvio SlusarskiCanadaIoni Bowcher PROPOSAL
Tony FollerJapanElwin Sharvill NEW
Deepesh ChuiArgentinaIoni Bowcher NEGOTIATION
Ricardo GauchoFranceAsiya Javayant QUALIFIED
Smith GlickGermanyXuxue Feng QUALIFIED
Antonio CaudyUnited KingdomAnna Fali QUALIFIED
Juan WieserRussiaElwin Sharvill RENEWAL
Alejandro PerinUnited KingdomXuxue Feng QUALIFIED
Izzy GarufiArgentinaBernardo Dominic QUALIFIED
Misaki RoysterCanadaIoni Bowcher QUALIFIED
Kaitlin OstroskySpainStephen Shaw QUALIFIED
Francesco ShinkoFranceElwin Sharvill RENEWAL
Sinclair WaycottJapanAmy Elsner RENEWAL
Izzy GarufiFranceElwin Sharvill QUALIFIED
Silvio SlusarskiBrazilAsiya Javayant QUALIFIED
Clifford RimArgentinaAnna Fali RENEWAL
Cody SaylorsBrazilIoni Bowcher RENEWAL
Clifford RimAustraliaOnyama Limba QUALIFIED
Sinclair WaycottCanadaStephen Shaw PROPOSAL
Johnson SergiArgentinaBernardo Dominic NEW
Ashley DoeFranceElwin Sharvill RENEWAL
Aditya KuskoJapanAnna Fali QUALIFIED
James ButtIndiaBernardo Dominic RENEWAL
Mujtaba NickaUnited KingdomIvan Magalhaes NEGOTIATION
Izzy GarufiAustraliaOnyama Limba NEGOTIATION
Leon OldroydJapanIvan Magalhaes UNQUALIFIED
Johnson SergiJapanStephen Shaw NEGOTIATION
Ivar PaprockiArgentinaXuxue Feng QUALIFIED
Smith GlickArgentinaStephen Shaw PROPOSAL
Silvio SlusarskiItalyAnna Fali RENEWAL
Kadeem FlosiIndiaAnna Fali UNQUALIFIED
David DarakjySpainIoni Bowcher UNQUALIFIED
Tony FollerBrazilBernardo Dominic UNQUALIFIED
Ivar PaprockiJapanXuxue Feng NEW
Jeanfrancois VenereIndiaXuxue Feng NEW
Cody SaylorsFranceIoni Bowcher NEW
Jones VocelkaItalyElwin Sharvill UNQUALIFIED
James ButtAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottItalyAmy Elsner NEW
Ricardo GauchoSpainAnna Fali RENEWAL
Octavia MaletSpainIoni Bowcher NEW
Greenwood BologniaGermanyAsiya Javayant PROPOSAL
Izzy GarufiItalyOnyama Limba PROPOSAL
Jefferson SchemmerBrazilIoni Bowcher PROPOSAL
Jones VocelkaItalyBernardo Dominic PROPOSAL
Clifford RimArgentinaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereUnited KingdomElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Isabel BowleyFranceAmy Elsner UNQUALIFIED
Johnson SergiGermanyElwin Sharvill NEGOTIATION
Arvin AlbaresIndiaIvan Magalhaes QUALIFIED
Salvatore StockhamRussiaIoni Bowcher NEW
Kadeem FlosiItalyIoni Bowcher QUALIFIED
Sinclair WaycottArgentinaOnyama Limba PROPOSAL
Munro FerenczBrazilBernardo Dominic PROPOSAL
Alejandro PerinUnited KingdomStephen Shaw NEW
Ricardo GauchoSpainIvan Magalhaes UNQUALIFIED
Darci PoquetteItalyBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaBrazil2026-06-01Feltz Printing Service UNQUALIFIED99Anna Fali
1001Cody SaylorsGermany2026-06-07Chanay, Jeffrey A Esq NEGOTIATION53Asiya Javayant
1002Isabel BowleyUnited Kingdom2026-06-11Morlong Associates PROPOSAL57Asiya Javayant
1003Aruna FigeroaFrance2026-05-29King, Christopher A Esq QUALIFIED91Bernardo Dominic
1004Octavia MaletJapan2026-05-19Commercial Press QUALIFIED94Anna Fali
1005Johnson SergiFrance2026-05-19Chemel, James L Cpa NEW8Ivan Magalhaes
1006James ButtCanada2026-05-25Rousseaux, Michael Esq NEW15Onyama Limba
1007Clifford RimUnited Kingdom2026-05-19King, Christopher A Esq NEGOTIATION97Anna Fali
1008Clifford RimSpain2026-05-22Feltz Printing Service NEW5Xuxue Feng
1009Murillo MaletFrance2026-06-08Dorl, James J Esq QUALIFIED81Anna Fali
1010Stacey MacleadAustralia2026-06-09Commercial Press NEW20Ivan Magalhaes
1011Emily WhobreyFrance2026-06-02King, Christopher A Esq UNQUALIFIED39Onyama Limba
1012Darci PoquetteCanada2026-05-23Commercial Press QUALIFIED98Onyama Limba
1013Jones VocelkaItaly2026-05-22Printing Dimensions NEGOTIATION83Onyama Limba
1014Clifford RimSpain2026-05-16Morlong Associates RENEWAL73Xuxue Feng
1015Kadeem FlosiCanada2026-06-08Feiner Bros RENEWAL69Bernardo Dominic
1016Misaki RoysterCanada2026-06-07Truhlar And Truhlar Attys PROPOSAL13Ioni Bowcher
1017Arvin AlbaresJapan2026-05-20Chapman, Ross E Esq NEW0Stephen Shaw
1018Francesco ShinkoArgentina2026-05-26Chanay, Jeffrey A Esq RENEWAL34Stephen Shaw
1019Mayumi KolmetzArgentina2026-06-12Rousseaux, Michael Esq NEW93Asiya Javayant
1020Maria MarrierGermany2026-06-08Chemel, James L Cpa RENEWAL0Amy Elsner
1021Leja CaldareraSpain2026-06-04Buckley Miller Wright PROPOSAL45Ivan Magalhaes
1022Morrow RutaUnited Kingdom2026-05-23Benton, John B Jr UNQUALIFIED63Stephen Shaw
1023Mayumi KolmetzRussia2026-06-05Dorl, James J Esq UNQUALIFIED56Ivan Magalhaes
1024Aditya KuskoBrazil2026-06-07Buckley Miller Wright UNQUALIFIED70Xuxue Feng
1025Tony FollerArgentina2026-06-05Feltz Printing Service PROPOSAL87Stephen Shaw
1026Izzy GarufiBrazil2026-06-05Chanay, Jeffrey A Esq RENEWAL67Onyama Limba
1027Kadeem FlosiCanada2026-06-13Buckley Miller Wright RENEWAL64Asiya Javayant
1028Isabel BowleyUnited Kingdom2026-05-16Chapman, Ross E Esq QUALIFIED55Onyama Limba
1029Sinclair WaycottRussia2026-06-05King, Christopher A Esq RENEWAL22Ivan Magalhaes
1030Julie StensethIndia2026-06-09Printing Dimensions NEGOTIATION92Asiya Javayant
1031Aruna FigeroaIndia2026-05-20Dorl, James J Esq PROPOSAL28Ioni Bowcher
1032Nicolas IturbideAustralia2026-05-16Truhlar And Truhlar Attys NEW92Xuxue Feng
1033Salvatore StockhamSpain2026-06-03Buckley Miller Wright NEGOTIATION65Ioni Bowcher
1034Nicolas IturbideBrazil2026-06-06Rangoni Of Florence QUALIFIED7Stephen Shaw
1035Aditya KuskoSpain2026-05-27King, Christopher A Esq NEW72Bernardo Dominic
1036Rodrigues CampainIndia2026-05-25Chemel, James L Cpa NEW70Xuxue Feng
1037Smith GlickArgentina2026-05-30Truhlar And Truhlar Attys NEW6Stephen Shaw
1038Maisha RulapaughSpain2026-06-03Truhlar And Truhlar Attys NEGOTIATION61Amy Elsner
1039Chavez BriddickBrazil2026-05-31Feltz Printing Service PROPOSAL38Stephen Shaw
1040David DarakjyCanada2026-05-27Feltz Printing Service NEW39Asiya Javayant
1041Mayumi KolmetzCanada2026-06-10King, Christopher A Esq UNQUALIFIED51Amy Elsner
1042James ButtFrance2026-05-25King, Christopher A Esq NEW58Ivan Magalhaes
1043Leja CaldareraSpain2026-06-01Morlong Associates NEW75Amy Elsner
1044Adams MorascaArgentina2026-05-18Feiner Bros RENEWAL95Bernardo Dominic
1045Greenwood BologniaGermany2026-06-02Commercial Press RENEWAL18Ivan Magalhaes
1046Nicolas IturbideJapan2026-05-30Buckley Miller Wright RENEWAL3Stephen Shaw
1047Aditya KuskoGermany2026-05-18Printing Dimensions NEGOTIATION96Bernardo Dominic
1048David DarakjyFrance2026-05-31Buckley Miller Wright QUALIFIED43Anna Fali
1049Stacey MacleadItaly2026-06-03Feltz Printing Service NEW24Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideArgentinaBernardo Dominic RENEWAL
Deepesh ChuiSpainStephen Shaw PROPOSAL
Chavez BriddickUnited KingdomBernardo Dominic NEW
Costa DilliardJapanBernardo Dominic PROPOSAL
Darci PoquetteSpainAmy Elsner UNQUALIFIED
Wickens NestleJapanIoni Bowcher UNQUALIFIED
Jeanfrancois VenereFranceIoni Bowcher QUALIFIED
Nicolas IturbideUnited KingdomOnyama Limba UNQUALIFIED
Mayumi KolmetzSpainAsiya Javayant RENEWAL
Jefferson SchemmerBrazilStephen Shaw RENEWAL
Leja CaldareraItalyAsiya Javayant NEGOTIATION
Smith GlickCanadaAsiya Javayant QUALIFIED
Octavia MaletGermanyStephen Shaw PROPOSAL
Greenwood BologniaSpainIvan Magalhaes QUALIFIED
Ivar PaprockiJapanAmy Elsner NEW
Aditya KuskoIndiaBernardo Dominic RENEWAL
Stacey MacleadIndiaXuxue Feng UNQUALIFIED
Sinclair WaycottGermanyStephen Shaw RENEWAL
Ricardo GauchoIndiaIoni Bowcher UNQUALIFIED
Murillo MaletFranceAnna Fali UNQUALIFIED
Johnson SergiItalyBernardo Dominic RENEWAL
Stacey MacleadItalyAnna Fali NEGOTIATION
Greenwood BologniaSpainIoni Bowcher QUALIFIED
Salvatore StockhamFranceIvan Magalhaes RENEWAL
Cody SaylorsSpainStephen Shaw NEGOTIATION
Jennifer AmigonBrazilXuxue Feng NEGOTIATION
Izzy GarufiItalyElwin Sharvill QUALIFIED
David DarakjyJapanElwin Sharvill PROPOSAL
Izzy GarufiUnited KingdomAnna Fali QUALIFIED
Emily WhobreyRussiaIvan Magalhaes PROPOSAL
Misaki RoysterItalyIvan Magalhaes NEW
Murillo MaletIndiaOnyama Limba RENEWAL
Nicolas IturbideUnited KingdomAsiya Javayant NEW
Jennifer AmigonItalyXuxue Feng NEGOTIATION
Morrow RutaRussiaIoni Bowcher RENEWAL
Juan WieserFranceAnna Fali UNQUALIFIED
Kaitlin OstroskyAustraliaXuxue Feng RENEWAL
Aika InouyeGermanyAnna Fali QUALIFIED
Jennifer AmigonAustraliaBernardo Dominic NEGOTIATION
Tony FollerRussiaElwin Sharvill NEGOTIATION
David DarakjyJapanIvan Magalhaes UNQUALIFIED
Francesco ShinkoSpainBernardo Dominic NEW
Claire TollnerGermanyStephen Shaw QUALIFIED
Mujtaba NickaItalyElwin Sharvill NEGOTIATION
Darci PoquetteAustraliaAmy Elsner NEGOTIATION
Isabel BowleyIndiaAnna Fali UNQUALIFIED
Emily WhobreyAustraliaElwin Sharvill NEW
Leon OldroydBrazilXuxue Feng UNQUALIFIED
Maisha RulapaughGermanyStephen Shaw PROPOSAL
James ButtFranceIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Rodrigues Campain
Salvatore Stockham
Emily Whobrey
James Butt
Adams Morasca
Octavia Malet
Jones Vocelka
Kaitlin Ostrosky
Adams Morasca
Jefferson Schemmer
Chavez Briddick
Arvin Albares
Silvio Slusarski
Ashley Doe
Juan Wieser
Juan Wieser
Maria Marrier
Kaitlin Ostrosky
Aditya Kusko
Isabel Bowley
Chavez Briddick
Munro Ferencz
Kadeem Flosi
Aditya Kusko
Jones Vocelka
Smith Glick
Izzy Garufi
Antonio Caudy
Munro Ferencz
Francesco Shinko
Smith Glick
Juan Wieser
Jennifer Amigon
Munro Ferencz
Rodrigues Campain
Stacey Maclead
Claire Tollner
Ivar Paprocki
Leon Oldroyd
Jones Vocelka
Salvatore Stockham
Julie Stenseth
Johnson Sergi
Octavia Malet
Darci Poquette
Jones Vocelka
Kadeem Flosi
Maisha Rulapaugh
Munro Ferencz
Stacey Maclead
IdCountryDate
1000Spain2026-06-06
1001Australia2026-05-28
1002France2026-06-12
1003Germany2026-06-05
1004Canada2026-06-13
1005Canada2026-05-24
1006Italy2026-05-29
1007India2026-05-17
1008Brazil2026-05-26
1009Argentina2026-06-09
1010Brazil2026-06-12
1011Italy2026-06-10
1012Australia2026-05-17
1013Australia2026-06-07
1014United Kingdom2026-05-19
1015Spain2026-06-04
1016Australia2026-06-12
1017Canada2026-05-31
1018Argentina2026-06-09
1019Brazil2026-05-21
1020Japan2026-06-02
1021France2026-05-28
1022Germany2026-06-07
1023Japan2026-06-12
1024India2026-06-08
1025Russia2026-05-22
1026India2026-06-14
1027France2026-06-02
1028Spain2026-06-09
1029Spain2026-05-26
1030Brazil2026-06-01
1031Russia2026-06-12
1032Italy2026-06-06
1033Spain2026-05-24
1034Japan2026-05-31
1035India2026-05-23
1036Japan2026-05-18
1037Canada2026-06-01
1038United Kingdom2026-05-26
1039Argentina2026-05-17
1040Brazil2026-06-14
1041Argentina2026-05-24
1042Japan2026-05-29
1043Australia2026-05-28
1044Argentina2026-06-01
1045United Kingdom2026-06-07
1046India2026-05-28
1047Australia2026-06-06
1048Russia2026-06-13
1049Italy2026-05-28

On-Demand Data

NameIdCountryDate
Octavia Malet1000Russia2026-06-07
Smith Glick1001Russia2026-06-11
Leon Oldroyd1002United Kingdom2026-06-14
Deepesh Chui1003India2026-05-20
James Butt1004Japan2026-05-29
Darci Poquette1005United Kingdom2026-05-20
Smith Glick1006Italy2026-05-29
Ivar Paprocki1007France2026-05-28
Francesco Shinko1008Spain2026-05-18
Sinclair Waycott1009Brazil2026-06-08
Rodrigues Campain1010Brazil2026-05-31
Tony Foller1011Australia2026-05-24
Izzy Garufi1012Italy2026-06-07
Mujtaba Nicka1013Argentina2026-05-30
Izzy Garufi1014France2026-06-09
Octavia Malet1015France2026-06-02
Aika Inouye1016United Kingdom2026-06-09
Jefferson Schemmer1017Australia2026-05-17
Kadeem Flosi1018Germany2026-06-13
Deepesh Chui1019Brazil2026-06-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mayumi KolmetzGermanyStephen Shaw NEGOTIATION
Alejandro PerinIndiaOnyama Limba RENEWAL
Antonio CaudyIndiaAmy Elsner PROPOSAL
Darci PoquetteJapanStephen Shaw PROPOSAL
Mujtaba NickaSpainXuxue Feng NEGOTIATION
Deepesh ChuiJapanElwin Sharvill PROPOSAL
Aruna FigeroaSpainOnyama Limba RENEWAL
Greenwood BologniaItalyAmy Elsner NEW
Izzy GarufiItalyIvan Magalhaes RENEWAL
Octavia MaletIndiaOnyama Limba NEW
Wickens NestleCanadaIvan Magalhaes QUALIFIED
Jeanfrancois VenereSpainAmy Elsner PROPOSAL
Salvatore StockhamAustraliaIvan Magalhaes RENEWAL
Aika InouyeIndiaAmy Elsner PROPOSAL
Aika InouyeAustraliaAnna Fali QUALIFIED
Sinclair WaycottBrazilStephen Shaw UNQUALIFIED
Ricardo GauchoIndiaStephen Shaw UNQUALIFIED
Ashley DoeIndiaIoni Bowcher NEGOTIATION
Octavia MaletJapanAsiya Javayant NEGOTIATION
Antonio CaudyJapanIoni Bowcher UNQUALIFIED
Ricardo GauchoAustraliaStephen Shaw NEGOTIATION
Costa DilliardFranceAmy Elsner NEGOTIATION
Smith GlickBrazilIvan Magalhaes NEW
Mujtaba NickaCanadaXuxue Feng QUALIFIED
Jefferson SchemmerAustraliaAsiya Javayant RENEWAL
Jefferson SchemmerJapanIoni Bowcher NEGOTIATION
Jones VocelkaArgentinaAsiya Javayant PROPOSAL
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Adams MorascaCanadaElwin Sharvill PROPOSAL
Aditya KuskoRussiaStephen Shaw RENEWAL
Kadeem FlosiUnited KingdomOnyama Limba PROPOSAL
James ButtAustraliaAmy Elsner UNQUALIFIED
Wickens NestleRussiaAmy Elsner QUALIFIED
Ivar PaprockiFranceElwin Sharvill NEW
Octavia MaletBrazilIvan Magalhaes UNQUALIFIED
Francesco ShinkoFranceStephen Shaw PROPOSAL
Sinclair WaycottRussiaAsiya Javayant UNQUALIFIED
Stacey MacleadAustraliaIvan Magalhaes QUALIFIED
Adams MorascaAustraliaIvan Magalhaes NEW
Wickens NestleUnited KingdomIvan Magalhaes NEGOTIATION

<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>