Components
Table
A responsive table component.
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 | Credit Card | $703.71 |
| INV002 | Pending | Credit Card | $658.16 |
| INV003 | Pending | PayPal | $733.62 |
| INV004 | Paid | Bank Transfer | $458.86 |
| INV005 | Pending | Credit Card | $370.10 |
| INV006 | Paid | Bank Transfer | $794.77 |
| INV007 | Paid | Bank Transfer | $915.45 |
| Total | $4,634.67 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ariel Ryan | Product Implementation Architect | ariel_ryan86@hotmail.com | Member | |
| Lenny Grady | District Group Assistant | lenny.grady69@gmail.com | Member | |
| Kenton Funk | Central Solutions Administrator | kenton.funk@hotmail.com | Admin | |
| Tate Larkin | Direct Security Coordinator | tate.larkin93@yahoo.com | Member | |
| Chelsea Roberts | District Research Developer | chelsea.roberts@hotmail.com | Admin | |
| Aditya MacGyver | Future Assurance Executive | aditya_macgyver54@gmail.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 |
|---|---|---|
Josefina Lockman Principal Data Consultant josefina.lockman71@gmail.com | Admin | |
Hector Wolf International Security Facilitator hector_wolf@gmail.com | Viewer | |
Else Olson Lead Creative Engineer else_olson@gmail.com | Member | |
Autumn McDermott Human Assurance Strategist autumn.mcdermott@yahoo.com | Viewer | |
Danika Medhurst Global Factors Executive danika.medhurst50@hotmail.com | Member | |
Timothy Koelpin Global Intranet Director timothy.koelpin@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 |
|---|---|---|
Jaquan Stanton Forward Security Specialist jaquan.stanton26@yahoo.com | Admin | |
Koby Wunsch Future Tactics Executive koby.wunsch41@yahoo.com | Viewer | |
Zane Botsford Corporate Integration Analyst zane.botsford3@hotmail.com | Viewer | |
Juliana Bode Legacy Markets Analyst juliana.bode84@yahoo.com | Viewer | |
Noble Maggio Global Branding Representative noble.maggio@gmail.com | Viewer | |
Toni Haley Corporate Solutions Consultant toni.haley37@hotmail.com | Member | |
Orville Hagenes International Tactics Orchestrator orville_hagenes24@hotmail.com | Member | |
Raul Ritchie Lead Security Engineer raul.ritchie6@hotmail.com | Member | |
Darin Breitenberg International Quality Designer darin.breitenberg85@gmail.com | Member | |
Ruthe Kuvalis Direct Factors Facilitator ruthe.kuvalis@gmail.com | Admin | |
Viola Bartoletti Global Quality Developer viola_bartoletti@hotmail.com | Admin | |
Enrique Von Direct Configuration Administrator enrique.von31@gmail.com | Viewer | |
Lois Bauch Forward Implementation Coordinator lois.bauch@hotmail.com | Admin | |
Stephanie Fisher Legacy Accountability Representative stephanie.fisher@gmail.com | Admin | |
Penny Monahan International Integration Planner penny_monahan@yahoo.com | Admin | |
Glenn Jacobs Customer Implementation Designer glenn.jacobs@gmail.com | Viewer | |
Rose Hackett Dynamic Interactions Assistant rose.hackett21@hotmail.com | Member | |
Ottilie Nitzsche Direct Metrics Architect ottilie_nitzsche16@hotmail.com | Viewer | |
Chelsea Ernser Direct Mobility Strategist chelsea.ernser93@gmail.com | Member | |
Felicia Jakubowski Future Applications Specialist felicia_jakubowski@gmail.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 | |
|---|---|---|---|---|
| Travis Hoeger | cornelius.stamm40@hotmail.com | MacGyverview | Inactive | $542.46 |
| Tyrique Boyle | taya12@yahoo.com | Lake Loreneborough | Inactive | $964.26 |
| Mrs. Betty Weimann | harold.johns38@yahoo.com | East Noemiecester | Inactive | $410.09 |
| Cynthia Veum | salvador_littel@yahoo.com | Fort Scott | Active | $1,158.17 |
| Darron Ferry | kieran49@gmail.com | Rhondaburgh | Active | $1,163.04 |
| Total | $4,238.02 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Brain Mertz @morris24 | cecilia0@gmail.com | Rauburgh | Inactive | $689.50 |
Erick Schneider @kevin86 | madalyn_rippin@gmail.com | New Carlashire | Inactive | $365.47 |
Isidro Carter @randolph42 | nikki22@hotmail.com | Fort Raquel | Active | $1,156.24 |
Elvira Veum-Nitzsche @nicolas.mraz | marian18@yahoo.com | Lake Deborah | Active | $848.56 |
Tabitha Kshlerin @ursula82 | godfrey95@yahoo.com | New Brookechester | Inactive | $573.63 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Domingo Spencer | monica62@gmail.com | West Lilliestead | Inactive | $736.49 |
| Bo Bayer | leonora.rowe-emard28@gmail.com | Chesapeake | Inactive | $103.88 |
| Dean Grimes | benedict_rice@gmail.com | Kovacekchester | Active | $25.87 |
| Miss Brooke Herzog | dessie.morar@yahoo.com | Keeling-Kuhlmanmouth | Inactive | $717.91 |
| Daphne Ferry | darlene.johnston53@hotmail.com | Lake Trevorfurt | Active | $445.92 |
| Total | $2,030.07 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Owen Zemlak | nicholas.mills44@gmail.com | Fort Murl | Active | $534.20 |
| Jasen Pollich | tommie_crona@gmail.com | Port Jameson | Active | $161.96 |
| Eunice Dare | weston.schoen4@gmail.com | South Terry | Inactive | $956.12 |
| Miss Eva Kreiger | sanford.treutel@hotmail.com | Kingtown | Inactive | $762.12 |
| Nathaniel Goyette | colin_blick@yahoo.com | North Madisonshire | Inactive | $1,021.58 |
| Total | $3,435.98 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Paulette Greenholt | anne_weber@gmail.com | Schadenborough | Inactive | $564.51 |
| Susan Daugherty | joann.boyer97@hotmail.com | La Mesa | Active | $1,198.23 |
| Dane Leffler | kailee.kihn@gmail.com | Wittingfort | Active | $18.68 |
| Kelvin Rutherford | clifton_schimmel4@hotmail.com | East Wanda | Inactive | $64.81 |
| Grace Kihn | mable_jakubowski28@hotmail.com | Port Erickworth | Inactive | $388.09 |
| Total | $2,234.32 | |||
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 | ||
|---|---|---|---|---|---|
| Nora Oberbrunner | duane15@hotmail.com | Port Ignatiusburgh | Active | $633.19 | |
| Margaret Stehr | maxime_champlin@hotmail.com | Commerce City | Active | $901.32 | |
| Mr. Kailee Windler | steven32@hotmail.com | East Kallietown | Active | $885.19 | |
| Elyse Feil | grady.conn@yahoo.com | Hesselcester | Active | $45.62 | |
| Esperanza Frami | carli_feil@hotmail.com | Purdyfurt | Inactive | $391.03 | |
| Total | $2,856.35 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ana Hahn | nathan.yost25@gmail.com | East Nyah | Inactive | $867.26 | |
| Alyce Hyatt | tessie.champlin83@yahoo.com | East Mathewshire | Inactive | $162.83 | |
| Shayne Muller PhD | howell81@hotmail.com | Harberton | Inactive | $959.02 | |
| Judson Bode | payton65@gmail.com | East Hubertworth | Active | $613.86 | |
| Dianne Hettinger IV | herminio_rempel99@gmail.com | Elmerborough | Inactive | $862.77 | |
| Total | $3,465.74 | ||||
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. Nicholas Muller | maurine_doyle25@hotmail.com | Eliasville | Active | $419.83 |
| Donna O'Connell | mauricio_beatty71@gmail.com | Hintzchester | Active | $46.15 |
| Ellen Murray | shyann_dicki-romaguera@hotmail.com | Kenyafort | Inactive | $962.03 |
| Susana Bins | cortney.mante70@gmail.com | Wizatown | Inactive | $993.87 |
| Isabel Friesen | justina99@gmail.com | East Osbaldo | Inactive | $136.02 |
| Dr. Roderick Hartmann-Roob | heidi49@yahoo.com | New Adrienne | Inactive | $547.61 |
| Mrs. Marlene Davis | fannie_predovic88@hotmail.com | North Adriantown | Active | $940.88 |
| Prudence Daugherty PhD | tyrone.homenick@yahoo.com | Timshire | Active | $352.72 |
| Jeremy Zieme | lamar_walsh@yahoo.com | Fort Myers | Active | $702.94 |
| Destinee DuBuque | emma_stoltenberg34@yahoo.com | North Pearlville | Inactive | $111.57 |
| Curt Howe | ivah55@yahoo.com | Rempelland | Active | $67.56 |
| Frank Tromp | zelda_larkin23@gmail.com | North Nadineshire | Inactive | $523.00 |
| Zena Labadie | linnie44@gmail.com | Lednerhaven | Active | $604.05 |
| Howard Kub | lelia_gerlach@gmail.com | Hauckfort | Inactive | $528.80 |
| Moses Bartoletti | kiera92@yahoo.com | Fort Wayne | Inactive | $465.83 |
| Total | $7,402.86 | |||
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 |