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 | $962.29 |
| INV002 | Unpaid | PayPal | $687.57 |
| INV003 | Paid | Bank Transfer | $739.66 |
| INV004 | Unpaid | Bank Transfer | $357.44 |
| INV005 | Unpaid | Credit Card | $484.54 |
| INV006 | Unpaid | Bank Transfer | $808.25 |
| INV007 | Pending | Bank Transfer | $351.97 |
| Total | $4,391.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Melisa Thompson | Chief Assurance Producer | melisa.thompson@hotmail.com | Viewer | |
| Sid Medhurst | Human Operations Engineer | sid.medhurst18@gmail.com | Viewer | |
| Santiago Heaney | Product Optimization Specialist | santiago_heaney@hotmail.com | Member | |
| Felix Cassin | Internal Security Liaison | felix.cassin@hotmail.com | Admin | |
| Reva Rath | Lead Accounts Director | reva_rath55@yahoo.com | Member | |
| Marisa Schmidt-Crona | Global Branding Specialist | marisa.schmidt-crona11@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Annabell Rohan-Wolf Internal Communications Liaison annabell.rohan-wolf@gmail.com | Viewer | |
Kathleen Mills Customer Tactics Planner kathleen_mills@gmail.com | Member | |
Virginia Lindgren Lead Applications Assistant virginia_lindgren@gmail.com | Member | |
Kyla Prohaska Principal Interactions Technician kyla_prohaska@hotmail.com | Admin | |
Elian Buckridge Regional Data Executive elian.buckridge@yahoo.com | Viewer | |
Major Cummerata Internal Branding Producer major.cummerata@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 |
|---|---|---|
Luciano Murazik International Identity Strategist luciano.murazik68@hotmail.com | Admin | |
Burnice Quitzon Investor Directives Representative burnice_quitzon81@hotmail.com | Member | |
Maci McCullough Principal Brand Developer maci.mccullough@hotmail.com | Admin | |
Elza Wyman Legacy Marketing Strategist elza_wyman@yahoo.com | Viewer | |
Krista Swift Chief Security Orchestrator krista.swift68@gmail.com | Member | |
Gianni Daugherty Human Markets Designer gianni.daugherty@hotmail.com | Viewer | |
Gregg Corkery Forward Metrics Developer gregg.corkery2@gmail.com | Member | |
Camille Weimann District Functionality Supervisor camille_weimann73@hotmail.com | Admin | |
Alfonzo Watsica Global Markets Specialist alfonzo.watsica38@yahoo.com | Admin | |
Melyna Cummerata Lead Brand Strategist melyna_cummerata43@yahoo.com | Admin | |
Bridgette Mayert Dynamic Group Developer bridgette.mayert66@yahoo.com | Member | |
Zaria Hammes Global Tactics Consultant zaria_hammes@hotmail.com | Viewer | |
Beulah Dickinson Legacy Accounts Analyst beulah.dickinson5@hotmail.com | Admin | |
Noble Beer Regional Accountability Facilitator noble_beer@hotmail.com | Admin | |
Vaughn Berge-Torp Internal Directives Executive vaughn_berge-torp15@hotmail.com | Member | |
Ashtyn Brekke Human Operations Agent ashtyn.brekke@yahoo.com | Viewer | |
Vaughn Huel Investor Data Planner vaughn_huel64@gmail.com | Viewer | |
Marcella Torphy Customer Mobility Facilitator marcella_torphy@hotmail.com | Admin | |
Kathlyn Swaniawski Regional Integration Engineer kathlyn_swaniawski25@yahoo.com | Viewer | |
Juanita Johns Principal Communications Liaison juanita_johns28@yahoo.com | Viewer |
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 | |
|---|---|---|---|---|
| Jo Hintz | bernard_okuneva@hotmail.com | Port Rossie | Inactive | $329.35 |
| Claire Gislason | lou.stark17@gmail.com | Terryborough | Active | $453.51 |
| Adrienne Kub | tillman.reichert@gmail.com | Naderstad | Inactive | $572.70 |
| Jacob Stark | maximus_macejkovic@gmail.com | New Perry | Inactive | $1,086.82 |
| Ernesto Block | earline_koch@yahoo.com | Wiegandcester | Inactive | $812.36 |
| Total | $3,254.74 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Candace Farrell @liam0 | lavonne38@yahoo.com | Lake Kareemworth | Inactive | $270.40 |
Mack Stanton @cristobal72 | claudine53@hotmail.com | Lake Verner | Inactive | $1,029.72 |
Israel Volkman @edgardo.tromp | kelsie_mitchell37@gmail.com | Bashirianchester | Active | $1,005.99 |
Lowell Koepp @bertha.hagenes-king | esperanza17@yahoo.com | North Carmella | Inactive | $219.23 |
Antonio Bashirian-Predovic @merl_pfeffer | monroe.schiller61@hotmail.com | Josefinaton | Active | $932.48 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marc Mann I | amaya.rath-stehr@yahoo.com | Vonside | Inactive | $807.33 |
| Mandy Wisozk | marcia46@yahoo.com | Fort Fletcherville | Active | $428.47 |
| Janice Simonis | clementine_stoltenberg@yahoo.com | Priceport | Inactive | $679.78 |
| Miss Beverly Witting | chesley_mueller54@hotmail.com | Welchboro | Inactive | $820.62 |
| Dr. Rickey Botsford | jameson_prosacco55@gmail.com | North Otha | Active | $757.11 |
| Total | $3,493.31 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rose Yost | jaren93@yahoo.com | North Daren | Active | $634.35 |
| Dr. Jeannette Kuhlman | emmanuelle_prohaska36@yahoo.com | Kileychester | Inactive | $321.14 |
| Terry Wilkinson | claudia_treutel@yahoo.com | South Norvalville | Inactive | $477.09 |
| Rolando Medhurst | karolann40@yahoo.com | Fort Clementcester | Active | $774.82 |
| Micheal Dietrich Sr. | bailee_ruecker91@yahoo.com | Schaeferfort | Inactive | $330.33 |
| Total | $2,537.73 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Denise Braun | flavio_nienow@yahoo.com | Tiaworth | Inactive | $718.35 |
| Don Crist | titus93@yahoo.com | Weston | Active | $1,053.21 |
| Jonathon Murazik | elsa.kozey@gmail.com | Jacobistad | Active | $1,172.26 |
| Jake Kihn | maxime_mccullough@yahoo.com | Mallorycester | Active | $829.76 |
| Tyrone Balistreri | ora2@yahoo.com | Skilesview | Active | $818.88 |
| Total | $4,592.46 | |||
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 | ||
|---|---|---|---|---|---|
| Edwin Bergnaum-Cronin | april.gleason@yahoo.com | West Albinaland | Inactive | $785.52 | |
| Ralph Schmeler | elroy36@hotmail.com | Billings | Active | $1,000.43 | |
| Margarita Hilll DVM | ansel_predovic@yahoo.com | Shoreline | Active | $333.65 | |
| Doug Boyle | jacey.yundt91@hotmail.com | Lake Tracey | Active | $766.15 | |
| Paul Schimmel | tyler.kozey@gmail.com | Littelbury | Inactive | $500.24 | |
| Total | $3,385.99 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Marta Vandervort | celia.rath63@yahoo.com | Fredrickbury | Active | $1,130.63 | |
| Vicki Satterfield | pinkie_gerhold@yahoo.com | Lake Maribel | Inactive | $91.19 | |
| Dwayne Thiel | bernie_bogisich@yahoo.com | Reystead | Inactive | $822.76 | |
| Gayle Marvin | jalyn.bogan93@gmail.com | Othostead | Active | $1,016.54 | |
| Courtney Gleason | alverta_steuber@yahoo.com | Wellington | Inactive | $416.66 | |
| Total | $3,477.78 | ||||
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 | |
|---|---|---|---|---|
| Philip Frami | jasper_borer@hotmail.com | Kendall | Active | $895.67 |
| Willie Mitchell | caden_morissette@yahoo.com | South Ottoberg | Inactive | $543.51 |
| Frederick O'Hara | sabina.beahan@gmail.com | Fort Webster | Active | $829.61 |
| Joanna Dach | estell.baumbach-stehr@yahoo.com | South Orpha | Active | $1,053.78 |
| Florence Wilderman | callie_schumm@hotmail.com | Roseville | Inactive | $362.37 |
| Rudolph Berge | jany.cronin@yahoo.com | Dannieport | Inactive | $505.78 |
| Jamie Berge-Rodriguez | granville49@gmail.com | Lake Jillianton | Active | $1,137.85 |
| Mr. Blake Labadie | abdul_herzog@gmail.com | Tracy | Inactive | $368.82 |
| Bernice Lindgren | earline51@hotmail.com | West Estelle | Active | $1,057.34 |
| Dustin Brakus | maynard.hills@yahoo.com | South Carmelo | Inactive | $979.00 |
| Lila Mante | ashlynn97@hotmail.com | Fort Jaylenshire | Inactive | $886.98 |
| Dolores Kreiger | fiona.spencer@hotmail.com | South Julius | Active | $154.57 |
| Cheryl Monahan Sr. | cheyanne_rath@gmail.com | Moorefort | Inactive | $882.24 |
| Santiago Torphy-Gislason | terrence.emmerich@gmail.com | Lynnstad | Active | $546.67 |
| Chris Towne | marco_connelly@yahoo.com | Cummingston | Active | $1,157.18 |
| Total | $11,361.37 | |||
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 |
