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 | Bank Transfer | $345.96 |
| INV002 | Unpaid | PayPal | $131.42 |
| INV003 | Pending | Credit Card | $753.92 |
| INV004 | Unpaid | Credit Card | $963.14 |
| INV005 | Paid | PayPal | $130.23 |
| INV006 | Pending | PayPal | $640.17 |
| INV007 | Unpaid | PayPal | $419.93 |
| Total | $3,384.77 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Trenton Stehr | Chief Metrics Supervisor | trenton_stehr@hotmail.com | Viewer | |
| Lori Tromp-Goyette | Product Metrics Orchestrator | lori_tromp-goyette43@gmail.com | Viewer | |
| Vicky Crist | Product Metrics Manager | vicky.crist@hotmail.com | Member | |
| Eric Muller | Legacy Accounts Associate | eric.muller77@yahoo.com | Admin | |
| Esta Auer | Global Infrastructure Assistant | esta.auer0@hotmail.com | Admin | |
| Angel DuBuque | Principal Accountability Supervisor | angel_dubuque81@hotmail.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 |
|---|---|---|
Alfonzo Kulas Central Usability Technician alfonzo.kulas@yahoo.com | Viewer | |
Seth Turcotte Human Implementation Coordinator seth_turcotte35@yahoo.com | Admin | |
Erick Becker Principal Communications Representative erick_becker95@hotmail.com | Member | |
Darian Mayer Human Integration Designer darian.mayer72@gmail.com | Admin | |
Zoie Considine-Smitham Legacy Accountability Liaison zoie_considine-smitham@gmail.com | Admin | |
Parker Harber Forward Division Consultant parker.harber25@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Eileen Monahan International Interactions Agent eileen.monahan75@hotmail.com | Viewer | |
Marshall Schowalter Senior Implementation Facilitator marshall.schowalter9@gmail.com | Admin | |
Lynne Ratke Senior Web Specialist lynne_ratke52@gmail.com | Admin | |
Abigayle Fisher Senior Mobility Supervisor abigayle.fisher@hotmail.com | Viewer | |
Marco Gibson Human Paradigm Manager marco_gibson74@hotmail.com | Member | |
Myra Quigley Human Applications Associate myra_quigley@hotmail.com | Member | |
Veronica Koepp-Klein Human Creative Architect veronica.koepp-klein@gmail.com | Admin | |
Kurt Howell National Division Executive kurt_howell74@hotmail.com | Admin | |
Myrtice Huel Principal Mobility Assistant myrtice.huel@hotmail.com | Member | |
Willis Bailey Customer Group Representative willis_bailey13@yahoo.com | Admin | |
Nora Ortiz Forward Solutions Architect nora.ortiz30@hotmail.com | Viewer | |
Nels Rolfson Principal Interactions Orchestrator nels_rolfson@hotmail.com | Member | |
Kristy Breitenberg Future Operations Officer kristy_breitenberg@hotmail.com | Member | |
Jasmine Friesen Legacy Accounts Officer jasmine.friesen@yahoo.com | Admin | |
Eula Yundt District Solutions Agent eula.yundt36@yahoo.com | Member | |
Gerald Reichel Central Markets Manager gerald_reichel89@hotmail.com | Viewer | |
Johnathan Wunsch International Research Developer johnathan.wunsch@yahoo.com | Admin | |
Naomi Cartwright International Optimization Facilitator naomi.cartwright33@gmail.com | Member | |
Lew Beatty Central Web Planner lew.beatty@hotmail.com | Admin | |
Serenity Kihn District Directives Representative serenity_kihn@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 | |
|---|---|---|---|---|
| May Mayer | bulah.wunsch85@yahoo.com | South Adoniscester | Active | $959.50 |
| Kellie Doyle | reva_hudson@hotmail.com | New Russ | Inactive | $277.67 |
| Jedediah Jenkins | terrance_larson@gmail.com | Nolanton | Active | $1,108.00 |
| Horace Lesch | maureen.jacobson@hotmail.com | Dennischester | Inactive | $809.63 |
| Sophia Huels | stacy23@gmail.com | Leonoraborough | Active | $616.53 |
| Total | $3,771.33 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Devante Hermann @zoie.wiza | wilma27@gmail.com | Port Claudia | Inactive | $1,113.45 |
Miss Easton Klocko @juana20 | otis.terry90@gmail.com | Caliton | Active | $206.18 |
Theodore Schmitt @randolph78 | abel.bernier-schmeler80@hotmail.com | Rocky Mount | Active | $788.32 |
Unique Willms @cassie_yost | christa63@yahoo.com | Fort Brigittestad | Active | $1,039.67 |
Dr. Hester Ziemann @carey.hilpert | rodney.hartmann71@hotmail.com | East Verdiefield | Active | $110.31 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jacinthe Boyle | robin_schultz68@gmail.com | South Nicoview | Active | $1,157.23 |
| Dallin Hickle | arnold.white87@hotmail.com | Jacobsonland | Active | $883.51 |
| Frank Kuhic | stone80@yahoo.com | Utica | Inactive | $350.56 |
| May Harris DDS | elna_baumbach@yahoo.com | New Liamview | Inactive | $685.76 |
| Elnora Bosco | sadie.koepp24@yahoo.com | Lake Demarcusboro | Inactive | $265.66 |
| Total | $3,342.72 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Juana Keebler | angelo_johns59@yahoo.com | Hayesworth | Active | $1,066.46 |
| Mafalda Ziemann | alma_lang70@yahoo.com | Pearland | Active | $953.99 |
| Ramon Toy | christine.terry@hotmail.com | Port Fletcher | Active | $1,164.30 |
| Jacquelyn Bode | javier94@hotmail.com | Texas City | Active | $319.97 |
| Kim Durgan | angela_kuhic@hotmail.com | West Everardocester | Active | $1,087.74 |
| Total | $4,592.46 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hailie Rau | linda_robel@yahoo.com | East Elijahton | Inactive | $1,094.65 |
| Phillip King | immanuel_emmerich@hotmail.com | Lake Jefferey | Active | $44.95 |
| Josh Shields | novella.ziemann@hotmail.com | East Jazmin | Inactive | $122.51 |
| Leann Walker | lilian91@gmail.com | Jacobsonchester | Inactive | $861.18 |
| Taylor Lesch | kevin.doyle@gmail.com | South Kianaville | Active | $98.70 |
| Total | $2,221.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 | ||
|---|---|---|---|---|---|
| Ms. Berry Kuhn | alexandra.paucek40@hotmail.com | Rocklin | Inactive | $314.63 | |
| Lee Schumm | keith75@gmail.com | Cartwrightfield | Active | $108.17 | |
| Margarette Spinka | morris.graham@yahoo.com | Stantonport | Active | $1,000.69 | |
| Shemar Kohler | alfonso13@gmail.com | Dariomouth | Inactive | $1,081.35 | |
| Oral Bergstrom | green.casper32@gmail.com | Caseyton | Active | $132.46 | |
| Total | $2,637.30 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tonya Walsh | cedric_purdy98@hotmail.com | New Eryntown | Active | $1,158.69 | |
| Johnathon Medhurst | mikel.aufderhar@gmail.com | Dickimouth | Active | $191.78 | |
| Dr. Donna Langosh | yasmine.okon58@hotmail.com | Schmelerside | Active | $255.53 | |
| Dale Connelly | arlie_funk@gmail.com | New Octavia | Inactive | $637.15 | |
| Wesley Hettinger-Greenfelder | jeff23@hotmail.com | New Collinberg | Active | $1,090.26 | |
| Total | $3,333.41 | ||||
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 | |
|---|---|---|---|---|
| Guadalupe Marks | yvette59@yahoo.com | Lake Kaleymouth | Active | $809.88 |
| Judge Friesen | whitney.berge41@gmail.com | Davischester | Active | $1,018.50 |
| Viola Altenwerth Sr. | willis.wisoky90@hotmail.com | Johnstonton | Active | $1,012.60 |
| Joshua Bechtelar | rory_shanahan34@hotmail.com | South Wendellbury | Inactive | $73.04 |
| Wanda Champlin | fay41@gmail.com | East Verner | Inactive | $1,070.13 |
| Katrine Sporer | felicia23@hotmail.com | Calefurt | Active | $548.98 |
| Orland Beahan | elisa96@gmail.com | Klockotown | Active | $1,105.72 |
| Bernice Strosin DDS | bruce7@gmail.com | Parisianbury | Inactive | $665.20 |
| Wm Huels-Harber | silvia.friesen@gmail.com | Revere | Inactive | $346.56 |
| Patrick Dibbert | torrance_rolfson18@hotmail.com | Lake Arch | Active | $299.42 |
| Meredith Leffler | jaeden_heller@gmail.com | Reingerchester | Active | $299.09 |
| Quincy Weimann Sr. | gordon_gleichner61@hotmail.com | Gerlachboro | Inactive | $153.06 |
| Jill Little Sr. | dennis80@hotmail.com | New Calistaland | Active | $326.91 |
| Terry Stamm | heaven_luettgen47@hotmail.com | Berniestad | Inactive | $830.11 |
| Beth Turner | edgar89@yahoo.com | Reillystad | Active | $933.25 |
| Total | $9,492.45 | |||
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 |