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 | Bank Transfer | $640.40 |
| INV002 | Pending | PayPal | $795.50 |
| INV003 | Unpaid | Credit Card | $878.28 |
| INV004 | Unpaid | Credit Card | $655.50 |
| INV005 | Pending | Bank Transfer | $839.82 |
| INV006 | Unpaid | Credit Card | $598.66 |
| INV007 | Paid | PayPal | $171.38 |
| Total | $4,579.54 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Layne McCullough | Lead Web Architect | layne_mccullough3@hotmail.com | Admin | |
| Eva Sanford | Senior Markets Consultant | eva.sanford9@hotmail.com | Admin | |
| Phyllis Kovacek | Senior Accounts Executive | phyllis.kovacek36@yahoo.com | Member | |
| Melyna Rohan | Global Identity Planner | melyna.rohan74@hotmail.com | Admin | |
| Anderson Graham | Dynamic Brand Orchestrator | anderson_graham@hotmail.com | Viewer | |
| Ewell Hermiston | Internal Response Agent | ewell_hermiston@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 |
|---|---|---|
Miguel Waelchi Lead Branding Associate miguel_waelchi73@hotmail.com | Member | |
Leah Purdy Corporate Solutions Executive leah_purdy@gmail.com | Viewer | |
Hallie Tromp Customer Security Officer hallie_tromp@yahoo.com | Admin | |
Jaylin Haag Direct Identity Designer jaylin_haag@yahoo.com | Viewer | |
Sidney Welch Global Mobility Representative sidney_welch@yahoo.com | Viewer | |
Urban Gusikowski Regional Markets Architect urban.gusikowski38@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Lon Armstrong Chief Factors Director lon_armstrong@hotmail.com | Viewer | |
Tyra Moore Dynamic Research Architect tyra_moore@yahoo.com | Member | |
Gilberto Crist Principal Mobility Administrator gilberto.crist78@hotmail.com | Admin | |
Ransom Lemke Internal Infrastructure Facilitator ransom.lemke@yahoo.com | Viewer | |
Bobby Hagenes Dynamic Marketing Facilitator bobby.hagenes@gmail.com | Admin | |
Manuel Schroeder International Marketing Planner manuel.schroeder@hotmail.com | Member | |
Giovani Brekke-Koelpin National Operations Manager giovani_brekke-koelpin@hotmail.com | Member | |
Brooke Kreiger Lead Identity Assistant brooke_kreiger74@hotmail.com | Member | |
Darrin Bernhard Future Directives Architect darrin_bernhard48@hotmail.com | Member | |
Alicia Reinger Lead Integration Designer alicia.reinger@gmail.com | Member | |
Alexzander Dickinson Central Paradigm Technician alexzander.dickinson@hotmail.com | Viewer | |
Lena Goldner Global Functionality Designer lena.goldner91@hotmail.com | Admin | |
Bobbie Johns Dynamic Applications Planner bobbie_johns@gmail.com | Member | |
Lynette Murphy Forward Quality Supervisor lynette_murphy66@hotmail.com | Viewer | |
Denis Glover Investor Creative Producer denis.glover@gmail.com | Viewer | |
Ethel Borer Central Interactions Facilitator ethel.borer@yahoo.com | Member | |
Elna Hayes Lead Web Director elna.hayes53@gmail.com | Member | |
Hulda Kilback District Mobility Producer hulda_kilback@yahoo.com | Viewer | |
Nelson Wuckert Chief Mobility Producer nelson.wuckert@gmail.com | Member | |
Boyd Yost Forward Branding Architect boyd_yost20@gmail.com | Member |
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 | |
|---|---|---|---|---|
| Devante Adams | blanche.maggio@yahoo.com | New Gastonburgh | Inactive | $1,063.10 |
| Fred Ankunding | ralph57@yahoo.com | Beercester | Active | $1,155.95 |
| Mr. Petra Nikolaus | cecilia.ernser-jacobson20@gmail.com | East Abagail | Active | $704.32 |
| Stacy Stamm | jensen_stehr67@yahoo.com | Robertobury | Inactive | $504.78 |
| Reymundo Cole | van82@yahoo.com | East Tabithaview | Inactive | $507.05 |
| Total | $3,935.20 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
June Kuhic @marco_crist49 | whitney_jerde@yahoo.com | East Clint | Inactive | $553.74 |
Damon Frami @carolyn.walker55 | karli49@yahoo.com | New Mia | Inactive | $30.77 |
Paul Padberg @hallie_koss45 | bobbie.walker@yahoo.com | Naderworth | Inactive | $1,144.10 |
Betsy Heller @shari.kub94 | nellie.koelpin49@gmail.com | West Virgie | Active | $992.98 |
Stacy Yost @judith66 | ericka23@yahoo.com | Fort Telly | Inactive | $809.14 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Sherman Mante Jr. | nick.champlin@gmail.com | Grand Forks | Active | $928.91 |
| Madeline Braun | percy_mueller81@yahoo.com | South Danielaton | Inactive | $7.08 |
| Kara Cole III | pablo49@gmail.com | Osinskiton | Inactive | $153.60 |
| Neil Willms | chance.ward@yahoo.com | Salina | Inactive | $244.74 |
| Ivan Harris | chad17@hotmail.com | San Diego | Active | $1,165.63 |
| Total | $2,499.96 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Troy Abbott | derek.hilpert60@gmail.com | Shaniyaside | Active | $1,133.48 |
| Miss Dorian Williamson | dangelo72@hotmail.com | Hansen-Daughertyboro | Inactive | $1,081.15 |
| Nelson Greenholt | cierra_franecki@hotmail.com | Parisianside | Active | $936.68 |
| Kenyatta Kerluke | jeremy14@yahoo.com | Mamieshire | Inactive | $488.17 |
| Josefa Witting | kevin_schaden@yahoo.com | New Adell | Inactive | $489.45 |
| Total | $4,128.93 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Berenice Ortiz | gladys.rohan36@gmail.com | Generalport | Active | $983.59 |
| Schuyler McGlynn | deshawn68@gmail.com | Lewistown | Active | $329.59 |
| Mr. Verlie Morissette | lorraine_mills@yahoo.com | Hildegardstead | Active | $361.51 |
| Claude Spinka | connor.ondricka55@hotmail.com | West Jeffry | Inactive | $405.36 |
| Ebony Roberts | ashley.bauch@gmail.com | Jillburgh | Inactive | $318.82 |
| Total | $2,398.87 | |||
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 | ||
|---|---|---|---|---|---|
| Dexter Cartwright | jameson.feeney@hotmail.com | Thelmahaven | Active | $677.14 | |
| Micheal Moen | jack.harber92@gmail.com | Caleland | Inactive | $107.76 | |
| Natasha Fritsch Jr. | amber_kautzer-schultz@yahoo.com | Alexzandershire | Active | $648.94 | |
| Cristobal Monahan | serenity18@yahoo.com | Stromanland | Active | $258.31 | |
| Becky Cremin Jr. | ethyl.reichert@hotmail.com | Kertzmannfield | Inactive | $596.99 | |
| Total | $2,289.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Andrew Ankunding | sergio98@gmail.com | Marksberg | Active | $270.02 | |
| Judy Wuckert | lawrence_orn@gmail.com | Fort Russel | Inactive | $509.05 | |
| Dr. Abdullah Heathcote Sr. | vladimir.rempel@hotmail.com | Cedar Park | Inactive | $897.96 | |
| Abner Kris | leah_kessler99@yahoo.com | East Cynthia | Active | $467.26 | |
| Donato Bergstrom | margaret.maggio-ernser@yahoo.com | New Kellen | Active | $678.44 | |
| Total | $2,822.73 | ||||
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 | |
|---|---|---|---|---|
| Jennifer Hartmann | kayla7@yahoo.com | East Derek | Inactive | $348.20 |
| Mattie Conn | neoma21@gmail.com | Ikeshire | Active | $684.27 |
| Candice Nitzsche | bethany.feest@hotmail.com | Smithamberg | Active | $898.84 |
| Carmen Herman | bertram55@hotmail.com | Sporermouth | Inactive | $368.48 |
| Miss Roberta Green | adriel_green@gmail.com | West Sean | Inactive | $714.19 |
| Lynda Klocko | cletus_bergstrom@hotmail.com | Oberbrunnerchester | Active | $326.32 |
| Maurice Murray | ova.ruecker65@gmail.com | Nicolaston | Inactive | $114.94 |
| Cathy Spinka II | lydia87@hotmail.com | Sandy | Inactive | $297.12 |
| Patti Boyle | raquel69@yahoo.com | Salina | Inactive | $62.67 |
| Cordia Willms | christian54@gmail.com | West Guyport | Active | $34.34 |
| Friedrich Schmeler | halie.mcglynn93@gmail.com | New Erickstad | Active | $220.44 |
| Carlie Mertz | cleta_gleason17@hotmail.com | Port Gertrude | Active | $67.18 |
| Gracie Waters | anthony78@yahoo.com | Arvada | Active | $728.21 |
| Tim Wyman | pietro41@hotmail.com | Lebsackborough | Active | $395.57 |
| Emiliano Ryan | johanna_koss36@yahoo.com | Elizabethstad | Active | $475.96 |
| Total | $5,736.73 | |||
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 |