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 | $652.69 |
| INV002 | Paid | Bank Transfer | $176.03 |
| INV003 | Pending | PayPal | $436.46 |
| INV004 | Paid | Credit Card | $626.28 |
| INV005 | Paid | PayPal | $589.47 |
| INV006 | Unpaid | Credit Card | $979.68 |
| INV007 | Pending | Bank Transfer | $736.90 |
| Total | $4,197.51 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Alonzo Kuphal | District Assurance Coordinator | alonzo_kuphal@yahoo.com | Viewer | |
| Willis Kunde | Forward Infrastructure Assistant | willis_kunde61@gmail.com | Admin | |
| Armando Cremin | Future Mobility Coordinator | armando.cremin19@gmail.com | Member | |
| Joshua Thompson | Principal Operations Analyst | joshua_thompson@hotmail.com | Viewer | |
| Bert Treutel | Product Paradigm Developer | bert.treutel@yahoo.com | Admin | |
| Terrance Mitchell | Investor Assurance Coordinator | terrance.mitchell@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 |
|---|---|---|
Agnes Stoltenberg Dynamic Branding Liaison agnes.stoltenberg@gmail.com | Member | |
Chris Lindgren Global Brand Consultant chris_lindgren34@yahoo.com | Member | |
Walton Pfeffer-Corkery Legacy Mobility Representative walton_pfeffer-corkery@yahoo.com | Viewer | |
Joan Kling Future Creative Architect joan.kling@gmail.com | Viewer | |
Johanna Muller Lead Solutions Planner johanna.muller@yahoo.com | Member | |
Bernice Wehner Direct Optimization Orchestrator bernice.wehner@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 |
|---|---|---|
Genevieve Bartell Regional Metrics Manager genevieve_bartell7@yahoo.com | Member | |
Erika Becker National Research Producer erika_becker83@yahoo.com | Admin | |
Jeannie Murphy Human Interactions Specialist jeannie.murphy67@gmail.com | Viewer | |
Kamryn Ullrich International Tactics Supervisor kamryn.ullrich82@gmail.com | Admin | |
Myrtice Gleichner Future Factors Architect myrtice.gleichner@gmail.com | Member | |
Tia Labadie Global Applications Strategist tia.labadie41@gmail.com | Viewer | |
Abel McClure Investor Program Technician abel_mcclure@yahoo.com | Member | |
Cameron Yundt-Metz Product Integration Architect cameron_yundt-metz27@gmail.com | Member | |
Vesta Hudson Central Directives Officer vesta_hudson43@gmail.com | Admin | |
Jordan Parisian Dynamic Program Officer jordan.parisian98@hotmail.com | Viewer | |
Joyce Schuster District Directives Consultant joyce_schuster57@hotmail.com | Viewer | |
Mazie Abshire Internal Group Agent mazie_abshire@yahoo.com | Member | |
Vivian Nader Global Creative Developer vivian_nader@hotmail.com | Member | |
Carol Swift-Predovic International Web Assistant carol_swift-predovic15@gmail.com | Viewer | |
Greg Trantow-McGlynn Product Mobility Analyst greg_trantow-mcglynn@gmail.com | Viewer | |
Shannon Cronin Chief Integration Executive shannon_cronin@hotmail.com | Admin | |
Judson Kerluke-Douglas District Group Associate judson_kerluke-douglas73@hotmail.com | Admin | |
Keith Grant Internal Interactions Facilitator keith.grant@hotmail.com | Member | |
Erika Schoen International Tactics Strategist erika_schoen29@hotmail.com | Member | |
Jerry Dickinson Future Markets Manager jerry_dickinson12@gmail.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 | |
|---|---|---|---|---|
| Bert Maggio | elise.carter@yahoo.com | Hanford | Active | $772.17 |
| Jerome Jakubowski | velma29@yahoo.com | Bodeport | Active | $302.29 |
| Jimmy Emard | luz_johnson@hotmail.com | South Loriside | Active | $240.04 |
| Cierra Schmidt | dana.rippin@yahoo.com | Champaign | Active | $622.13 |
| Rebecca Little | kerry_muller69@yahoo.com | Port Jaylonmouth | Active | $1,168.15 |
| Total | $3,104.78 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ella Waelchi @van_fahey | jaylan59@hotmail.com | Zenafort | Inactive | $945.85 |
Darlene Luettgen @jerald.rath39 | theodore47@yahoo.com | West River | Inactive | $453.20 |
Frank Schroeder @doris19 | jedidiah31@yahoo.com | New Dee | Active | $75.16 |
Carlos Hauck @una.hansen | alexzander_volkman@gmail.com | Borershire | Active | $1,198.25 |
Dr. Helen Schaden @gina15 | tim.macejkovic6@yahoo.com | Commerce City | Active | $14.73 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Earnest Reinger | maria.stiedemann@gmail.com | Cruickshankport | Inactive | $100.35 |
| Roy Boehm | cristina.cummings31@gmail.com | Raynorside | Inactive | $24.70 |
| Dolly White | mitchell78@hotmail.com | Buffalo | Inactive | $829.43 |
| Nina Raynor | doug_harber@hotmail.com | Lake Shakira | Active | $221.87 |
| Velma Bechtelar | darrel10@yahoo.com | Emmerichville | Active | $1,006.30 |
| Total | $2,182.65 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Peggy Boehm | carmel_hartmann41@yahoo.com | Midwest City | Inactive | $582.35 |
| Juana Bernier | armand57@hotmail.com | Osborneside | Active | $13.56 |
| Tricia Moen | ben_feest@hotmail.com | West Amelia | Active | $490.94 |
| Dr. Lula Gerhold-O'Kon I | melba_gerhold-tromp@hotmail.com | Waelchifurt | Inactive | $319.83 |
| Antonio Hane | natalie_marks81@yahoo.com | Powlowskiburgh | Active | $800.44 |
| Total | $2,207.12 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Benedict Waters | erik.hagenes@hotmail.com | Westland | Active | $1,101.93 |
| Rickie Rowe | allan50@hotmail.com | New Vivianne | Active | $974.54 |
| Bernard Kuvalis | nora65@gmail.com | Linwoodboro | Inactive | $948.40 |
| Mrs. Heidi Beahan | geoffrey.kerluke6@yahoo.com | North Elinor | Inactive | $918.10 |
| Antonio Schmeler | abdul.schultz@hotmail.com | Alyshaview | Active | $298.40 |
| Total | $4,241.37 | |||
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 | ||
|---|---|---|---|---|---|
| Charlene Reinger | annette_barrows@hotmail.com | Fritschfurt | Inactive | $434.19 | |
| Julius Koss | gwendolyn67@yahoo.com | South Yvetteworth | Active | $1,078.10 | |
| Amelia Ankunding | trent53@yahoo.com | North Hilda | Inactive | $949.31 | |
| Dr. Lowell Heathcote | jermey_douglas30@gmail.com | North Sabrina | Inactive | $797.68 | |
| Mrs. Patti Shields | sigrid_marvin@yahoo.com | Stevestad | Active | $223.59 | |
| Total | $3,482.87 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Domenic Doyle | justen.metz@yahoo.com | South Mireilleville | Inactive | $116.54 | |
| Francis Cronin | may.olson35@yahoo.com | Renton | Inactive | $924.72 | |
| Jarrod Reichert | alfonso.torphy46@gmail.com | East Helena | Inactive | $1,043.29 | |
| Wilhelmine Tillman | calista_jacobson@yahoo.com | Fort Wayne | Inactive | $305.61 | |
| Adriel McGlynn | layla21@yahoo.com | East Deion | Inactive | $51.59 | |
| Total | $2,441.75 | ||||
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 | |
|---|---|---|---|---|
| Romaine Greenfelder | susie_abbott-reichert87@gmail.com | Muncie | Inactive | $561.01 |
| Rudy Mayert | ted.kling32@hotmail.com | West Ignacioburgh | Active | $802.26 |
| Albertha Rowe | caleb_hills60@gmail.com | East Brisamouth | Active | $405.81 |
| Piper Hills | jeremiah_purdy@hotmail.com | Roobborough | Active | $494.55 |
| Chelsea Feest | oscar.bogisich64@yahoo.com | South Ismael | Inactive | $726.16 |
| Saul Terry | timothy.towne58@yahoo.com | Waldorf | Inactive | $95.19 |
| Monique Windler | alexander72@hotmail.com | Port Lori | Inactive | $490.73 |
| Dr. Carlton Wolf | jamel_bayer32@hotmail.com | Gracefurt | Inactive | $498.97 |
| Moses Lemke | bethany_stokes13@yahoo.com | Josianetown | Active | $507.10 |
| Roxanne Feest | kristie.little61@gmail.com | Amayacester | Inactive | $692.86 |
| Sheri Hagenes | phil_braun6@hotmail.com | North Brownstead | Active | $454.34 |
| Loyal Wuckert | lorenza_spinka56@yahoo.com | Chasityfield | Active | $1,137.81 |
| Lana Ryan | ernest.harber4@yahoo.com | Hegmannworth | Inactive | $1,048.64 |
| Brant Cummings | spencer.stroman9@hotmail.com | Maximilianside | Active | $857.43 |
| Kristina Little III | shawna_kling@yahoo.com | Bountiful | Active | $413.15 |
| Total | $9,186.01 | |||
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 |