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
David DarakjyUnited KingdomAnna Fali PROPOSAL
Maria MarrierUnited KingdomIvan Magalhaes PROPOSAL
Johnson SergiRussiaXuxue Feng NEW
Mayumi KolmetzArgentinaIoni Bowcher RENEWAL
Greenwood BologniaArgentinaAmy Elsner NEW
David DarakjyCanadaElwin Sharvill PROPOSAL
Leon OldroydJapanAnna Fali NEW
Jefferson SchemmerSpainBernardo Dominic UNQUALIFIED
Alejandro PerinRussiaAmy Elsner NEW
Maria MarrierAustraliaAsiya Javayant NEGOTIATION
Smith GlickRussiaOnyama Limba RENEWAL
Wickens NestleCanadaAsiya Javayant QUALIFIED
Cody SaylorsRussiaElwin Sharvill PROPOSAL
Rodrigues CampainUnited KingdomAnna Fali RENEWAL
Wickens NestleJapanElwin Sharvill PROPOSAL
Isabel BowleyGermanyBernardo Dominic NEGOTIATION
Alejandro PerinRussiaElwin Sharvill UNQUALIFIED
Emily WhobreyFranceAsiya Javayant PROPOSAL
Isabel BowleySpainElwin Sharvill QUALIFIED
Juan WieserBrazilAsiya Javayant RENEWAL
Clifford RimJapanAsiya Javayant NEW
Tony FollerUnited KingdomAmy Elsner RENEWAL
Tony FollerItalyStephen Shaw RENEWAL
Leon OldroydFranceBernardo Dominic RENEWAL
Cody SaylorsSpainElwin Sharvill PROPOSAL
David DarakjyJapanBernardo Dominic QUALIFIED
Francesco ShinkoFranceXuxue Feng NEW
Maisha RulapaughArgentinaIvan Magalhaes NEW
Deepesh ChuiItalyIvan Magalhaes UNQUALIFIED
Aruna FigeroaItalyAnna Fali NEGOTIATION
Salvatore StockhamGermanyIoni Bowcher NEW
Cody SaylorsArgentinaBernardo Dominic NEGOTIATION
Greenwood BologniaIndiaOnyama Limba NEW
Ashley DoeBrazilAsiya Javayant QUALIFIED
Aika InouyeGermanyXuxue Feng NEW
Octavia MaletItalyBernardo Dominic NEW
Rodrigues CampainFranceXuxue Feng NEW
Chavez BriddickAustraliaElwin Sharvill RENEWAL
Arvin AlbaresSpainAnna Fali QUALIFIED
Adams MorascaFranceBernardo Dominic PROPOSAL
Morrow RutaItalyAmy Elsner RENEWAL
Smith GlickAustraliaOnyama Limba NEGOTIATION
Claire TollnerItalyAmy Elsner NEGOTIATION
Smith GlickCanadaXuxue Feng NEGOTIATION
Maisha RulapaughFranceElwin Sharvill UNQUALIFIED
Emily WhobreyCanadaAsiya Javayant PROPOSAL
Ashley DoeCanadaOnyama Limba RENEWAL
Morrow RutaJapanElwin Sharvill QUALIFIED
Johnson SergiArgentinaIoni Bowcher PROPOSAL
Leon OldroydFranceIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Faith GillianFranceIvan Magalhaes UNQUALIFIED
Izzy GarufiFranceAnna Fali NEW
Greenwood BologniaCanadaAmy Elsner NEGOTIATION
Aruna FigeroaAustraliaStephen Shaw QUALIFIED
Antonio CaudyGermanyAsiya Javayant NEGOTIATION
Adams MorascaBrazilIvan Magalhaes NEW
Leon OldroydFranceAmy Elsner NEW
Silvio SlusarskiRussiaAnna Fali UNQUALIFIED
Izzy GarufiFranceIoni Bowcher PROPOSAL
Emily WhobreyUnited KingdomXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottFrance2026-05-18Feltz Printing Service RENEWAL7Asiya Javayant
1001Maria MarrierFrance2026-06-01King, Christopher A Esq UNQUALIFIED12Ioni Bowcher
1002Jones VocelkaBrazil2026-05-27Chanay, Jeffrey A Esq NEW61Stephen Shaw
1003Greenwood BologniaArgentina2026-05-31Chemel, James L Cpa NEW11Onyama Limba
1004David DarakjyAustralia2026-05-06Dorl, James J Esq PROPOSAL43Ivan Magalhaes
1005Aruna FigeroaCanada2026-06-01Feltz Printing Service UNQUALIFIED49Elwin Sharvill
1006Jeanfrancois VenereCanada2026-06-03Feiner Bros RENEWAL83Bernardo Dominic
1007Francesco ShinkoArgentina2026-05-07Chapman, Ross E Esq QUALIFIED94Asiya Javayant
1008Costa DilliardSpain2026-05-16Dorl, James J Esq RENEWAL59Onyama Limba
1009Tony FollerCanada2026-06-03Rousseaux, Michael Esq NEW32Bernardo Dominic
1010Maria MarrierUnited Kingdom2026-05-20Rangoni Of Florence NEGOTIATION7Ivan Magalhaes
1011Munro FerenczBrazil2026-05-29Printing Dimensions QUALIFIED59Elwin Sharvill
1012Ashley DoeCanada2026-05-16King, Christopher A Esq NEW19Onyama Limba
1013Salvatore StockhamFrance2026-05-15Chapman, Ross E Esq RENEWAL39Ivan Magalhaes
1014David DarakjyIndia2026-05-14Benton, John B Jr NEW90Stephen Shaw
1015Leon OldroydJapan2026-06-02Morlong Associates NEGOTIATION94Anna Fali
1016Jennifer AmigonJapan2026-06-02Chapman, Ross E Esq RENEWAL73Xuxue Feng
1017Murillo MaletJapan2026-05-27Chapman, Ross E Esq RENEWAL58Bernardo Dominic
1018Greenwood BologniaRussia2026-05-05Truhlar And Truhlar Attys NEW89Ioni Bowcher
1019Izzy GarufiGermany2026-06-03Chemel, James L Cpa NEGOTIATION85Bernardo Dominic
1020Clifford RimCanada2026-05-05Morlong Associates QUALIFIED15Stephen Shaw
1021James ButtJapan2026-05-30Feltz Printing Service QUALIFIED86Anna Fali
1022Murillo MaletBrazil2026-05-08Commercial Press QUALIFIED60Xuxue Feng
1023David DarakjySpain2026-05-08King, Christopher A Esq UNQUALIFIED72Ivan Magalhaes
1024Morrow RutaJapan2026-05-19Truhlar And Truhlar Attys RENEWAL89Ioni Bowcher
1025Leon OldroydSpain2026-05-14Commercial Press RENEWAL30Anna Fali
1026Munro FerenczArgentina2026-05-05Chemel, James L Cpa RENEWAL9Asiya Javayant
1027Jeanfrancois VenereCanada2026-05-26Rangoni Of Florence NEGOTIATION94Onyama Limba
1028Isabel BowleySpain2026-05-27Feltz Printing Service NEW97Stephen Shaw
1029Claire TollnerCanada2026-05-26King, Christopher A Esq QUALIFIED39Elwin Sharvill
1030Deepesh ChuiCanada2026-05-16Buckley Miller Wright NEW86Xuxue Feng
1031Misaki RoysterIndia2026-05-11Chanay, Jeffrey A Esq PROPOSAL24Ivan Magalhaes
1032Aruna FigeroaItaly2026-06-01Feiner Bros UNQUALIFIED9Asiya Javayant
1033James ButtRussia2026-05-25Truhlar And Truhlar Attys NEGOTIATION41Ioni Bowcher
1034Silvio SlusarskiCanada2026-05-14Truhlar And Truhlar Attys UNQUALIFIED99Anna Fali
1035Maria MarrierFrance2026-05-06Feltz Printing Service PROPOSAL16Bernardo Dominic
1036Greenwood BologniaBrazil2026-05-29Chapman, Ross E Esq QUALIFIED87Ioni Bowcher
1037Mujtaba NickaRussia2026-05-18Rousseaux, Michael Esq UNQUALIFIED86Elwin Sharvill
1038Johnson SergiUnited Kingdom2026-05-10Truhlar And Truhlar Attys RENEWAL60Asiya Javayant
1039Wickens NestleUnited Kingdom2026-05-22Feiner Bros QUALIFIED10Anna Fali
1040Leon OldroydIndia2026-05-20Rousseaux, Michael Esq PROPOSAL47Stephen Shaw
1041Leon OldroydGermany2026-06-02Morlong Associates PROPOSAL35Stephen Shaw
1042Aika InouyeCanada2026-05-21Buckley Miller Wright UNQUALIFIED16Xuxue Feng
1043Emily WhobreyBrazil2026-05-14Rousseaux, Michael Esq NEGOTIATION51Amy Elsner
1044Mayumi KolmetzSpain2026-05-09Rangoni Of Florence UNQUALIFIED12Ivan Magalhaes
1045Costa DilliardArgentina2026-05-12Printing Dimensions RENEWAL41Asiya Javayant
1046Kaitlin OstroskyAustralia2026-05-26Dorl, James J Esq QUALIFIED83Ioni Bowcher
1047Leon OldroydJapan2026-05-21Dorl, James J Esq NEGOTIATION17Ivan Magalhaes
1048Kaitlin OstroskyItaly2026-05-11Chanay, Jeffrey A Esq RENEWAL50Ioni Bowcher
1049Emily WhobreyItaly2026-05-23Morlong Associates PROPOSAL56Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainJapanElwin Sharvill NEGOTIATION
Adams MorascaSpainAmy Elsner UNQUALIFIED
Leon OldroydCanadaAnna Fali NEGOTIATION
Izzy GarufiRussiaAmy Elsner UNQUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill NEW
Jones VocelkaRussiaStephen Shaw NEW
Adams MorascaUnited KingdomStephen Shaw UNQUALIFIED
Jennifer AmigonSpainAmy Elsner PROPOSAL
Wickens NestleAustraliaIoni Bowcher UNQUALIFIED
Smith GlickAustraliaIvan Magalhaes UNQUALIFIED
Rodrigues CampainBrazilIoni Bowcher RENEWAL
Darci PoquetteItalyOnyama Limba UNQUALIFIED
Francesco ShinkoSpainStephen Shaw QUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant UNQUALIFIED
Octavia MaletItalyAsiya Javayant NEGOTIATION
Munro FerenczFranceAmy Elsner NEGOTIATION
Sinclair WaycottUnited KingdomElwin Sharvill PROPOSAL
Morrow RutaUnited KingdomAnna Fali NEW
Mayumi KolmetzGermanyIoni Bowcher QUALIFIED
Antonio CaudyAustraliaIvan Magalhaes RENEWAL
Ivar PaprockiArgentinaOnyama Limba NEW
Silvio SlusarskiFranceBernardo Dominic NEW
Tony FollerBrazilIoni Bowcher UNQUALIFIED
Julie StensethSpainAsiya Javayant NEGOTIATION
Arvin AlbaresRussiaIvan Magalhaes NEW
Aika InouyeUnited KingdomAnna Fali RENEWAL
Jefferson SchemmerGermanyXuxue Feng RENEWAL
Silvio SlusarskiSpainBernardo Dominic NEW
Octavia MaletIndiaAsiya Javayant UNQUALIFIED
Cody SaylorsFranceXuxue Feng NEGOTIATION
Izzy GarufiIndiaIvan Magalhaes QUALIFIED
Tony FollerIndiaAsiya Javayant NEW
Julie StensethJapanBernardo Dominic NEW
Antonio CaudyIndiaAnna Fali NEW
Greenwood BologniaJapanAnna Fali PROPOSAL
Johnson SergiItalyStephen Shaw PROPOSAL
Alejandro PerinCanadaIoni Bowcher UNQUALIFIED
Octavia MaletUnited KingdomXuxue Feng PROPOSAL
Cody SaylorsFranceAmy Elsner PROPOSAL
Deepesh ChuiCanadaOnyama Limba RENEWAL
Jennifer AmigonUnited KingdomXuxue Feng PROPOSAL
Jeanfrancois VenereJapanBernardo Dominic NEW
Jefferson SchemmerIndiaIoni Bowcher QUALIFIED
Izzy GarufiCanadaOnyama Limba UNQUALIFIED
Alejandro PerinFranceElwin Sharvill QUALIFIED
Smith GlickCanadaStephen Shaw RENEWAL
Aruna FigeroaRussiaIoni Bowcher PROPOSAL
Jefferson SchemmerGermanyXuxue Feng RENEWAL
Munro FerenczSpainAmy Elsner NEW
Clifford RimAustraliaIoni Bowcher NEGOTIATION
Frozen Columns
Name
Stacey Maclead
Stacey Maclead
Maisha Rulapaugh
Adams Morasca
Kaitlin Ostrosky
Ricardo Gaucho
Wickens Nestle
Darci Poquette
Sinclair Waycott
Munro Ferencz
Mujtaba Nicka
Kadeem Flosi
David Darakjy
Ivar Paprocki
Adams Morasca
Cody Saylors
Rodrigues Campain
Darci Poquette
Kaitlin Ostrosky
Emily Whobrey
Deepesh Chui
Chavez Briddick
Juan Wieser
Rodrigues Campain
Johnson Sergi
Emily Whobrey
Wickens Nestle
Salvatore Stockham
Aditya Kusko
Rodrigues Campain
Sinclair Waycott
Mujtaba Nicka
Jones Vocelka
Aika Inouye
Mayumi Kolmetz
Aruna Figeroa
Jennifer Amigon
Kaitlin Ostrosky
Deepesh Chui
Ricardo Gaucho
Jefferson Schemmer
Kaitlin Ostrosky
Jones Vocelka
Francesco Shinko
Silvio Slusarski
Leon Oldroyd
Darci Poquette
Maisha Rulapaugh
David Darakjy
Aditya Kusko
IdCountryDate
1000Russia2026-05-29
1001Russia2026-05-17
1002Japan2026-05-28
1003India2026-05-10
1004Spain2026-06-01
1005Russia2026-05-08
1006Brazil2026-06-01
1007India2026-05-15
1008Italy2026-05-13
1009Spain2026-05-06
1010Brazil2026-05-08
1011Russia2026-06-01
1012Spain2026-05-07
1013Australia2026-06-02
1014Canada2026-05-09
1015India2026-05-06
1016Australia2026-05-13
1017France2026-05-10
1018Italy2026-05-23
1019United Kingdom2026-05-28
1020Spain2026-05-13
1021France2026-05-22
1022Japan2026-06-01
1023India2026-05-06
1024Canada2026-05-25
1025Argentina2026-05-26
1026Brazil2026-05-13
1027France2026-05-20
1028France2026-05-31
1029France2026-05-09
1030India2026-05-27
1031Russia2026-05-19
1032Japan2026-05-07
1033France2026-05-21
1034India2026-05-11
1035Argentina2026-06-01
1036Japan2026-05-11
1037India2026-05-22
1038Spain2026-05-21
1039Japan2026-05-21
1040Brazil2026-05-22
1041Russia2026-05-22
1042Japan2026-05-24
1043France2026-06-01
1044Argentina2026-05-23
1045France2026-05-16
1046Italy2026-05-19
1047Italy2026-05-10
1048Spain2026-05-29
1049Australia2026-05-24

On-Demand Data

NameIdCountryDate
Mayumi Kolmetz1000Italy2026-05-18
Jones Vocelka1001Brazil2026-06-02
Izzy Garufi1002Brazil2026-06-01
Ivar Paprocki1003Brazil2026-05-22
Deepesh Chui1004France2026-05-11
Aditya Kusko1005Russia2026-05-05
Jones Vocelka1006Germany2026-06-03
Julie Stenseth1007Germany2026-05-13
Antonio Caudy1008United Kingdom2026-05-14
Misaki Royster1009Italy2026-05-25
Silvio Slusarski1010Brazil2026-05-23
Aditya Kusko1011United Kingdom2026-06-03
Misaki Royster1012France2026-05-17
Misaki Royster1013France2026-05-21
Isabel Bowley1014Italy2026-06-02
Isabel Bowley1015Australia2026-05-25
Jefferson Schemmer1016France2026-05-17
Munro Ferencz1017India2026-05-07
Maria Marrier1018Spain2026-05-16
Mujtaba Nicka1019Australia2026-05-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaRussiaElwin Sharvill RENEWAL
Nicolas IturbideArgentinaIvan Magalhaes NEGOTIATION
Chavez BriddickUnited KingdomBernardo Dominic RENEWAL
Clifford RimCanadaXuxue Feng QUALIFIED
Francesco ShinkoBrazilIoni Bowcher NEGOTIATION
Leon OldroydGermanyAnna Fali QUALIFIED
Octavia MaletArgentinaBernardo Dominic NEGOTIATION
Munro FerenczUnited KingdomAmy Elsner NEGOTIATION
Alejandro PerinJapanIoni Bowcher UNQUALIFIED
Kadeem FlosiAustraliaBernardo Dominic RENEWAL
Octavia MaletIndiaOnyama Limba QUALIFIED
Silvio SlusarskiGermanyAnna Fali NEGOTIATION
Salvatore StockhamItalyAsiya Javayant PROPOSAL
Sinclair WaycottJapanBernardo Dominic PROPOSAL
Greenwood BologniaFranceStephen Shaw UNQUALIFIED
Jennifer AmigonAustraliaElwin Sharvill QUALIFIED
Tony FollerAustraliaIoni Bowcher QUALIFIED
Maria MarrierFranceXuxue Feng UNQUALIFIED
Sinclair WaycottItalyAmy Elsner QUALIFIED
Jones VocelkaSpainStephen Shaw UNQUALIFIED
Jennifer AmigonIndiaStephen Shaw NEW
Isabel BowleyUnited KingdomStephen Shaw PROPOSAL
Claire TollnerBrazilXuxue Feng QUALIFIED
Francesco ShinkoFranceAsiya Javayant UNQUALIFIED
Aika InouyeSpainOnyama Limba RENEWAL
Johnson SergiAustraliaIvan Magalhaes QUALIFIED
Tony FollerRussiaAmy Elsner RENEWAL
Octavia MaletItalyElwin Sharvill RENEWAL
Ashley DoeAustraliaElwin Sharvill NEW
Deepesh ChuiIndiaElwin Sharvill PROPOSAL
James ButtIndiaXuxue Feng UNQUALIFIED
Mujtaba NickaFranceAmy Elsner NEW
Clifford RimFranceIvan Magalhaes QUALIFIED
Faith GillianArgentinaXuxue Feng QUALIFIED
Clifford RimCanadaOnyama Limba QUALIFIED
Stacey MacleadFranceStephen Shaw RENEWAL
Munro FerenczSpainElwin Sharvill PROPOSAL
Smith GlickRussiaAsiya Javayant RENEWAL
Izzy GarufiSpainBernardo Dominic RENEWAL
Octavia MaletRussiaAnna Fali 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>