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
Julie StensethIndiaXuxue Feng NEGOTIATION
Smith GlickSpainStephen Shaw PROPOSAL
Jefferson SchemmerBrazilAmy Elsner QUALIFIED
Maria MarrierAustraliaAnna Fali QUALIFIED
Johnson SergiAustraliaXuxue Feng RENEWAL
Darci PoquetteBrazilAsiya Javayant NEGOTIATION
Arvin AlbaresJapanAsiya Javayant QUALIFIED
Costa DilliardUnited KingdomElwin Sharvill UNQUALIFIED
Isabel BowleyCanadaXuxue Feng UNQUALIFIED
Izzy GarufiCanadaOnyama Limba PROPOSAL
Rodrigues CampainItalyAnna Fali RENEWAL
Smith GlickAustraliaStephen Shaw RENEWAL
Ricardo GauchoFranceStephen Shaw NEGOTIATION
Aruna FigeroaItalyIvan Magalhaes QUALIFIED
Clifford RimAustraliaAnna Fali NEGOTIATION
Chavez BriddickItalyAsiya Javayant NEW
Francesco ShinkoJapanAmy Elsner QUALIFIED
Isabel BowleyBrazilStephen Shaw NEW
Antonio CaudySpainBernardo Dominic RENEWAL
Wickens NestleSpainStephen Shaw QUALIFIED
Antonio CaudyIndiaAsiya Javayant PROPOSAL
Aditya KuskoCanadaAmy Elsner RENEWAL
Aruna FigeroaGermanyAmy Elsner NEGOTIATION
Cody SaylorsCanadaBernardo Dominic NEGOTIATION
Aditya KuskoSpainAmy Elsner NEGOTIATION
Jones VocelkaUnited KingdomAmy Elsner UNQUALIFIED
Murillo MaletItalyElwin Sharvill PROPOSAL
Silvio SlusarskiGermanyIvan Magalhaes NEGOTIATION
Aika InouyeIndiaBernardo Dominic NEGOTIATION
David DarakjySpainOnyama Limba NEGOTIATION
Sinclair WaycottJapanBernardo Dominic NEGOTIATION
Cody SaylorsCanadaBernardo Dominic NEGOTIATION
Ivar PaprockiCanadaIvan Magalhaes NEGOTIATION
Mayumi KolmetzUnited KingdomOnyama Limba PROPOSAL
Nicolas IturbideBrazilIoni Bowcher PROPOSAL
Maria MarrierGermanyIvan Magalhaes NEW
Izzy GarufiAustraliaXuxue Feng UNQUALIFIED
Morrow RutaGermanyAmy Elsner NEW
Claire TollnerIndiaAnna Fali NEW
Ashley DoeBrazilIoni Bowcher NEW
Alejandro PerinIndiaAmy Elsner NEGOTIATION
Maisha RulapaughSpainXuxue Feng QUALIFIED
Antonio CaudyIndiaOnyama Limba UNQUALIFIED
Cody SaylorsArgentinaOnyama Limba NEW
Isabel BowleyJapanXuxue Feng NEGOTIATION
Jeanfrancois VenereItalyAmy Elsner RENEWAL
Greenwood BologniaSpainIoni Bowcher QUALIFIED
Sinclair WaycottArgentinaStephen Shaw UNQUALIFIED
Maisha RulapaughFranceAmy Elsner NEW
Kaitlin OstroskyIndiaElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereJapanAsiya Javayant PROPOSAL
Maria MarrierFranceXuxue Feng UNQUALIFIED
Wickens NestleArgentinaAmy Elsner RENEWAL
Aruna FigeroaIndiaXuxue Feng QUALIFIED
Murillo MaletArgentinaAsiya Javayant NEGOTIATION
Kaitlin OstroskyCanadaIoni Bowcher PROPOSAL
Ivar PaprockiCanadaStephen Shaw RENEWAL
Rodrigues CampainUnited KingdomBernardo Dominic NEW
Octavia MaletUnited KingdomOnyama Limba NEGOTIATION
Wickens NestleRussiaAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiJapan2026-05-10King, Christopher A Esq NEGOTIATION52Amy Elsner
1001Leon OldroydAustralia2026-05-21Chemel, James L Cpa RENEWAL58Bernardo Dominic
1002Johnson SergiFrance2026-05-23Printing Dimensions UNQUALIFIED67Amy Elsner
1003Mayumi KolmetzCanada2026-05-20Rangoni Of Florence UNQUALIFIED23Xuxue Feng
1004Jeanfrancois VenereUnited Kingdom2026-06-02King, Christopher A Esq QUALIFIED94Xuxue Feng
1005Alejandro PerinArgentina2026-05-17Chanay, Jeffrey A Esq PROPOSAL3Xuxue Feng
1006Leon OldroydItaly2026-05-20Truhlar And Truhlar Attys NEW5Stephen Shaw
1007Chavez BriddickFrance2026-06-05Feiner Bros QUALIFIED84Onyama Limba
1008Misaki RoysterBrazil2026-05-12Chemel, James L Cpa PROPOSAL62Anna Fali
1009Mayumi KolmetzSpain2026-06-03Printing Dimensions NEW74Onyama Limba
1010Jones VocelkaItaly2026-05-22Buckley Miller Wright QUALIFIED58Asiya Javayant
1011Nicolas IturbideUnited Kingdom2026-05-13Benton, John B Jr UNQUALIFIED22Amy Elsner
1012Munro FerenczUnited Kingdom2026-05-23Feiner Bros QUALIFIED30Xuxue Feng
1013Munro FerenczArgentina2026-05-18Rousseaux, Michael Esq NEW99Amy Elsner
1014Clifford RimBrazil2026-06-06Printing Dimensions UNQUALIFIED51Asiya Javayant
1015Ricardo GauchoArgentina2026-05-19Chapman, Ross E Esq NEGOTIATION18Amy Elsner
1016Ashley DoeCanada2026-05-24Benton, John B Jr UNQUALIFIED13Bernardo Dominic
1017Ivar PaprockiGermany2026-05-19Benton, John B Jr QUALIFIED57Amy Elsner
1018Silvio SlusarskiSpain2026-05-24King, Christopher A Esq NEW61Bernardo Dominic
1019Isabel BowleyFrance2026-05-13Commercial Press NEW96Ivan Magalhaes
1020Jennifer AmigonUnited Kingdom2026-05-14Buckley Miller Wright PROPOSAL23Xuxue Feng
1021Izzy GarufiSpain2026-05-25Chapman, Ross E Esq NEGOTIATION95Xuxue Feng
1022Darci PoquetteBrazil2026-05-30Commercial Press UNQUALIFIED24Bernardo Dominic
1023Salvatore StockhamFrance2026-05-29Benton, John B Jr NEW84Onyama Limba
1024Silvio SlusarskiArgentina2026-06-04Chemel, James L Cpa NEW29Ioni Bowcher
1025David DarakjyFrance2026-05-21Chanay, Jeffrey A Esq PROPOSAL9Asiya Javayant
1026Arvin AlbaresGermany2026-05-10King, Christopher A Esq NEGOTIATION66Anna Fali
1027Alejandro PerinGermany2026-05-31Chemel, James L Cpa QUALIFIED85Bernardo Dominic
1028Leon OldroydItaly2026-05-11Buckley Miller Wright UNQUALIFIED8Onyama Limba
1029Isabel BowleyCanada2026-05-11Chapman, Ross E Esq PROPOSAL60Onyama Limba
1030Mujtaba NickaRussia2026-05-27Rousseaux, Michael Esq UNQUALIFIED85Anna Fali
1031Sinclair WaycottArgentina2026-05-14Benton, John B Jr NEW7Anna Fali
1032Nicolas IturbideFrance2026-06-06Feiner Bros QUALIFIED81Ioni Bowcher
1033Greenwood BologniaFrance2026-05-09Printing Dimensions RENEWAL27Stephen Shaw
1034Maisha RulapaughGermany2026-05-11Buckley Miller Wright PROPOSAL85Anna Fali
1035Costa DilliardAustralia2026-05-10Chapman, Ross E Esq QUALIFIED66Bernardo Dominic
1036Claire TollnerUnited Kingdom2026-06-03Chemel, James L Cpa PROPOSAL18Amy Elsner
1037Jennifer AmigonGermany2026-05-12Morlong Associates RENEWAL53Bernardo Dominic
1038Maisha RulapaughArgentina2026-05-21Feiner Bros NEGOTIATION45Ivan Magalhaes
1039Ricardo GauchoBrazil2026-05-08Rangoni Of Florence PROPOSAL70Elwin Sharvill
1040Ivar PaprockiIndia2026-05-29Feltz Printing Service PROPOSAL71Bernardo Dominic
1041Adams MorascaUnited Kingdom2026-05-10Feltz Printing Service NEGOTIATION6Xuxue Feng
1042Johnson SergiItaly2026-05-11Chemel, James L Cpa NEW23Ivan Magalhaes
1043David DarakjyJapan2026-06-01Rousseaux, Michael Esq QUALIFIED74Asiya Javayant
1044Kaitlin OstroskyGermany2026-06-06Chemel, James L Cpa UNQUALIFIED26Stephen Shaw
1045David DarakjyItaly2026-05-23Rousseaux, Michael Esq RENEWAL88Amy Elsner
1046Deepesh ChuiJapan2026-05-15Chapman, Ross E Esq PROPOSAL41Stephen Shaw
1047Arvin AlbaresGermany2026-05-16Dorl, James J Esq NEW6Asiya Javayant
1048Ricardo GauchoFrance2026-06-03Commercial Press RENEWAL80Stephen Shaw
1049Arvin AlbaresJapan2026-05-20Chapman, Ross E Esq NEGOTIATION35Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyRussiaStephen Shaw PROPOSAL
Morrow RutaBrazilOnyama Limba UNQUALIFIED
Julie StensethAustraliaElwin Sharvill NEGOTIATION
Arvin AlbaresUnited KingdomAmy Elsner NEW
Clifford RimCanadaIvan Magalhaes QUALIFIED
Ricardo GauchoArgentinaOnyama Limba PROPOSAL
Kadeem FlosiSpainBernardo Dominic NEW
Arvin AlbaresAustraliaIvan Magalhaes NEGOTIATION
Greenwood BologniaItalyAmy Elsner QUALIFIED
Munro FerenczUnited KingdomIoni Bowcher RENEWAL
Leon OldroydUnited KingdomIvan Magalhaes NEGOTIATION
Costa DilliardCanadaElwin Sharvill PROPOSAL
Jeanfrancois VenereUnited KingdomAnna Fali UNQUALIFIED
Juan WieserGermanyElwin Sharvill PROPOSAL
Jefferson SchemmerCanadaXuxue Feng RENEWAL
Mujtaba NickaGermanyAsiya Javayant UNQUALIFIED
Smith GlickJapanOnyama Limba RENEWAL
Julie StensethIndiaOnyama Limba NEW
Munro FerenczIndiaIvan Magalhaes QUALIFIED
Jones VocelkaSpainBernardo Dominic QUALIFIED
Rodrigues CampainAustraliaXuxue Feng PROPOSAL
Mayumi KolmetzSpainElwin Sharvill NEW
Leja CaldareraGermanyAsiya Javayant RENEWAL
Juan WieserRussiaOnyama Limba NEW
Murillo MaletItalyBernardo Dominic QUALIFIED
Maria MarrierSpainXuxue Feng RENEWAL
Leon OldroydCanadaAnna Fali PROPOSAL
Maria MarrierArgentinaElwin Sharvill NEW
Rodrigues CampainRussiaStephen Shaw PROPOSAL
Julie StensethItalyElwin Sharvill NEGOTIATION
Adams MorascaFranceIvan Magalhaes PROPOSAL
Jennifer AmigonCanadaAnna Fali PROPOSAL
Jefferson SchemmerJapanIvan Magalhaes UNQUALIFIED
Isabel BowleyBrazilXuxue Feng RENEWAL
Ricardo GauchoItalyIoni Bowcher NEGOTIATION
Mayumi KolmetzArgentinaAnna Fali NEW
Francesco ShinkoCanadaXuxue Feng NEGOTIATION
Ashley DoeAustraliaXuxue Feng NEGOTIATION
Munro FerenczIndiaElwin Sharvill NEW
Emily WhobreySpainAsiya Javayant NEW
Costa DilliardArgentinaOnyama Limba NEGOTIATION
Antonio CaudyItalyBernardo Dominic RENEWAL
Aruna FigeroaJapanAnna Fali RENEWAL
Wickens NestleCanadaIoni Bowcher QUALIFIED
Aruna FigeroaUnited KingdomIoni Bowcher NEW
Aditya KuskoBrazilAmy Elsner PROPOSAL
Isabel BowleyFranceStephen Shaw NEGOTIATION
Jeanfrancois VenereAustraliaAsiya Javayant NEW
Isabel BowleyRussiaElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaElwin Sharvill RENEWAL
Frozen Columns
Name
Stacey Maclead
Izzy Garufi
Smith Glick
Munro Ferencz
Arvin Albares
Aruna Figeroa
Munro Ferencz
Rodrigues Campain
Antonio Caudy
Aditya Kusko
Jennifer Amigon
Clifford Rim
Alejandro Perin
Ivar Paprocki
Adams Morasca
Ashley Doe
Alejandro Perin
Mujtaba Nicka
Alejandro Perin
Emily Whobrey
Ricardo Gaucho
Maria Marrier
Misaki Royster
Silvio Slusarski
Maria Marrier
Murillo Malet
Leja Caldarera
Nicolas Iturbide
Clifford Rim
Aika Inouye
Sinclair Waycott
Chavez Briddick
Francesco Shinko
Costa Dilliard
Maisha Rulapaugh
Juan Wieser
Chavez Briddick
Jennifer Amigon
Faith Gillian
Antonio Caudy
James Butt
Aika Inouye
Mayumi Kolmetz
Stacey Maclead
Arvin Albares
Cody Saylors
Johnson Sergi
Smith Glick
Isabel Bowley
Stacey Maclead
IdCountryDate
1000Brazil2026-06-02
1001Spain2026-05-12
1002Germany2026-05-27
1003India2026-05-27
1004Australia2026-06-03
1005Russia2026-06-06
1006France2026-05-12
1007Brazil2026-06-02
1008India2026-05-25
1009Germany2026-05-09
1010Australia2026-06-05
1011Australia2026-05-24
1012Brazil2026-05-20
1013Australia2026-05-20
1014Russia2026-05-18
1015Australia2026-05-12
1016Australia2026-05-19
1017India2026-05-25
1018Brazil2026-05-18
1019Argentina2026-05-17
1020Spain2026-05-28
1021Italy2026-05-11
1022France2026-05-29
1023Canada2026-06-06
1024Germany2026-05-08
1025France2026-05-28
1026Canada2026-05-18
1027United Kingdom2026-05-19
1028Argentina2026-05-17
1029Brazil2026-05-19
1030Russia2026-05-12
1031United Kingdom2026-05-20
1032Argentina2026-05-11
1033Spain2026-06-06
1034France2026-05-08
1035United Kingdom2026-05-19
1036Germany2026-05-20
1037Australia2026-05-26
1038Australia2026-05-17
1039Italy2026-05-08
1040Argentina2026-05-31
1041Russia2026-05-12
1042Russia2026-05-26
1043Brazil2026-05-08
1044Italy2026-05-08
1045Germany2026-05-09
1046Argentina2026-05-09
1047Germany2026-05-31
1048France2026-05-21
1049Italy2026-05-24

On-Demand Data

NameIdCountryDate
Aruna Figeroa1000Australia2026-05-10
Kaitlin Ostrosky1001Australia2026-05-28
Julie Stenseth1002United Kingdom2026-05-15
Leon Oldroyd1003Canada2026-05-28
Ashley Doe1004Argentina2026-05-27
Darci Poquette1005Australia2026-05-17
Darci Poquette1006Argentina2026-05-11
Julie Stenseth1007United Kingdom2026-06-01
Rodrigues Campain1008United Kingdom2026-05-30
Aika Inouye1009Brazil2026-05-29
Salvatore Stockham1010Brazil2026-05-22
Leja Caldarera1011Brazil2026-05-27
Leja Caldarera1012Russia2026-05-26
Adams Morasca1013Canada2026-05-15
Ashley Doe1014Brazil2026-05-27
Johnson Sergi1015Italy2026-06-03
Ashley Doe1016France2026-05-24
Johnson Sergi1017Germany2026-05-31
Aruna Figeroa1018Russia2026-05-12
Leon Oldroyd1019Spain2026-05-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletItalyIoni Bowcher UNQUALIFIED
Tony FollerGermanyIoni Bowcher NEW
Leon OldroydJapanStephen Shaw UNQUALIFIED
Kaitlin OstroskyJapanOnyama Limba QUALIFIED
Aruna FigeroaIndiaOnyama Limba RENEWAL
Adams MorascaUnited KingdomAmy Elsner NEW
Leja CaldareraArgentinaAsiya Javayant PROPOSAL
Nicolas IturbideItalyAnna Fali NEGOTIATION
Misaki RoysterCanadaBernardo Dominic PROPOSAL
Isabel BowleyJapanIoni Bowcher UNQUALIFIED
Ricardo GauchoIndiaIoni Bowcher UNQUALIFIED
Juan WieserArgentinaIvan Magalhaes RENEWAL
Izzy GarufiGermanyElwin Sharvill RENEWAL
Jefferson SchemmerUnited KingdomAmy Elsner QUALIFIED
Chavez BriddickArgentinaXuxue Feng UNQUALIFIED
Deepesh ChuiUnited KingdomOnyama Limba NEW
Aika InouyeArgentinaElwin Sharvill RENEWAL
Kadeem FlosiCanadaElwin Sharvill NEW
Johnson SergiIndiaElwin Sharvill RENEWAL
Silvio SlusarskiRussiaAsiya Javayant NEGOTIATION
Costa DilliardSpainElwin Sharvill NEW
Francesco ShinkoItalyAnna Fali RENEWAL
Francesco ShinkoIndiaIvan Magalhaes PROPOSAL
Ashley DoeArgentinaBernardo Dominic UNQUALIFIED
Ashley DoeJapanAmy Elsner QUALIFIED
Morrow RutaIndiaAmy Elsner NEW
Clifford RimUnited KingdomStephen Shaw NEW
Arvin AlbaresIndiaIvan Magalhaes QUALIFIED
Cody SaylorsSpainBernardo Dominic NEGOTIATION
Faith GillianRussiaOnyama Limba QUALIFIED
Jefferson SchemmerAustraliaBernardo Dominic RENEWAL
Morrow RutaIndiaBernardo Dominic QUALIFIED
Clifford RimArgentinaElwin Sharvill NEGOTIATION
Costa DilliardBrazilBernardo Dominic QUALIFIED
Johnson SergiJapanXuxue Feng RENEWAL
David DarakjyArgentinaStephen Shaw NEGOTIATION
Deepesh ChuiGermanyElwin Sharvill RENEWAL
Izzy GarufiFranceElwin Sharvill QUALIFIED
Aika InouyeAustraliaElwin Sharvill NEW
Ashley DoeRussiaAnna Fali 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>