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 | $677.93 |
| INV002 | Paid | Credit Card | $211.86 |
| INV003 | Paid | Bank Transfer | $688.67 |
| INV004 | Unpaid | PayPal | $935.29 |
| INV005 | Pending | Credit Card | $931.57 |
| INV006 | Paid | Bank Transfer | $244.45 |
| INV007 | Unpaid | PayPal | $451.98 |
| Total | $4,141.75 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Darnell Weber | District Integration Developer | darnell.weber85@yahoo.com | Member | |
| Nat Tromp | International Accountability Director | nat.tromp@gmail.com | Admin | |
| Hope Zemlak | Product Metrics Officer | hope.zemlak@yahoo.com | Member | |
| Nichole Bode | Chief Functionality Coordinator | nichole_bode63@gmail.com | Member | |
| Jermain McGlynn | International Metrics Engineer | jermain.mcglynn14@yahoo.com | Admin | |
| Tracey Anderson | Dynamic Mobility Manager | tracey.anderson@gmail.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 |
|---|---|---|
Sophie Glover Chief Paradigm Associate sophie.glover8@hotmail.com | Member | |
Taylor Kautzer Human Mobility Engineer taylor.kautzer@hotmail.com | Admin | |
Myron Champlin Regional Markets Representative myron.champlin12@yahoo.com | Admin | |
Dean Cruickshank Legacy Web Representative dean.cruickshank@yahoo.com | Admin | |
Tonya Bartoletti International Tactics Planner tonya.bartoletti@hotmail.com | Member | |
Omer Kub Central Brand Assistant omer_kub9@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Adriana Harber International Usability Architect adriana_harber1@yahoo.com | Member | |
Kirstin Powlowski Lead Web Supervisor kirstin.powlowski25@hotmail.com | Member | |
Flavio Blanda Corporate Accounts Director flavio.blanda29@yahoo.com | Viewer | |
Aniya Romaguera Product Intranet Assistant aniya_romaguera@gmail.com | Viewer | |
Alysa Spinka Forward Metrics Consultant alysa.spinka@gmail.com | Admin | |
Terence Metz District Factors Consultant terence.metz4@hotmail.com | Viewer | |
Andre Erdman Regional Accounts Producer andre.erdman@yahoo.com | Admin | |
Lillian Kling Global Assurance Engineer lillian.kling@yahoo.com | Member | |
Jose Conroy Future Web Agent jose_conroy96@gmail.com | Member | |
Yessenia Cormier Future Security Director yessenia.cormier29@gmail.com | Admin | |
Frank Wisoky Central Quality Strategist frank_wisoky98@gmail.com | Member | |
Ole Windler Forward Security Manager ole.windler@gmail.com | Viewer | |
Sadye Mann Senior Optimization Assistant sadye_mann59@hotmail.com | Viewer | |
Michael Hilpert Internal Functionality Analyst michael_hilpert97@hotmail.com | Member | |
Bridgette Wilkinson Global Intranet Representative bridgette.wilkinson11@hotmail.com | Admin | |
Jonas Mueller Internal Usability Assistant jonas_mueller66@hotmail.com | Admin | |
Cristina Hessel Central Web Assistant cristina_hessel@yahoo.com | Admin | |
Kendra Moen Product Factors Executive kendra.moen59@yahoo.com | Admin | |
Earnestine Schultz Principal Applications Coordinator earnestine.schultz@yahoo.com | Admin | |
Nathaniel Bruen Chief Implementation Agent nathaniel.bruen35@yahoo.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 | |
|---|---|---|---|---|
| Freddie Thompson PhD | kameron.wiegand@gmail.com | Desireeville | Inactive | $768.84 |
| Aletha Douglas | nancy_moore46@gmail.com | Fort Connie | Active | $700.96 |
| Myrtle Veum | tia_oberbrunner46@gmail.com | South Gilberto | Inactive | $77.77 |
| Landen Weber | aiden_hegmann@hotmail.com | New Irma | Active | $411.33 |
| Ms. Sue Spencer-Ledner | alexandro58@yahoo.com | New Mitchell | Inactive | $493.77 |
| Total | $2,452.67 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rita Kub-Carter @norma.legros58 | russ.rice81@yahoo.com | Graceland | Inactive | $198.08 |
Dan Rau DVM @david17 | antone66@gmail.com | Marianastad | Inactive | $553.77 |
Kristopher Lind @pascale.nitzsche | harriet.rutherford-mosciski31@yahoo.com | Waltham | Inactive | $636.45 |
Mr. Lloyd Hayes @angela.kozey18 | andre.mante@gmail.com | Cathedral City | Active | $443.36 |
Elizabeth Lebsack @norma38 | lyle_lemke89@gmail.com | Armstrongview | Inactive | $451.91 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shelley Ernser | hayley.breitenberg@gmail.com | Paulinechester | Inactive | $379.85 |
| Van Prosacco | sheldon_hermiston@gmail.com | Malachiville | Inactive | $238.48 |
| Zachariah Will | forrest.bahringer-hirthe95@gmail.com | Durganboro | Active | $896.31 |
| Martin Hamill | boris.waters31@yahoo.com | Port Steven | Inactive | $1,173.01 |
| Kari Parker | brett_stracke-friesen65@hotmail.com | South Loretta | Inactive | $714.59 |
| Total | $3,402.24 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Vito Wilderman Jr. | leann_shanahan@gmail.com | Myrtleberg | Inactive | $878.19 |
| Roy Roob | estefania63@yahoo.com | Jerdeside | Active | $249.41 |
| Jerald Reichel | aubrey_runolfsdottir88@yahoo.com | North Nadinecester | Active | $489.85 |
| Cora Farrell | fabiola66@gmail.com | Castro Valley | Inactive | $280.25 |
| Melyna Leannon | juwan9@hotmail.com | Fort Carriefurt | Inactive | $585.35 |
| Total | $2,483.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Malcolm Abshire | diane.torp@gmail.com | Irvinland | Active | $995.05 |
| Alma Schmitt | kristina40@hotmail.com | Murphychester | Inactive | $680.39 |
| Haleigh Stark | jorge80@hotmail.com | Fort Aliciaworth | Inactive | $313.41 |
| Estevan Schaefer | lawson_goldner@gmail.com | Port Ramona | Active | $1,108.59 |
| Virginia Greenholt | nils83@hotmail.com | Feilland | Inactive | $980.80 |
| Total | $4,078.24 | |||
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 | ||
|---|---|---|---|---|---|
| Clyde Hintz | corey90@hotmail.com | Lake Loraine | Active | $101.07 | |
| Delia O'Reilly | florence_macejkovic35@gmail.com | West Felix | Active | $862.99 | |
| Clyde Veum | antoinette70@hotmail.com | Rochester | Active | $583.61 | |
| Mr. Caleigh Herzog | cristopher_kris44@yahoo.com | East Josianne | Active | $1,199.68 | |
| Kristy Osinski | eliseo_lowe@gmail.com | Littelfurt | Active | $1,114.13 | |
| Total | $3,861.48 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Gwendolyn Zieme II | ken.towne@yahoo.com | West Elisabethside | Inactive | $741.98 | |
| Regina Hartmann | willy56@yahoo.com | Kihnfurt | Active | $28.45 | |
| Kaitlin Mills | kole_torp@yahoo.com | North Miami Beach | Inactive | $1,183.33 | |
| Mr. Tyler Gulgowski | marlen.sanford39@hotmail.com | Lake Demetris | Inactive | $433.54 | |
| Ms. Delores Wiza | loretta56@yahoo.com | Uriahstad | Inactive | $139.15 | |
| Total | $2,526.45 | ||||
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 | |
|---|---|---|---|---|
| Grayce Jakubowski | karson_sanford@hotmail.com | West Nichole | Inactive | $977.06 |
| Mr. Phillip Muller | omer_dooley79@yahoo.com | East Almafurt | Inactive | $466.32 |
| Sheryl Reynolds Sr. | marvin30@gmail.com | Parker | Inactive | $477.55 |
| Effie Jacobi | adrienne.rowe@gmail.com | Fort Nikkostad | Active | $123.87 |
| Lawrence MacGyver | andrea_johnston@gmail.com | Beaumont | Inactive | $219.49 |
| Vera Fisher | horacio72@hotmail.com | Rowlett | Inactive | $849.85 |
| Bud Leuschke | kay16@gmail.com | East Gabrielton | Inactive | $547.10 |
| Miss Bud Jenkins V | grayson.kub95@yahoo.com | East Vidal | Active | $590.97 |
| Sim Moen | noah.schmidt@yahoo.com | Quigleyboro | Inactive | $35.46 |
| Osvaldo Abshire | winston.hamill52@hotmail.com | Port Janice | Active | $944.58 |
| Rene Schneider | sabina_stark44@gmail.com | South Thereseville | Active | $1,054.20 |
| Orie Spencer | carlos30@gmail.com | Opalborough | Inactive | $3.78 |
| Litzy Barrows | reyna.wehner-reinger61@hotmail.com | Roberts-Langoshview | Inactive | $818.82 |
| Mrs. Kay Hand | devan_bashirian-purdy65@yahoo.com | Kulascester | Inactive | $256.27 |
| Adrienne Ankunding | amya73@yahoo.com | New Codytown | Active | $152.59 |
| Total | $7,517.91 | |||
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 |