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
Kadeem FlosiJapanOnyama Limba PROPOSAL
Costa DilliardSpainIoni Bowcher RENEWAL
Ivar PaprockiBrazilXuxue Feng NEGOTIATION
Chavez BriddickFranceAnna Fali NEGOTIATION
Adams MorascaAustraliaIvan Magalhaes NEGOTIATION
Julie StensethRussiaOnyama Limba PROPOSAL
Murillo MaletIndiaXuxue Feng QUALIFIED
Claire TollnerFranceAnna Fali NEGOTIATION
Kadeem FlosiArgentinaBernardo Dominic NEW
Cody SaylorsItalyAnna Fali NEGOTIATION
Maria MarrierGermanyStephen Shaw RENEWAL
Chavez BriddickCanadaIvan Magalhaes NEW
Ashley DoeJapanOnyama Limba QUALIFIED
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Aruna FigeroaFranceAnna Fali RENEWAL
Francesco ShinkoSpainAnna Fali RENEWAL
Cody SaylorsFranceAmy Elsner QUALIFIED
Leja CaldareraArgentinaStephen Shaw QUALIFIED
Aika InouyeBrazilStephen Shaw QUALIFIED
Ivar PaprockiUnited KingdomXuxue Feng RENEWAL
Adams MorascaCanadaOnyama Limba PROPOSAL
Kaitlin OstroskyGermanyBernardo Dominic QUALIFIED
Aditya KuskoUnited KingdomOnyama Limba RENEWAL
Octavia MaletAustraliaAnna Fali RENEWAL
Adams MorascaCanadaStephen Shaw NEGOTIATION
Francesco ShinkoGermanyStephen Shaw QUALIFIED
Aditya KuskoIndiaIoni Bowcher PROPOSAL
Jefferson SchemmerFranceOnyama Limba QUALIFIED
Greenwood BologniaUnited KingdomXuxue Feng UNQUALIFIED
Chavez BriddickIndiaBernardo Dominic NEGOTIATION
Francesco ShinkoSpainBernardo Dominic UNQUALIFIED
Faith GillianItalyXuxue Feng PROPOSAL
Johnson SergiCanadaAsiya Javayant NEGOTIATION
David DarakjyArgentinaXuxue Feng NEGOTIATION
Isabel BowleyAustraliaIoni Bowcher NEW
Maria MarrierGermanyIvan Magalhaes NEGOTIATION
Clifford RimCanadaStephen Shaw RENEWAL
Stacey MacleadGermanyAsiya Javayant RENEWAL
Chavez BriddickUnited KingdomAsiya Javayant QUALIFIED
Darci PoquetteBrazilOnyama Limba NEGOTIATION
Murillo MaletCanadaAnna Fali PROPOSAL
Leja CaldareraIndiaBernardo Dominic UNQUALIFIED
Francesco ShinkoArgentinaXuxue Feng PROPOSAL
Stacey MacleadCanadaAsiya Javayant QUALIFIED
Sinclair WaycottIndiaAnna Fali PROPOSAL
Misaki RoysterBrazilIvan Magalhaes NEGOTIATION
Claire TollnerArgentinaStephen Shaw NEW
Morrow RutaCanadaAmy Elsner PROPOSAL
Salvatore StockhamFranceElwin Sharvill PROPOSAL
Mayumi KolmetzJapanXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraIndiaOnyama Limba PROPOSAL
Silvio SlusarskiAustraliaBernardo Dominic QUALIFIED
Claire TollnerItalyStephen Shaw NEW
Ivar PaprockiCanadaOnyama Limba QUALIFIED
Misaki RoysterIndiaXuxue Feng NEW
Claire TollnerJapanOnyama Limba NEGOTIATION
Munro FerenczItalyIoni Bowcher QUALIFIED
Clifford RimJapanAsiya Javayant PROPOSAL
Johnson SergiCanadaOnyama Limba NEW
Ashley DoeFranceAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerGermany2026-06-05Rousseaux, Michael Esq PROPOSAL99Stephen Shaw
1001Isabel BowleyFrance2026-05-22Benton, John B Jr UNQUALIFIED45Amy Elsner
1002Sinclair WaycottAustralia2026-05-31Commercial Press UNQUALIFIED16Xuxue Feng
1003David DarakjyJapan2026-06-02Commercial Press QUALIFIED3Ioni Bowcher
1004David DarakjyItaly2026-05-14Truhlar And Truhlar Attys UNQUALIFIED0Elwin Sharvill
1005Aika InouyeJapan2026-06-04Buckley Miller Wright NEGOTIATION6Xuxue Feng
1006Francesco ShinkoBrazil2026-05-15Rousseaux, Michael Esq NEGOTIATION79Bernardo Dominic
1007Ricardo GauchoBrazil2026-05-20Dorl, James J Esq RENEWAL34Onyama Limba
1008Misaki RoysterGermany2026-06-04Printing Dimensions UNQUALIFIED95Xuxue Feng
1009Misaki RoysterAustralia2026-05-10Chanay, Jeffrey A Esq PROPOSAL55Xuxue Feng
1010Smith GlickGermany2026-05-22Morlong Associates RENEWAL59Asiya Javayant
1011Isabel BowleyItaly2026-05-12Feiner Bros PROPOSAL93Ioni Bowcher
1012Deepesh ChuiSpain2026-05-29Morlong Associates NEGOTIATION75Ioni Bowcher
1013Chavez BriddickIndia2026-05-12King, Christopher A Esq NEGOTIATION84Bernardo Dominic
1014Maria MarrierCanada2026-05-17Buckley Miller Wright NEW75Stephen Shaw
1015Kadeem FlosiBrazil2026-05-29Chapman, Ross E Esq PROPOSAL36Xuxue Feng
1016Jennifer AmigonUnited Kingdom2026-05-16Rousseaux, Michael Esq RENEWAL17Stephen Shaw
1017Arvin AlbaresArgentina2026-05-11Benton, John B Jr NEGOTIATION25Xuxue Feng
1018Clifford RimCanada2026-05-17Chemel, James L Cpa UNQUALIFIED34Bernardo Dominic
1019Arvin AlbaresIndia2026-05-24Morlong Associates PROPOSAL12Elwin Sharvill
1020Leja CaldareraIndia2026-05-20Truhlar And Truhlar Attys RENEWAL44Asiya Javayant
1021Kadeem FlosiAustralia2026-05-15Benton, John B Jr UNQUALIFIED20Onyama Limba
1022Jefferson SchemmerAustralia2026-06-07Rangoni Of Florence PROPOSAL20Asiya Javayant
1023Juan WieserJapan2026-05-09King, Christopher A Esq NEGOTIATION28Ivan Magalhaes
1024Cody SaylorsIndia2026-05-12Truhlar And Truhlar Attys QUALIFIED15Bernardo Dominic
1025Jennifer AmigonArgentina2026-05-18Chapman, Ross E Esq NEW92Bernardo Dominic
1026Johnson SergiArgentina2026-05-31Chanay, Jeffrey A Esq NEGOTIATION27Anna Fali
1027Julie StensethJapan2026-05-30Rangoni Of Florence RENEWAL26Elwin Sharvill
1028Greenwood BologniaArgentina2026-05-10Feltz Printing Service RENEWAL19Elwin Sharvill
1029Izzy GarufiAustralia2026-05-14Truhlar And Truhlar Attys RENEWAL0Xuxue Feng
1030Salvatore StockhamAustralia2026-06-01Feltz Printing Service RENEWAL97Ioni Bowcher
1031Faith GillianJapan2026-06-01Dorl, James J Esq NEW95Ioni Bowcher
1032Costa DilliardArgentina2026-05-20Benton, John B Jr RENEWAL40Xuxue Feng
1033Cody SaylorsUnited Kingdom2026-05-31Rangoni Of Florence UNQUALIFIED68Stephen Shaw
1034Wickens NestleJapan2026-05-29Dorl, James J Esq RENEWAL81Stephen Shaw
1035Aruna FigeroaArgentina2026-05-20Chemel, James L Cpa NEW19Amy Elsner
1036Jefferson SchemmerCanada2026-05-22King, Christopher A Esq NEGOTIATION91Anna Fali
1037Francesco ShinkoJapan2026-05-29Truhlar And Truhlar Attys NEGOTIATION42Anna Fali
1038Chavez BriddickFrance2026-05-23King, Christopher A Esq NEGOTIATION79Xuxue Feng
1039Deepesh ChuiFrance2026-05-28Morlong Associates NEW66Bernardo Dominic
1040Silvio SlusarskiArgentina2026-06-04Rangoni Of Florence RENEWAL83Bernardo Dominic
1041Jeanfrancois VenereRussia2026-05-18Benton, John B Jr QUALIFIED58Xuxue Feng
1042Faith GillianSpain2026-06-03Buckley Miller Wright PROPOSAL65Stephen Shaw
1043Jefferson SchemmerArgentina2026-06-04Buckley Miller Wright QUALIFIED28Asiya Javayant
1044Greenwood BologniaGermany2026-06-02Rangoni Of Florence UNQUALIFIED38Onyama Limba
1045Jennifer AmigonSpain2026-05-20Rangoni Of Florence QUALIFIED68Stephen Shaw
1046Clifford RimJapan2026-05-24Truhlar And Truhlar Attys NEGOTIATION47Ioni Bowcher
1047Jennifer AmigonCanada2026-06-02Commercial Press UNQUALIFIED3Stephen Shaw
1048Julie StensethIndia2026-05-19Feltz Printing Service NEGOTIATION44Anna Fali
1049Arvin AlbaresIndia2026-05-25Rangoni Of Florence QUALIFIED41Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyAustraliaIoni Bowcher PROPOSAL
James ButtBrazilElwin Sharvill UNQUALIFIED
Ricardo GauchoJapanBernardo Dominic UNQUALIFIED
Ricardo GauchoBrazilAmy Elsner RENEWAL
Adams MorascaItalyIoni Bowcher PROPOSAL
Julie StensethUnited KingdomIoni Bowcher UNQUALIFIED
Morrow RutaFranceElwin Sharvill UNQUALIFIED
Johnson SergiAustraliaStephen Shaw RENEWAL
Francesco ShinkoSpainElwin Sharvill NEGOTIATION
Murillo MaletIndiaXuxue Feng PROPOSAL
Ricardo GauchoAustraliaAnna Fali QUALIFIED
Deepesh ChuiAustraliaElwin Sharvill NEW
Octavia MaletAustraliaBernardo Dominic NEGOTIATION
Leja CaldareraJapanAmy Elsner QUALIFIED
Cody SaylorsBrazilXuxue Feng NEW
Mujtaba NickaItalyIvan Magalhaes NEW
Jeanfrancois VenereAustraliaAmy Elsner RENEWAL
Mayumi KolmetzJapanAmy Elsner NEGOTIATION
Jones VocelkaArgentinaAsiya Javayant QUALIFIED
Wickens NestleGermanyIoni Bowcher NEW
Greenwood BologniaCanadaXuxue Feng NEW
Leon OldroydBrazilAmy Elsner RENEWAL
Clifford RimCanadaAnna Fali RENEWAL
Misaki RoysterGermanyAnna Fali UNQUALIFIED
Leja CaldareraFranceXuxue Feng UNQUALIFIED
Aruna FigeroaBrazilOnyama Limba NEGOTIATION
Ivar PaprockiSpainOnyama Limba NEGOTIATION
James ButtJapanIoni Bowcher QUALIFIED
Antonio CaudyCanadaXuxue Feng RENEWAL
Maria MarrierJapanStephen Shaw RENEWAL
Wickens NestleSpainAsiya Javayant NEGOTIATION
Emily WhobreyRussiaBernardo Dominic RENEWAL
Mayumi KolmetzSpainXuxue Feng NEW
Leon OldroydSpainAnna Fali NEW
Izzy GarufiRussiaAsiya Javayant NEW
Greenwood BologniaSpainAmy Elsner NEW
Clifford RimRussiaAnna Fali NEGOTIATION
Aditya KuskoGermanyAsiya Javayant UNQUALIFIED
Mayumi KolmetzSpainAmy Elsner UNQUALIFIED
Ricardo GauchoRussiaXuxue Feng NEGOTIATION
Stacey MacleadUnited KingdomAsiya Javayant QUALIFIED
Arvin AlbaresBrazilAnna Fali QUALIFIED
Octavia MaletAustraliaAsiya Javayant PROPOSAL
Izzy GarufiAustraliaAnna Fali NEW
Ashley DoeFranceStephen Shaw NEGOTIATION
Alejandro PerinIndiaAnna Fali NEW
Deepesh ChuiCanadaIoni Bowcher NEGOTIATION
Faith GillianArgentinaElwin Sharvill NEW
Octavia MaletFranceBernardo Dominic PROPOSAL
Mayumi KolmetzCanadaOnyama Limba QUALIFIED
Frozen Columns
Name
Costa Dilliard
Mayumi Kolmetz
Deepesh Chui
Salvatore Stockham
Francesco Shinko
Greenwood Bolognia
Izzy Garufi
Stacey Maclead
Stacey Maclead
Stacey Maclead
Mayumi Kolmetz
Greenwood Bolognia
Aditya Kusko
Aruna Figeroa
Ivar Paprocki
Greenwood Bolognia
Sinclair Waycott
David Darakjy
Clifford Rim
Deepesh Chui
Tony Foller
Jeanfrancois Venere
Kadeem Flosi
Leja Caldarera
Octavia Malet
Johnson Sergi
Leja Caldarera
Greenwood Bolognia
Murillo Malet
Faith Gillian
Julie Stenseth
Jones Vocelka
Jennifer Amigon
Stacey Maclead
Adams Morasca
Julie Stenseth
Cody Saylors
Aditya Kusko
Greenwood Bolognia
Jeanfrancois Venere
David Darakjy
Alejandro Perin
Juan Wieser
Darci Poquette
Izzy Garufi
David Darakjy
Munro Ferencz
Jennifer Amigon
Jeanfrancois Venere
Leja Caldarera
IdCountryDate
1000Japan2026-06-03
1001Japan2026-05-29
1002Spain2026-06-03
1003Spain2026-05-14
1004Russia2026-05-22
1005Italy2026-05-18
1006Australia2026-05-16
1007Brazil2026-05-19
1008Russia2026-05-17
1009Argentina2026-05-26
1010India2026-05-18
1011Russia2026-05-31
1012United Kingdom2026-05-12
1013Japan2026-05-12
1014Spain2026-05-29
1015India2026-05-12
1016Spain2026-05-22
1017Germany2026-06-01
1018France2026-06-06
1019Germany2026-06-04
1020Italy2026-05-23
1021Japan2026-06-07
1022France2026-05-13
1023Japan2026-05-21
1024Brazil2026-05-11
1025France2026-05-21
1026Russia2026-05-25
1027Germany2026-05-22
1028Canada2026-05-13
1029Australia2026-05-30
1030Japan2026-05-22
1031Argentina2026-05-24
1032Brazil2026-05-09
1033Argentina2026-05-27
1034Japan2026-05-13
1035Japan2026-05-26
1036Italy2026-06-02
1037France2026-05-31
1038Spain2026-06-05
1039United Kingdom2026-05-22
1040Italy2026-05-25
1041Australia2026-05-19
1042Australia2026-05-28
1043Brazil2026-05-16
1044Spain2026-05-31
1045Japan2026-05-15
1046Australia2026-05-14
1047France2026-06-01
1048Japan2026-05-11
1049United Kingdom2026-05-16

On-Demand Data

NameIdCountryDate
Costa Dilliard1000Japan2026-05-21
Silvio Slusarski1001Spain2026-06-06
Adams Morasca1002France2026-06-06
Leja Caldarera1003Australia2026-05-15
Chavez Briddick1004Canada2026-05-17
Murillo Malet1005Italy2026-06-04
Tony Foller1006Canada2026-05-18
Octavia Malet1007Japan2026-05-26
Jennifer Amigon1008Germany2026-05-16
Greenwood Bolognia1009United Kingdom2026-05-20
Costa Dilliard1010Brazil2026-06-05
Julie Stenseth1011Argentina2026-05-13
Murillo Malet1012United Kingdom2026-05-27
Tony Foller1013Brazil2026-06-03
Clifford Rim1014Brazil2026-05-20
Ashley Doe1015India2026-05-14
Cody Saylors1016Australia2026-06-05
Rodrigues Campain1017Germany2026-05-18
Ricardo Gaucho1018Brazil2026-05-15
Deepesh Chui1019Spain2026-05-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereBrazilXuxue Feng PROPOSAL
Adams MorascaJapanStephen Shaw RENEWAL
Salvatore StockhamSpainIvan Magalhaes PROPOSAL
Jennifer AmigonGermanyIoni Bowcher RENEWAL
Antonio CaudyUnited KingdomAmy Elsner UNQUALIFIED
Antonio CaudyBrazilXuxue Feng UNQUALIFIED
Rodrigues CampainIndiaXuxue Feng RENEWAL
Wickens NestleRussiaAmy Elsner NEW
Cody SaylorsGermanyAsiya Javayant QUALIFIED
Kaitlin OstroskyFranceIoni Bowcher UNQUALIFIED
Kaitlin OstroskyAustraliaBernardo Dominic NEW
Aika InouyeAustraliaAmy Elsner RENEWAL
Darci PoquetteCanadaElwin Sharvill PROPOSAL
Aruna FigeroaBrazilElwin Sharvill PROPOSAL
Misaki RoysterItalyAsiya Javayant RENEWAL
Salvatore StockhamItalyIoni Bowcher UNQUALIFIED
Deepesh ChuiItalyAmy Elsner NEGOTIATION
Francesco ShinkoRussiaAmy Elsner NEW
Munro FerenczCanadaIvan Magalhaes RENEWAL
Aditya KuskoItalyIoni Bowcher RENEWAL
Ashley DoeArgentinaOnyama Limba PROPOSAL
Cody SaylorsIndiaAmy Elsner UNQUALIFIED
Darci PoquetteCanadaAsiya Javayant QUALIFIED
Deepesh ChuiBrazilBernardo Dominic PROPOSAL
Maria MarrierFranceOnyama Limba QUALIFIED
Maisha RulapaughFranceBernardo Dominic UNQUALIFIED
Wickens NestleSpainElwin Sharvill UNQUALIFIED
Greenwood BologniaItalyElwin Sharvill NEW
Costa DilliardUnited KingdomStephen Shaw QUALIFIED
Morrow RutaGermanyOnyama Limba UNQUALIFIED
Julie StensethGermanyAnna Fali QUALIFIED
Antonio CaudyBrazilAnna Fali RENEWAL
Misaki RoysterBrazilAsiya Javayant PROPOSAL
Mujtaba NickaRussiaAnna Fali QUALIFIED
Stacey MacleadSpainStephen Shaw PROPOSAL
Maria MarrierRussiaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereFranceAnna Fali UNQUALIFIED
Aruna FigeroaAustraliaStephen Shaw PROPOSAL
Julie StensethJapanBernardo Dominic NEW
Deepesh ChuiArgentinaAsiya Javayant QUALIFIED

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