Table
A responsive table component.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic example
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Pending | PayPal | $800.66 |
| INV002 | Paid | Bank Transfer | $352.28 |
| INV003 | Paid | Credit Card | $519.87 |
| INV004 | Paid | Bank Transfer | $893.45 |
| INV005 | Paid | Credit Card | $339.75 |
| INV006 | Paid | PayPal | $413.63 |
| INV007 | Unpaid | Credit Card | $331.07 |
| Total | $3,650.71 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lexi Lind | Investor Security Specialist | lexi_lind@gmail.com | Admin | |
| Bill Kub | Legacy Marketing Orchestrator | bill.kub15@hotmail.com | Admin | |
| Trever Christiansen | Direct Directives Technician | trever.christiansen58@yahoo.com | Viewer | |
| Efren Bayer | Central Program Consultant | efren.bayer@hotmail.com | Viewer | |
| Darryl Swift | Customer Solutions Executive | darryl.swift93@gmail.com | Admin | |
| Ariel Daniel | Principal Group Specialist | ariel.daniel6@gmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Benjamin Brekke Human Factors Facilitator benjamin_brekke97@gmail.com | Member | |
Christy O'Keefe Regional Functionality Engineer christy.okeefe@hotmail.com | Viewer | |
Jeffrey Rolfson Customer Paradigm Associate jeffrey.rolfson@hotmail.com | Viewer | |
John McClure Central Response Manager john.mcclure@yahoo.com | Member | |
Ana Wolff Global Configuration Facilitator ana.wolff40@gmail.com | Admin | |
Ryleigh Berge National Optimization Designer ryleigh_berge@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Tyler Ryan Dynamic Mobility Orchestrator tyler_ryan58@yahoo.com | Viewer | |
Keyon Huel Future Markets Representative keyon_huel@yahoo.com | Member | |
Luigi Leffler Future Usability Architect luigi.leffler58@hotmail.com | Member | |
Uriel Effertz International Markets Coordinator uriel_effertz@yahoo.com | Admin | |
Arlene Buckridge Dynamic Interactions Orchestrator arlene.buckridge32@gmail.com | Admin | |
Lelia Stoltenberg Regional Mobility Executive lelia.stoltenberg23@gmail.com | Member | |
Clarence Wuckert Senior Configuration Technician clarence_wuckert@gmail.com | Viewer | |
Emily Hodkiewicz Chief Research Director emily.hodkiewicz76@gmail.com | Member | |
Sarai Hilll Dynamic Creative Planner sarai.hilll@hotmail.com | Viewer | |
Danyka Deckow Chief Accounts Analyst danyka_deckow@hotmail.com | Admin | |
Grover Rutherford National Research Representative grover_rutherford35@hotmail.com | Admin | |
Roland Grimes Customer Creative Architect roland.grimes@hotmail.com | Viewer | |
Mohammed Kuhn Product Usability Executive mohammed.kuhn@hotmail.com | Member | |
Dewey Kutch Regional Optimization Representative dewey.kutch94@yahoo.com | Member | |
Karianne Herzog Legacy Configuration Liaison karianne.herzog82@yahoo.com | Viewer | |
Roosevelt Rice International Marketing Technician roosevelt_rice45@yahoo.com | Member | |
Clifton Buckridge Dynamic Program Consultant clifton.buckridge81@gmail.com | Viewer | |
Anya McLaughlin Internal Integration Representative anya_mclaughlin82@hotmail.com | Member | |
Gudrun Ledner International Directives Supervisor gudrun_ledner1@yahoo.com | Viewer | |
Hugo Hand Investor Marketing Assistant hugo.hand@yahoo.com | Member |
Origin UI Examples
These are some examples that I found today over here Origin UI ❤️. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
Basic Table
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sheryl Muller | sarah.flatley@gmail.com | Rennerburgh | Active | $379.92 |
| Rebecca Hauck | julianne_thiel26@yahoo.com | Tessiefort | Active | $70.28 |
| Esta Hoppe | lucia73@yahoo.com | Joliet | Active | $999.04 |
| Edmund Bogan Jr. | edwin_lesch93@hotmail.com | Funkview | Active | $240.97 |
| Wellington Prohaska | jeanne.grimes-bergstrom80@gmail.com | Vista | Inactive | $549.56 |
| Total | $2,239.77 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Johathan Kassulke @chadd37 | bernita_adams@yahoo.com | Ankundingberg | Inactive | $921.66 |
Sheri Swift @ima60 | minnie.rogahn-wunsch@yahoo.com | Schuppeburgh | Active | $725.26 |
Kenneth McDermott @mitchel67 | loma_bauch63@gmail.com | Swaniawskifurt | Active | $529.83 |
Ellie Rath @erna.heller24 | kaia.heathcote@gmail.com | West Ashlee | Inactive | $1,052.75 |
Lee Thiel @marlin_koepp82 | terence.schaefer@hotmail.com | Joannstead | Active | $99.26 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Carlton Hettinger | kallie38@hotmail.com | Kayleeburgh | Active | $231.85 |
| Blake Crooks-O'Connell | terri27@yahoo.com | Mount Vernon | Active | $783.39 |
| Mavis Crooks | kristopher32@gmail.com | Norman | Active | $778.33 |
| Mr. Demond Weissnat | kristie_johnston84@yahoo.com | Stevenstad | Inactive | $276.96 |
| Alexandra Will-Greenfelder | lewis_conn52@gmail.com | Fort Dock | Inactive | $991.42 |
| Total | $3,061.95 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Therese Carroll | tammy82@gmail.com | Santa Rosa | Inactive | $422.93 |
| Carli Rodriguez | susanna.prosacco@yahoo.com | Niagara Falls | Active | $62.57 |
| Shari Murazik | ashley_jakubowski9@gmail.com | Estefaniahaven | Inactive | $454.63 |
| Jared Jerde | gretchen.gleichner@yahoo.com | Doloresstead | Active | $843.32 |
| Delbert Ruecker | marie_zulauf@yahoo.com | Johnstoncester | Active | $117.02 |
| Total | $1,900.47 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Orin Jacobson | claud99@yahoo.com | Sheridanburgh | Inactive | $778.95 |
| Ophelia Kuhlman | reinhold_zieme32@gmail.com | West Adan | Active | $45.07 |
| Kaycee Mosciski | lloyd_wehner31@gmail.com | Port Doris | Inactive | $878.07 |
| Minnie Kihn | marsha.zemlak@gmail.com | Sipesbury | Active | $158.81 |
| Mike Rau | robbie.kuhic20@gmail.com | Walshport | Inactive | $701.90 |
| Total | $2,562.80 | |||
Table with vertical lines
Dense Table
| Name | Release Year | Developer | Typing | Paradigm | Extension | Latest Version | Popularity |
|---|---|---|---|---|---|---|---|
| JavaScript | 1995 | Brendan Eich | Dynamic | Multi-paradigm | .js | ES2021 | High |
| Python | 1991 | Guido van Rossum | Dynamic | Multi-paradigm | .py | 3.10 | High |
| Java | 1995 | James Gosling | Static | Object-oriented | .java | 17 | High |
| C++ | 1985 | Bjarne Stroustrup | Static | Multi-paradigm | .cpp | C++20 | High |
| Ruby | 1995 | Yukihiro Matsumoto | Dynamic | Multi-paradigm | .rb | 3.0 | Low |
Dense table
Row Selection
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Abdul Kihn | autumn74@gmail.com | Port Lisetteboro | Active | $415.12 | |
| Solon Koelpin | antonia_oreilly@hotmail.com | Moore | Active | $236.20 | |
| Briana Spencer | adriana_wunsch-crona@yahoo.com | Summerville | Active | $216.41 | |
| Miss Ann Auer | dianne_feil@gmail.com | Lake Forrest | Inactive | $686.82 | |
| Dr. Dariana Bartell | leroy3@yahoo.com | Teresatown | Active | $954.69 | |
| Total | $2,509.24 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Araceli Kunde II | marge_goodwin@yahoo.com | West Lavern | Inactive | $112.41 | |
| Caroline Crona | alvah_volkman@gmail.com | New Jillianworth | Active | $540.55 | |
| Rosemarie Franey | tyrone_lindgren35@yahoo.com | Lake Andyburgh | Active | $380.81 | |
| Evelyn Fadel | earl.senger@yahoo.com | Juanport | Active | $53.35 | |
| Dr. Isac Mohr | henri44@yahoo.com | East Leilastead | Active | $229.61 | |
| Total | $1,316.73 | ||||
Table with row selection
Vertical Table
| Name | David Kim |
| d.kim@company.com | |
| Location | Seoul, KR |
| Status | Active |
| Balance | $1,000.00 |
Vertical table
Sticky Header 2
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marc Boehm | buford.leannon38@gmail.com | West Bert | Inactive | $671.42 |
| Lemuel Nienow | brendan_russel@hotmail.com | Swaniawskishire | Active | $973.00 |
| Chaz Carroll II | jonathon_wuckert83@yahoo.com | Keyshawnburgh | Active | $616.49 |
| Omar Reilly | pam_oconner5@hotmail.com | Port Neal | Inactive | $362.74 |
| Anthony Rodriguez | madonna.gislason@gmail.com | Kosston | Active | $1,194.74 |
| Kendrick Mueller | mike_hegmann@yahoo.com | North Soniaborough | Inactive | $197.86 |
| Mrs. Kali Jacobi | edward60@yahoo.com | Bartlett | Inactive | $101.03 |
| Sibyl Mraz DDS | whitney_little@gmail.com | West Hubert | Inactive | $20.15 |
| Lawrence Leuschke | alexandro_donnelly87@hotmail.com | Camden | Active | $802.57 |
| Miss Lucy Abernathy | denis.wilkinson7@gmail.com | Larsonboro | Inactive | $659.30 |
| Pablo Johnston | wesley.shields@hotmail.com | Uptontown | Active | $1,142.51 |
| Phil Witting | tom65@gmail.com | Morissetteburgh | Inactive | $885.47 |
| Ms. Dianne Baumbach DDS | kristen84@hotmail.com | New Genesis | Inactive | $383.16 |
| Randy Schoen | reva7@hotmail.com | Mayerport | Inactive | $257.97 |
| Carole Reichel | kayla_harber88@gmail.com | North Christietown | Active | $356.25 |
| Total | $8,624.66 | |||
Table with sticky header
Browser Support
| Desktop browsers | Mobile browsers | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox Android | Opera Android | Safari iOS | Samsung Internet | |
| scroll-timeline | Supported 115 | Supported 115 | Not supported 111 | Supported 101 | Not supported No | Supported 115 | Not supported No | Supported 77 | Not supported No | Supported 23 |
| view-timeline | Supported 115 | Supported 115 | Not supported 114 | Supported 101 | Not supported No | Supported 115 | Not supported No | Supported 77 | Not supported No | Supported 23 |
| font-size-adjust | Supported 127 | Supported 127 | Not supported 3 | Supported 113 | Supported 16.4 | Supported 127 | Supported 4 | Supported 84 | Supported 16.4 | Not supported No |