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 | Bank Transfer | $395.24 |
| INV002 | Paid | PayPal | $424.20 |
| INV003 | Paid | PayPal | $315.82 |
| INV004 | Pending | PayPal | $292.77 |
| INV005 | Paid | Credit Card | $855.88 |
| INV006 | Pending | Credit Card | $569.49 |
| INV007 | Unpaid | Credit Card | $285.28 |
| Total | $3,138.68 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Marjorie Koepp | Central Brand Representative | marjorie_koepp38@gmail.com | Viewer | |
| Becky Rolfson | Global Implementation Consultant | becky.rolfson@yahoo.com | Admin | |
| Jamison Christiansen | Product Accountability Facilitator | jamison_christiansen99@hotmail.com | Admin | |
| Thad Thompson | Lead Markets Assistant | thad.thompson@hotmail.com | Admin | |
| Michel Goldner | Future Usability Technician | michel_goldner@yahoo.com | Admin | |
| Gerry Tillman-Ankunding | Principal Configuration Representative | gerry_tillman-ankunding@gmail.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 |
|---|---|---|
Terence Hudson Corporate Accountability Producer terence_hudson35@hotmail.com | Viewer | |
Weston Herzog International Group Assistant weston.herzog@yahoo.com | Member | |
Christie Simonis Central Configuration Planner christie_simonis20@hotmail.com | Member | |
Berta Connelly Regional Creative Representative berta_connelly94@yahoo.com | Member | |
Janessa Hahn Customer Program Analyst janessa_hahn@gmail.com | Admin | |
Ezekiel Tillman Internal Integration Producer ezekiel_tillman4@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 |
|---|---|---|
Dwight Toy Forward Implementation Assistant dwight_toy1@yahoo.com | Viewer | |
Efrain Daniel Customer Identity Manager efrain_daniel62@hotmail.com | Viewer | |
Maggie Gulgowski Internal Research Supervisor maggie.gulgowski34@gmail.com | Admin | |
Marshall Batz District Division Engineer marshall_batz@gmail.com | Admin | |
Darlene Auer Customer Accountability Director darlene_auer@yahoo.com | Admin | |
Brain Yost Product Factors Technician brain.yost40@hotmail.com | Viewer | |
Victor Volkman Chief Mobility Specialist victor.volkman@hotmail.com | Admin | |
Muriel Kemmer-Kessler Internal Operations Consultant muriel_kemmer-kessler4@hotmail.com | Viewer | |
Alan Lubowitz Global Group Executive alan_lubowitz67@hotmail.com | Member | |
Fleta Hamill Dynamic Interactions Technician fleta_hamill@gmail.com | Viewer | |
Jeremiah Doyle National Web Coordinator jeremiah_doyle9@gmail.com | Viewer | |
Sherwood Rogahn Dynamic Factors Coordinator sherwood.rogahn@yahoo.com | Admin | |
Lindsey Graham International Division Engineer lindsey.graham62@yahoo.com | Viewer | |
Aleen Tremblay Forward Branding Architect aleen_tremblay16@yahoo.com | Admin | |
Aaron Gleason District Directives Planner aaron_gleason@gmail.com | Member | |
Janick Stoltenberg Internal Solutions Engineer janick_stoltenberg@gmail.com | Admin | |
Randal Bartell International Configuration Manager randal_bartell@hotmail.com | Viewer | |
Colt Fritsch Chief Mobility Technician colt.fritsch@yahoo.com | Viewer | |
Faith Koch Senior Branding Director faith_koch@yahoo.com | Admin | |
Ahmad Lubowitz International Interactions Liaison ahmad_lubowitz58@gmail.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 | |
|---|---|---|---|---|
| Kirsten Russel | emily.berge@hotmail.com | Ulicesstad | Inactive | $113.43 |
| Teri Reinger-Collins | jeanne33@yahoo.com | Framifort | Active | $525.31 |
| Kenneth Smith | ramon_daniel@hotmail.com | Greensboro | Inactive | $1,060.67 |
| Orville Waters | seth39@yahoo.com | Rodriguezview | Active | $356.49 |
| Coralie Watsica I | nathaniel50@yahoo.com | Kassulke-Wardbury | Inactive | $117.40 |
| Total | $2,173.30 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ida Koelpin @gwen_brown79 | mable_emmerich81@yahoo.com | Koelpinmouth | Inactive | $633.84 |
Tito Schmidt @liana53 | may_bruen83@yahoo.com | New Maryann | Inactive | $30.21 |
Muriel Swift-Kub @herman60 | gerda61@gmail.com | Jupiter | Inactive | $33.52 |
Elinore Mertz @lora.cremin | kent4@yahoo.com | Chelseafield | Inactive | $955.30 |
Mr. Miller Kemmer @carlos_bruen | phoebe92@gmail.com | Fort Lucinda | Inactive | $639.51 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Isabelle Murphy | nedra.gerlach-franecki76@yahoo.com | Melanieport | Inactive | $809.94 |
| Claudie Kuphal | nannie.bechtelar81@gmail.com | Doyleton | Inactive | $581.91 |
| Isobel Towne | tom.haley@gmail.com | Port Estrella | Inactive | $965.00 |
| Ross Zemlak | harvey_kuhn96@gmail.com | New Ivanville | Active | $1,189.13 |
| Mac McCullough | sheldon.schmidt11@hotmail.com | Lavonnemouth | Active | $492.52 |
| Total | $4,038.50 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lucas Barton | evan63@hotmail.com | West Deonteborough | Inactive | $518.74 |
| Margarita Zemlak | al_leannon@yahoo.com | Noelfurt | Inactive | $385.37 |
| Bobbie Stroman | katlyn.farrell43@gmail.com | New Taniaton | Active | $8.57 |
| Darien Gulgowski | kiel50@yahoo.com | Simonischester | Active | $118.59 |
| Stacy Morissette | asha72@yahoo.com | Sonjaton | Inactive | $838.42 |
| Total | $1,869.69 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Oliver Hammes | matt.bogan9@gmail.com | Kimberlyfield | Inactive | $249.87 |
| Max Greenfelder Jr. | kathryn31@yahoo.com | Fort Noelshire | Active | $761.15 |
| Mr. Randall Hickle | jermain.schultz@hotmail.com | Port Archiestad | Inactive | $974.27 |
| Alexander Altenwerth | colleen_heidenreich76@yahoo.com | McKinney | Inactive | $597.13 |
| Dion Beer | dan19@hotmail.com | Greenville | Inactive | $453.46 |
| Total | $3,035.88 | |||
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 | ||
|---|---|---|---|---|---|
| Annamae Marks | bennett_schroeder@gmail.com | North Cristobal | Active | $1.90 | |
| Adelbert Terry | joann86@yahoo.com | Surprise | Inactive | $317.46 | |
| Misael Deckow | jordan_parisian75@yahoo.com | Ziemeborough | Active | $1,176.70 | |
| Mr. Ralph Nolan DDS | eldon_keebler@yahoo.com | Sammyfield | Active | $1,063.35 | |
| Margaret Schimmel | precious.nikolaus@gmail.com | Lake Hectorshire | Inactive | $498.43 | |
| Total | $3,057.84 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Salvador Hermann | gloria_gerhold48@gmail.com | Aliciaton | Inactive | $216.23 | |
| Hal Nikolaus | paul.glover9@yahoo.com | Weissnatside | Inactive | $1,045.21 | |
| Dustin Kilback-Borer | kody53@yahoo.com | Michelleview | Active | $1.24 | |
| Casper Kuhlman | kallie48@yahoo.com | Ceres | Active | $480.77 | |
| Meredith Kirlin | tracey.kertzmann81@gmail.com | Chino Hills | Inactive | $385.89 | |
| Total | $2,129.34 | ||||
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 | |
|---|---|---|---|---|
| Adam Shields | sabrina_bode@yahoo.com | Osinskiport | Active | $539.44 |
| Wilma Schuster-Kilback | jane_klocko@hotmail.com | Williamport | Active | $1,129.18 |
| Daisy Abshire-Durgan | herman83@hotmail.com | West Leroy | Active | $953.03 |
| Peter Wisozk | michelle_abshire@yahoo.com | Lake Anikamouth | Inactive | $485.41 |
| Deontae Blick | houston_friesen1@hotmail.com | Lake Carolport | Inactive | $843.65 |
| Fiona Swaniawski | shaylee66@hotmail.com | Fort Kurtmouth | Inactive | $734.34 |
| Ruby Medhurst | ellsworth21@hotmail.com | O'Konborough | Active | $164.45 |
| Meghan Smith III | steve45@hotmail.com | Murrieta | Active | $281.01 |
| Mr. Jacinthe Sporer MD | tremaine.farrell74@gmail.com | Rufusberg | Active | $342.12 |
| Ms. Deangelo Hoeger | ernest.robel@hotmail.com | New Lilyantown | Active | $651.06 |
| Nicholas Gleason | edmond_macejkovic-streich@gmail.com | Fort Annaworth | Active | $972.46 |
| Cary Terry | kiera63@gmail.com | Laguna Niguel | Active | $847.13 |
| Nyasia Huels | alonzo.mclaughlin36@hotmail.com | Geraldineland | Inactive | $215.84 |
| Floyd Auer-Dicki | chad_cruickshank@hotmail.com | Port Jamesonville | Active | $195.25 |
| Logan Hyatt | alberto.reilly88@gmail.com | Lesleyberg | Active | $67.19 |
| Total | $8,421.56 | |||
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 |