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 | $451.20 |
| INV002 | Pending | Bank Transfer | $229.63 |
| INV003 | Unpaid | PayPal | $981.99 |
| INV004 | Pending | Credit Card | $587.31 |
| INV005 | Unpaid | Credit Card | $367.96 |
| INV006 | Paid | Credit Card | $832.60 |
| INV007 | Pending | PayPal | $332.60 |
| Total | $3,783.29 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rosina Ziemann | Customer Branding Developer | rosina_ziemann@gmail.com | Member | |
| Zachary Kuhlman | Global Research Executive | zachary_kuhlman@hotmail.com | Admin | |
| Bernadette Cole | Senior Quality Planner | bernadette_cole7@gmail.com | Viewer | |
| Gillian DuBuque | Global Markets Engineer | gillian.dubuque99@yahoo.com | Viewer | |
| Berneice O'Keefe | Human Usability Analyst | berneice.okeefe@hotmail.com | Admin | |
| Lucinda Ledner | Chief Implementation Planner | lucinda.ledner52@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Olive Schneider Dynamic Metrics Manager olive_schneider96@hotmail.com | Member | |
Nancy Yost Internal Branding Engineer nancy_yost@hotmail.com | Viewer | |
Duane Stamm Lead Metrics Officer duane_stamm@hotmail.com | Admin | |
Diana Stiedemann Senior Tactics Associate diana.stiedemann@yahoo.com | Viewer | |
Heather Barton Direct Mobility Manager heather.barton@gmail.com | Member | |
Dianne Rosenbaum Direct Security Engineer dianne.rosenbaum@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Marlon King Future Program Orchestrator marlon.king14@hotmail.com | Viewer | |
Winston Legros Regional Implementation Agent winston.legros@yahoo.com | Viewer | |
Donato Klocko Customer Paradigm Representative donato.klocko@yahoo.com | Viewer | |
Laurence Wehner Principal Division Liaison laurence_wehner@hotmail.com | Admin | |
Ofelia Sawayn Lead Accounts Associate ofelia_sawayn82@yahoo.com | Member | |
Leonard Daugherty Lead Metrics Consultant leonard.daugherty@hotmail.com | Member | |
Jensen Dicki Principal Assurance Agent jensen.dicki@gmail.com | Viewer | |
Sheri Schroeder-Gislason Product Assurance Producer sheri_schroeder-gislason@hotmail.com | Admin | |
Luis Schowalter-Leannon Dynamic Quality Facilitator luis_schowalter-leannon53@yahoo.com | Admin | |
Laverne Kiehn Future Markets Designer laverne_kiehn5@hotmail.com | Admin | |
Ray Gerlach Central Creative Director ray.gerlach@hotmail.com | Admin | |
Timothy O'Hara International Markets Analyst timothy_ohara@gmail.com | Viewer | |
Tia Hudson Chief Integration Manager tia_hudson@gmail.com | Viewer | |
Eudora Toy District Functionality Analyst eudora.toy@yahoo.com | Member | |
Darla Steuber Direct Division Agent darla.steuber39@hotmail.com | Admin | |
Kevin Goldner Legacy Assurance Director kevin.goldner90@hotmail.com | Member | |
Bernadette Lehner Product Brand Technician bernadette.lehner57@yahoo.com | Viewer | |
Sherri Robel Forward Usability Representative sherri_robel11@yahoo.com | Member | |
Sandra Jacobs Senior Division Consultant sandra.jacobs12@hotmail.com | Admin | |
Kaycee Schowalter International Accounts Developer kaycee.schowalter95@yahoo.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 | |
|---|---|---|---|---|
| Mr. Brennan Lubowitz Jr. | porter.borer4@yahoo.com | Derekfield | Active | $180.88 |
| Ron Grant | malcolm.satterfield72@hotmail.com | Nakiaboro | Active | $229.63 |
| Clint Fahey | audrey76@hotmail.com | New Janefurt | Inactive | $321.57 |
| Keven Murray | miguel.moore31@yahoo.com | Valeriechester | Inactive | $706.34 |
| Nathan Osinski IV | herbert.rutherford44@gmail.com | Emmerichberg | Inactive | $593.88 |
| Total | $2,032.30 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Angelica Kerluke @myron_rath | gabrielle.larkin@yahoo.com | The Woodlands | Active | $346.95 |
Carrie Turner @maymie31 | kathleen6@hotmail.com | Palm Beach Gardens | Active | $471.74 |
Derick Schuppe @kristy11 | rod_bergnaum-spinka58@yahoo.com | Scottsdale | Active | $478.32 |
Fiona Stark @edward16 | rae.rogahn@yahoo.com | Bartellworth | Active | $654.23 |
Miss Kali Greenholt I @anita_yost-quigley38 | ludie15@gmail.com | Port Meganmouth | Active | $685.03 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elaina Bode | willie81@hotmail.com | Hahntown | Active | $727.40 |
| Dagmar Bayer | florian_walker@gmail.com | Pensacola | Inactive | $1,118.37 |
| Marshall Schmeler | jany.senger85@gmail.com | Wisokycester | Active | $158.63 |
| Karla Anderson | ralph20@gmail.com | Alpharetta | Active | $756.74 |
| Renee Willms | lorenzo90@yahoo.com | Rollinstead | Active | $1,009.72 |
| Total | $3,770.86 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tod Welch | erin.murray51@hotmail.com | Fort Cordeliaworth | Inactive | $422.16 |
| Laura Weimann | lela_turner-schoen@hotmail.com | New Heath | Active | $712.98 |
| Orlando Hudson-Erdman | kariane.okeefe@gmail.com | Harrisonburg | Inactive | $684.83 |
| Queenie Kuhn | theron81@hotmail.com | North Lorrainestead | Active | $296.51 |
| Dr. Bradford Weissnat | evie_konopelski70@yahoo.com | Lake Dwight | Active | $1,082.33 |
| Total | $3,198.81 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Reese Hagenes | teresa_franecki65@gmail.com | Powlowskiville | Inactive | $90.72 |
| Kasey Cummings | emanuel_emmerich@yahoo.com | Fort Maggiecester | Active | $423.23 |
| Shaun Stracke | joan.ryan@gmail.com | West Belle | Inactive | $881.97 |
| Dan Morissette | lorraine99@gmail.com | East Ramirohaven | Active | $335.34 |
| Kris Gutkowski | jordan.bayer@gmail.com | Kuphalfield | Inactive | $762.12 |
| Total | $2,493.38 | |||
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 | ||
|---|---|---|---|---|---|
| Craig Zulauf II | aron24@hotmail.com | Melvinstad | Active | $311.94 | |
| Linda Barton | rosanna_borer65@yahoo.com | New Assunta | Active | $382.52 | |
| Kaitlin Cormier Jr. | adan_kub21@hotmail.com | Lake Jaleelboro | Inactive | $716.54 | |
| Ms. Gage Keebler | velda_jakubowski@yahoo.com | East Sabrina | Active | $829.68 | |
| Stephanie Ondricka | harriet88@yahoo.com | New Urban | Inactive | $915.49 | |
| Total | $3,156.17 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Cristal Corwin | edgardo52@yahoo.com | South Felicity | Active | $129.79 | |
| Trey Kuhic Jr. | sabryna91@hotmail.com | Funkside | Active | $416.52 | |
| Joann Feil | sonia.feest@hotmail.com | Fort Moisescester | Active | $262.76 | |
| Ms. Marguerite Hermiston | carolanne.raynor@gmail.com | Shanahanside | Inactive | $1,058.49 | |
| Zachary Murray | finn7@gmail.com | Yorba Linda | Active | $1,184.22 | |
| Total | $3,051.78 | ||||
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 | |
|---|---|---|---|---|
| Eldridge Goyette | reyes92@gmail.com | Springdale | Active | $74.44 |
| Julian Dickens | malcolm.fadel69@gmail.com | Lake Elvis | Active | $1,107.62 |
| Cary Feeney | alisa2@yahoo.com | Fort Filiberto | Inactive | $976.01 |
| Kyle Hintz | arnold_schowalter59@gmail.com | Jacestead | Inactive | $1,028.85 |
| Tatyana Graham | karina.daniel95@hotmail.com | Torreyberg | Active | $1,061.04 |
| Richmond Bins | bernhard29@gmail.com | Kristyberg | Inactive | $911.38 |
| Raul Morar | alayna_senger@yahoo.com | Fort Grace | Active | $885.98 |
| Megan Ziemann | brandon.rippin85@gmail.com | New Kristian | Inactive | $1,039.18 |
| Christina Johns | toy_bradtke@gmail.com | Fort Odieberg | Active | $850.24 |
| Marty Franecki | immanuel97@gmail.com | Coeur d'Alene | Inactive | $447.51 |
| Zachary Wiegand | jeannette_cole71@gmail.com | Caguas | Active | $300.95 |
| Felicia Ankunding | frankie_reilly10@yahoo.com | Rayburgh | Active | $969.23 |
| Miss Sheryl Muller | devonte_labadie50@hotmail.com | Pittsfield | Inactive | $9.87 |
| Miss Laverne Ritchie | alison10@yahoo.com | South Miriam | Inactive | $303.89 |
| Amos Marks | ramiro86@gmail.com | Vandervortstead | Inactive | $1,037.76 |
| Total | $11,003.95 | |||
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 |