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 | Unpaid | Credit Card | $269.99 |
| INV002 | Unpaid | Credit Card | $860.94 |
| INV003 | Pending | Credit Card | $450.62 |
| INV004 | Pending | Bank Transfer | $624.78 |
| INV005 | Pending | Credit Card | $577.80 |
| INV006 | Paid | PayPal | $162.86 |
| INV007 | Pending | Credit Card | $483.32 |
| Total | $3,430.31 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kendrick Tillman | Future Metrics Facilitator | kendrick_tillman@yahoo.com | Viewer | |
| Janet Kuhic-Bauch | Human Assurance Designer | janet_kuhic-bauch77@hotmail.com | Admin | |
| Alexzander White | Legacy Factors Director | alexzander_white23@hotmail.com | Member | |
| Caroline Bartell | National Usability Associate | caroline_bartell65@gmail.com | Viewer | |
| Marilie Luettgen | Forward Quality Specialist | marilie_luettgen40@yahoo.com | Admin | |
| Lori O'Connell | Principal Accounts Developer | lori.oconnell80@gmail.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 |
|---|---|---|
Kailey Schamberger District Infrastructure Strategist kailey_schamberger41@gmail.com | Viewer | |
Flavio O'Reilly National Marketing Specialist flavio_oreilly58@hotmail.com | Viewer | |
Juston Powlowski Direct Marketing Engineer juston.powlowski@yahoo.com | Admin | |
Annamae Durgan National Group Assistant annamae_durgan@yahoo.com | Viewer | |
Ericka Goyette Corporate Infrastructure Assistant ericka.goyette13@hotmail.com | Member | |
Mafalda Lindgren Corporate Solutions Planner mafalda.lindgren52@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 |
|---|---|---|
Herman Becker Legacy Branding Architect herman_becker21@gmail.com | Admin | |
Camren Zulauf Future Paradigm Assistant camren_zulauf11@hotmail.com | Viewer | |
Renee Morissette Product Response Technician renee_morissette89@gmail.com | Admin | |
Adam Dietrich Customer Applications Agent adam_dietrich@hotmail.com | Viewer | |
Janick Bayer Regional Metrics Liaison janick.bayer@yahoo.com | Member | |
Tyrique Tremblay Chief Quality Officer tyrique_tremblay@yahoo.com | Viewer | |
Jonatan Grant Internal Optimization Representative jonatan_grant@hotmail.com | Viewer | |
Arnaldo Predovic Principal Markets Associate arnaldo.predovic48@gmail.com | Admin | |
Pablo Kuvalis Human Operations Liaison pablo_kuvalis57@yahoo.com | Admin | |
Dessie Hand-Labadie Senior Marketing Assistant dessie_hand-labadie@gmail.com | Admin | |
Ara Stanton Senior Accounts Consultant ara.stanton56@gmail.com | Admin | |
Maggie Hodkiewicz Lead Security Facilitator maggie_hodkiewicz97@yahoo.com | Member | |
Gladyce Volkman-Bartell Global Usability Orchestrator gladyce.volkman-bartell55@hotmail.com | Viewer | |
Marley Fritsch Investor Operations Director marley.fritsch@gmail.com | Viewer | |
Susana Kovacek Dynamic Communications Agent susana.kovacek55@yahoo.com | Member | |
Loy Grimes International Applications Coordinator loy.grimes@yahoo.com | Member | |
Wallace Brekke International Functionality Supervisor wallace.brekke78@gmail.com | Member | |
Sonia Grady Corporate Interactions Officer sonia_grady6@gmail.com | Member | |
Yoshiko Zulauf Senior Accountability Specialist yoshiko.zulauf94@yahoo.com | Viewer | |
Rosanna Effertz Global Creative Representative rosanna.effertz39@yahoo.com | Member |
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 | |
|---|---|---|---|---|
| Alex Metz | katrina_moen4@gmail.com | Elainaboro | Inactive | $1,126.62 |
| Glenda Douglas | darrin_russel@gmail.com | Coleport | Inactive | $216.29 |
| Jared Runolfsson | kylee35@hotmail.com | Ernserland | Inactive | $863.59 |
| Kristopher Zieme Sr. | dwight98@hotmail.com | West Bobbiechester | Active | $573.68 |
| Tami Kris | benjamin_bosco76@hotmail.com | Rupertborough | Active | $935.81 |
| Total | $3,715.99 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Hope Terry @arthur70 | mason72@yahoo.com | Tonawanda | Active | $133.83 |
Karl Kuphal @kellen78 | lenore.rowe3@hotmail.com | Doyleport | Active | $1,076.80 |
Rufus Carter @cortez10 | krystal_keebler35@hotmail.com | Baton Rouge | Inactive | $795.03 |
Chad Lemke @kellie.koss | kianna.huels93@gmail.com | Lorain | Active | $1,101.82 |
Diane Pagac-Blanda @salvador.hansen29 | darwin.weber@hotmail.com | Edmond | Inactive | $943.55 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Muriel Barrows | graham_macgyver@hotmail.com | Torpfort | Inactive | $1,083.46 |
| Michael Reilly | hulda.barton@gmail.com | Port Alysonton | Inactive | $428.33 |
| Maxine Schumm MD | eugenia_ryan@gmail.com | Thielfurt | Inactive | $993.72 |
| Karl Johns | rico13@hotmail.com | Sterling Heights | Active | $0.77 |
| Tanya Lueilwitz | aletha_lebsack@gmail.com | Lake Dewitt | Active | $1,117.10 |
| Total | $3,623.38 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yolanda Nicolas | sidney_hilll-jakubowski41@yahoo.com | Vladimirstad | Inactive | $1,001.70 |
| Allen Kilback | rodolfo.beatty-kozey95@hotmail.com | South Caryborough | Active | $268.27 |
| Clarence Nitzsche | bell.friesen@yahoo.com | Cuyahoga Falls | Inactive | $529.65 |
| Neil Walsh I | claude_adams@hotmail.com | Port Marcelo | Inactive | $192.53 |
| Mr. Cedric Raynor II | bertrand.mayert12@yahoo.com | Rockford | Inactive | $19.99 |
| Total | $2,012.14 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Margie Schulist IV | darrion_abshire11@gmail.com | Alfordstad | Active | $904.41 |
| Maryann Hayes Sr. | duncan89@yahoo.com | New Oriestad | Inactive | $1,107.92 |
| Angela Daniel | amani66@yahoo.com | Reading | Active | $913.37 |
| Patty Rodriguez | pearl5@gmail.com | Fort Evansstad | Inactive | $446.17 |
| Miss Stephanie Ledner | chet.lockman77@yahoo.com | Ludwigboro | Active | $1,156.44 |
| Total | $4,528.31 | |||
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 | ||
|---|---|---|---|---|---|
| Kristina Stehr | nyah_dooley21@hotmail.com | Denton | Active | $308.17 | |
| Lloyd Lesch | randal_berge@hotmail.com | New Ryderstead | Inactive | $811.35 | |
| Mr. Clayton Ritchie | grant99@hotmail.com | Stantonville | Active | $1,130.34 | |
| Mr. Scott Hammes | amy_okuneva63@hotmail.com | Oshkosh | Inactive | $1,168.99 | |
| Eileen Dickinson | marian_lakin92@gmail.com | Hudsonborough | Active | $1,095.47 | |
| Total | $4,514.32 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Patsy Heathcote | darian.kling@gmail.com | Hampton | Active | $1,074.92 | |
| Garrett Ernser MD | kaylie_friesen@yahoo.com | Tuscaloosa | Inactive | $95.82 | |
| Tommy Hoppe | aiyana.jast@yahoo.com | West Camilla | Inactive | $363.33 | |
| Dean Windler | keon39@yahoo.com | North Darrellhaven | Active | $976.56 | |
| Elsie Hickle | ulises29@hotmail.com | Sylviacester | Active | $1,021.31 | |
| Total | $3,531.94 | ||||
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 | |
|---|---|---|---|---|
| Mr. Christian Brekke | amber.schmeler36@gmail.com | South Rhett | Inactive | $745.69 |
| Manuel Nienow | lenny.haag38@yahoo.com | South Jeffport | Active | $214.24 |
| Kendra Farrell | zoey28@hotmail.com | Hartford | Active | $734.56 |
| Miss Rachel Kuhlman | ephraim_walter36@hotmail.com | Fishers | Inactive | $271.62 |
| Nora Mayer | jaydon_cormier78@yahoo.com | Destinboro | Inactive | $658.74 |
| Bobby Hyatt | vern.sanford@hotmail.com | Furmancester | Inactive | $208.19 |
| Lynette Huel | aubrey_ward@yahoo.com | Lake Calistaworth | Active | $999.34 |
| Debra Hermiston | verna.gleason@hotmail.com | West Chesterfield | Active | $551.31 |
| Tina Hermiston IV | carolyne_mclaughlin44@gmail.com | Jacobsonstad | Inactive | $760.16 |
| Marguerite Christiansen | okey_wuckert38@gmail.com | Katharinafield | Inactive | $384.53 |
| Miss Rose Ritchie | javonte.deckow@hotmail.com | Savannahtown | Inactive | $691.20 |
| Stewart Ryan | margaretta.murray@gmail.com | Christianacester | Active | $596.85 |
| Doreen Weimann | jerod_ondricka@yahoo.com | Fort Elenaview | Inactive | $918.50 |
| Greg Quitzon | floy36@yahoo.com | Fort Nathenborough | Inactive | $530.17 |
| Alton Quitzon | kieran55@yahoo.com | Dexterside | Active | $694.24 |
| Total | $8,959.34 | |||
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 |