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

Input Style

Themes

PrimeOne
Saga Saga
Vela Vela
Arya Arya
Bootstrap
bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple
Material Design
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple
Material Design Compact
material-indigo-light Indigo
material-deeppurple-light' Deep Purple
material-indigo-dark Indigo
material-deeppurple-dark' Deep Purple

DataTable Scroll

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

Vertical
NameCountryRepresentativeStatus
Francesco T DoeUnited KingdomOnyama Limba NEGOTIATION
Mujtaba B RutaArgentinaIoni Bowcher NEGOTIATION
Octavia R PaprockiGermanyIoni Bowcher PROPOSAL
Mayumi E KolmetzArgentinaOnyama Limba QUALIFIED
James R FlosiJapanIoni Bowcher UNQUALIFIED
Greenwood I BologniaJapanIvan Magalhaes UNQUALIFIED
Wickens R BologniaAustraliaAsiya Javayant QUALIFIED
Maria V PerinArgentinaIvan Magalhaes NEW
Adams U TollnerArgentinaAnna Fali NEGOTIATION
Deepesh W PerinFranceAmy Elsner NEGOTIATION
Johnson P ButtUnited KingdomIoni Bowcher RENEWAL
Mayumi A NickaRussiaIvan Magalhaes PROPOSAL
Wickens B AlbaresCanadaAsiya Javayant RENEWAL
Misaki H NickaIndiaAnna Fali RENEWAL
Murillo K WieserGermanyBernardo Dominic RENEWAL
Antonio P WhobreyIndiaXuxue Feng PROPOSAL
Salvatore H DarakjyAustraliaElwin Sharvill RENEWAL
Claire N VenereIndiaOnyama Limba NEGOTIATION
Izzy D BriddickIndiaElwin Sharvill RENEWAL
Jones X ShinkoBrazilAmy Elsner UNQUALIFIED
Izzy U SaylorsGermanyIoni Bowcher NEGOTIATION
Claire H AmigonFranceIvan Magalhaes RENEWAL
Costa F VocelkaSpainStephen Shaw NEGOTIATION
Leon T WhobreySpainAmy Elsner NEGOTIATION
Johnson F AlbaresFranceAnna Fali QUALIFIED
Izzy M DarakjyItalyIoni Bowcher QUALIFIED
Mayumi Y TollnerBrazilIoni Bowcher PROPOSAL
Deepesh D AlbaresJapanAsiya Javayant QUALIFIED
Greenwood T MaletFranceStephen Shaw PROPOSAL
Wickens R SchemmerUnited KingdomOnyama Limba QUALIFIED
Costa B RutaUnited KingdomOnyama Limba QUALIFIED
Mujtaba X ChuiJapanAnna Fali UNQUALIFIED
Aditya D NickaJapanStephen Shaw QUALIFIED
Costa N RulapaughCanadaBernardo Dominic RENEWAL
Mujtaba I VocelkaGermanyAnna Fali UNQUALIFIED
Leja Y StockhamIndiaAsiya Javayant RENEWAL
David U OldroydGermanyStephen Shaw RENEWAL
Mayumi P StockhamUnited KingdomAnna Fali RENEWAL
Maria Z BowleyIndiaElwin Sharvill QUALIFIED
Maisha Z GlickIndiaAsiya Javayant UNQUALIFIED
Stacey Z PaprockiAustraliaIoni Bowcher NEGOTIATION
Juan B AmigonUnited KingdomElwin Sharvill PROPOSAL
Aika J SergiUnited KingdomAmy Elsner QUALIFIED
Aruna I RimItalyAsiya Javayant QUALIFIED
Jeanfrancois G MaletFranceOnyama Limba PROPOSAL
Jefferson C VenereAustraliaIvan Magalhaes QUALIFIED
Octavia V AmigonSpainIvan Magalhaes RENEWAL
Jeanfrancois J AlbaresSpainElwin Sharvill NEW
Clifford R CaldareraFranceOnyama Limba RENEWAL
Munro A VenereGermanyXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Stacey K IturbideFranceIoni Bowcher NEW
Munro Z PerinSpainStephen Shaw UNQUALIFIED
Maisha Z MacleadSpainOnyama Limba QUALIFIED
Costa I SaylorsFranceXuxue Feng QUALIFIED
Tony Q OstroskyFranceAsiya Javayant RENEWAL
Aruna X WieserGermanyAnna Fali NEW
Silvio H WaycottIndiaElwin Sharvill RENEWAL
Stacey Z SlusarskiSpainIoni Bowcher RENEWAL
Murillo D BologniaCanadaOnyama Limba QUALIFIED
James F MorascaGermanyXuxue Feng QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin L VocelkaGermany2024-08-30Truhlar And Truhlar Attys NEW37Amy Elsner
1001Juan Y NestleRussia2024-09-06Chapman, Ross E Esq PROPOSAL13Ivan Magalhaes
1002Ivar W StensethBrazil2024-09-23Chapman, Ross E Esq NEW78Ivan Magalhaes
1003Maisha H OstroskyGermany2024-09-12Rousseaux, Michael Esq NEW88Ivan Magalhaes
1004Leon W IturbideIndia2024-08-31Chapman, Ross E Esq NEW94Ioni Bowcher
1005Mayumi L CaldareraCanada2024-09-14Chemel, James L Cpa NEW4Bernardo Dominic
1006Ricardo G WaycottRussia2024-09-08Feltz Printing Service QUALIFIED22Ioni Bowcher
1007Deepesh S ChuiRussia2024-08-29Dorl, James J Esq NEGOTIATION56Asiya Javayant
1008Maisha W IturbideFrance2024-09-05Feltz Printing Service NEGOTIATION2Ioni Bowcher
1009Juan U BowleyUnited Kingdom2024-09-17Buckley Miller Wright NEGOTIATION5Anna Fali
1010Aditya J FollerJapan2024-09-14Chanay, Jeffrey A Esq NEW15Ivan Magalhaes
1011Jones U IturbideItaly2024-09-12Feiner Bros NEW84Stephen Shaw
1012Wickens E WieserItaly2024-08-27Morlong Associates UNQUALIFIED97Ivan Magalhaes
1013Emily O ChuiJapan2024-09-12Rousseaux, Michael Esq NEW0Stephen Shaw
1014Silvio C FerenczIndia2024-09-03Morlong Associates NEW18Ivan Magalhaes
1015Antonio D GillianIndia2024-09-09Chanay, Jeffrey A Esq RENEWAL34Ivan Magalhaes
1016Costa V KolmetzArgentina2024-09-17Rangoni Of Florence NEGOTIATION7Amy Elsner
1017Chavez D AmigonBrazil2024-09-19Chemel, James L Cpa PROPOSAL22Elwin Sharvill
1018Stacey I AlbaresAustralia2024-09-24Rousseaux, Michael Esq PROPOSAL56Xuxue Feng
1019Julie X PaprockiFrance2024-09-04King, Christopher A Esq UNQUALIFIED89Ioni Bowcher
1020Julie Q RoysterBrazil2024-09-16Buckley Miller Wright NEW21Onyama Limba
1021Faith P CampainAustralia2024-09-18Dorl, James J Esq NEGOTIATION35Bernardo Dominic
1022Costa D AmigonRussia2024-09-10Morlong Associates PROPOSAL98Onyama Limba
1023David L SergiArgentina2024-09-19Rousseaux, Michael Esq NEGOTIATION39Anna Fali
1024Emily B MaletSpain2024-09-02Commercial Press NEW55Xuxue Feng
1025Aruna B MarrierSpain2024-09-18Chapman, Ross E Esq NEW27Elwin Sharvill
1026Ivar Q MacleadJapan2024-09-15Morlong Associates NEW80Stephen Shaw
1027Adams R MaletCanada2024-09-11King, Christopher A Esq NEGOTIATION89Elwin Sharvill
1028Francesco Q GillianGermany2024-09-03Benton, John B Jr QUALIFIED99Xuxue Feng
1029Antonio X StockhamRussia2024-09-20Dorl, James J Esq QUALIFIED57Ivan Magalhaes
1030Cody F SergiSpain2024-09-05Printing Dimensions NEGOTIATION44Stephen Shaw
1031Wickens K GauchoSpain2024-09-24Rousseaux, Michael Esq RENEWAL84Stephen Shaw
1032Stacey L AmigonSpain2024-08-27Commercial Press NEW32Asiya Javayant
1033Munro K NickaBrazil2024-09-05King, Christopher A Esq PROPOSAL58Elwin Sharvill
1034Octavia H CampainSpain2024-09-23Morlong Associates NEW82Amy Elsner
1035Maria H PoquetteIndia2024-09-03Morlong Associates RENEWAL85Stephen Shaw
1036Darci I MarrierSpain2024-09-09Benton, John B Jr NEGOTIATION95Stephen Shaw
1037Chavez B MaletAustralia2024-09-07Chemel, James L Cpa NEGOTIATION62Onyama Limba
1038Julie Y MarrierRussia2024-09-23Chanay, Jeffrey A Esq QUALIFIED65Stephen Shaw
1039Maisha C KuskoAustralia2024-09-05Rousseaux, Michael Esq NEW0Bernardo Dominic
1040Rodrigues H IturbideBrazil2024-09-02Truhlar And Truhlar Attys NEW22Bernardo Dominic
1041Wickens S GillianJapan2024-09-14Feiner Bros NEGOTIATION11Ivan Magalhaes
1042David X DoeRussia2024-09-18Chanay, Jeffrey A Esq PROPOSAL48Anna Fali
1043Clifford V StockhamUnited Kingdom2024-09-12Rousseaux, Michael Esq PROPOSAL59Ioni Bowcher
1044Juan P SaylorsGermany2024-09-02Feiner Bros QUALIFIED51Amy Elsner
1045Izzy O DarakjyAustralia2024-09-04Chanay, Jeffrey A Esq NEW99Ioni Bowcher
1046Murillo G BriddickIndia2024-08-28Feiner Bros RENEWAL58Elwin Sharvill
1047Darci Y KuskoFrance2024-09-14Benton, John B Jr PROPOSAL92Ioni Bowcher
1048Darci N VocelkaUnited Kingdom2024-09-20Chapman, Ross E Esq PROPOSAL47Stephen Shaw
1049Adams A SergiJapan2024-09-17Feltz Printing Service RENEWAL82Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Adams G SaylorsUnited KingdomIvan Magalhaes UNQUALIFIED
Octavia T RulapaughIndiaStephen Shaw QUALIFIED
David E MorascaFranceAmy Elsner NEW
Kadeem H ShinkoArgentinaElwin Sharvill UNQUALIFIED
Stacey T BologniaBrazilOnyama Limba QUALIFIED
Morrow K ChuiSpainAmy Elsner PROPOSAL
Jeanfrancois Q SergiIndiaOnyama Limba NEW
Johnson G BowleyRussiaAnna Fali NEW
Juan P BriddickItalyIoni Bowcher UNQUALIFIED
David T SlusarskiFranceStephen Shaw UNQUALIFIED
Alejandro M WieserFranceIvan Magalhaes NEGOTIATION
Deepesh L ButtBrazilAnna Fali RENEWAL
Murillo Y MaletGermanyAsiya Javayant PROPOSAL
Nicolas S WieserUnited KingdomElwin Sharvill PROPOSAL
Ricardo W DarakjyUnited KingdomBernardo Dominic UNQUALIFIED
Aruna C CampainAustraliaXuxue Feng NEW
Francesco E DarakjyFranceIvan Magalhaes QUALIFIED
Aditya W BriddickFranceElwin Sharvill RENEWAL
Wickens S OldroydItalyIvan Magalhaes RENEWAL
Maria U SlusarskiItalyIoni Bowcher NEGOTIATION
Aruna X DarakjyBrazilAmy Elsner NEW
Nicolas V VocelkaIndiaAmy Elsner NEW
Nicolas P PaprockiUnited KingdomXuxue Feng NEW
Cody A BowleyIndiaXuxue Feng NEGOTIATION
Ivar X GlickBrazilStephen Shaw QUALIFIED
Silvio H SaylorsRussiaXuxue Feng UNQUALIFIED
Jones B DoeArgentinaStephen Shaw UNQUALIFIED
Jeanfrancois Z SaylorsGermanyXuxue Feng RENEWAL
Aditya O StensethItalyXuxue Feng PROPOSAL
Stacey G TollnerJapanIvan Magalhaes QUALIFIED
Isabel Q WieserAustraliaIoni Bowcher NEGOTIATION
Kadeem X InouyeArgentinaOnyama Limba UNQUALIFIED
Kaitlin Q MacleadCanadaAnna Fali QUALIFIED
Morrow B MacleadSpainBernardo Dominic NEW
Deepesh T SergiBrazilAsiya Javayant NEGOTIATION
Ashley K MarrierCanadaIvan Magalhaes RENEWAL
Rodrigues E InouyeItalyAnna Fali NEGOTIATION
Johnson T FlosiUnited KingdomXuxue Feng NEGOTIATION
Tony D OldroydAustraliaOnyama Limba NEGOTIATION
Johnson T MarrierGermanyIvan Magalhaes PROPOSAL
Jennifer A DilliardUnited KingdomIoni Bowcher NEW
Stacey B CaudyJapanBernardo Dominic NEGOTIATION
Munro P NickaCanadaOnyama Limba NEGOTIATION
Julie X RoysterGermanyAsiya Javayant PROPOSAL
Misaki L AmigonFranceXuxue Feng UNQUALIFIED
Aruna D FollerRussiaIoni Bowcher NEW
Leja Z RutaItalyIvan Magalhaes RENEWAL
Alejandro X OldroydUnited KingdomIvan Magalhaes UNQUALIFIED
Aruna F WieserGermanyAmy Elsner NEGOTIATION
Emily K BowleyCanadaIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Isabel T Schemmer
Cody U Saylors
Clifford S Paprocki
Isabel K Doe
Greenwood W Foller
Ivar A Royster
Murillo Z Darakjy
Aika D Bolognia
Izzy T Rulapaugh
Francesco G Amigon
Nicolas Z Slusarski
Leja J Gillian
Smith C Schemmer
Clifford F Rulapaugh
Kaitlin O Ferencz
Aditya E Paprocki
Sinclair F Inouye
Murillo Y Caldarera
Isabel E Doe
Mujtaba F Figeroa
Stacey C Wieser
Adams C Ruta
Johnson D Caldarera
Jones F Inouye
Kaitlin K Flosi
Jones R Ruta
Salvatore E Bolognia
Murillo B Whobrey
Salvatore W Foller
Morrow C Venere
Julie J Briddick
Morrow E Figeroa
Octavia N Caudy
Darci X Royster
Leon Y Albares
Misaki M Butt
Francesco E Maclead
Claire Q Rim
Jeanfrancois N Nicka
Wickens A Maclead
Johnson M Dilliard
Johnson X Nicka
Adams X Bowley
Kaitlin M Iturbide
Chavez I Nestle
David R Kusko
Mujtaba K Perin
Costa X Marrier
Darci D Albares
Clifford S Shinko
IdCountryDate
1000India2024-09-24
1001Italy2024-09-19
1002India2024-09-05
1003Russia2024-09-07
1004France2024-09-02
1005Japan2024-09-14
1006Canada2024-08-28
1007Argentina2024-09-15
1008Germany2024-08-26
1009Brazil2024-08-31
1010Russia2024-08-27
1011Russia2024-09-08
1012Argentina2024-09-21
1013Brazil2024-08-31
1014Canada2024-09-12
1015Brazil2024-09-12
1016Brazil2024-09-20
1017Argentina2024-09-15
1018Argentina2024-09-22
1019France2024-09-08
1020United Kingdom2024-09-01
1021Japan2024-09-16
1022Russia2024-09-22
1023Argentina2024-09-11
1024Spain2024-09-21
1025Germany2024-09-19
1026Italy2024-09-06
1027France2024-08-28
1028Spain2024-09-01
1029Japan2024-09-16
1030Brazil2024-09-22
1031Argentina2024-08-27
1032Australia2024-09-09
1033Japan2024-08-26
1034Argentina2024-09-20
1035United Kingdom2024-09-15
1036Australia2024-09-21
1037Spain2024-09-19
1038Spain2024-09-02
1039Russia2024-09-03
1040Italy2024-09-13
1041India2024-09-04
1042United Kingdom2024-09-05
1043Japan2024-09-02
1044Russia2024-09-08
1045India2024-09-18
1046Japan2024-09-12
1047Canada2024-09-13
1048Brazil2024-09-02
1049Italy2024-09-02

On-Demand Data

NameIdCountryDate
Claire Y Inouye1000Brazil2024-09-24
Sinclair F Perin1001Germany2024-08-28
Isabel D Iturbide1002Canada2024-09-20
Wickens H Stockham1003Australia2024-09-16
Jefferson V Butt1004Russia2024-09-05
Antonio M Garufi1005Russia2024-09-21
Maria P Wieser1006Italy2024-08-28
Kaitlin L Gaucho1007Canada2024-09-09
Claire M Saylors1008France2024-09-07
Darci E Ruta1009Spain2024-09-07
Kaitlin T Flosi1010Japan2024-08-26
Aruna X Shinko1011Canada2024-09-04
Chavez C Doe1012France2024-09-24
Smith Q Oldroyd1013United Kingdom2024-08-30
Darci G Morasca1014Italy2024-09-05
Emily J Malet1015France2024-09-22
Leon X Morasca1016India2024-09-05
Juan M Schemmer1017Brazil2024-09-14
Jones X Gaucho1018Japan2024-09-20
Jennifer M Figeroa1019Spain2024-09-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer V PerinCanadaXuxue Feng PROPOSAL
Aditya J SergiJapanAnna Fali QUALIFIED
Kaitlin Q DoeJapanAmy Elsner UNQUALIFIED
Ricardo H BologniaArgentinaOnyama Limba PROPOSAL
Greenwood O BriddickRussiaStephen Shaw RENEWAL
Rodrigues L VocelkaFranceOnyama Limba UNQUALIFIED
Ivar E MaletCanadaOnyama Limba NEGOTIATION
Julie I GarufiBrazilAnna Fali QUALIFIED
Aditya Y MaletSpainStephen Shaw NEW
Emily J BowleyJapanIoni Bowcher NEGOTIATION
Stacey N WaycottGermanyXuxue Feng RENEWAL
Johnson Z RimGermanyIvan Magalhaes NEGOTIATION
Arvin M StockhamFranceIvan Magalhaes NEGOTIATION
Darci K MaletBrazilOnyama Limba NEGOTIATION
Aika N FigeroaCanadaIoni Bowcher NEW
Leon H MorascaGermanyBernardo Dominic PROPOSAL
Faith X RimUnited KingdomBernardo Dominic UNQUALIFIED
Ivar U RulapaughFranceXuxue Feng NEGOTIATION
Alejandro Y NestleCanadaAnna Fali QUALIFIED
Silvio T VocelkaArgentinaAnna Fali UNQUALIFIED
Deepesh R ChuiIndiaIvan Magalhaes NEGOTIATION
Morrow K SchemmerCanadaElwin Sharvill UNQUALIFIED
Julie M VenereArgentinaAsiya Javayant PROPOSAL
Silvio O VocelkaBrazilOnyama Limba NEGOTIATION
Mayumi D PerinIndiaElwin Sharvill NEW
Antonio Z RimRussiaStephen Shaw PROPOSAL
Murillo P FlosiArgentinaOnyama Limba UNQUALIFIED
Nicolas N CaldareraJapanElwin Sharvill QUALIFIED
Misaki L BowleyCanadaAmy Elsner NEW
Chavez M PaprockiSpainIoni Bowcher NEW
Aditya L MaletRussiaIvan Magalhaes RENEWAL
Kadeem C RoysterAustraliaElwin Sharvill NEGOTIATION
Morrow B OstroskyBrazilXuxue Feng QUALIFIED
James M GarufiItalyIvan Magalhaes NEW
Munro K FigeroaRussiaStephen Shaw PROPOSAL
Jefferson G SergiItalyBernardo Dominic NEW
Ivar A PoquetteCanadaElwin Sharvill UNQUALIFIED
Octavia Z VenereGermanyAnna Fali UNQUALIFIED
Ivar O MorascaSpainAsiya Javayant RENEWAL
Leon X MaletFranceStephen Shaw 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.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">
            <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>