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 | Paid | PayPal | $785.27 |
| INV002 | Paid | Credit Card | $159.60 |
| INV003 | Pending | Bank Transfer | $848.71 |
| INV004 | Paid | Credit Card | $137.22 |
| INV005 | Unpaid | PayPal | $290.47 |
| INV006 | Pending | PayPal | $181.50 |
| INV007 | Paid | PayPal | $521.48 |
| Total | $2,924.25 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ed Harber-Cole | Future Paradigm Strategist | ed_harber-cole89@hotmail.com | Member | |
| Bryant Moen | Chief Data Strategist | bryant.moen@gmail.com | Admin | |
| Jaime Kunde | Senior Usability Coordinator | jaime_kunde30@yahoo.com | Admin | |
| Drake Roberts | Regional Directives Coordinator | drake_roberts63@gmail.com | Admin | |
| Dejah Schneider | District Quality Coordinator | dejah_schneider72@yahoo.com | Admin | |
| Emily Olson | Human Applications Representative | emily.olson51@gmail.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 |
|---|---|---|
Sonya Swaniawski District Applications Manager sonya.swaniawski99@hotmail.com | Viewer | |
Nicolas Kuvalis Global Implementation Engineer nicolas_kuvalis@yahoo.com | Member | |
Lloyd Barton Global Creative Analyst lloyd.barton60@yahoo.com | Viewer | |
Wilbur Runte Legacy Directives Technician wilbur_runte@gmail.com | Viewer | |
Lauren Hackett Product Optimization Developer lauren.hackett89@yahoo.com | Viewer | |
Alize Reilly Future Operations Technician alize_reilly30@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 |
|---|---|---|
Edward Windler Regional Program Director edward.windler4@gmail.com | Member | |
Judge Mosciski Lead Usability Manager judge.mosciski@hotmail.com | Admin | |
Lorena Streich Internal Paradigm Agent lorena_streich@gmail.com | Member | |
Monique Rau Internal Integration Director monique.rau54@yahoo.com | Member | |
Flavie Dickens National Configuration Officer flavie_dickens9@hotmail.com | Viewer | |
Genoveva Casper Product Assurance Executive genoveva.casper@gmail.com | Viewer | |
Eleanor Stehr Direct Identity Analyst eleanor.stehr@hotmail.com | Member | |
Alysson Hickle Direct Functionality Agent alysson.hickle83@hotmail.com | Viewer | |
Shawna Luettgen Direct Response Consultant shawna_luettgen78@gmail.com | Member | |
Byron Runte Regional Directives Director byron_runte14@gmail.com | Member | |
Lucious Smith Dynamic Web Associate lucious.smith25@gmail.com | Admin | |
Dianne Keebler Product Operations Administrator dianne_keebler89@gmail.com | Member | |
Stanley Kilback Investor Marketing Representative stanley.kilback@hotmail.com | Member | |
Kelvin Larkin Direct Quality Officer kelvin.larkin96@yahoo.com | Viewer | |
Kendra Gibson Principal Directives Orchestrator kendra_gibson3@hotmail.com | Member | |
Jazlyn Roberts Forward Research Assistant jazlyn.roberts@gmail.com | Viewer | |
Jonathon Flatley Dynamic Creative Engineer jonathon.flatley@hotmail.com | Viewer | |
Connie Daniel Principal Data Orchestrator connie.daniel@yahoo.com | Viewer | |
Lynda Jast National Infrastructure Analyst lynda_jast@hotmail.com | Member | |
Rosalind O'Connell Senior Optimization Liaison rosalind_oconnell@gmail.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 | |
|---|---|---|---|---|
| Mckayla Greenfelder | pablo.rodriguez@gmail.com | North Leonelside | Inactive | $1,017.11 |
| Nick Hayes | edgardo.ondricka@gmail.com | East Damarisland | Active | $549.69 |
| Scott Schumm | neil_feil95@yahoo.com | Dibbertfield | Active | $28.63 |
| Leslie Kuhic | alford52@yahoo.com | East Sierrabury | Active | $606.52 |
| Lonnie Harris | mitchell.oberbrunner@hotmail.com | West Arloworth | Inactive | $135.44 |
| Total | $2,337.39 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Litzy Fadel IV @kirsten_rippin49 | lisa_ohara88@gmail.com | South Salliestead | Inactive | $383.49 |
Hazel Schaden @joelle41 | tomas.braun@yahoo.com | Albertstad | Inactive | $84.22 |
Erin Homenick @maximus85 | alicia_jacobi0@gmail.com | Smithamville | Active | $454.93 |
Ed Lemke @cody_hintz | giuseppe_roberts94@yahoo.com | Enterprise | Inactive | $185.08 |
Lee Cassin @otha_gerlach | dejon33@gmail.com | Koelpinville | Active | $994.18 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kayley Runolfsson | melanie.leuschke@yahoo.com | Port Melyssamouth | Inactive | $231.53 |
| Timmothy Rohan | laura_torp@yahoo.com | Blazestead | Inactive | $934.24 |
| Mr. Jesse Raynor | ivan_mayer7@yahoo.com | West Andre | Active | $1,172.28 |
| Jaime Legros | rex_rath@gmail.com | Collinfield | Inactive | $619.75 |
| Zoe Rempel | darrell_turcotte30@gmail.com | North Pansyfield | Inactive | $551.67 |
| Total | $3,509.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Michale Howe | kristie35@hotmail.com | Port Alejandra | Active | $790.27 |
| Vladimir Casper-Rodriguez Sr. | bridget.mayert@hotmail.com | Port Lenoraland | Inactive | $980.17 |
| Tara Davis | fern.koepp@hotmail.com | West Jonathan | Active | $42.90 |
| Greg Hintz | miriam_hamill@yahoo.com | West Julio | Active | $376.47 |
| Jeffery Sipes | randy61@hotmail.com | Fort Herthachester | Inactive | $281.45 |
| Total | $2,471.26 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kathleen Kutch | emerald.medhurst20@yahoo.com | Anissastad | Active | $978.71 |
| Marquis Gleason Sr. | russell2@hotmail.com | Pharr | Inactive | $699.56 |
| Miss Kendra Stehr-Dibbert | laverne_hodkiewicz48@gmail.com | Nienowton | Active | $683.59 |
| Narciso O'Hara | ann1@yahoo.com | Mallieview | Active | $378.38 |
| Jeramie Predovic | john.hauck@hotmail.com | Ortizville | Active | $813.47 |
| Total | $3,553.71 | |||
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 | ||
|---|---|---|---|---|---|
| Mrs. Greg Nienow | stephanie.davis0@gmail.com | Port Erlingstad | Inactive | $213.69 | |
| Sylvester Fahey | raphael.lockman@hotmail.com | Azusa | Inactive | $182.52 | |
| Cruz Reilly | nick16@yahoo.com | Oberbrunnerview | Inactive | $894.10 | |
| Miss Max Schuppe | sonja10@yahoo.com | Lorenastad | Active | $332.04 | |
| Dallas McClure | lowell_baumbach@yahoo.com | West Sierra | Active | $387.40 | |
| Total | $2,009.75 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alexie Ernser II | jeffery66@gmail.com | Lowellfield | Active | $953.17 | |
| Aracely Okuneva | karlee76@yahoo.com | North Richland Hills | Inactive | $999.68 | |
| Lester Buckridge | anne18@gmail.com | Hicksville | Active | $794.94 | |
| Trever Connelly | gerard.kulas@hotmail.com | North Jovan | Active | $529.01 | |
| Kenny Wehner | natalie_champlin8@gmail.com | Spring Valley | Active | $60.08 | |
| Total | $3,336.88 | ||||
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 | |
|---|---|---|---|---|
| Alyssa Howe-Marks | rodolfo_luettgen@yahoo.com | Walnut Creek | Active | $1,173.87 |
| Zella Yost | fanny.corkery@gmail.com | Tillmanview | Inactive | $161.96 |
| Mrs. Tammy Stamm I | carey_franecki2@gmail.com | New Emmaleeton | Inactive | $363.67 |
| Noah Kshlerin | doyle.friesen5@hotmail.com | West Delilah | Inactive | $365.52 |
| Ted Schultz V | laurie_witting@hotmail.com | Belleville | Active | $577.12 |
| Myra Bradtke | andrea89@hotmail.com | South Sterlingville | Inactive | $626.28 |
| Mr. Orie Bednar | courtney1@yahoo.com | North Johnniecester | Inactive | $80.73 |
| William Gibson | harriet.beier@gmail.com | Jonathonshire | Inactive | $62.31 |
| Caleigh Krajcik Jr. | lowell72@gmail.com | West Maggie | Active | $166.69 |
| Amanda Kessler | kobe_thiel@gmail.com | North Jazmynestad | Active | $988.26 |
| Ruben Macejkovic | pat71@yahoo.com | West Hollie | Active | $1,017.39 |
| Marge Fadel PhD | wyman.emard77@yahoo.com | Lake Zechariahview | Inactive | $449.84 |
| Willard Grady | flossie.ortiz16@gmail.com | Russhaven | Active | $59.87 |
| Daryl Fay | carley_upton68@gmail.com | West Vanessa | Inactive | $862.61 |
| Mr. Gaston Jenkins | dawn44@gmail.com | Guaynabo | Active | $51.02 |
| Total | $7,007.14 | |||
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 |