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 | Unpaid | Credit Card | $269.99 |
| INV002 | Unpaid | Credit Card | $860.94 |
| INV003 | Pending | Credit Card | $450.62 |
| INV004 | Pending | Bank Transfer | $624.78 |
| INV005 | Pending | Credit Card | $577.80 |
| INV006 | Paid | PayPal | $162.86 |
| INV007 | Pending | Credit Card | $483.32 |
| Total | $3,430.31 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kendrick Tillman | Future Metrics Facilitator | kendrick_tillman@yahoo.com | Viewer | |
| Janet Kuhic-Bauch | Human Assurance Designer | janet_kuhic-bauch77@hotmail.com | Admin | |
| Alexzander White | Legacy Factors Director | alexzander_white23@hotmail.com | Member | |
| Caroline Bartell | National Usability Associate | caroline_bartell65@gmail.com | Viewer | |
| Marilie Luettgen | Forward Quality Specialist | marilie_luettgen40@yahoo.com | Admin | |
| Lori O'Connell | Principal Accounts Developer | lori.oconnell80@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 |
|---|---|---|
Kailey Schamberger District Infrastructure Strategist kailey_schamberger41@gmail.com | Viewer | |
Flavio O'Reilly National Marketing Specialist flavio_oreilly58@hotmail.com | Viewer | |
Juston Powlowski Direct Marketing Engineer juston.powlowski@yahoo.com | Admin | |
Annamae Durgan National Group Assistant annamae_durgan@yahoo.com | Viewer | |
Ericka Goyette Corporate Infrastructure Assistant ericka.goyette13@hotmail.com | Member | |
Mafalda Lindgren Corporate Solutions Planner mafalda.lindgren52@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Herman Becker Legacy Branding Architect herman_becker21@gmail.com | Admin | |
Camren Zulauf Future Paradigm Assistant camren_zulauf11@hotmail.com | Viewer | |
Renee Morissette Product Response Technician renee_morissette89@gmail.com | Admin | |
Adam Dietrich Customer Applications Agent adam_dietrich@hotmail.com | Viewer | |
Janick Bayer Regional Metrics Liaison janick.bayer@yahoo.com | Member | |
Tyrique Tremblay Chief Quality Officer tyrique_tremblay@yahoo.com | Viewer | |
Jonatan Grant Internal Optimization Representative jonatan_grant@hotmail.com | Viewer | |
Arnaldo Predovic Principal Markets Associate arnaldo.predovic48@gmail.com | Admin | |
Pablo Kuvalis Human Operations Liaison pablo_kuvalis57@yahoo.com | Admin | |
Dessie Hand-Labadie Senior Marketing Assistant dessie_hand-labadie@gmail.com | Admin | |
Ara Stanton Senior Accounts Consultant ara.stanton56@gmail.com | Admin | |
Maggie Hodkiewicz Lead Security Facilitator maggie_hodkiewicz97@yahoo.com | Member | |
Gladyce Volkman-Bartell Global Usability Orchestrator gladyce.volkman-bartell55@hotmail.com | Viewer | |
Marley Fritsch Investor Operations Director marley.fritsch@gmail.com | Viewer | |
Susana Kovacek Dynamic Communications Agent susana.kovacek55@yahoo.com | Member | |
Loy Grimes International Applications Coordinator loy.grimes@yahoo.com | Member | |
Wallace Brekke International Functionality Supervisor wallace.brekke78@gmail.com | Member | |
Sonia Grady Corporate Interactions Officer sonia_grady6@gmail.com | Member | |
Yoshiko Zulauf Senior Accountability Specialist yoshiko.zulauf94@yahoo.com | Viewer | |
Rosanna Effertz Global Creative Representative rosanna.effertz39@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 | |
|---|---|---|---|---|
| Alex Metz | katrina_moen4@gmail.com | Elainaboro | Inactive | $1,126.62 |
| Glenda Douglas | darrin_russel@gmail.com | Coleport | Inactive | $216.29 |
| Jared Runolfsson | kylee35@hotmail.com | Ernserland | Inactive | $863.59 |
| Kristopher Zieme Sr. | dwight98@hotmail.com | West Bobbiechester | Active | $573.68 |
| Tami Kris | benjamin_bosco76@hotmail.com | Rupertborough | Active | $935.81 |
| Total | $3,715.99 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Hope Terry @arthur70 | mason72@yahoo.com | Tonawanda | Active | $133.83 |
Karl Kuphal @kellen78 | lenore.rowe3@hotmail.com | Doyleport | Active | $1,076.80 |
Rufus Carter @cortez10 | krystal_keebler35@hotmail.com | Baton Rouge | Inactive | $795.03 |
Chad Lemke @kellie.koss | kianna.huels93@gmail.com | Lorain | Active | $1,101.82 |
Diane Pagac-Blanda @salvador.hansen29 | darwin.weber@hotmail.com | Edmond | Inactive | $943.55 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Muriel Barrows | graham_macgyver@hotmail.com | Torpfort | Inactive | $1,083.46 |
| Michael Reilly | hulda.barton@gmail.com | Port Alysonton | Inactive | $428.33 |
| Maxine Schumm MD | eugenia_ryan@gmail.com | Thielfurt | Inactive | $993.72 |
| Karl Johns | rico13@hotmail.com | Sterling Heights | Active | $0.77 |
| Tanya Lueilwitz | aletha_lebsack@gmail.com | Lake Dewitt | Active | $1,117.10 |
| Total | $3,623.38 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yolanda Nicolas | sidney_hilll-jakubowski41@yahoo.com | Vladimirstad | Inactive | $1,001.70 |
| Allen Kilback | rodolfo.beatty-kozey95@hotmail.com | South Caryborough | Active | $268.27 |
| Clarence Nitzsche | bell.friesen@yahoo.com | Cuyahoga Falls | Inactive | $529.65 |
| Neil Walsh I | claude_adams@hotmail.com | Port Marcelo | Inactive | $192.53 |
| Mr. Cedric Raynor II | bertrand.mayert12@yahoo.com | Rockford | Inactive | $19.99 |
| Total | $2,012.14 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Margie Schulist IV | darrion_abshire11@gmail.com | Alfordstad | Active | $904.41 |
| Maryann Hayes Sr. | duncan89@yahoo.com | New Oriestad | Inactive | $1,107.92 |
| Angela Daniel | amani66@yahoo.com | Reading | Active | $913.37 |
| Patty Rodriguez | pearl5@gmail.com | Fort Evansstad | Inactive | $446.17 |
| Miss Stephanie Ledner | chet.lockman77@yahoo.com | Ludwigboro | Active | $1,156.44 |
| Total | $4,528.31 | |||
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 | ||
|---|---|---|---|---|---|
| Kristina Stehr | nyah_dooley21@hotmail.com | Denton | Active | $308.17 | |
| Lloyd Lesch | randal_berge@hotmail.com | New Ryderstead | Inactive | $811.35 | |
| Mr. Clayton Ritchie | grant99@hotmail.com | Stantonville | Active | $1,130.34 | |
| Mr. Scott Hammes | amy_okuneva63@hotmail.com | Oshkosh | Inactive | $1,168.99 | |
| Eileen Dickinson | marian_lakin92@gmail.com | Hudsonborough | Active | $1,095.47 | |
| Total | $4,514.32 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Patsy Heathcote | darian.kling@gmail.com | Hampton | Active | $1,074.92 | |
| Garrett Ernser MD | kaylie_friesen@yahoo.com | Tuscaloosa | Inactive | $95.82 | |
| Tommy Hoppe | aiyana.jast@yahoo.com | West Camilla | Inactive | $363.33 | |
| Dean Windler | keon39@yahoo.com | North Darrellhaven | Active | $976.56 | |
| Elsie Hickle | ulises29@hotmail.com | Sylviacester | Active | $1,021.31 | |
| Total | $3,531.94 | ||||
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 | |
|---|---|---|---|---|
| Mr. Christian Brekke | amber.schmeler36@gmail.com | South Rhett | Inactive | $745.69 |
| Manuel Nienow | lenny.haag38@yahoo.com | South Jeffport | Active | $214.24 |
| Kendra Farrell | zoey28@hotmail.com | Hartford | Active | $734.56 |
| Miss Rachel Kuhlman | ephraim_walter36@hotmail.com | Fishers | Inactive | $271.62 |
| Nora Mayer | jaydon_cormier78@yahoo.com | Destinboro | Inactive | $658.74 |
| Bobby Hyatt | vern.sanford@hotmail.com | Furmancester | Inactive | $208.19 |
| Lynette Huel | aubrey_ward@yahoo.com | Lake Calistaworth | Active | $999.34 |
| Debra Hermiston | verna.gleason@hotmail.com | West Chesterfield | Active | $551.31 |
| Tina Hermiston IV | carolyne_mclaughlin44@gmail.com | Jacobsonstad | Inactive | $760.16 |
| Marguerite Christiansen | okey_wuckert38@gmail.com | Katharinafield | Inactive | $384.53 |
| Miss Rose Ritchie | javonte.deckow@hotmail.com | Savannahtown | Inactive | $691.20 |
| Stewart Ryan | margaretta.murray@gmail.com | Christianacester | Active | $596.85 |
| Doreen Weimann | jerod_ondricka@yahoo.com | Fort Elenaview | Inactive | $918.50 |
| Greg Quitzon | floy36@yahoo.com | Fort Nathenborough | Inactive | $530.17 |
| Alton Quitzon | kieran55@yahoo.com | Dexterside | Active | $694.24 |
| Total | $8,959.34 | |||
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 |