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 | PayPal | $333.58 |
| INV002 | Pending | Credit Card | $437.80 |
| INV003 | Paid | PayPal | $775.37 |
| INV004 | Unpaid | PayPal | $168.75 |
| INV005 | Pending | Bank Transfer | $257.62 |
| INV006 | Pending | PayPal | $930.86 |
| INV007 | Pending | Credit Card | $674.78 |
| Total | $3,578.76 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Roman Toy | Corporate Markets Developer | roman_toy32@gmail.com | Member | |
| Aric Fahey | Legacy Web Planner | aric_fahey@yahoo.com | Member | |
| Stefanie Schowalter | Product Assurance Assistant | stefanie_schowalter@hotmail.com | Admin | |
| Austyn Kuvalis | Senior Integration Coordinator | austyn.kuvalis@gmail.com | Member | |
| Martine Gutkowski | Legacy Marketing Officer | martine.gutkowski@hotmail.com | Member | |
| Emmett Predovic | Lead Creative Designer | emmett.predovic@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 |
|---|---|---|
Mindy Krajcik Regional Mobility Technician mindy_krajcik39@gmail.com | Admin | |
Justine Renner Investor Accounts Associate justine.renner75@gmail.com | Viewer | |
Queen Abshire National Mobility Executive queen_abshire74@hotmail.com | Viewer | |
Shelley Treutel Human Quality Designer shelley_treutel@gmail.com | Admin | |
Ayana Gislason Product Metrics Associate ayana_gislason@yahoo.com | Admin | |
Elenora Ullrich Investor Marketing Director elenora.ullrich@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 |
|---|---|---|
Vincent Hyatt Direct Branding Producer vincent_hyatt@yahoo.com | Member | |
Lilla MacGyver Senior Research Analyst lilla.macgyver33@yahoo.com | Viewer | |
Brandy McKenzie Human Marketing Representative brandy_mckenzie@hotmail.com | Admin | |
Jason Thompson Future Intranet Liaison jason.thompson@hotmail.com | Admin | |
Loren Dooley Internal Marketing Producer loren.dooley@hotmail.com | Viewer | |
Tim Franecki Principal Functionality Planner tim_franecki@gmail.com | Admin | |
Keshaun Stracke Forward Branding Liaison keshaun.stracke10@hotmail.com | Admin | |
Anna Douglas Chief Factors Technician anna.douglas17@hotmail.com | Admin | |
Wade Reichel Future Accounts Manager wade_reichel96@gmail.com | Admin | |
Francesca Heller Product Paradigm Orchestrator francesca.heller84@gmail.com | Admin | |
Murray Gulgowski Legacy Branding Facilitator murray.gulgowski60@yahoo.com | Viewer | |
Kristoffer Reinger Future Data Executive kristoffer.reinger13@yahoo.com | Viewer | |
Fatima Jacobs Lead Branding Producer fatima.jacobs@yahoo.com | Member | |
Harriet Legros-Tremblay Customer Security Officer harriet_legros-tremblay71@gmail.com | Admin | |
Belle Waters Future Creative Associate belle.waters@hotmail.com | Admin | |
Nettie Rau International Markets Engineer nettie_rau@gmail.com | Member | |
Palma Rempel Regional Factors Developer palma_rempel42@gmail.com | Viewer | |
Amara Wyman District Group Liaison amara_wyman@gmail.com | Viewer | |
Kelli Pfannerstill Central Branding Specialist kelli_pfannerstill@gmail.com | Admin | |
Caterina O'Keefe Human Accountability Consultant caterina_okeefe@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 | |
|---|---|---|---|---|
| Reta Heathcote | jazlyn8@yahoo.com | Kristinachester | Active | $482.63 |
| Carlton Turner | roman.weimann@yahoo.com | Homenickboro | Active | $1,126.36 |
| Eugenia Ledner V | naomie12@gmail.com | New Cicero | Active | $144.36 |
| Maximillian Ward | everett30@hotmail.com | Emardville | Inactive | $146.23 |
| Valerie Conroy | marcelo_cremin@hotmail.com | Deckowville | Inactive | $1,151.54 |
| Total | $3,051.12 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Micheal Grady @roberto_ryan43 | vickie_hammes21@hotmail.com | Balistreriborough | Inactive | $258.58 |
Weldon Rodriguez @pasquale_thompson65 | rochelle.wilderman54@gmail.com | Kuhlmanstead | Inactive | $683.69 |
Andy Bartoletti @delbert.wunsch22 | laurie.dubuque@gmail.com | Bogisichmouth | Active | $124.19 |
Amie Anderson-Harvey @meredith93 | brooke.mraz-orn@yahoo.com | Tremblaybury | Inactive | $646.89 |
Nicole Lakin @linwood40 | paul5@hotmail.com | Port Armand | Inactive | $5.40 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Griffin Dibbert | joey_kuhic@gmail.com | Rio Rancho | Inactive | $1,036.19 |
| Emilio Wiegand | charity_greenfelder@yahoo.com | Port Darrin | Inactive | $492.01 |
| Wade Davis | mildred.vonrueden@hotmail.com | Jakubowskiside | Active | $552.31 |
| Ulices Rice | hilda_mueller33@hotmail.com | Salina | Inactive | $837.85 |
| Mohammad Kihn Sr. | chelsey15@gmail.com | Lake Eltastad | Inactive | $539.76 |
| Total | $3,458.12 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shane Padberg | destinee_emard@hotmail.com | East Ramona | Active | $604.57 |
| Rahul Leuschke | dallas79@yahoo.com | Pembroke Pines | Active | $215.87 |
| Homer Gleason | zakary_spencer34@hotmail.com | Cydneyhaven | Inactive | $726.62 |
| Miss Belinda Heathcote | emil.blanda41@hotmail.com | Hermann-Pagaccester | Active | $886.22 |
| Gregg Deckow | tristian.conroy@gmail.com | South Kasandrafield | Active | $790.70 |
| Total | $3,223.98 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Wade Goyette | jazlyn_hoppe85@gmail.com | Fort Jacqueline | Inactive | $254.14 |
| Colleen Franey | john.klein60@yahoo.com | North Antoinetteton | Inactive | $840.87 |
| Eugenia Bednar | cielo.bauch74@hotmail.com | Cremincester | Inactive | $856.51 |
| Clayton Swaniawski II | sonia96@yahoo.com | Derrickfort | Inactive | $52.54 |
| Lori Lang | silvia.smitham27@gmail.com | Richiestead | Active | $850.68 |
| Total | $2,854.74 | |||
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 | ||
|---|---|---|---|---|---|
| Pamela Leannon | mac_considine-lesch23@yahoo.com | Gregcester | Active | $728.17 | |
| Lester Cronin | cortez85@gmail.com | Novato | Active | $768.54 | |
| Jane Ankunding | adam.oberbrunner@gmail.com | Cummerataport | Active | $324.17 | |
| Miss Lexi Bartell | francisco22@hotmail.com | Marieshire | Active | $762.35 | |
| Gretchen Wolf | dale.greenholt84@yahoo.com | Marquardtbury | Active | $453.09 | |
| Total | $3,036.32 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dr. Jess Graham II | candice.spencer@yahoo.com | New Maybelleport | Inactive | $68.22 | |
| Brad Crist Jr. | ethyl_barton1@gmail.com | Forestberg | Active | $318.84 | |
| Ottilie Nader | cory.zboncak82@yahoo.com | West Zoie | Active | $257.61 | |
| Lavinia Mertz DVM | sherry99@hotmail.com | East Taylorfurt | Inactive | $111.20 | |
| Amber Schinner | uriel_braun@gmail.com | Port Blancacester | Inactive | $441.62 | |
| Total | $1,197.49 | ||||
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 | |
|---|---|---|---|---|
| Euna Bartoletti | morton_schmeler97@gmail.com | DuBuquechester | Inactive | $322.52 |
| Homer Pfannerstill | anna.turner99@gmail.com | Bethesda | Active | $915.22 |
| Lana Ruecker | delbert.kovacek77@hotmail.com | Pensacola | Inactive | $454.02 |
| Amie Pouros-Parker | milan_rohan@gmail.com | Tracy | Inactive | $830.42 |
| Lawson Koch | jesus49@gmail.com | New Bufordside | Active | $574.95 |
| Leah Cummerata | kirstin_champlin69@gmail.com | Charlieberg | Active | $385.25 |
| Hattie Oberbrunner | elsa_doyle49@gmail.com | Manhattan | Active | $183.13 |
| Miss Blanche Effertz | greg_paucek@hotmail.com | Luisburgh | Inactive | $560.31 |
| Dr. Tomasa Baumbach | dimitri.fahey@hotmail.com | Adonisfurt | Inactive | $527.66 |
| Nicole Barrows | maximillia.torphy75@yahoo.com | Lionelshire | Inactive | $675.77 |
| Lou Mante | gracie90@gmail.com | Vacaville | Active | $1,125.69 |
| Aubrey Herman | seth7@hotmail.com | Hegmannview | Inactive | $1,189.53 |
| Abe Rowe | esther99@yahoo.com | Emoryburgh | Inactive | $1,026.33 |
| Gerhard Lehner | abner.halvorson@yahoo.com | Schmidtport | Inactive | $335.44 |
| Bill McLaughlin | minnie24@hotmail.com | Oxnard | Inactive | $981.92 |
| Total | $10,088.16 | |||
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 |