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 | $193.72 |
| INV002 | Paid | Bank Transfer | $316.90 |
| INV003 | Pending | Bank Transfer | $417.16 |
| INV004 | Pending | PayPal | $417.06 |
| INV005 | Paid | Bank Transfer | $504.43 |
| INV006 | Unpaid | PayPal | $820.18 |
| INV007 | Paid | Bank Transfer | $284.66 |
| Total | $2,954.11 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Eduardo O'Conner | Global Web Administrator | eduardo_oconner44@hotmail.com | Admin | |
| Tiffany Farrell | Investor Integration Engineer | tiffany_farrell16@gmail.com | Viewer | |
| Alan Grimes | District Creative Officer | alan_grimes@yahoo.com | Viewer | |
| Dee Shields | Principal Integration Liaison | dee.shields51@yahoo.com | Viewer | |
| Delpha Leuschke | Global Research Supervisor | delpha.leuschke@hotmail.com | Viewer | |
| Magali Runolfsdottir | Product Mobility Agent | magali_runolfsdottir32@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 |
|---|---|---|
Jasmine Franecki Global Markets Associate jasmine.franecki1@gmail.com | Member | |
Paolo Considine Principal Branding Specialist paolo_considine68@gmail.com | Admin | |
Adaline Carroll Product Tactics Technician adaline_carroll@gmail.com | Viewer | |
Kathleen White National Applications Specialist kathleen.white24@hotmail.com | Member | |
Marquise Trantow District Solutions Liaison marquise_trantow@hotmail.com | Viewer | |
Bridget Casper Customer Paradigm Consultant bridget.casper@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Bennie Bruen Forward Marketing Developer bennie.bruen22@gmail.com | Member | |
Cecil Cassin Legacy Optimization Liaison cecil.cassin@hotmail.com | Viewer | |
Lucy Medhurst Global Functionality Associate lucy_medhurst96@gmail.com | Admin | |
Patricia Nitzsche Senior Applications Planner patricia.nitzsche12@hotmail.com | Admin | |
Erick Treutel Central Data Administrator erick.treutel@gmail.com | Member | |
Laurie Gusikowski Future Markets Executive laurie.gusikowski96@hotmail.com | Member | |
Irma Mills Legacy Infrastructure Engineer irma_mills39@hotmail.com | Admin | |
Eileen Pagac District Branding Manager eileen.pagac79@yahoo.com | Member | |
Fredrick Wisoky Internal Factors Officer fredrick.wisoky@gmail.com | Admin | |
Gus Labadie Dynamic Directives Producer gus_labadie@yahoo.com | Viewer | |
Benjamin Doyle Future Interactions Strategist benjamin_doyle@yahoo.com | Member | |
Reggie Langworth Dynamic Usability Planner reggie.langworth@yahoo.com | Member | |
Jessica Schamberger Principal Directives Developer jessica_schamberger32@hotmail.com | Viewer | |
Tristian O'Connell Direct Creative Developer tristian_oconnell@hotmail.com | Viewer | |
Everett Veum Central Accountability Coordinator everett_veum@hotmail.com | Admin | |
Joyce Mayer National Functionality Technician joyce_mayer@yahoo.com | Member | |
Claude Windler Chief Program Manager claude.windler29@yahoo.com | Member | |
Ayla Jaskolski Human Markets Representative ayla_jaskolski@yahoo.com | Admin | |
Wesley Gibson Regional Identity Orchestrator wesley.gibson@hotmail.com | Member | |
Lavada Baumbach-Klein International Identity Associate lavada.baumbach-klein@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 | |
|---|---|---|---|---|
| Jonathan Grimes | elaina_stroman75@yahoo.com | Mayerburgh | Inactive | $247.57 |
| Keshawn Brakus | wayne_schultz@hotmail.com | League City | Active | $1,140.75 |
| Vaughn Gleichner | leonardo.stoltenberg@gmail.com | Council Bluffs | Active | $590.27 |
| Lonzo White-Braun Sr. | ryley.jones73@yahoo.com | Margueritestad | Inactive | $789.88 |
| Ida Howe | rosalee.yundt@gmail.com | Bobbyland | Active | $565.18 |
| Total | $3,333.65 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jayda Goldner-Nolan @elaine56 | geneva_smith25@gmail.com | Lake Tyrese | Inactive | $566.58 |
Ms. Sabrina Ernser @derick7 | judah22@yahoo.com | Lavernahaven | Inactive | $208.97 |
Karen Roberts-Nader MD @celia_mills84 | ervin49@yahoo.com | Pauletteview | Inactive | $198.75 |
Zackary Hyatt @laura.ullrich4 | blaise_hoppe3@yahoo.com | Price-Hermistonstad | Active | $167.56 |
Amparo Will @jaylen_smith96 | robyn51@hotmail.com | Felipebury | Inactive | $290.70 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gregorio Cassin | wanda.stoltenberg@hotmail.com | Fadelborough | Active | $334.79 |
| Michel Pollich | darla_swift@yahoo.com | Waukesha | Inactive | $550.12 |
| Howell Legros | leda23@gmail.com | North Franklinland | Inactive | $902.82 |
| Leroy Feil | kirk.luettgen85@yahoo.com | New Oral | Inactive | $11.40 |
| Susan Braun | ernestine_reynolds-bernier93@hotmail.com | Lake Janaboro | Inactive | $715.66 |
| Total | $2,514.79 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kyler Erdman | vicky_anderson@gmail.com | Barttown | Active | $97.14 |
| Lauren Huels | jeff.donnelly66@gmail.com | Rogahnshire | Inactive | $14.23 |
| Jorge Veum | duncan_funk@gmail.com | Lexishire | Active | $1,178.42 |
| Herman Gutkowski | roosevelt_rogahn-shields@hotmail.com | West Rosettafield | Inactive | $237.71 |
| Teri Oberbrunner | salvador.howe53@yahoo.com | Bergechester | Inactive | $545.00 |
| Total | $2,072.50 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tyler Luettgen | pat.kuhlman@yahoo.com | Port Ronny | Active | $640.16 |
| Rachel Cummerata | dawn9@hotmail.com | Stromanworth | Inactive | $918.30 |
| Nicholaus Lang | emilio_champlin53@gmail.com | West Williamport | Inactive | $73.11 |
| Bryant Kiehn-Huels | sheridan_white@hotmail.com | Toddland | Active | $587.15 |
| Myra Kreiger | isac_champlin@yahoo.com | Dereckcester | Inactive | $176.86 |
| Total | $2,395.58 | |||
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 | ||
|---|---|---|---|---|---|
| D'angelo Durgan | robert.larson@gmail.com | Riverview | Inactive | $524.45 | |
| Sharon Altenwerth | ricky.hamill@yahoo.com | Port Rachaelview | Active | $515.19 | |
| Mr. Lucas DuBuque | shelia_mann@hotmail.com | Crooksborough | Active | $166.70 | |
| Antonetta Hirthe | maria.schmeler@yahoo.com | Huelstown | Inactive | $741.64 | |
| Dangelo Schumm | alton_sauer15@gmail.com | Fullerton | Active | $98.15 | |
| Total | $2,046.13 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Merle D'Amore | grant.tromp70@yahoo.com | Joesphbury | Active | $979.23 | |
| Petra Weissnat | kent36@gmail.com | Reillybury | Active | $783.63 | |
| Junius Koch | oscar.lemke@gmail.com | North Benniefurt | Inactive | $294.54 | |
| Ellsworth Bosco | margie.lockman@yahoo.com | Williamstead | Inactive | $1,058.32 | |
| Keyshawn Wilkinson | keaton.gulgowski@hotmail.com | Wauwatosa | Active | $1,023.03 | |
| Total | $4,138.75 | ||||
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 | |
|---|---|---|---|---|
| Dr. Melba Murazik | ricky67@gmail.com | San Marcos | Inactive | $1,149.20 |
| Thurman Jacobi | kassandra87@yahoo.com | Demarcusburgh | Active | $958.15 |
| Hubert Johnson | byron.jacobs73@yahoo.com | Robertcester | Inactive | $141.73 |
| Madilyn Marks | maida_oreilly13@hotmail.com | Beavercreek | Inactive | $842.76 |
| Jared Macejkovic IV | vera_keebler70@hotmail.com | Lake Toby | Inactive | $97.54 |
| Joshua Rolfson | ricardo.swaniawski98@hotmail.com | Birdiestad | Active | $159.39 |
| Mr. Glen Klocko | rochelle.raynor@yahoo.com | Considine-Hegmannville | Inactive | $708.08 |
| Marcelino Schinner | edwardo94@yahoo.com | New Annachester | Inactive | $214.78 |
| Trisha Predovic | garrick.rutherford3@yahoo.com | Friesenshire | Active | $1,109.62 |
| Cara Jenkins | charlene49@yahoo.com | Tulsa | Inactive | $846.64 |
| Mr. Andres Borer II | elizabeth.jakubowski23@gmail.com | Feestville | Inactive | $1,195.78 |
| Zoe Roob | eric_tremblay38@hotmail.com | Wildermanburgh | Active | $433.77 |
| Diane Dibbert | kayli58@gmail.com | Daisybury | Active | $997.96 |
| Janick Treutel | allan41@gmail.com | Hanford | Active | $848.57 |
| Jeanie D'Amore | zackary_tromp42@hotmail.com | New Bryant | Active | $565.60 |
| Total | $10,269.57 | |||
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 |