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 | Paid | Credit Card | $119.62 |
| INV002 | Pending | Credit Card | $657.70 |
| INV003 | Pending | Bank Transfer | $541.72 |
| INV004 | Paid | PayPal | $386.54 |
| INV005 | Pending | PayPal | $649.38 |
| INV006 | Unpaid | PayPal | $280.08 |
| INV007 | Paid | Bank Transfer | $916.46 |
| Total | $3,551.50 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Enrique Stoltenberg | Corporate Paradigm Manager | enrique.stoltenberg17@hotmail.com | Admin | |
| Merritt Keeling | Forward Data Engineer | merritt_keeling60@gmail.com | Admin | |
| Dave Glover | Senior Interactions Agent | dave_glover@hotmail.com | Viewer | |
| Maiya Cassin | Forward Directives Strategist | maiya_cassin@hotmail.com | Member | |
| Evan Runolfsson | International Operations Analyst | evan.runolfsson@yahoo.com | Admin | |
| Beulah Brakus | Investor Security Associate | beulah.brakus@hotmail.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 |
|---|---|---|
Kent Zboncak National Solutions Assistant kent.zboncak67@hotmail.com | Member | |
Gudrun Greenholt Direct Program Designer gudrun_greenholt59@hotmail.com | Member | |
Abdullah Dach Customer Factors Administrator abdullah.dach@gmail.com | Member | |
Joel Kassulke Legacy Tactics Director joel.kassulke@hotmail.com | Viewer | |
Glenn Harvey Principal Configuration Analyst glenn_harvey@hotmail.com | Viewer | |
Damion Reichert Dynamic Creative Specialist damion.reichert13@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 |
|---|---|---|
Hayden Blick Lead Optimization Strategist hayden.blick40@hotmail.com | Admin | |
Gideon Bechtelar Chief Branding Coordinator gideon.bechtelar40@yahoo.com | Admin | |
Noemy Kirlin District Quality Supervisor noemy.kirlin35@hotmail.com | Admin | |
Donna Osinski Lead Integration Officer donna.osinski@hotmail.com | Viewer | |
Thalia Cormier International Intranet Executive thalia_cormier22@gmail.com | Admin | |
Rosa Franey Internal Creative Officer rosa_franey@hotmail.com | Admin | |
Annie Murphy International Group Consultant annie_murphy44@gmail.com | Member | |
Clara Greenfelder Internal Configuration Producer clara.greenfelder@hotmail.com | Member | |
Delores Kutch Human Infrastructure Planner delores.kutch33@yahoo.com | Admin | |
Gwen Mayert Human Usability Liaison gwen.mayert87@yahoo.com | Member | |
Traci Herman National Solutions Coordinator traci.herman@gmail.com | Admin | |
Kristopher Rosenbaum-Klein Investor Operations Representative kristopher.rosenbaum-klein96@gmail.com | Viewer | |
Tara Kovacek Customer Program Facilitator tara_kovacek47@gmail.com | Member | |
Kenya Sporer Regional Division Coordinator kenya_sporer96@yahoo.com | Admin | |
Misty Stokes Chief Integration Assistant misty_stokes20@gmail.com | Viewer | |
Adrian Morar Corporate Marketing Engineer adrian.morar34@yahoo.com | Admin | |
Demond Purdy National Markets Producer demond_purdy0@hotmail.com | Member | |
Magnolia Ondricka Internal Solutions Strategist magnolia_ondricka@yahoo.com | Member | |
Teresa Johnston Principal Program Developer teresa_johnston@yahoo.com | Viewer | |
Pablo Stokes Human Metrics Supervisor pablo.stokes@hotmail.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 | |
|---|---|---|---|---|
| Ethel Hills | cameron_damore60@gmail.com | East Buckborough | Inactive | $224.38 |
| Marilyn Kub | lonzo_powlowski@hotmail.com | North Maddisonburgh | Inactive | $1,028.52 |
| Harry Macejkovic | merlin_fritsch@yahoo.com | Warrenshire | Active | $1,195.42 |
| Rosalinda Kuvalis | ron96@gmail.com | Brownsville | Active | $282.77 |
| Stanton Wunsch | faith.swaniawski@yahoo.com | Kearny | Active | $127.70 |
| Total | $2,858.79 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kole Feil @mary88 | berniece56@hotmail.com | Marvinstad | Inactive | $328.39 |
Matthew Kling @ernesto_hyatt3 | merle.walker@hotmail.com | Emelieburgh | Active | $357.79 |
Monique Cormier II @harmon.runolfsdottir | jalon90@gmail.com | Sanford | Active | $374.92 |
Eric Orn @keshaun59 | omari60@hotmail.com | San Angelo | Active | $101.97 |
Lolita Turner @doyle_sporer19 | lloyd.weimann@gmail.com | Fort Jacob | Inactive | $350.83 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ann West | zelda_glover48@yahoo.com | New Adalinefurt | Inactive | $427.26 |
| Nicholas Schultz | mekhi72@hotmail.com | Annettemouth | Active | $477.76 |
| Amara Batz Sr. | jake.kunde@yahoo.com | East Billie | Active | $111.42 |
| Ford Orn | zora.goodwin96@yahoo.com | Hammond | Active | $157.40 |
| Kade McClure | brandy93@hotmail.com | East Samuel | Active | $541.51 |
| Total | $1,715.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Preston Swift | chadd73@yahoo.com | Kunzefort | Active | $565.82 |
| German Hansen | conner90@gmail.com | Wheaton | Inactive | $241.91 |
| Opal Brakus | sammy.leffler96@yahoo.com | Lesleycester | Active | $311.98 |
| Beverly Hintz IV | suzanne_turcotte@hotmail.com | Keller | Inactive | $453.72 |
| Sonja Kemmer | alessia_rippin@yahoo.com | Davis | Inactive | $1,080.96 |
| Total | $2,654.39 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eino Lockman | gretchen_heathcote91@hotmail.com | New Erik | Inactive | $170.38 |
| Jenny Wuckert V | vivien58@gmail.com | Port Wilbert | Inactive | $126.79 |
| Kaela Kuhn | chet46@gmail.com | Lake Waltonville | Active | $458.83 |
| Jaren Emard-Fritsch | margarett74@gmail.com | McKenzieborough | Inactive | $60.69 |
| Woodrow Dickinson | tyrone64@yahoo.com | Elveraberg | Inactive | $529.53 |
| Total | $1,346.22 | |||
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 | ||
|---|---|---|---|---|---|
| Miss Domenico O'Reilly MD | scarlett_schamberger-lueilwitz@yahoo.com | New Emmettcester | Active | $400.43 | |
| Madisen Aufderhar | carrie_moore-lehner@gmail.com | Austinview | Active | $89.96 | |
| Manuel Stehr | delores27@hotmail.com | Rocklin | Active | $1,090.72 | |
| Kole Rowe | zachery59@yahoo.com | Bernierbury | Inactive | $1,157.82 | |
| Kari Hodkiewicz-Heidenreich III | meda5@gmail.com | South Frederick | Active | $354.02 | |
| Total | $3,092.95 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Laverne Ledner | ciara.okon16@yahoo.com | Thoraton | Inactive | $274.66 | |
| Maegan Rogahn | matthew93@gmail.com | West Haven | Active | $960.09 | |
| Jamarcus Considine Jr. | donna.dibbert@hotmail.com | Andersonstad | Active | $118.63 | |
| Zita Cormier | terri_nienow89@gmail.com | Aristad | Inactive | $961.70 | |
| Mrs. Joaquin Prohaska | mallie_heathcote@hotmail.com | South Donnieborough | Inactive | $806.55 | |
| Total | $3,121.63 | ||||
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. Ericka Heaney | vera.dickens17@yahoo.com | New Rafaelville | Active | $266.74 |
| Dr. Orie Rodriguez | elinore31@gmail.com | Willland | Inactive | $936.13 |
| Christine Hudson | milo.hansen1@gmail.com | Leesburg | Inactive | $493.08 |
| Nathaniel Schinner-Jast | jamel_yundt@gmail.com | South Jovanny | Active | $1,186.28 |
| Donny Jerde | rolando_labadie-daugherty@gmail.com | New Rosemaryborough | Inactive | $781.43 |
| Kelli Halvorson | delilah_mckenzie97@yahoo.com | Port Garrettworth | Active | $369.47 |
| Martine Kris | daryl_frami@gmail.com | North Janessa | Inactive | $382.21 |
| Arthur Green | mitchell_littel@yahoo.com | El Cajon | Inactive | $599.84 |
| Eleanor Friesen | stephen_rolfson@gmail.com | North Arely | Active | $56.95 |
| Marlon Fadel | jaeden_schaden@hotmail.com | Lianafield | Inactive | $1,046.38 |
| Gregg Ruecker | cleve_heaney61@yahoo.com | Niagara Falls | Active | $290.61 |
| Esther Ledner | muhammad_wunsch@yahoo.com | Fort Marian | Active | $678.07 |
| Elmer Murphy | leola27@hotmail.com | Goyettemouth | Active | $621.77 |
| Chloe Trantow | hettie47@hotmail.com | Lake Fredberg | Active | $1,157.38 |
| Ethel Buckridge | ross_howe52@hotmail.com | North Jan | Active | $127.51 |
| Total | $8,993.85 | |||
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 |