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 | $999.54 |
| INV002 | Paid | Credit Card | $891.04 |
| INV003 | Unpaid | Bank Transfer | $577.35 |
| INV004 | Unpaid | Credit Card | $133.79 |
| INV005 | Pending | Credit Card | $148.81 |
| INV006 | Pending | PayPal | $196.86 |
| INV007 | Paid | Bank Transfer | $479.12 |
| Total | $3,426.51 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lorenzo Koelpin | National Configuration Administrator | lorenzo_koelpin@gmail.com | Admin | |
| Irvin Emmerich | Corporate Directives Agent | irvin.emmerich@yahoo.com | Viewer | |
| Eldora Langworth | Lead Applications Agent | eldora_langworth80@gmail.com | Viewer | |
| Tamia Funk | Regional Group Officer | tamia_funk@yahoo.com | Admin | |
| Marta Barrows | Central Program Associate | marta.barrows13@yahoo.com | Member | |
| Shane Zieme | Customer Paradigm Director | shane_zieme19@hotmail.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 |
|---|---|---|
Iris Reichert Senior Metrics Director iris_reichert72@hotmail.com | Admin | |
Melody Wilderman National Factors Officer melody_wilderman71@yahoo.com | Admin | |
Omar Murray National Program Designer omar.murray@yahoo.com | Member | |
Chloe Bauch Central Configuration Officer chloe.bauch@gmail.com | Admin | |
Glennie Haag Dynamic Web Strategist glennie.haag@yahoo.com | Admin | |
Olivia Pollich Principal Functionality Producer olivia.pollich24@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Stephanie Brown Human Mobility Engineer stephanie.brown12@hotmail.com | Viewer | |
Garland McCullough National Communications Supervisor garland_mccullough@hotmail.com | Viewer | |
London Hodkiewicz Central Accountability Officer london.hodkiewicz@hotmail.com | Member | |
Elisa Schulist Chief Functionality Coordinator elisa.schulist79@yahoo.com | Admin | |
Timmy Strosin Forward Research Officer timmy.strosin35@gmail.com | Member | |
Lula Farrell Product Creative Associate lula_farrell2@yahoo.com | Admin | |
Ernesto Sporer Legacy Accounts Liaison ernesto.sporer30@hotmail.com | Admin | |
Kathryn Spencer Lead Intranet Manager kathryn.spencer7@gmail.com | Member | |
Sharon Mueller Future Response Planner sharon_mueller@gmail.com | Admin | |
Ollie Ondricka Human Accounts Manager ollie_ondricka@yahoo.com | Viewer | |
Rosemarie McClure Forward Integration Assistant rosemarie_mcclure96@yahoo.com | Viewer | |
Carla Waters Corporate Optimization Consultant carla.waters94@gmail.com | Viewer | |
Dovie Haag Regional Applications Consultant dovie_haag44@hotmail.com | Member | |
Annabelle Borer Internal Integration Technician annabelle.borer@yahoo.com | Member | |
Alyssa Konopelski Legacy Group Facilitator alyssa.konopelski@gmail.com | Viewer | |
Wilhelmine Quigley National Tactics Director wilhelmine_quigley97@gmail.com | Admin | |
Derick Schroeder Product Directives Strategist derick_schroeder73@gmail.com | Member | |
Kathryn Lebsack Investor Identity Planner kathryn_lebsack@yahoo.com | Admin | |
Heaven Cole Corporate Brand Associate heaven_cole@yahoo.com | Viewer | |
Nancy Hirthe Senior Creative Officer nancy_hirthe72@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 | |
|---|---|---|---|---|
| Fabiola Stroman | mildred_mohr@hotmail.com | Port Alvera | Active | $792.16 |
| Vincent Schamberger | nellie.nienow@gmail.com | Sioux City | Active | $615.32 |
| Norma Mosciski-Brown | price_sipes63@hotmail.com | Lynn | Active | $930.22 |
| Electa Welch I | nathan_torp@hotmail.com | Framibury | Active | $116.31 |
| Eugene Borer | ed_becker@yahoo.com | West Clifford | Inactive | $558.55 |
| Total | $3,012.56 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ross Schulist @abdul16 | ferne.bernhard@gmail.com | East Kendraview | Active | $602.74 |
Kelsie Rowe @blake.hane | hildegard.cummerata95@hotmail.com | Redwood City | Inactive | $768.37 |
Meredith Kunde @telly_russel59 | lester79@yahoo.com | North Belindaville | Active | $173.33 |
Dr. Dan Osinski @charlene.marquardt37 | esta23@hotmail.com | Ebert-Wolfborough | Active | $1.70 |
Regina Gottlieb @julie.heidenreich | genoveva36@hotmail.com | Hoffman Estates | Inactive | $15.06 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Allison Johnston | loretta_dicki23@gmail.com | Ullrichstad | Inactive | $1,087.85 |
| Boris Heaney | carmen.murphy@hotmail.com | Lake Kristina | Inactive | $893.03 |
| Elouise Mills | hildegard_emard@yahoo.com | Bechtelar-McGlynnland | Inactive | $299.62 |
| Floy Turner | eugene_johns@hotmail.com | Jonesboro | Inactive | $887.68 |
| Moises Turner | roger.lemke@yahoo.com | East Flora | Active | $103.74 |
| Total | $3,271.92 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Harvey Conn | tricia.hamill-kohler@hotmail.com | Tempe | Inactive | $536.28 |
| Abigail Adams | raphaelle.bechtelar@hotmail.com | West Conrad | Inactive | $1,061.55 |
| Hailee Rau | hipolito_bins@yahoo.com | Ismaelton | Active | $776.59 |
| Brent Miller | jordy.baumbach@hotmail.com | Fort Delpha | Active | $1,078.11 |
| Berenice Dibbert | nick_watsica@hotmail.com | Leannonborough | Active | $9.53 |
| Total | $3,462.06 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Salma Hahn | elmore_fritsch@yahoo.com | Quigleyville | Active | $177.60 |
| Terrence Doyle | estelle_olson33@hotmail.com | Raleigh | Inactive | $502.14 |
| Maybelle Heller Sr. | napoleon.keebler@yahoo.com | Huelchester | Inactive | $312.46 |
| Neil Keebler | tricia76@yahoo.com | South Ulicesstad | Active | $153.11 |
| Yvonne Stamm | antonietta.ward@hotmail.com | Mertzborough | Active | $447.02 |
| Total | $1,592.33 | |||
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 Daisy Stoltenberg | anthony.goldner@gmail.com | North Reyfort | Inactive | $805.03 | |
| Rhianna Jast | noe.anderson@hotmail.com | Lake Darla | Inactive | $1,075.52 | |
| Minnie Ziemann | carey_bogan6@gmail.com | Bismarck | Active | $705.92 | |
| Mack Deckow | jonas_mccullough@yahoo.com | Gastonia | Inactive | $926.88 | |
| Ellsworth Greenholt DVM | peter.rohan@gmail.com | Luciaville | Active | $443.49 | |
| Total | $3,956.84 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ollie Goyette | lewis_jast72@yahoo.com | North Garrett | Active | $723.09 | |
| Polly Monahan | terrence_runolfsdottir@gmail.com | Oak Lawn | Active | $539.35 | |
| Justina Strosin | nya.hyatt25@gmail.com | Gloverport | Inactive | $297.75 | |
| Elmer Langworth DVM | landen.cremin79@hotmail.com | Tuckahoe | Active | $250.91 | |
| Louise Fadel | haylie_marquardt71@yahoo.com | West Babylon | Inactive | $325.21 | |
| Total | $2,136.31 | ||||
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 | |
|---|---|---|---|---|
| Dewey Ullrich-Schuster | miranda94@hotmail.com | South Lorenzoberg | Active | $900.75 |
| Mrs. Eloise Reichert | patti72@hotmail.com | Thielview | Inactive | $662.26 |
| Alejandro Oberbrunner-Altenwerth | rodney_larkin@gmail.com | Loismouth | Inactive | $553.18 |
| Miss Eleazar Zulauf | francesca_lind88@yahoo.com | Edythefurt | Active | $357.01 |
| Charlene Crist | darren_brown28@gmail.com | Port Vilmaport | Inactive | $698.01 |
| Ms. Abdiel Herzog | mark_bauch@gmail.com | Johns Creek | Inactive | $378.44 |
| Carlos Gerlach | melissa56@hotmail.com | New Brionna | Active | $176.25 |
| Fatima Kovacek | dewitt_haley@gmail.com | North Tonymouth | Inactive | $799.56 |
| Efrain Lind | dolores31@gmail.com | West Magdalenaworth | Inactive | $679.30 |
| Evalyn Orn | kristina76@gmail.com | Antwonstad | Active | $370.24 |
| Shanon Abshire | adam44@yahoo.com | Lake Lowellland | Active | $1,146.65 |
| Claude Bernhard | london_rau60@hotmail.com | South Ana | Inactive | $548.36 |
| Greg Koelpin | alonzo6@hotmail.com | Port Jaymeside | Inactive | $90.15 |
| Wyman Yundt | allan.weimann@gmail.com | Hahnfort | Inactive | $955.51 |
| Deshawn McCullough | patti.mitchell7@hotmail.com | Jettworth | Active | $471.68 |
| Total | $8,787.35 | |||
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 |