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 | $107.22 |
| INV002 | Paid | PayPal | $544.88 |
| INV003 | Pending | Bank Transfer | $943.76 |
| INV004 | Pending | Bank Transfer | $958.79 |
| INV005 | Pending | Credit Card | $733.19 |
| INV006 | Paid | PayPal | $553.47 |
| INV007 | Unpaid | Credit Card | $868.81 |
| Total | $4,710.12 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Camille Mueller | Regional Usability Supervisor | camille_mueller@gmail.com | Viewer | |
| Murray Gibson | Future Division Developer | murray_gibson@hotmail.com | Admin | |
| Arnaldo Hyatt | International Research Developer | arnaldo_hyatt40@gmail.com | Viewer | |
| Geovanny Bergstrom | National Directives Technician | geovanny_bergstrom67@gmail.com | Viewer | |
| Hipolito Fritsch | Lead Quality Analyst | hipolito.fritsch80@hotmail.com | Viewer | |
| Heidi Gulgowski | Customer Interactions Manager | heidi_gulgowski@yahoo.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 |
|---|---|---|
Manuel Gerhold Chief Marketing Specialist manuel_gerhold@gmail.com | Viewer | |
Kris Wehner Central Optimization Facilitator kris.wehner20@hotmail.com | Viewer | |
Pearlie Bradtke Central Applications Technician pearlie_bradtke49@yahoo.com | Admin | |
Isaac Daugherty National Interactions Designer isaac_daugherty@hotmail.com | Viewer | |
Sally Kilback Central Implementation Liaison sally.kilback1@yahoo.com | Member | |
Antonina Corwin Customer Functionality Facilitator antonina_corwin@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 |
|---|---|---|
Thalia Gutkowski International Quality Administrator thalia_gutkowski@gmail.com | Viewer | |
Geovany Wehner Global Configuration Facilitator geovany_wehner@yahoo.com | Viewer | |
Kareem Kuvalis Human Metrics Developer kareem_kuvalis1@hotmail.com | Admin | |
Madie Strosin-Friesen Senior Quality Officer madie.strosin-friesen@gmail.com | Member | |
Marc Leannon Global Creative Orchestrator marc_leannon95@hotmail.com | Viewer | |
Raquel Weimann Human Accountability Consultant raquel_weimann@gmail.com | Viewer | |
Pablo Kunze Principal Interactions Producer pablo_kunze64@hotmail.com | Admin | |
Muriel Wintheiser Investor Division Agent muriel_wintheiser83@yahoo.com | Member | |
Meggie Raynor International Integration Executive meggie_raynor14@yahoo.com | Viewer | |
Trey Ernser Investor Program Manager trey.ernser@gmail.com | Member | |
Chasity Legros Dynamic Functionality Liaison chasity_legros@gmail.com | Viewer | |
Vivienne Hartmann Senior Branding Analyst vivienne_hartmann59@yahoo.com | Viewer | |
Jessy McDermott Investor Brand Analyst jessy_mcdermott42@hotmail.com | Admin | |
Anibal McDermott Future Paradigm Director anibal.mcdermott83@yahoo.com | Member | |
Richmond Quitzon National Security Consultant richmond.quitzon@hotmail.com | Admin | |
Leonor Bartell Principal Directives Manager leonor_bartell@hotmail.com | Member | |
Norris Lebsack District Directives Strategist norris_lebsack88@yahoo.com | Viewer | |
Ottilie Upton Chief Communications Orchestrator ottilie.upton19@yahoo.com | Member | |
Jacklyn Hoppe District Interactions Administrator jacklyn.hoppe@hotmail.com | Viewer | |
Lysanne Abshire International Optimization Strategist lysanne.abshire50@hotmail.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 | |
|---|---|---|---|---|
| Jeremy Kshlerin | elnora.kuvalis@yahoo.com | Santa Ana | Active | $591.13 |
| Dave Treutel | napoleon.jones32@gmail.com | South Rahsaan | Active | $403.30 |
| Leona Upton | otis.harber@hotmail.com | Dorthyview | Inactive | $536.72 |
| Jo Gleichner | maiya99@yahoo.com | East Ethelmouth | Active | $905.52 |
| Don Wiza | marty.fisher@gmail.com | McGlynnport | Inactive | $539.02 |
| Total | $2,975.69 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rochelle Wisozk Sr. @loy.abshire | danielle_jerde9@yahoo.com | O'Connerfield | Active | $1,058.03 |
Dr. Amelia Auer @hoyt_beer94 | barton_harber41@yahoo.com | Brekketon | Inactive | $255.36 |
Cassandra Ortiz @ephraim69 | mozelle.fritsch@hotmail.com | Flatleyboro | Inactive | $839.58 |
Steve Barrows @amiya_dickinson28 | walter_bauch@yahoo.com | Nikolauscester | Inactive | $525.69 |
Maureen Haag @annamarie.bradtke81 | waldo_johnston97@hotmail.com | Marvinhaven | Active | $858.63 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Matthew Mann | caitlyn19@hotmail.com | Stiedemannport | Active | $859.04 |
| Tiffany Franecki V | bernie25@gmail.com | Moorechester | Inactive | $752.90 |
| Jodi O'Keefe | era_morissette@yahoo.com | South Garlandberg | Active | $94.16 |
| Noah Pfeffer | iliana_lang@gmail.com | New Seamus | Inactive | $184.44 |
| Laverne Torphy | cynthia.morissette27@hotmail.com | Conway | Active | $1,072.15 |
| Total | $2,962.69 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Guadalupe Dietrich MD | dee_auer16@hotmail.com | Yundtboro | Active | $179.76 |
| Victoria Huel | arielle91@hotmail.com | Benjaminville | Active | $1,045.45 |
| Freda Heathcote | branson11@hotmail.com | Walkerboro | Inactive | $1,161.05 |
| Estelle Roberts | leonora.streich@hotmail.com | Edmond | Inactive | $1,136.85 |
| Irvin Bergstrom | clarissa67@hotmail.com | Chicago | Inactive | $897.29 |
| Total | $4,420.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Henry Goldner | angelita_price41@yahoo.com | New Keith | Inactive | $122.85 |
| Jana Homenick | uriah84@gmail.com | Geovanyburgh | Active | $15.89 |
| Mr. Frank Bosco DVM | angeline19@yahoo.com | O'Konborough | Active | $1,134.63 |
| Bethany Cremin | anais50@yahoo.com | Darronton | Active | $371.04 |
| Margarita Daugherty | triston59@yahoo.com | Casperstead | Inactive | $329.15 |
| Total | $1,973.56 | |||
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 | ||
|---|---|---|---|---|---|
| Lewis Ledner | abigale26@gmail.com | West Tracefield | Active | $469.84 | |
| Timothy Schulist | dedrick_schuppe@gmail.com | Crooksfort | Active | $74.14 | |
| Marguerite Auer | rosemarie_mueller58@hotmail.com | Connellyview | Active | $1,122.28 | |
| Maxine Crona | otis29@yahoo.com | Port Akeemport | Active | $904.20 | |
| Dr. Oscar Schiller | aniyah_hills@gmail.com | Angelicahaven | Inactive | $993.03 | |
| Total | $3,563.49 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Carmen Reynolds-Crooks | tressie78@gmail.com | Filibertoboro | Inactive | $457.03 | |
| Danny Hermiston-Considine Jr. | tavares.ebert28@hotmail.com | Maryamtown | Active | $1,030.98 | |
| Kellie Jaskolski | adolphus_bechtelar@hotmail.com | Tyraburgh | Active | $1,140.29 | |
| Marcos Reinger | junior.cremin@gmail.com | Beerboro | Inactive | $674.85 | |
| Ismael Kshlerin | walton92@gmail.com | Ernsercester | Active | $385.19 | |
| Total | $3,688.34 | ||||
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 | |
|---|---|---|---|---|
| Marianne Lang-Monahan | sterling24@gmail.com | Bergnaumborough | Inactive | $701.26 |
| Wesley Morar | francisco_wiza99@gmail.com | Manteca | Inactive | $899.43 |
| Erika Lowe II | tom_welch@yahoo.com | Fort Maynardside | Active | $441.78 |
| Celia Hoppe Sr. | elton.kris33@yahoo.com | South Rodolfoside | Inactive | $424.33 |
| Hubert Dietrich | tia6@gmail.com | Fort Nicolaville | Active | $490.69 |
| Patty Sipes | frida35@hotmail.com | Nameview | Inactive | $1,199.64 |
| Todd McCullough | justine.lebsack@yahoo.com | Sethfurt | Active | $210.18 |
| Wayne Nikolaus-Buckridge | bill31@yahoo.com | Mitchelltown | Active | $7.63 |
| Belinda Feeney | ciara75@yahoo.com | Terryside | Active | $894.22 |
| Gabriel Ondricka Sr. | eleanore.schroeder-waters@gmail.com | Grapevine | Active | $1,120.83 |
| David Weissnat | bell.johns13@hotmail.com | East Erynville | Active | $260.21 |
| Dora Windler | jovan37@hotmail.com | Port Charlotte | Active | $64.68 |
| Nadine Grant | camylle.littel@hotmail.com | East Jaqueline | Active | $1,069.92 |
| Jan Kassulke | marietta_smitham@gmail.com | West Houston | Active | $507.42 |
| Mr. Cedric Koch | andreane.prohaska77@hotmail.com | Langstad | Inactive | $102.47 |
| Total | $8,394.69 | |||
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 |