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 | $850.78 |
| INV002 | Unpaid | Credit Card | $173.34 |
| INV003 | Paid | PayPal | $217.25 |
| INV004 | Paid | Credit Card | $833.25 |
| INV005 | Paid | Credit Card | $489.92 |
| INV006 | Unpaid | PayPal | $206.18 |
| INV007 | Pending | Credit Card | $611.55 |
| Total | $3,382.27 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Terry Hayes | Future Marketing Executive | terry_hayes@gmail.com | Admin | |
| Elda Streich | Regional Program Strategist | elda_streich90@yahoo.com | Admin | |
| Randolph Kuhn | Dynamic Infrastructure Coordinator | randolph_kuhn35@hotmail.com | Admin | |
| Hermina Ledner | Future Accountability Specialist | hermina_ledner12@yahoo.com | Admin | |
| Janiya Bartell | Principal Tactics Producer | janiya.bartell@yahoo.com | Viewer | |
| Alfred Moore | Customer Optimization Facilitator | alfred.moore@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 |
|---|---|---|
Bob Conroy Investor Division Representative bob_conroy71@hotmail.com | Member | |
Bernardo Sauer Regional Accountability Supervisor bernardo_sauer@hotmail.com | Admin | |
Chase Mills Investor Markets Architect chase_mills16@gmail.com | Member | |
Beverly Yost Corporate Accounts Designer beverly.yost@hotmail.com | Member | |
Darrell Upton Human Factors Producer darrell.upton79@gmail.com | Member | |
Rickey Ebert Central Branding Designer rickey.ebert83@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Cassandra Mueller Senior Paradigm Engineer cassandra_mueller40@hotmail.com | Member | |
Robert Spinka Product Infrastructure Consultant robert.spinka@yahoo.com | Viewer | |
Jesus Murphy Forward Paradigm Administrator jesus.murphy12@gmail.com | Member | |
Pattie Anderson Regional Functionality Consultant pattie_anderson93@hotmail.com | Admin | |
Jose Collins Lead Identity Liaison jose.collins91@gmail.com | Viewer | |
Brittany Bailey Legacy Optimization Agent brittany_bailey93@hotmail.com | Admin | |
Alexandre Wunsch Regional Communications Director alexandre.wunsch@gmail.com | Member | |
Jasen Ledner-Gottlieb National Web Director jasen_ledner-gottlieb@gmail.com | Viewer | |
Ronaldo Koss Principal Accountability Agent ronaldo.koss64@gmail.com | Member | |
Verna Jaskolski Customer Factors Analyst verna_jaskolski@hotmail.com | Viewer | |
Hazel Ankunding Forward Applications Orchestrator hazel.ankunding@hotmail.com | Viewer | |
Maria Wolff Forward Brand Orchestrator maria_wolff@gmail.com | Viewer | |
Lee Gleichner Regional Program Technician lee_gleichner51@yahoo.com | Admin | |
Mallory O'Conner Internal Applications Administrator mallory.oconner5@yahoo.com | Admin | |
Rosie Gibson Future Factors Assistant rosie.gibson90@hotmail.com | Member | |
Francisco Abernathy Product Interactions Agent francisco.abernathy83@gmail.com | Member | |
Maye Kessler Senior Group Engineer maye_kessler@yahoo.com | Viewer | |
Duncan Grant National Communications Agent duncan_grant1@hotmail.com | Admin | |
Raymond Ruecker Forward Intranet Architect raymond.ruecker@hotmail.com | Viewer | |
Steve Luettgen Global Response Specialist steve.luettgen@hotmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Jessica Collins | desiree.mckenzie89@yahoo.com | Laverneton | Inactive | $535.17 |
| Arnold Nikolaus Sr. | felix_mueller@gmail.com | Denishaven | Inactive | $965.85 |
| Edgardo Wilkinson | ericka.waters@gmail.com | Schummfort | Active | $375.87 |
| Jesse Schowalter | maud_bayer87@yahoo.com | Robelside | Inactive | $600.57 |
| General Sporer | sheila32@yahoo.com | Broken Arrow | Active | $354.51 |
| Total | $2,831.97 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Jerry Adams II @amber_koelpin4 | muhammad.reichel81@yahoo.com | Lake Burleyland | Inactive | $36.62 |
Ross Becker @johnnie.treutel89 | cordia.lindgren49@yahoo.com | Daisyborough | Active | $33.53 |
Ismael McCullough @brooks.schneider13 | trace81@yahoo.com | West Brooks | Inactive | $793.43 |
Iliana Beer @victor93 | mathew52@hotmail.com | New Eloyberg | Active | $909.23 |
Dr. Jim Rutherford @cydney44 | boris.hamill@gmail.com | Estefaniachester | Active | $502.82 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mattie Carroll | brady_heller50@gmail.com | West Tonyshire | Active | $363.60 |
| Joann Skiles | mathew.donnelly@hotmail.com | Douglasville | Active | $508.60 |
| Kerry Lakin | kody_carter@yahoo.com | Lake Javon | Active | $483.77 |
| Meredith Hand | ella8@hotmail.com | West Axelstad | Inactive | $1,074.24 |
| Evelyn Stehr-Hammes | kevin65@yahoo.com | Fort Cornell | Inactive | $1,196.62 |
| Total | $3,626.83 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ubaldo Padberg-Walker | eryn80@hotmail.com | Burbank | Inactive | $301.29 |
| Lewis Lakin | erma91@hotmail.com | Baldwin Park | Inactive | $641.73 |
| Marcella Halvorson | lori81@yahoo.com | Detroit | Inactive | $611.87 |
| Billy Goodwin | lillian_wehner82@hotmail.com | Port Candido | Active | $846.16 |
| Kara Glover | doris97@gmail.com | Rodriguezhaven | Active | $770.35 |
| Total | $3,171.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elinore Connelly | sheryl_kohler20@hotmail.com | Tierrafort | Active | $1,066.35 |
| Marilyn Crooks | marcos_bashirian78@yahoo.com | West Ariannatown | Inactive | $344.97 |
| Dr. Janiya Daniel | sarah_ruecker65@hotmail.com | Lake Aimee | Inactive | $649.75 |
| Roxanne Littel | cecil.lueilwitz@gmail.com | Hemet | Active | $953.00 |
| Dulce Romaguera | adan.kub-reichert35@yahoo.com | Kilbackstead | Inactive | $700.92 |
| Total | $3,714.99 | |||
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 | ||
|---|---|---|---|---|---|
| Libby Kessler | roberto11@gmail.com | West Jaymeland | Active | $1,102.66 | |
| Dr. Carmelo Kreiger Sr. | brenda_fahey43@yahoo.com | West Stanford | Active | $198.42 | |
| Kelvin Marquardt | lewis_cartwright46@hotmail.com | Rossieville | Active | $0.62 | |
| Teri Cassin | candace.wyman@hotmail.com | East Dario | Inactive | $723.04 | |
| Lydia Larson | arthur53@hotmail.com | East Willy | Active | $118.12 | |
| Total | $2,142.86 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Miss Andy Ledner | verda4@hotmail.com | East Oran | Inactive | $780.67 | |
| Glenda Ruecker | tracy.weber@yahoo.com | East Eldredbury | Active | $265.08 | |
| Vanessa Kovacek-Funk | kristin44@yahoo.com | Lake Bridgetfurt | Active | $625.60 | |
| Elsa Lockman | winifred.bartell@yahoo.com | Barrowsmouth | Inactive | $284.29 | |
| Joanny Jast | conrad.green29@gmail.com | Port Amaliastad | Inactive | $44.07 | |
| Total | $1,999.71 | ||||
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 | |
|---|---|---|---|---|
| Kevin Bins | elian.nicolas93@hotmail.com | South Darrickland | Active | $353.96 |
| Chad Bailey | toney_stokes@gmail.com | Cindyfort | Inactive | $148.39 |
| Christelle Kunde | ollie_davis5@gmail.com | Brookhaven | Active | $933.84 |
| Alma Homenick | ginger22@hotmail.com | Wilsonfield | Active | $458.92 |
| Vicky Treutel | christie_lehner70@hotmail.com | South Lorenzo | Inactive | $747.47 |
| Arnaldo Turner-Tremblay | katherine.rolfson10@gmail.com | South Darrylcester | Inactive | $223.89 |
| Jennie Gibson | lou.wisozk30@gmail.com | East Ewald | Inactive | $267.41 |
| Roxanne Kuvalis | nick94@gmail.com | South Marielaton | Active | $835.40 |
| Moriah Cormier | fidel99@gmail.com | Fort Melanyhaven | Inactive | $447.36 |
| Burley Lindgren | mitchell43@hotmail.com | North Maudboro | Inactive | $149.82 |
| Dr. Oceane Hodkiewicz DDS | deon_hegmann-bode@yahoo.com | Reingercester | Active | $1,094.42 |
| Gwen Vandervort | elta.reichel@yahoo.com | San Luis Obispo | Inactive | $225.20 |
| Al Medhurst | roy13@yahoo.com | West Pabloborough | Inactive | $256.90 |
| Monique Rolfson | terrence91@yahoo.com | Boylefurt | Inactive | $1.49 |
| Blake Kemmer | drew_kling68@gmail.com | Sylvesterborough | Inactive | $9.74 |
| Total | $6,154.21 | |||
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 |