vue-scrolling-table is a Vue 3 component that provides a flexbox-based table control, where the header, body, and footer of the control are rendered via named slots for maximum flexibility, and the component allows the body to be scrolled horizontally and vertically as needed.
For detailed documentation, please see the Github repository. (The repo for this page is also available on Github.)
Note: this page uses the Bulma library for basic styling, and that styling overides a few details of the default vue-scrolling-table, notably removing the border from the header cells and adding rounded corners.
Demo!
ID | First Name | Last Name | Company Name | Address | City | Region | Postal Code | Country | Phone | |
---|---|---|---|---|---|---|---|---|---|---|
1 | Howard | Ramirez | Cubilia Curae; Phasellus Industries | P.O. Box 690, 4766 Massa St. | New Plymouth | North Island | 538527 | South Sudan | 1-607-782-6985 | Ut.nec@eget.com |
2 | Donna | Rhodes | Nunc Mauris Industries | P.O. Box 359, 1862 Laoreet, Av. | Saint-Remy-Geest | Waals-Brabant | DL3N 3CV | Botswana | 1-184-778-4950 | porttitor.tellus.non@eratvel.org |
3 | Wade | Reynolds | Duis Risus LLC | Ap #132-6084 Vitae St. | Colombo | Paraná | 563593 | Mali | 454-3889 | nunc@mauris.com |
4 | Rae | Leach | Aliquet Molestie LLC | 2271 Dolor. Rd. | Hamburg | HH | 07338 | United States Minor Outlying Islands | 370-8602 | luctus@ligula.co.uk |
5 | Oleg | Miles | Maecenas Mi PC | 2655 Nibh. St. | San Rafael | Alajuela | 22850 | Finland | 491-4122 | nulla.In@magnaDuis.com |
6 | Thane | Bright | Sem Egestas Blandit LLP | 8064 Ante St. | Purulia | Jharkhand | 40118 | Serbia | 1-230-283-4753 | ante.blandit@pharetra.org |
7 | Hashim | Salazar | Mi Tempor Lorem Institute | 5177 Auctor. Avenue | Soye | Namen | 4532 | Belarus | 551-1721 | quis@Cumsociisnatoque.com |
8 | Aspen | Tanner | Pharetra Nibh Aliquam Ltd | Ap #260-6014 Donec Rd. | Vienna | Wie | 2972 ZB | South Sudan | 192-2717 | Donec.est@etarcuimperdiet.edu |
9 | Eaton | Harris | Suspendisse Commodo Inc. | 754-1058 In Ave | Belfast | U | 47351 | Saint Barthélemy | 1-862-415-8875 | et@natoque.net |
10 | Scott | Savage | Molestie LLP | P.O. Box 397, 4261 Iaculis Road | Sagamu | Ogun | 0576 | Portugal | 1-261-128-3939 | venenatis@erat.co.uk |
11 | Amethyst | Moore | Leo Elementum Incorporated | Ap #615-2475 Sagittis Rd. | Tallahassee | FL | 17070 | Turks and Caicos Islands | 111-2420 | egestas.Fusce.aliquet@quamdignissimpharetra.org |
12 | Russell | Roy | Class Incorporated | 4023 Donec Rd. | Galway | Connacht | 91975-667 | Bahrain | 555-5784 | ac@semper.org |
13 | Chloe | Shepard | Ornare Libero At PC | Ap #655-4944 Velit. Rd. | Alacant | Comunitat Valenciana | 5316 | Guyana | 1-851-813-9116 | ut.odio.vel@dui.com |
14 | Zenaida | Butler | Quisque Tincidunt Company | Ap #857-3500 Fermentum Rd. | Cheltenham | Gloucestershire | 85-623 | Mali | 202-4795 | orci.lacus@duisemper.com |
15 | Akeem | Houston | Turpis Vitae Purus LLP | Ap #901-4402 Sed Road | Sapele | Delta | 50417 | France | 1-719-939-6901 | euismod.ac@velfaucibus.co.uk |
16 | Alma | Whitehead | Maecenas Iaculis Aliquet Inc. | 5449 Malesuada St. | Sokoto | Sokoto | 44922 | Hong Kong | 1-457-545-6623 | arcu.vel.quam@accumsanconvallis.ca |
17 | Prescott | Willis | Proin Dolor LLP | P.O. Box 242, 2810 Ut Ave | Toruń | Kujawsko-pomorskie | 4584 | Guyana | 1-758-337-8375 | blandit.enim.consequat@Nunc.org |
18 | Rooney | Harrell | Dui Associates | 4523 Sapien, Rd. | Guna | Madhya Pradesh | 2978 | Sweden | 1-371-619-4460 | facilisis.vitae.orci@ligula.co.uk |
19 | Hu | Wood | Mus Proin Institute | 1805 Nibh. St. | Campagna | Campania | 14530 | Mongolia | 376-0930 | ornare.lectus.ante@atpretiumaliquet.edu |
20 | Beck | Brennan | Pede Et Risus LLP | P.O. Box 324, 5727 Vulputate St. | Missoula | Montana | 24803 | Nauru | 418-9774 | Morbi.quis.urna@In.ca |
21 | Quincy | Knight | Eu Corporation | P.O. Box 873, 4719 Dictum Rd. | Aurora | Colorado | 7039 BN | Latvia | 1-222-411-1840 | ut.nisi@sapien.org |
22 | Tad | Ellis | Lacinia Sed Congue Incorporated | 9509 Vitae Av. | Minucciano | Toscana | 5199 | Guatemala | 1-107-122-1058 | Sed.et.libero@diamluctus.co.uk |
23 | Athena | Mendez | Eros Proin Ultrices LLP | 351-5755 Molestie Rd. | Lithgow | New South Wales | 31144 | Haiti | 1-651-557-1187 | montes.nascetur@nec.org |
24 | Zelenia | Carson | Egestas Foundation | Ap #212-4007 Amet Rd. | San Rafael | A | 52452 | Nicaragua | 432-2981 | tortor.at.risus@Nullam.com |
25 | Cain | Powell | Praesent Interdum Ligula Industries | P.O. Box 227, 5277 Magnis Av. | Goiânia | Goiás | L05 7NL | South Africa | 168-8333 | et@Curae.co.uk |
26 | Malik | Lucas | Ac PC | Ap #744-6562 Et, Road | Istanbul | Istanbul | 8559 | Liechtenstein | 1-538-536-0329 | libero.est.congue@id.ca |
27 | Nevada | Erickson | Lobortis Mauris Suspendisse Company | P.O. Box 465, 310 Justo Av. | Kawerau | NI | 952085 | Jamaica | 857-7978 | eget@porttitorvulputateposuere.com |
28 | Drake | Williams | Nec Quam Foundation | 508-4765 Dapibus Avenue | San Joaquín | Metropolitana de Santiago | 55125 | Bangladesh | 703-6516 | elementum.purus.accumsan@neccursusa.org |
29 | Dolan | Lyons | Et Foundation | 7533 Urna Rd. | Springdale | Arkansas | 257939 | French Polynesia | 660-3254 | Quisque.ac.libero@non.edu |
30 | Madison | Rush | Eu Neque Corp. | P.O. Box 941, 5546 A, Av. | La Matap�dia | QC | 21800 | Isle of Man | 878-4482 | facilisis.vitae@tempusmauriserat.edu |
31 | Paul | Mccullough | Vel Sapien Incorporated | Ap #178-4382 Vitae Avenue | Okpoko | Anambra | 2911 | Sudan | 1-979-507-3992 | Curabitur.egestas.nunc@semsemper.net |
32 | Declan | Spencer | Luctus Aliquet Odio Ltd | 5123 Nam Av. | Bairnsdale | VIC | 10315 | Mongolia | 730-0218 | ornare.lectus.ante@interdumSed.org |
33 | Gemma | Nash | Mus Limited | 9989 Dapibus Rd. | Woodlands County | Alberta | 8505 | Netherlands | 1-917-882-0764 | Sed@aliquetodioEtiam.net |
34 | Shelley | Wolf | Cursus Company | 885-4467 Ac Rd. | Abbeville | Picardie | 374426 | Åland Islands | 791-0382 | ante@pedeSuspendissedui.com |
35 | Kaitlin | Moreno | Vehicula Et Rutrum Associates | 9224 Erat Av. | Hertsberge | WV | 700220 | Morocco | 1-102-192-3426 | ullamcorper.viverra@et.com |
36 | Piper | Gibbs | Maecenas Ornare Egestas LLP | P.O. Box 602, 9878 Quisque Rd. | Kanchrapara | West Bengal | 68935 | Saint Helena, Ascension and Tristan da Cunha | 366-2536 | aliquet.Proin.velit@velitCraslorem.ca |
37 | Madeline | Miles | Sed Dictum Proin Consulting | 5126 Magna Street | Vienna | Wie | 47549 | Iran | 415-2855 | tempor.diam.dictum@ipsum.edu |
38 | Ursula | Collins | Etiam LLC | 739-3307 Dolor, St. | Perquenco | IX | 77862 | Canada | 373-5705 | nulla.magna@neque.ca |
39 | Lydia | Mooney | Nibh Associates | P.O. Box 466, 8034 Eget, Rd. | Cuenca | CM | 38834 | France | 916-9232 | scelerisque.dui.Suspendisse@et.com |
40 | Erica | Gilbert | Et Netus Foundation | 161-7800 Donec Street | Recanati | Marche | 02-639 | Hong Kong | 389-1716 | lectus.Cum.sociis@tellusNunclectus.com |
41 | Colin | Sosa | Est Mollis Industries | 722-5764 Orci St. | Lidköping | Västra Götalands län | 89583 | Dominican Republic | 1-984-137-9736 | at@luctus.net |
42 | Ronan | Ortega | A Magna Lorem Associates | Ap #611-9674 Facilisis Rd. | Tranås | F | 861883 | Zimbabwe | 1-716-666-7634 | aptent.taciti@eteros.net |
43 | Chaim | Lowery | Libero Consulting | Ap #940-5067 Placerat Road | San José de Alajuela | A | 9477 HT | Cambodia | 1-552-651-9739 | posuere@cursusetmagna.com |
44 | Hu | Sandoval | Montes Incorporated | 9707 Consectetuer St. | Niterói | RJ | 28300-192 | Korea, North | 1-922-987-8117 | libero.lacus@hendrerit.ca |
45 | Garrett | Ashley | Est Mauris Ltd | P.O. Box 233, 3054 Nullam Ave | Częstochowa | SL | 7808 | Saint Helena, Ascension and Tristan da Cunha | 1-241-560-2048 | elit.sed@Integereu.edu |
46 | Charles | Guy | Egestas Blandit Associates | 9240 Ac Road | Lidingo | AB | 04-502 | Northern Mariana Islands | 416-3731 | eget@aliquet.net |
47 | Haviva | Coleman | Odio Corporation | 3924 Posuere, Rd. | Płock | Mazowieckie | 2882 | United States Minor Outlying Islands | 161-9695 | nonummy.ac.feugiat@nasceturridiculus.co.uk |
48 | Evelyn | Henry | A Tortor Nunc Corporation | Ap #600-7984 Tincidunt Ave | Gorzów Wielkopolski | Lubuskie | 73-574 | Liberia | 1-335-282-9511 | a.arcu.Sed@elementumlorem.edu |
49 | Joan | Lopez | Commodo Ltd | 932-877 Ornare. Avenue | Grumo Appula | PUG | 5423 | Montenegro | 201-7077 | faucibus.leo.in@sedtortor.co.uk |
50 | Ignatius | Sexton | Varius Corp. | 4474 Etiam St. | Wokingham | BR | 24747 | Armenia | 633-1411 | Nulla@urnaetarcu.com |
51 | Cathleen | Mays | Vitae Sodales Ltd | 703-2698 Cras St. | Boo | AB | 1612 | Belize | 428-7008 | sit@rutrumFuscedolor.edu |
52 | Troy | Robertson | Et Inc. | P.O. Box 607, 5711 Fusce Street | Kisi | OY | 9801 | Kuwait | 451-1455 | in.faucibus.orci@at.com |
53 | Julian | Greer | Risus At PC | 673-7124 Id St. | Kano | KN | 37420 | Congo, the Democratic Republic of the | 732-2513 | ullamcorper.Duis@atauctor.com |
54 | Veda | Shaffer | Dignissim Foundation | Ap #557-287 Morbi St. | Eschwege | Hesse | 88-803 | Liberia | 1-858-903-3424 | ipsum.dolor.sit@lorem.ca |
55 | Yvette | Gilliam | Auctor Inc. | P.O. Box 126, 619 Risus. Street | Vitacura | RM | 8623 | Sint Maarten | 1-443-340-3673 | est@cursuspurus.edu |
56 | Isabella | Chen | Nec Enim Ltd | 5205 Id Road | Boo | Stockholms län | 25207 | Cyprus | 1-185-393-5047 | Mauris@Nuncpulvinararcu.net |
57 | Jael | Acosta | Odio Auctor Corporation | 5411 Dui, Ave | Guelph | Ontario | 6527 | Cayman Islands | 1-903-311-1676 | in.dolor.Fusce@sapien.edu |
58 | Chelsea | Leon | Et Inc. | P.O. Box 991, 134 Amet, Road | Bremerhaven | HB | 16242 | American Samoa | 656-9030 | eu.elit@temporest.net |
59 | Uta | Crosby | Fringilla Porttitor Corp. | P.O. Box 525, 8505 Eleifend, Avenue | Bydgoszcz | KP | 21230 | Pitcairn Islands | 1-368-281-7044 | Fusce.mi.lorem@Curabiturdictum.edu |
60 | Velma | Campbell | Nunc Ac Institute | Ap #482-5223 Mollis Avenue | Los Álamos | Biobío | 2188 HY | Saint Lucia | 1-761-910-9065 | Donec.at.arcu@lobortis.co.uk |
61 | Asher | Estrada | Erat Volutpat Limited | P.O. Box 519, 4167 Lacus. Rd. | Coihueco | VII | 94-259 | Pitcairn Islands | 1-246-348-6492 | auctor@Craseget.ca |
62 | Samson | Hawkins | Felis Consulting | P.O. Box 594, 4266 Purus Rd. | Thisnes | Luik | 1093 | Tanzania | 991-5421 | tincidunt.orci@placeratvelitQuisque.edu |
63 | Oren | Marquez | At Velit LLC | P.O. Box 908, 4922 Eu Street | Brest | BR | 8362 | Tuvalu | 660-1141 | eu.odio.tristique@non.org |
64 | Flynn | Cox | Cursus Limited | 210-5349 Volutpat. Ave | Etawah | Uttar Pradesh | RU09 0WF | Myanmar | 367-1498 | scelerisque.dui@Etiam.co.uk |
65 | Farrah | Padilla | Eros Nam Consulting | 343-3594 Cras Avenue | Périgueux | Aquitaine | 41501 | Niue | 1-813-565-8958 | In.ornare@NullafacilisiSed.net |
66 | Amal | Ortega | Mauris Vel Inc. | Ap #254-7681 Ornare, Street | Delta | British Columbia | JG44 6KK | Rwanda | 1-206-819-1318 | per@maurissagittisplacerat.com |
67 | Ina | Britt | Aliquam Nec Industries | 1756 Imperdiet Rd. | Bellary | Karnataka | 7433 NC | Bouvet Island | 1-769-465-1256 | amet@luctuslobortisClass.ca |
68 | Ebony | Payne | Ridiculus Mus Proin Incorporated | P.O. Box 737, 2427 Nulla Rd. | Jaén | AN | 1027 NM | Turkey | 1-299-369-6636 | Nunc@orci.net |
69 | Phillip | Walton | Eu LLC | 4729 Rhoncus. Road | Oberhausen | North Rhine-Westphalia | 41603 | Algeria | 1-362-664-2345 | leo.in@duinecurna.ca |
70 | Idola | Cummings | Nonummy Ac Feugiat LLC | Ap #260-3761 Nisl Av. | Pamplona | Navarra | 2181 | Anguilla | 909-2751 | mollis@atauctorullamcorper.co.uk |
71 | Iona | Cummings | Adipiscing Mauris Corporation | Ap #911-2955 Ut St. | Gölcük | Koc | 6236 | Myanmar | 383-6797 | eu@maurisid.com |
72 | Kaitlin | Johnson | Mauris Blandit Mattis Incorporated | 243-5814 Vel, Rd. | Valéncia | Comunitat Valenciana | 316840 | Uzbekistan | 553-5198 | eu.tellus.Phasellus@ut.com |
73 | Rudyard | Franks | Mauris Inc. | P.O. Box 409, 3933 Luctus Avenue | Berlin | Berlin | P2G 4J3 | Macao | 1-538-204-7089 | vel.pede.blandit@sem.org |
74 | Devin | Snow | Vel Est PC | P.O. Box 576, 6915 Ipsum Road | Jacksonville | Florida | 26931-660 | Chile | 268-9068 | Donec.luctus@estacfacilisis.co.uk |
75 | Karly | May | Placerat Augue Sed Consulting | 3438 Lacus. Av. | Watson Lake | YK | 66531 | Comoros | 278-0091 | ac@disparturient.co.uk |
76 | Lydia | Tucker | Enim Sit Amet Foundation | P.O. Box 305, 1568 Curabitur Road | Girona | CA | 646871 | Guatemala | 456-8672 | tincidunt.Donec@commodoipsum.ca |
77 | Adrienne | Brennan | Vivamus Industries | P.O. Box 497, 8544 Nunc Rd. | Galway | C | 05492 | Russian Federation | 963-6589 | dui@NullamenimSed.ca |
78 | Moses | Meyer | Tellus Suspendisse Consulting | P.O. Box 210, 7543 Nulla St. | Santa Luzia | Minas Gerais | 70092 | Cuba | 241-4577 | nunc@mattis.co.uk |
79 | Malachi | Whitney | Semper Foundation | P.O. Box 525, 9613 Fusce Avenue | Ipswich | Queensland | SA8 6AG | Sudan | 1-220-633-0209 | consequat.nec.mollis@risusDuis.edu |
80 | Georgia | Dotson | Hendrerit Neque In Foundation | Ap #580-2908 Dolor Ave | Montese | Emilia-Romagna | G9R 2J6 | Belarus | 534-3389 | arcu.Sed@consequat.com |
81 | Jamalia | Livingston | Justo Proin Non Incorporated | 629-2928 Feugiat. Rd. | Sirsa | HR | 69633 | Romania | 1-590-578-5721 | nec.imperdiet.nec@risusquis.net |
82 | Kendall | Odom | Nec Malesuada Ut Company | 1152 Urna St. | Berlin | BE | 5352 BO | India | 659-6462 | laoreet.ipsum@Aeneangravida.org |
83 | Melinda | Ray | Ligula Consulting | Ap #749-6032 Nec Rd. | Buguma | RI | 7211 | Andorra | 1-676-711-3984 | rhoncus@blanditenimconsequat.ca |
84 | Candice | Mcgowan | Magnis Foundation | 411-4228 Purus, Rd. | Kerikeri | North Island | RE2 5GC | Niger | 1-539-344-5841 | lectus.justo.eu@Morbi.com |
85 | Cynthia | Goff | Dolor Quam LLP | 630-8410 Nec Road | Baton Rouge | LA | 26440-786 | Benin | 801-1268 | tempor@vulputaterisus.org |
86 | Lacy | Cook | Donec Egestas Incorporated | Ap #104-8815 Id Av. | Delta | BC | 04-518 | Greenland | 1-200-497-0955 | fermentum.risus@eros.org |
87 | Hashim | Becker | Sed Congue Limited | Ap #904-865 Mollis St. | Curitiba | Paraná | 9692 | Colombia | 1-738-393-2086 | non@adipiscinglobortis.org |
88 | Mallory | Mcdonald | Rhoncus Donec Est PC | 4977 Arcu Road | Istanbul | Ist | PP9 5DG | Faroe Islands | 357-5959 | erat@nonmagna.org |
89 | Avye | Mccarthy | Augue Consulting | 446-3245 Tincidunt Avenue | Stalowa Wola | PK | 94818 | Jersey | 739-5366 | malesuada@lacus.com |
90 | Imelda | Salas | Felis Adipiscing Corp. | P.O. Box 376, 9461 Felis. Av. | Istanbul | Istanbul | 4804 | Italy | 231-3217 | lectus.Nullam@Maecenasiaculis.net |
91 | George | Logan | Aliquet Industries | 665-7226 Mi St. | Rzeszów | PK | 85-392 | Bermuda | 224-2123 | eu.tellus.Phasellus@tellus.ca |
92 | Grady | Hurst | Non Foundation | 3796 Egestas. St. | De Haan | West-Vlaanderen | 70073 | Poland | 800-4640 | congue.turpis.In@Fusce.net |
93 | Yael | Decker | Egestas Urna Institute | Ap #905-2509 Facilisis, Road | Cambridge | North Island | 34078 | Greece | 411-4794 | quis@nec.edu |
94 | Vincent | Decker | Dis Parturient PC | Ap #390-3545 Euismod St. | Makurdi | BE | 102442 | Liechtenstein | 1-554-414-2305 | Phasellus.vitae@pedeSuspendissedui.net |
95 | Winter | Russo | Parturient Montes Corporation | 4105 Sapien Rd. | Lagos | Lagos | 98-831 | Afghanistan | 1-165-112-7031 | Mauris@malesuadautsem.net |
96 | Amethyst | Hurst | Aliquam Gravida Company | 875-6604 Vel, Street | Ipswich | SF | 88170 | French Polynesia | 1-726-984-3750 | ullamcorper@scelerisquescelerisquedui.ca |
97 | Libby | Sherman | Euismod Urna Incorporated | P.O. Box 101, 7274 Nibh Street | Wolkrange | Luxemburg | 18737 | France | 988-2118 | pede.Nunc.sed@vitae.net |
98 | Akeem | Rivers | Purus Institute | 6432 Non, St. | Nicoya | G | 97222-934 | Bosnia and Herzegovina | 330-9191 | mollis@cursusNuncmauris.ca |
99 | Joseph | Powers | Egestas Aliquam Nec Institute | 747-629 Vulputate Avenue | Gouda | Zuid Holland | 11798 | Syria | 1-547-248-7927 | Proin.nisl@ametlorem.co.uk |
100 | Sade | Foley | Phasellus Company | Ap #663-2135 Mollis. Av. | Kuşadası | Aydın | 7039 | Zambia | 1-638-747-8408 | pellentesque.tellus.sem@penatibuset.edu |
My footer text |
Fake sample data courtesy generatedata.com.
Play with the options!
Contact
For more information, please feel free to reach out to me using Github issues, or via the contact methods on my home page.