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 | PayPal | $377.98 |
| INV002 | Pending | PayPal | $342.45 |
| INV003 | Unpaid | Credit Card | $372.59 |
| INV004 | Pending | Credit Card | $530.90 |
| INV005 | Unpaid | Credit Card | $944.14 |
| INV006 | Pending | Bank Transfer | $838.44 |
| INV007 | Unpaid | Credit Card | $429.82 |
| Total | $3,836.32 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Margie Kassulke | Lead Tactics Supervisor | margie.kassulke@gmail.com | Member | |
| Emmalee Toy | Central Infrastructure Orchestrator | emmalee.toy@gmail.com | Member | |
| Dan Boyer | Principal Brand Administrator | dan.boyer@gmail.com | Member | |
| Webster Willms | Product Data Supervisor | webster.willms@yahoo.com | Viewer | |
| Pamela Prohaska | Principal Group Orchestrator | pamela_prohaska@yahoo.com | Viewer | |
| Mitchel Heidenreich | Internal Accounts Coordinator | mitchel_heidenreich69@hotmail.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 |
|---|---|---|
Spencer Schiller Human Program Consultant spencer_schiller@yahoo.com | Member | |
Stanton Bergstrom Human Mobility Analyst stanton.bergstrom55@gmail.com | Admin | |
Gerardo Kertzmann Product Marketing Strategist gerardo_kertzmann@yahoo.com | Viewer | |
Jackson Conn Regional Functionality Strategist jackson.conn80@gmail.com | Viewer | |
Yvette Schultz Senior Communications Representative yvette_schultz32@gmail.com | Viewer | |
Shawna Herzog Investor Research Developer shawna.herzog@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Elmira Olson Senior Implementation Strategist elmira.olson37@hotmail.com | Viewer | |
Leonor Tillman Internal Marketing Analyst leonor_tillman27@hotmail.com | Viewer | |
Esperanza O'Reilly-Herzog Lead Creative Engineer esperanza.oreilly-herzog38@hotmail.com | Viewer | |
Miranda Jaskolski Dynamic Brand Liaison miranda.jaskolski@hotmail.com | Viewer | |
Boyd Kautzer Legacy Integration Architect boyd.kautzer@gmail.com | Member | |
Kenyatta Kuphal International Identity Agent kenyatta.kuphal@hotmail.com | Member | |
Glenda Green Future Solutions Strategist glenda.green@yahoo.com | Viewer | |
Irene Funk National Optimization Executive irene.funk50@hotmail.com | Admin | |
Cruz Schowalter Forward Directives Specialist cruz_schowalter@hotmail.com | Admin | |
Anthony Franecki Senior Branding Officer anthony.franecki@yahoo.com | Admin | |
Grayson Hudson Forward Directives Designer grayson_hudson99@yahoo.com | Member | |
Randal Larkin-Hand Forward Creative Planner randal.larkin-hand@hotmail.com | Admin | |
Vickie Lakin-Reichert Lead Functionality Agent vickie_lakin-reichert42@gmail.com | Viewer | |
Benny Padberg International Security Coordinator benny.padberg98@gmail.com | Viewer | |
Kaia Greenfelder Product Operations Liaison kaia.greenfelder@yahoo.com | Admin | |
Vicki Baumbach District Brand Consultant vicki.baumbach@yahoo.com | Member | |
Abe Casper Investor Solutions Developer abe.casper58@gmail.com | Member | |
Kareem Leannon Lead Factors Director kareem_leannon52@gmail.com | Viewer | |
Kaela Feil Regional Solutions Engineer kaela.feil@gmail.com | Member | |
Nella Schoen National Security Manager nella.schoen@hotmail.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 | |
|---|---|---|---|---|
| Joel McLaughlin | kellen_raynor50@gmail.com | Patsyville | Active | $549.04 |
| Aliya Barrows | elizabeth21@yahoo.com | Patsyworth | Active | $829.71 |
| Cesar Shields | edward_bergstrom69@hotmail.com | New Herbert | Active | $655.55 |
| Jarrod West | ocie_harris59@hotmail.com | Norfolk | Active | $323.20 |
| Claire Nitzsche | hulda_huel20@hotmail.com | Mount Vernon | Active | $975.04 |
| Total | $3,332.54 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tanya Nitzsche @aurore.kutch | lon_harber88@hotmail.com | Garrettboro | Inactive | $535.39 |
Malcolm Klocko @pietro_halvorson | ulises58@hotmail.com | Jonesboro | Inactive | $184.10 |
Ms. Kurt Murray II @vaughn45 | santiago_cremin92@hotmail.com | Lake Janiyaside | Active | $691.31 |
Eulah Swift @doreen_welch | allison90@gmail.com | Adolfchester | Active | $1,001.97 |
Jennie Nitzsche @burdette53 | lucas_flatley80@hotmail.com | Hintzbury | Inactive | $1,185.62 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darron Kshlerin | freddie_hilpert19@yahoo.com | North Durwardshire | Active | $542.10 |
| Ashley Reichert MD | donna_roberts@yahoo.com | Kiehnburgh | Inactive | $399.46 |
| Nick Wyman | grace_torp73@gmail.com | North Seantown | Active | $952.46 |
| Blanca Luettgen PhD | heather91@hotmail.com | Dorcasside | Inactive | $1,137.98 |
| Hazel Cummings | mercedes45@hotmail.com | Schambergerburgh | Inactive | $1,036.36 |
| Total | $4,068.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sergio Renner | gretchen.boyle@yahoo.com | Edina | Inactive | $258.28 |
| Patsy Franey | nya29@gmail.com | Pasadena | Active | $539.75 |
| Dr. Dovie Beer | ivan99@hotmail.com | Anaheim | Active | $493.71 |
| Grace Bednar | marshall4@yahoo.com | Stammboro | Active | $482.69 |
| Jamie Heathcote III | lisa31@gmail.com | Jerdeside | Active | $41.74 |
| Total | $1,816.17 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marjorie O'Conner | maye.hagenes@hotmail.com | Kannapolis | Inactive | $760.89 |
| Raymundo Hagenes | norma.barton@gmail.com | North Loychester | Active | $734.44 |
| Mr. Krystal Upton | lisette63@gmail.com | Herminiotown | Inactive | $300.02 |
| Alejandro Ortiz | wilfred_jenkins@hotmail.com | Fort Smith | Inactive | $191.65 |
| Jettie Rutherford | javier.douglas@hotmail.com | Lake Bernice | Active | $72.04 |
| Total | $2,059.04 | |||
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 | ||
|---|---|---|---|---|---|
| Shelley Crona-Pfannerstill | ricardo.johnston83@hotmail.com | Fort Bettieshire | Inactive | $530.54 | |
| Lynn Gottlieb | matt.rodriguez@hotmail.com | Port Rosie | Active | $251.30 | |
| Jared McLaughlin-Kerluke | jonathon50@hotmail.com | East Valentinastead | Inactive | $586.42 | |
| Sandra Dickinson | brad_metz@yahoo.com | Port Aimee | Inactive | $136.46 | |
| Nellie Hermiston | isidro.berge@yahoo.com | Linaland | Active | $242.42 | |
| Total | $1,747.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Diane Koepp | elliot.johnston@hotmail.com | Rochester | Active | $898.02 | |
| Traci Wintheiser | peggy_oconnell-bauch@hotmail.com | Port Talon | Active | $112.99 | |
| Lisette Waelchi | betsy_wehner10@yahoo.com | Fort Ardellafort | Active | $1,032.10 | |
| Vickie Funk | esmeralda50@hotmail.com | Nolaworth | Active | $725.43 | |
| Ollie Hand | brandi_botsford@hotmail.com | Fort Mariahmouth | Inactive | $569.66 | |
| Total | $3,338.20 | ||||
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 | |
|---|---|---|---|---|
| Ariane Daniel | virgil_leuschke@gmail.com | Howeport | Active | $828.77 |
| Ken Lehner | cristina74@hotmail.com | Port Delilahboro | Inactive | $1,064.73 |
| Bryan Howe | juana.marks30@hotmail.com | Columbia | Inactive | $291.37 |
| Harvey Bayer | vanessa33@gmail.com | Ernaworth | Inactive | $211.53 |
| Janis Grimes MD | fritz_reichert-mckenzie31@gmail.com | New Olin | Inactive | $102.60 |
| Heath Hand | katie59@yahoo.com | Roslynport | Inactive | $798.40 |
| Steven Altenwerth PhD | tremaine.hettinger86@yahoo.com | Independence | Inactive | $139.64 |
| Beverly Kshlerin | tracy54@hotmail.com | Moenfurt | Active | $738.40 |
| Sadie McLaughlin | mae_blick@gmail.com | North Lilla | Inactive | $1,137.23 |
| Paul Ward | calista.lubowitz@yahoo.com | Tamiami | Inactive | $142.48 |
| Sam Stehr | fannie7@hotmail.com | Lake Bennie | Active | $320.10 |
| Alfred Kerluke | christopher_wilkinson@hotmail.com | Labadiestad | Inactive | $428.06 |
| Julio Dooley | natalie.jaskolski-torphy@yahoo.com | West Opheliatown | Active | $98.02 |
| Diana Adams | thad.homenick31@hotmail.com | Maxport | Inactive | $19.30 |
| Ethel Heidenreich | lawrence.gleichner@yahoo.com | Marlenmouth | Inactive | $1,156.78 |
| Total | $7,477.41 | |||
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 |


