Summer Sale is here 🏖️ Get 50% off with code PRSM25 Learn More

Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
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

Themes

PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

DataTable Scroll

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical
NameCountryRepresentativeStatus
Wickens K GlickGermanyIoni Bowcher PROPOSAL
Rodrigues U SaylorsFranceAmy Elsner PROPOSAL
Tony G FlosiBrazilAnna Fali RENEWAL
Isabel H MaletGermanyStephen Shaw PROPOSAL
Aika A IturbideBrazilIvan Magalhaes QUALIFIED
David D CampainUnited KingdomIvan Magalhaes RENEWAL
Nicolas A GlickJapanBernardo Dominic QUALIFIED
Wickens G ButtSpainXuxue Feng NEW
Ricardo W BologniaGermanyXuxue Feng RENEWAL
Cody K GlickItalyStephen Shaw PROPOSAL
Ricardo Y OldroydItalyIoni Bowcher UNQUALIFIED
Juan H TollnerJapanIvan Magalhaes NEGOTIATION
Octavia C ChuiFranceElwin Sharvill QUALIFIED
Maria T TollnerFranceAmy Elsner PROPOSAL
Emily K OstroskyJapanAnna Fali QUALIFIED
Clifford E MacleadIndiaStephen Shaw NEW
Costa R KolmetzRussiaIoni Bowcher RENEWAL
Johnson H SlusarskiArgentinaElwin Sharvill RENEWAL
Isabel B KuskoSpainAsiya Javayant UNQUALIFIED
Emily D BriddickJapanXuxue Feng NEW
Octavia B StockhamJapanAsiya Javayant QUALIFIED
Munro N OldroydJapanStephen Shaw UNQUALIFIED
Darci A RimFranceElwin Sharvill NEGOTIATION
David Z FollerFranceXuxue Feng QUALIFIED
Maria P AlbaresCanadaStephen Shaw RENEWAL
Aditya L KuskoJapanBernardo Dominic QUALIFIED
Isabel R DarakjyCanadaAsiya Javayant NEGOTIATION
Arvin U DoeFranceElwin Sharvill NEGOTIATION
Kadeem C PerinBrazilAsiya Javayant PROPOSAL
Izzy K PaprockiItalyStephen Shaw RENEWAL
Cody W FollerGermanyAmy Elsner RENEWAL
David I RoysterFranceIvan Magalhaes PROPOSAL
Adams P VenereArgentinaIoni Bowcher NEGOTIATION
Adams A MaletCanadaBernardo Dominic NEW
Silvio R FlosiUnited KingdomBernardo Dominic NEW
Ricardo R GlickAustraliaAmy Elsner NEW
Wickens J BowleyArgentinaAnna Fali NEGOTIATION
Leon I DarakjyBrazilIvan Magalhaes PROPOSAL
Johnson D FerenczCanadaIoni Bowcher NEGOTIATION
Isabel E BowleyUnited KingdomStephen Shaw NEW
Jefferson K AlbaresItalyAmy Elsner RENEWAL
Kaitlin P WaycottRussiaAsiya Javayant NEW
James E StockhamArgentinaOnyama Limba QUALIFIED
Munro F NestleJapanAmy Elsner PROPOSAL
Ivar Z CaudyRussiaAnna Fali NEW
Smith Z FlosiSpainStephen Shaw RENEWAL
Julie D GillianArgentinaAsiya Javayant NEGOTIATION
Stacey D SchemmerRussiaIoni Bowcher NEW
Murillo W AlbaresFranceAnna Fali QUALIFIED
Claire D GauchoSpainAsiya Javayant NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Adams H DarakjyItalyOnyama Limba RENEWAL
Wickens H BologniaBrazilXuxue Feng QUALIFIED
Ashley J DilliardItalyAnna Fali NEGOTIATION
Clifford Q DarakjyArgentinaIvan Magalhaes RENEWAL
Morrow Q FollerRussiaXuxue Feng UNQUALIFIED
Smith T FerenczRussiaXuxue Feng RENEWAL
Adams F SlusarskiFranceXuxue Feng QUALIFIED
Sinclair R FlosiFranceIoni Bowcher NEGOTIATION
Adams M PerinRussiaXuxue Feng PROPOSAL
Francesco Q DoeGermanyBernardo Dominic QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maisha C RimFrance2025-07-25King, Christopher A Esq QUALIFIED61Ivan Magalhaes
1001Leja T GillianGermany2025-07-31Printing Dimensions QUALIFIED42Onyama Limba
1002Emily T AlbaresIndia2025-08-12King, Christopher A Esq PROPOSAL78Anna Fali
1003Tony Y MaletCanada2025-08-09Printing Dimensions QUALIFIED18Ivan Magalhaes
1004Alejandro Q SlusarskiBrazil2025-07-31Feltz Printing Service NEW23Asiya Javayant
1005Arvin A AmigonUnited Kingdom2025-08-01Chemel, James L Cpa UNQUALIFIED67Xuxue Feng
1006Faith I CampainBrazil2025-07-28Commercial Press QUALIFIED9Onyama Limba
1007Nicolas N FlosiItaly2025-07-23Feltz Printing Service RENEWAL84Ioni Bowcher
1008Julie B CaudyArgentina2025-08-01Buckley Miller Wright NEGOTIATION54Ioni Bowcher
1009Smith L GarufiArgentina2025-07-26Chanay, Jeffrey A Esq NEGOTIATION80Anna Fali
1010Faith G VenereUnited Kingdom2025-08-07Benton, John B Jr NEW63Stephen Shaw
1011Munro Q MaletSpain2025-08-03Buckley Miller Wright UNQUALIFIED48Anna Fali
1012Kadeem C DoeSpain2025-07-29Chapman, Ross E Esq UNQUALIFIED73Bernardo Dominic
1013Julie O SchemmerBrazil2025-08-02Morlong Associates QUALIFIED48Xuxue Feng
1014Leon P SlusarskiJapan2025-08-05King, Christopher A Esq NEGOTIATION37Ivan Magalhaes
1015Wickens E GauchoItaly2025-08-10Feiner Bros QUALIFIED7Asiya Javayant
1016Salvatore K CampainIndia2025-07-16Feltz Printing Service RENEWAL48Anna Fali
1017Mayumi F OldroydBrazil2025-07-19Commercial Press UNQUALIFIED63Stephen Shaw
1018Silvio X FigeroaRussia2025-08-10Truhlar And Truhlar Attys NEGOTIATION10Onyama Limba
1019Mayumi G SlusarskiIndia2025-07-20Commercial Press QUALIFIED16Elwin Sharvill
1020Silvio K MorascaUnited Kingdom2025-08-05Truhlar And Truhlar Attys PROPOSAL11Elwin Sharvill
1021Rodrigues C NickaCanada2025-08-13Chanay, Jeffrey A Esq PROPOSAL25Amy Elsner
1022Jones U RimFrance2025-08-10Feltz Printing Service NEW59Bernardo Dominic
1023Maria I FigeroaSpain2025-07-19Rousseaux, Michael Esq NEW28Ioni Bowcher
1024Munro A FigeroaIndia2025-08-03Chanay, Jeffrey A Esq NEGOTIATION6Asiya Javayant
1025Aika Z FigeroaIndia2025-08-10Chanay, Jeffrey A Esq NEW5Anna Fali
1026Arvin T GlickJapan2025-08-06King, Christopher A Esq NEW1Xuxue Feng
1027Arvin N CampainSpain2025-07-28Printing Dimensions PROPOSAL57Bernardo Dominic
1028Murillo U MaletAustralia2025-08-13Truhlar And Truhlar Attys PROPOSAL20Bernardo Dominic
1029James O ShinkoUnited Kingdom2025-08-08Dorl, James J Esq PROPOSAL99Bernardo Dominic
1030Faith F WieserItaly2025-07-16Commercial Press NEGOTIATION51Amy Elsner
1031Ricardo N NickaUnited Kingdom2025-08-06Dorl, James J Esq NEW0Ivan Magalhaes
1032Munro W VocelkaRussia2025-08-06Printing Dimensions UNQUALIFIED83Anna Fali
1033Arvin H PerinFrance2025-07-19Rousseaux, Michael Esq QUALIFIED95Anna Fali
1034Deepesh Z DoeArgentina2025-08-06Benton, John B Jr QUALIFIED89Stephen Shaw
1035Smith H WhobreyIndia2025-07-22Chapman, Ross E Esq QUALIFIED68Stephen Shaw
1036Francesco L RoysterFrance2025-08-12Feiner Bros QUALIFIED74Ioni Bowcher
1037Francesco N FigeroaCanada2025-07-27Dorl, James J Esq PROPOSAL26Bernardo Dominic
1038Greenwood M ShinkoCanada2025-07-22Dorl, James J Esq UNQUALIFIED29Amy Elsner
1039Cody U InouyeJapan2025-08-12Commercial Press UNQUALIFIED90Onyama Limba
1040Greenwood W MorascaFrance2025-07-15Truhlar And Truhlar Attys UNQUALIFIED14Onyama Limba
1041Deepesh V SlusarskiItaly2025-07-30Feltz Printing Service NEGOTIATION74Elwin Sharvill
1042Octavia T ButtJapan2025-07-25Feiner Bros NEGOTIATION73Ioni Bowcher
1043Sinclair P WaycottIndia2025-08-01Chemel, James L Cpa RENEWAL89Stephen Shaw
1044Leja F MorascaItaly2025-08-08Morlong Associates PROPOSAL5Stephen Shaw
1045Leon B PoquetteBrazil2025-08-08Feiner Bros RENEWAL72Asiya Javayant
1046Wickens Y MaletIndia2025-08-11Benton, John B Jr NEGOTIATION11Amy Elsner
1047Maisha F GauchoRussia2025-07-27Truhlar And Truhlar Attys NEGOTIATION49Xuxue Feng
1048Emily L GauchoJapan2025-07-26Morlong Associates QUALIFIED91Ivan Magalhaes
1049Deepesh Z ShinkoSpain2025-08-12Rousseaux, Michael Esq RENEWAL49Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Johnson X CampainJapanOnyama Limba RENEWAL
Cody V DoeSpainIvan Magalhaes RENEWAL
Jefferson W StockhamSpainXuxue Feng UNQUALIFIED
Silvio U DilliardFranceBernardo Dominic UNQUALIFIED
Sinclair E SchemmerJapanIvan Magalhaes PROPOSAL
Emily F MaletRussiaStephen Shaw NEW
Rodrigues Z ButtJapanElwin Sharvill QUALIFIED
Aditya O FollerUnited KingdomXuxue Feng PROPOSAL
Arvin K FollerIndiaIvan Magalhaes RENEWAL
Adams K BologniaItalyIoni Bowcher QUALIFIED
Darci J FollerAustraliaIoni Bowcher PROPOSAL
Wickens X GillianIndiaStephen Shaw PROPOSAL
Jones F PerinGermanyStephen Shaw NEGOTIATION
Murillo J MarrierBrazilIoni Bowcher RENEWAL
Nicolas B CaldareraRussiaBernardo Dominic QUALIFIED
Stacey V GillianSpainAsiya Javayant UNQUALIFIED
Isabel I RulapaughRussiaXuxue Feng RENEWAL
Misaki V FigeroaIndiaOnyama Limba UNQUALIFIED
Isabel C SergiSpainIvan Magalhaes NEW
Faith U VenereGermanyAmy Elsner QUALIFIED
Munro A SchemmerJapanAnna Fali NEW
Jones V CampainIndiaAmy Elsner NEGOTIATION
Alejandro J TollnerSpainAsiya Javayant PROPOSAL
Adams E FollerIndiaIoni Bowcher RENEWAL
Alejandro I IturbideBrazilAnna Fali UNQUALIFIED
Munro S SchemmerBrazilAsiya Javayant QUALIFIED
Adams U MaletAustraliaXuxue Feng RENEWAL
Tony S VenereJapanAmy Elsner UNQUALIFIED
Munro F AlbaresJapanIoni Bowcher NEGOTIATION
Greenwood M FerenczFranceAnna Fali RENEWAL
Greenwood L WaycottSpainBernardo Dominic RENEWAL
Jeanfrancois R InouyeIndiaAmy Elsner NEGOTIATION
Jennifer E FollerIndiaXuxue Feng UNQUALIFIED
Kaitlin W AmigonArgentinaElwin Sharvill PROPOSAL
Claire K WhobreyIndiaAmy Elsner NEW
James F TollnerFranceStephen Shaw NEGOTIATION
Wickens J WieserCanadaIoni Bowcher RENEWAL
James C WhobreyBrazilOnyama Limba QUALIFIED
Octavia K InouyeFranceIoni Bowcher NEW
Stacey S VocelkaCanadaOnyama Limba QUALIFIED
Aditya F PerinSpainIvan Magalhaes QUALIFIED
Leon T FollerItalyAnna Fali RENEWAL
Arvin A AlbaresIndiaIoni Bowcher QUALIFIED
Adams O RulapaughBrazilAsiya Javayant UNQUALIFIED
Izzy P SergiIndiaStephen Shaw RENEWAL
Ricardo Q GillianFranceBernardo Dominic UNQUALIFIED
Greenwood R VocelkaGermanyAsiya Javayant NEW
James N OldroydIndiaAmy Elsner RENEWAL
Darci B MacleadArgentinaAnna Fali NEGOTIATION
Izzy O CaudyFranceOnyama Limba QUALIFIED
Frozen Columns
Name
Smith A Malet
Silvio V Waycott
Clifford S Malet
Arvin V Vocelka
Emily Z Saylors
Alejandro P Inouye
Tony Z Garufi
Jefferson N Malet
Claire S Marrier
Kadeem E Ostrosky
Maisha K Chui
David O Tollner
Clifford M Wieser
Antonio O Campain
Julie R Chui
Maisha G Ostrosky
Nicolas V Shinko
David K Shinko
Emily O Slusarski
Smith N Garufi
Aditya R Schemmer
Faith C Rulapaugh
Kadeem X Malet
Nicolas P Caudy
Octavia Y Ostrosky
Isabel A Flosi
Silvio H Poquette
Adams S Darakjy
Isabel G Dilliard
Aditya O Briddick
Maisha K Flosi
Mayumi W Gillian
Leja M Briddick
Mujtaba R Vocelka
Misaki Y Perin
Leja L Iturbide
Wickens P Glick
Greenwood V Inouye
Morrow U Nicka
Claire I Chui
Jeanfrancois K Shinko
Jefferson L Shinko
Isabel G Whobrey
Jones X Caldarera
Chavez G Wieser
Mujtaba G Figeroa
Alejandro I Royster
Mayumi R Marrier
Claire R Schemmer
Kaitlin Y Schemmer
IdCountryDate
1000Canada2025-08-03
1001United Kingdom2025-07-21
1002Italy2025-08-01
1003United Kingdom2025-07-19
1004Italy2025-07-23
1005India2025-07-24
1006United Kingdom2025-07-23
1007India2025-07-24
1008Spain2025-08-06
1009United Kingdom2025-07-22
1010Italy2025-07-30
1011Japan2025-08-06
1012France2025-07-17
1013Japan2025-08-03
1014Brazil2025-08-02
1015Germany2025-07-26
1016Germany2025-08-10
1017Argentina2025-07-15
1018Brazil2025-08-10
1019France2025-08-05
1020Russia2025-08-08
1021India2025-07-21
1022Japan2025-08-01
1023Brazil2025-08-05
1024Italy2025-07-22
1025Canada2025-07-17
1026United Kingdom2025-07-22
1027Canada2025-08-03
1028Italy2025-07-18
1029Canada2025-08-05
1030Spain2025-07-26
1031Russia2025-07-28
1032Australia2025-08-07
1033Spain2025-07-23
1034Germany2025-07-27
1035Spain2025-08-10
1036France2025-08-13
1037Argentina2025-07-27
1038Canada2025-08-10
1039France2025-08-09
1040United Kingdom2025-08-01
1041Brazil2025-07-21
1042Argentina2025-08-03
1043Australia2025-08-10
1044France2025-08-01
1045Japan2025-08-10
1046Canada2025-07-15
1047Argentina2025-08-11
1048Italy2025-08-12
1049Germany2025-08-11

On-Demand Data

NameIdCountryDate
Wickens X Rim1000Canada2025-07-22
Smith N Nestle1001India2025-07-29
Leja G Inouye1002Italy2025-08-06
Isabel O Bowley1003Canada2025-07-19
Antonio G Flosi1004Italy2025-07-16
Izzy X Stenseth1005Russia2025-08-07
Morrow H Chui1006Germany2025-07-31
Deepesh L Venere1007India2025-08-09
Aruna X Slusarski1008Germany2025-07-24
Silvio Q Foller1009Argentina2025-07-31
Faith S Albares1010Japan2025-07-18
Rodrigues U Marrier1011Japan2025-08-04
Aruna P Rulapaugh1012Brazil2025-07-24
Alejandro S Albares1013Russia2025-07-20
Izzy Z Nicka1014Italy2025-07-26
Emily F Poquette1015Australia2025-07-29
Darci U Nicka1016France2025-07-16
Ricardo O Whobrey1017Canada2025-07-18
Arvin J Albares1018Canada2025-07-17
Ivar E Ruta1019Italy2025-08-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy V MaletJapanXuxue Feng RENEWAL
Wickens F BriddickAustraliaOnyama Limba RENEWAL
Julie O SaylorsAustraliaAnna Fali UNQUALIFIED
Alejandro H DilliardUnited KingdomAnna Fali PROPOSAL
Jennifer O NestleJapanAsiya Javayant RENEWAL
Leon M PerinGermanyIvan Magalhaes QUALIFIED
Francesco X DoeArgentinaElwin Sharvill UNQUALIFIED
Aditya L NickaArgentinaXuxue Feng PROPOSAL
Murillo H CaudyBrazilIvan Magalhaes PROPOSAL
Ricardo U OldroydRussiaAnna Fali QUALIFIED
Aruna B DilliardGermanyBernardo Dominic UNQUALIFIED
Mujtaba G MacleadRussiaIoni Bowcher PROPOSAL
Claire Z KuskoJapanStephen Shaw NEW
Leon P PaprockiJapanElwin Sharvill QUALIFIED
James H FollerRussiaAnna Fali NEW
Deepesh M GillianArgentinaAsiya Javayant RENEWAL
Deepesh I RulapaughJapanXuxue Feng RENEWAL
Ivar C TollnerIndiaStephen Shaw QUALIFIED
Mayumi G GillianJapanXuxue Feng PROPOSAL
Tony N SaylorsJapanElwin Sharvill NEGOTIATION
James E SaylorsUnited KingdomOnyama Limba QUALIFIED
Silvio C SergiItalyAmy Elsner NEW
David Y MaletBrazilXuxue Feng PROPOSAL
Octavia R KolmetzItalyAsiya Javayant RENEWAL
Murillo L SlusarskiBrazilBernardo Dominic QUALIFIED
Deepesh C MaletArgentinaAnna Fali RENEWAL
Nicolas V MaletCanadaAnna Fali NEGOTIATION
Isabel W CaudyGermanyOnyama Limba QUALIFIED
Sinclair J AlbaresUnited KingdomAnna Fali NEGOTIATION
Emily X KolmetzJapanXuxue Feng QUALIFIED
Mujtaba X SergiGermanyStephen Shaw NEW
Maria E AmigonRussiaAnna Fali QUALIFIED
Greenwood I SlusarskiBrazilAmy Elsner PROPOSAL
Sinclair G NickaArgentinaBernardo Dominic PROPOSAL
Stacey H MorascaBrazilIoni Bowcher QUALIFIED
Nicolas U MaletSpainAsiya Javayant NEGOTIATION
Emily I WhobreyUnited KingdomIoni Bowcher QUALIFIED
Faith E FigeroaItalyOnyama Limba RENEWAL
Faith C MorascaItalyBernardo Dominic QUALIFIED
Adams N PaprockiJapanIvan Magalhaes PROPOSAL

<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.name().toLowerCase()}">#{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.name().toLowerCase()}">#{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.name().toLowerCase()}">#{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.name().toLowerCase()}">#{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" frozenColumnsAlignment="left">
            <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.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>