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 | $352.13 |
| INV002 | Unpaid | Bank Transfer | $247.21 |
| INV003 | Paid | Credit Card | $378.01 |
| INV004 | Paid | Credit Card | $425.22 |
| INV005 | Unpaid | PayPal | $692.79 |
| INV006 | Unpaid | Credit Card | $731.85 |
| INV007 | Unpaid | Credit Card | $619.61 |
| Total | $3,446.82 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Josephine Dicki | Direct Optimization Director | josephine_dicki59@hotmail.com | Viewer | |
| Ena Franey | Direct Applications Specialist | ena_franey79@gmail.com | Admin | |
| Rebekah Reynolds | Regional Accounts Designer | rebekah.reynolds@yahoo.com | Viewer | |
| Alf Cummings | Global Implementation Administrator | alf.cummings@gmail.com | Member | |
| Bennie Smitham | Forward Assurance Manager | bennie.smitham97@yahoo.com | Member | |
| Sheldon Ortiz | Lead Implementation Engineer | sheldon_ortiz80@yahoo.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 |
|---|---|---|
Elian Stoltenberg Corporate Quality Supervisor elian.stoltenberg@yahoo.com | Member | |
Natasha Mayert Product Web Orchestrator natasha_mayert33@hotmail.com | Admin | |
Josephine Jacobi Direct Applications Manager josephine.jacobi82@yahoo.com | Member | |
Clayton Turcotte-Franey Corporate Marketing Strategist clayton.turcotte-franey85@gmail.com | Viewer | |
Latoya Parker Future Marketing Associate latoya.parker39@yahoo.com | Member | |
Loraine Balistreri Legacy Group Director loraine.balistreri@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kyra Lakin Human Division Director kyra.lakin@gmail.com | Viewer | |
Adrian Jerde Chief Marketing Producer adrian_jerde9@yahoo.com | Viewer | |
Lawrence Mertz Product Infrastructure Assistant lawrence.mertz@gmail.com | Admin | |
Clinton Pfannerstill Legacy Metrics Technician clinton_pfannerstill18@hotmail.com | Member | |
Diane Hoppe Direct Interactions Liaison diane_hoppe@hotmail.com | Member | |
Troy Schroeder National Implementation Director troy.schroeder34@yahoo.com | Viewer | |
Billy Auer-Grimes Forward Interactions Architect billy.auer-grimes@gmail.com | Admin | |
Julia Cassin Lead Solutions Designer julia.cassin91@gmail.com | Admin | |
Austen Russel Chief Usability Specialist austen_russel7@hotmail.com | Viewer | |
Kayleigh Marks Customer Optimization Technician kayleigh.marks2@yahoo.com | Viewer | |
Sean O'Keefe Forward Configuration Manager sean.okeefe@gmail.com | Member | |
Enos Kuphal District Quality Agent enos.kuphal@gmail.com | Member | |
Cole Gislason Investor Implementation Architect cole.gislason@gmail.com | Admin | |
Karson Wyman Human Group Strategist karson_wyman25@yahoo.com | Member | |
Nannie Klocko Dynamic Identity Coordinator nannie.klocko82@hotmail.com | Viewer | |
Felipe Langosh Forward Identity Technician felipe.langosh90@yahoo.com | Admin | |
Amy Waelchi Human Solutions Facilitator amy.waelchi@gmail.com | Member | |
Toni Boyle Central Program Architect toni_boyle84@gmail.com | Viewer | |
Edwin Howell Senior Infrastructure Representative edwin.howell24@yahoo.com | Admin | |
Randal Lindgren Internal Implementation Administrator randal_lindgren83@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 | |
|---|---|---|---|---|
| Jacey D'Amore | violet.schneider81@gmail.com | Stephanbury | Inactive | $627.61 |
| Dr. Blanche Schumm | micaela79@gmail.com | South Braden | Active | $349.37 |
| Brennon Mann | joesph_upton@hotmail.com | Pasadena | Active | $202.23 |
| Rudolph Turner | jacklyn_bartoletti@yahoo.com | Hackensack | Inactive | $1,146.94 |
| Candace Ruecker | nancy.schmitt11@gmail.com | College Station | Inactive | $660.45 |
| Total | $2,986.60 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Julie Pagac MD @hermann.conn36 | scott.ruecker@gmail.com | Candiceshire | Active | $179.74 |
Julian Rippin @geneva57 | jesse_lesch28@gmail.com | Port Kariane | Active | $511.64 |
Ismael Ebert @silvia.schoen | ben.feest71@yahoo.com | Greenchester | Inactive | $774.38 |
Kole Roberts @katherine34 | lucy87@gmail.com | Normamouth | Inactive | $681.99 |
Krystal Bins @stone.gleason | maxine_blanda@yahoo.com | Volkmanhaven | Inactive | $1,107.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Marcel Skiles | lillian.sauer90@yahoo.com | West Shyannemouth | Inactive | $481.96 |
| Paxton Jerde-Adams | muhammad_crooks-hilpert@gmail.com | St. Louis Park | Inactive | $505.12 |
| Charles Ward | loren_von-senger48@yahoo.com | Tiannaview | Inactive | $83.70 |
| Leonardo Cole | kari67@gmail.com | Mosciskiville | Active | $106.26 |
| Charlene Kuhn | ellen.mccullough@hotmail.com | Livermore | Inactive | $506.32 |
| Total | $1,683.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keshaun Gerhold | hector.muller@yahoo.com | Chadbury | Inactive | $431.66 |
| Mr. Mitchell Marquardt | robyn50@hotmail.com | Flower Mound | Inactive | $120.57 |
| Ella Kozey | jadyn.shields@yahoo.com | New Eddie | Active | $286.70 |
| Devyn Lehner | bridie91@hotmail.com | Middletown | Active | $202.96 |
| Cheyanne Spencer PhD | bethany_brekke@gmail.com | Tromphaven | Active | $576.51 |
| Total | $1,618.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kellen Zboncak | shawna.hirthe@yahoo.com | Langoshfield | Active | $808.76 |
| Aric O'Conner | eleonore.hauck56@hotmail.com | Romagueraworth | Active | $648.38 |
| Ms. Gina Bashirian | jamal.will-franecki27@yahoo.com | Durganport | Inactive | $438.07 |
| Magnus McCullough | kyra_bruen@yahoo.com | Abilene | Inactive | $1,057.11 |
| Tasha Sawayn | eugenia_sawayn99@hotmail.com | East Andresfield | Active | $1,069.53 |
| Total | $4,021.85 | |||
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 | ||
|---|---|---|---|---|---|
| Harvey Sauer | dixie_hickle@gmail.com | Dooleychester | Inactive | $1,009.84 | |
| Veronica Blanda | velma61@yahoo.com | Nicholeville | Inactive | $227.05 | |
| Kobe Murphy | joseph_reynolds24@yahoo.com | Williemouth | Inactive | $961.32 | |
| Mr. Christopher Wiegand | tyree_kilback@yahoo.com | Howellberg | Inactive | $785.13 | |
| Russ Block DVM | jay.metz-ledner75@gmail.com | Bobbyboro | Active | $252.02 | |
| Total | $3,235.36 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Santina Walker | prudence_steuber@hotmail.com | Schulistchester | Inactive | $175.11 | |
| Idell O'Keefe IV | elmer_lind@hotmail.com | Dickensshire | Active | $260.50 | |
| Cynthia Roob | germaine.von6@yahoo.com | Lake Kirstenshire | Active | $580.63 | |
| Tonya Ullrich | cheryl.schaefer8@hotmail.com | Carmichael | Active | $556.60 | |
| Alfredo Koelpin | patty.legros@hotmail.com | O'Connellshire | Active | $550.57 | |
| Total | $2,123.41 | ||||
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 | |
|---|---|---|---|---|
| Virgie Wiza | dolores.ullrich@hotmail.com | Saginaw | Active | $994.68 |
| Kennedi Emmerich | clay85@hotmail.com | Heaneyshire | Active | $109.90 |
| Bertha O'Conner | rosamond.carroll60@hotmail.com | Waukegan | Inactive | $638.61 |
| Lottie Towne | flavie.gerhold21@hotmail.com | South Beatricestad | Active | $113.83 |
| Marcelina Aufderhar | domenica87@gmail.com | Apex | Inactive | $815.82 |
| Traci Keebler | uriah.barton26@yahoo.com | Lonnieland | Inactive | $1,058.78 |
| Domenick Heathcote | buster_steuber@hotmail.com | Streichborough | Inactive | $1,151.17 |
| Gina Maggio | dianna_harvey@yahoo.com | North Matthewport | Active | $232.22 |
| Josefina Baumbach | dan.fay@gmail.com | North Aprilshire | Active | $93.15 |
| Stephanie Miller | john18@yahoo.com | Leaberg | Active | $547.05 |
| Alta Kerluke | jermey55@gmail.com | East Alisonview | Inactive | $1,173.86 |
| Barbara Stark | marcos_heaney@hotmail.com | Denton | Inactive | $524.76 |
| Russel Dicki | kelli.rohan16@hotmail.com | South Tasha | Active | $612.28 |
| Arlene Macejkovic | julien_keeling@yahoo.com | New Sofia | Active | $654.07 |
| Danny Schoen PhD | daniel56@hotmail.com | New Henriettefield | Active | $645.49 |
| Total | $9,365.67 | |||
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 |
