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 | Unpaid | PayPal | $771.55 |
| INV002 | Pending | PayPal | $187.89 |
| INV003 | Unpaid | PayPal | $342.58 |
| INV004 | Pending | Bank Transfer | $524.56 |
| INV005 | Unpaid | Credit Card | $721.27 |
| INV006 | Paid | Bank Transfer | $698.69 |
| INV007 | Paid | Credit Card | $744.53 |
| Total | $3,991.07 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Oscar Koch | Principal Intranet Developer | oscar.koch@yahoo.com | Admin | |
| Arvid Grimes | Senior Applications Supervisor | arvid_grimes56@gmail.com | Viewer | |
| Ellsworth Mraz | Principal Configuration Orchestrator | ellsworth.mraz56@hotmail.com | Member | |
| Maude Donnelly | Regional Configuration Strategist | maude.donnelly24@yahoo.com | Viewer | |
| Casper Collier | Senior Integration Developer | casper_collier4@hotmail.com | Admin | |
| Cecile Mertz | Customer Integration Developer | cecile.mertz@yahoo.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 |
|---|---|---|
Shawn Nader Principal Mobility Assistant shawn_nader97@hotmail.com | Member | |
Israel Hilll Dynamic Quality Designer israel_hilll82@hotmail.com | Viewer | |
Micheal Hirthe National Accounts Liaison micheal.hirthe@gmail.com | Member | |
Cora Gutmann Global Optimization Producer cora.gutmann@hotmail.com | Admin | |
Gideon Padberg Customer Identity Strategist gideon.padberg@hotmail.com | Admin | |
Naomi Herman Central Intranet Strategist naomi.herman64@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Steve Franecki Regional Brand Orchestrator steve.franecki@hotmail.com | Admin | |
Virgil Hickle Product Mobility Liaison virgil_hickle44@gmail.com | Member | |
Carroll McLaughlin-Stoltenberg Internal Brand Strategist carroll.mclaughlin-stoltenberg@hotmail.com | Viewer | |
Bernadette Koss Customer Solutions Liaison bernadette.koss@gmail.com | Viewer | |
Rosalinda Smitham Global Interactions Coordinator rosalinda.smitham@yahoo.com | Admin | |
Matt Dooley Investor Brand Executive matt.dooley88@gmail.com | Admin | |
Dovie Kohler Lead Research Liaison dovie_kohler50@hotmail.com | Admin | |
Katlyn Daugherty National Operations Officer katlyn.daugherty@hotmail.com | Admin | |
Elvie Lemke National Optimization Agent elvie_lemke64@yahoo.com | Viewer | |
Megan Jacobson Principal Directives Manager megan.jacobson6@yahoo.com | Viewer | |
Alexandro Jerde Regional Tactics Director alexandro_jerde3@hotmail.com | Admin | |
Stevie Gibson International Quality Executive stevie_gibson31@hotmail.com | Member | |
Darrel Becker Senior Accounts Producer darrel.becker@hotmail.com | Viewer | |
Alton Padberg Future Security Representative alton_padberg@hotmail.com | Admin | |
Loma Nienow Human Operations Producer loma_nienow@hotmail.com | Admin | |
Elena Schuster Global Tactics Coordinator elena_schuster63@gmail.com | Viewer | |
Terri Barton National Web Coordinator terri_barton@hotmail.com | Admin | |
Cristian Schaden Forward Division Representative cristian.schaden24@gmail.com | Viewer | |
Nolan Moore National Tactics Planner nolan.moore79@hotmail.com | Viewer | |
Estelle Legros Global Factors Coordinator estelle_legros@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 | |
|---|---|---|---|---|
| Eudora Predovic | pam.ortiz5@gmail.com | Connellyville | Inactive | $394.52 |
| Santiago Ankunding | roman.brekke@yahoo.com | Quitzonfurt | Active | $64.57 |
| Leticia Treutel | mylene_miller5@hotmail.com | West Curtis | Active | $34.52 |
| Dr. Sigurd Stamm | pam81@hotmail.com | North Chadrickview | Active | $600.17 |
| Rosamond Carroll | brennan_heller@hotmail.com | West Hope | Inactive | $1,035.02 |
| Total | $2,128.80 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Clayton McDermott @orlo40 | candice_kreiger@hotmail.com | Darinmouth | Inactive | $774.09 |
Reginald Grant @julian_will58 | jeanette_kilback@hotmail.com | East Elviestead | Inactive | $466.42 |
Ellis Murazik Jr. @penny.sauer | bernie.baumbach15@hotmail.com | Fort Nickchester | Active | $1,174.05 |
Nolan Conn @luisa_kilback | dayna53@hotmail.com | Port Teriton | Active | $925.68 |
Jack Volkman @corine_herzog86 | randy.hettinger30@hotmail.com | Rolandland | Inactive | $533.33 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darion Rice DVM | emmanuel.rogahn@yahoo.com | Fort Christian | Active | $613.35 |
| Tyler Vandervort | cierra_ullrich87@gmail.com | Saginaw | Active | $692.35 |
| Irvin Bogisich | maybelle.douglas-schaefer@yahoo.com | New Benjaminworth | Active | $1,117.25 |
| Nels Strosin | louis.bergnaum@hotmail.com | Pueblo | Active | $551.10 |
| Kaylee Lang | humberto.murphy@gmail.com | West Danielshire | Inactive | $757.14 |
| Total | $3,731.19 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Terrell Crist | traci.smith22@yahoo.com | Kentworth | Active | $841.27 |
| Allen Kozey | delilah93@hotmail.com | North Dayne | Inactive | $88.57 |
| Fred Jenkins | baylee86@yahoo.com | East Muhammad | Inactive | $502.05 |
| Debra Schuster | janick_johns74@yahoo.com | Sipeshaven | Active | $318.71 |
| Annette Hirthe | reese93@yahoo.com | Glenview | Inactive | $254.56 |
| Total | $2,005.16 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Judah Kirlin | garth.mohr21@yahoo.com | New Nyaboro | Inactive | $1,186.25 |
| Eloisa Hudson-Ondricka | pearl83@yahoo.com | Wellington | Active | $418.33 |
| Conner Kiehn | elaine_fadel76@hotmail.com | Lucyberg | Inactive | $1,043.36 |
| Lucia Beier | claudia79@hotmail.com | West Toni | Active | $366.51 |
| Dixie Collier | malcolm52@yahoo.com | North Leann | Active | $1,169.07 |
| Total | $4,183.52 | |||
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 | ||
|---|---|---|---|---|---|
| Fred Vandervort-Strosin | kelvin.fahey-connelly21@gmail.com | West Neha | Active | $520.32 | |
| Dr. Sonia Jast DVM | phil.connelly@gmail.com | New Delfinaside | Inactive | $1,164.10 | |
| Dameon Lynch | tanya_abshire@yahoo.com | Normanfurt | Inactive | $365.93 | |
| Kristy Friesen | jazmyne_harvey@gmail.com | New Maybelle | Inactive | $727.99 | |
| Roxane Schoen | adolphus_davis6@yahoo.com | Koeppberg | Inactive | $90.11 | |
| Total | $2,868.45 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ricardo Schroeder | heather77@yahoo.com | Port Earnest | Inactive | $1,090.59 | |
| Alexis Funk | troy29@yahoo.com | West Sacramento | Inactive | $1,015.89 | |
| Carmella Johnson | taurean.runte55@gmail.com | North Herbert | Active | $715.55 | |
| Henriette Toy | leo62@hotmail.com | North Revaside | Active | $1,194.81 | |
| Dr. Erica Hickle | karli94@gmail.com | Port Pattiburgh | Active | $1,103.31 | |
| Total | $5,120.15 | ||||
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 | |
|---|---|---|---|---|
| Christine Gutmann | cornell.connelly@gmail.com | Kassulkehaven | Active | $1,030.07 |
| Gene Mosciski | aleen.white-koepp32@gmail.com | East Wallaceview | Inactive | $1,096.89 |
| Elias Price-Roberts | nina.zieme53@gmail.com | West Rhetthaven | Inactive | $169.44 |
| Ilene Strosin PhD | deonte.orn@hotmail.com | North Gillian | Inactive | $318.07 |
| Lana Marvin | jaquelin_parker@gmail.com | Warwick | Active | $967.23 |
| Cali Kunde DDS | estefania.windler@hotmail.com | Schusterstad | Active | $248.20 |
| Lora Hyatt DVM | don_dooley@gmail.com | New Marie | Inactive | $441.94 |
| Juana Bins | raymundo81@hotmail.com | Port Gabrielcester | Inactive | $671.46 |
| Faith Keebler | molly_legros99@yahoo.com | Boehmside | Inactive | $148.07 |
| Kay Rau | inez.reichel@gmail.com | Burien | Active | $846.58 |
| Jessie Bogisich DVM | marilou.block@hotmail.com | East Sally | Inactive | $868.63 |
| Elmer Erdman | wesley_walter@hotmail.com | Hoppeborough | Inactive | $245.89 |
| Mrs. Jeannie Keeling | julie_kuhic@yahoo.com | Langworthburgh | Active | $676.11 |
| Eli Hane | jayne.von34@hotmail.com | Ninaworth | Active | $406.87 |
| Rachael Kertzmann-Hermiston | rene_roob@hotmail.com | Fort Dallasfort | Inactive | $362.05 |
| Total | $8,497.50 | |||
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 |