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 | Paid | Credit Card | $438.38 |
| INV002 | Pending | Credit Card | $562.00 |
| INV003 | Unpaid | Credit Card | $701.93 |
| INV004 | Pending | Bank Transfer | $305.52 |
| INV005 | Pending | Bank Transfer | $711.78 |
| INV006 | Pending | Credit Card | $509.11 |
| INV007 | Unpaid | Credit Card | $237.81 |
| Total | $3,466.53 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Antoinette Smitham | Central Metrics Analyst | antoinette.smitham22@hotmail.com | Viewer | |
| Eulah Dickinson | Product Directives Coordinator | eulah_dickinson@yahoo.com | Member | |
| Josefina Cassin | Lead Group Architect | josefina_cassin65@hotmail.com | Member | |
| Alisa Roob | Forward Research Specialist | alisa_roob@hotmail.com | Member | |
| Jarred Weissnat | Lead Functionality Engineer | jarred.weissnat44@gmail.com | Member | |
| Emmett Padberg | District Paradigm Associate | emmett.padberg16@hotmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mariela Weimann Future Markets Producer mariela_weimann@hotmail.com | Admin | |
Jill Ruecker Corporate Program Designer jill_ruecker@hotmail.com | Member | |
Antoinette McDermott Direct Mobility Officer antoinette_mcdermott12@hotmail.com | Member | |
Nathan Bauch-Schaefer Corporate Tactics Architect nathan_bauch-schaefer85@yahoo.com | Admin | |
Nelson Brekke Global Branding Engineer nelson_brekke@hotmail.com | Member | |
Nya Zboncak Chief Applications Manager nya_zboncak30@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Adriel Murray Forward Usability Specialist adriel.murray26@hotmail.com | Member | |
Clarence Legros Central Accountability Executive clarence_legros96@gmail.com | Admin | |
Jalen Legros Global Marketing Developer jalen_legros@hotmail.com | Member | |
Ron Paucek Customer Identity Agent ron.paucek@yahoo.com | Member | |
Alessandro Brakus Direct Markets Executive alessandro_brakus36@hotmail.com | Viewer | |
Elena West-Jenkins Regional Infrastructure Director elena.west-jenkins@hotmail.com | Viewer | |
Donny Schultz Central Brand Engineer donny_schultz94@hotmail.com | Member | |
Andreanne Stehr Internal Paradigm Associate andreanne_stehr83@hotmail.com | Admin | |
Tyler Brekke Lead Paradigm Associate tyler.brekke33@hotmail.com | Member | |
Cynthia Larkin Global Program Agent cynthia.larkin@hotmail.com | Member | |
Arnold Farrell Chief Mobility Orchestrator arnold_farrell@yahoo.com | Admin | |
Lynn Champlin Global Intranet Planner lynn_champlin74@gmail.com | Viewer | |
Kiarra Spencer Global Security Officer kiarra.spencer24@gmail.com | Viewer | |
Wyatt White-Kozey Dynamic Optimization Assistant wyatt_white-kozey10@gmail.com | Admin | |
Jasmine Crona Regional Directives Administrator jasmine_crona39@gmail.com | Viewer | |
Ellen Wisozk Internal Intranet Facilitator ellen.wisozk96@gmail.com | Viewer | |
Orion Langworth Product Usability Strategist orion.langworth50@yahoo.com | Viewer | |
Philip Mueller Senior Applications Technician philip.mueller@hotmail.com | Member | |
Audreanne VonRueden Chief Configuration Engineer audreanne.vonrueden@gmail.com | Member | |
Ervin Fadel Internal Infrastructure Architect ervin.fadel@yahoo.com | Admin |
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 | |
|---|---|---|---|---|
| Donna Stokes | julian.durgan16@hotmail.com | Fort Jim | Inactive | $953.85 |
| Lorine Ryan | triston.metz86@hotmail.com | Reillyberg | Inactive | $909.42 |
| Sigmund Mohr-Bergnaum | ferne48@hotmail.com | Littlefield | Active | $180.17 |
| Lorene Daniel | jorge96@gmail.com | Rohan-Ziemefield | Active | $483.18 |
| Zoey Hilpert | sydnie.hauck@yahoo.com | Boscocester | Active | $452.44 |
| Total | $2,979.06 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bruce White @diego_williamson | laney.hoppe-greenfelder46@yahoo.com | Lake Taurean | Inactive | $462.06 |
Hilbert Johnston @amy94 | lana_collins16@yahoo.com | Lake Katiefield | Inactive | $888.61 |
Kyleigh Daniel @lucia.beier | tom.kreiger60@hotmail.com | Scottsdale | Inactive | $965.06 |
Breana Wiegand @andy.simonis | sallie_labadie7@gmail.com | Samantashire | Inactive | $604.17 |
Flavie Schuster @allie.stamm | juanita38@yahoo.com | Lake Anissachester | Inactive | $1,081.09 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josh Feil | hope37@gmail.com | Port Soniacester | Active | $357.20 |
| Maximillian McKenzie | abigayle18@gmail.com | Greeley | Active | $1,189.91 |
| Cecilia Gorczany-Koelpin | henry.hoppe@gmail.com | Fort Gerhard | Inactive | $721.91 |
| Mr. Keith Collier | shana66@yahoo.com | Castle Rock | Inactive | $451.61 |
| Patience Konopelski | emerson_muller@yahoo.com | Port Allison | Active | $988.51 |
| Total | $3,709.14 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marta Blick | ida_fadel@hotmail.com | Port Lizethburgh | Active | $460.15 |
| Gene Maggio V | edward.howell12@gmail.com | Port Estelberg | Active | $489.23 |
| Hailie Jakubowski | ervin58@hotmail.com | Grand Junction | Active | $645.36 |
| Karl Senger | sheila_zboncak@gmail.com | Camilleworth | Inactive | $608.61 |
| Lysanne Hagenes | paul_macejkovic@gmail.com | Garlandbury | Inactive | $893.69 |
| Total | $3,097.04 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kristen Boyle | jany_predovic@yahoo.com | Lessieside | Active | $105.98 |
| Mckenzie Gibson | gabrielle8@hotmail.com | East Wade | Inactive | $23.08 |
| Nancy Emmerich | thad34@yahoo.com | Haagstead | Active | $802.51 |
| Kayley Stark | gussie_cormier23@yahoo.com | East Ann | Active | $478.85 |
| Samir Klocko | aaron.paucek32@gmail.com | Daphneyland | Inactive | $486.02 |
| Total | $1,896.44 | |||
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 | ||
|---|---|---|---|---|---|
| Eduardo Kozey | rosina_goyette-hudson@gmail.com | Wuckertville | Active | $0.46 | |
| Kristy Turner | jarrell0@hotmail.com | Schummmouth | Active | $1,011.66 | |
| Cary Waters | kay.johns@hotmail.com | Fishers | Active | $280.25 | |
| Marc Daniel | vita_russel@hotmail.com | Essiechester | Inactive | $1,012.37 | |
| Ignacio Lowe | jacob45@gmail.com | New Marycester | Inactive | $539.40 | |
| Total | $2,844.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Sterling Mertz | katie49@yahoo.com | Spring | Active | $1,127.31 | |
| Dallas Ullrich | philip.nolan@gmail.com | Reynoldsside | Active | $425.34 | |
| Howard Simonis | joshuah_beatty@gmail.com | Gulfport | Inactive | $555.98 | |
| Amelia Stark | gerald_cormier91@gmail.com | Dachfurt | Inactive | $240.17 | |
| Myra Wisozk | kane52@hotmail.com | Port Einoshire | Active | $1,055.80 | |
| Total | $3,404.60 | ||||
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 | |
|---|---|---|---|---|
| Americo Ankunding | corey89@yahoo.com | Morgan Hill | Inactive | $147.29 |
| Lena Parisian | hans.kunde52@hotmail.com | North Hattie | Inactive | $629.22 |
| Lesley Collier | susie_cummings@yahoo.com | Bergstromboro | Active | $378.99 |
| Heather Boehm | neva.waters21@hotmail.com | Quitzonstead | Active | $650.80 |
| Anne Lockman | jerel64@yahoo.com | Jerrellmouth | Active | $1,133.78 |
| Laron Purdy | jamal.block@hotmail.com | Doylestad | Inactive | $979.71 |
| Sophie Bogan | cassandra_jakubowski@hotmail.com | Angelicastead | Inactive | $782.49 |
| Retta Mueller | candida_torphy11@gmail.com | Maryjaneland | Inactive | $1,067.64 |
| Shea Toy | alice.senger@yahoo.com | Lenexa | Active | $328.53 |
| Krystal Jacobs | jayme30@gmail.com | Lowell | Active | $611.30 |
| Francisco Muller | violet_windler60@yahoo.com | New Marianatown | Active | $517.64 |
| Mrs. Jeannette O'Reilly | tracey_mills@yahoo.com | Barrowsville | Active | $1,008.73 |
| Shelly Bernier | naomie.hayes15@hotmail.com | Feilstad | Inactive | $234.43 |
| Beverly Halvorson | tatyana.konopelski94@gmail.com | Kulasberg | Active | $1,054.88 |
| Kristie Braun | leo30@hotmail.com | Dearborn | Active | $155.38 |
| Total | $9,680.81 | |||
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 |