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 | Credit Card | $813.99 |
| INV002 | Pending | Bank Transfer | $769.38 |
| INV003 | Unpaid | Credit Card | $796.60 |
| INV004 | Unpaid | Bank Transfer | $937.57 |
| INV005 | Paid | PayPal | $277.97 |
| INV006 | Pending | Bank Transfer | $310.24 |
| INV007 | Unpaid | PayPal | $798.46 |
| Total | $4,704.21 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Mario Cummerata | Forward Integration Officer | mario.cummerata29@hotmail.com | Admin | |
| Hosea Johns | Customer Research Facilitator | hosea.johns@hotmail.com | Member | |
| Sterling Champlin | Internal Communications Planner | sterling.champlin4@yahoo.com | Admin | |
| Walter Goyette | Product Response Developer | walter_goyette@yahoo.com | Admin | |
| Lysanne McDermott | International Identity Facilitator | lysanne_mcdermott45@hotmail.com | Admin | |
| Gracie O'Kon | Lead Factors Orchestrator | gracie_okon93@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 |
|---|---|---|
Nicholas Lemke Forward Applications Assistant nicholas.lemke47@yahoo.com | Admin | |
Katie Walker Internal Infrastructure Representative katie_walker98@yahoo.com | Member | |
Marc Tremblay Human Implementation Facilitator marc_tremblay19@hotmail.com | Admin | |
Arianna Lindgren Chief Response Producer arianna.lindgren42@hotmail.com | Admin | |
Keith Dickens Forward Tactics Technician keith.dickens@gmail.com | Member | |
Ken Bins Investor Division Facilitator ken_bins93@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 |
|---|---|---|
Kathleen Jacobson Lead Mobility Analyst kathleen.jacobson73@yahoo.com | Member | |
Paolo Gutmann Human Quality Coordinator paolo.gutmann@gmail.com | Admin | |
Rachael Haag Principal Optimization Planner rachael_haag@gmail.com | Viewer | |
Kristofer Carter Product Markets Analyst kristofer_carter76@yahoo.com | Admin | |
Ginger Roob Dynamic Program Representative ginger_roob@gmail.com | Viewer | |
Sabrina Abbott Human Quality Officer sabrina_abbott@yahoo.com | Admin | |
Hosea Bosco Investor Web Agent hosea_bosco@yahoo.com | Member | |
Paolo Beahan National Intranet Technician paolo.beahan32@gmail.com | Member | |
Nolan Hackett Central Optimization Representative nolan_hackett95@yahoo.com | Viewer | |
Hassan Spinka International Accounts Administrator hassan_spinka6@hotmail.com | Member | |
Darla Hills Dynamic Program Representative darla_hills@yahoo.com | Admin | |
Peyton Lindgren Future Response Liaison peyton.lindgren82@hotmail.com | Viewer | |
Elvira Grady Direct Brand Engineer elvira_grady62@yahoo.com | Viewer | |
Pearline Gutmann-Senger Legacy Division Supervisor pearline_gutmann-senger@yahoo.com | Viewer | |
Cathy Wilderman Investor Program Liaison cathy.wilderman@yahoo.com | Admin | |
Rex O'Conner Internal Operations Planner rex_oconner@hotmail.com | Viewer | |
Kate Bins National Data Specialist kate_bins84@gmail.com | Admin | |
Wilhelm Walter National Factors Engineer wilhelm_walter@gmail.com | Member | |
Rosalie Gutkowski Direct Integration Consultant rosalie.gutkowski80@hotmail.com | Viewer | |
Angelo Thiel Product Marketing Strategist angelo.thiel@hotmail.com | Admin |
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 | |
|---|---|---|---|---|
| Terence Durgan | forrest_hagenes@yahoo.com | Raulworth | Inactive | $477.83 |
| Antoinette Daniel | emilie30@yahoo.com | Weissnatberg | Inactive | $593.57 |
| Kristy Prohaska | ezequiel_boehm@hotmail.com | Lake Braulio | Active | $761.69 |
| Veronica Koch | brent83@hotmail.com | Mitchellstead | Active | $593.64 |
| Pat Corkery | gary86@yahoo.com | East Trisha | Inactive | $916.84 |
| Total | $3,343.57 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Casey Bauch V @marguerite83 | mavis.hoeger92@yahoo.com | Lakinmouth | Inactive | $138.02 |
Leo Mosciski @eula_larkin11 | kenyon_stanton8@yahoo.com | Fort Aleenstad | Active | $426.81 |
Mrs. Yoshiko Kuvalis @xavier54 | zetta_towne-will@yahoo.com | Riceshire | Inactive | $1,180.41 |
Julia Jones @luella6 | ethel_von-mcclure@hotmail.com | East Myaton | Inactive | $477.34 |
Tavares Schumm-Gusikowski @desiree.murazik | wilfred.boehm@yahoo.com | Wymanbury | Inactive | $19.86 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Traci Collier IV | tracey_kub@hotmail.com | Port Jerry | Inactive | $246.28 |
| Woodrow Jaskolski | winston.pfeffer@hotmail.com | San Rafael | Inactive | $515.78 |
| Maida Fisher I | sibyl_macejkovic62@yahoo.com | Watersville | Inactive | $643.12 |
| Darrin Larson | dianna_mraz20@gmail.com | South Eloy | Inactive | $215.23 |
| Herbert Orn-Gutmann | edith.little37@gmail.com | Anthonyton | Active | $518.14 |
| Total | $2,138.55 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josephine Farrell | robin_flatley97@yahoo.com | North Lynnchester | Inactive | $407.19 |
| Ben Aufderhar | daniel7@gmail.com | Lourdesberg | Inactive | $72.77 |
| Derek Bode | cora7@gmail.com | Daynahaven | Inactive | $86.95 |
| Miss Ann Hoppe | delbert62@hotmail.com | West Scarlett | Inactive | $428.66 |
| Julius Hilpert | marian39@hotmail.com | Dundalk | Active | $711.30 |
| Total | $1,706.87 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Nicole Effertz | doyle.champlin91@yahoo.com | South Alison | Inactive | $155.86 |
| Forrest Harber-Olson | omar_schiller96@yahoo.com | Perris | Inactive | $134.33 |
| Tammy Feil | tressie.mcglynn@hotmail.com | New Rhea | Active | $450.27 |
| Bethany Moen | olga.steuber@hotmail.com | Albertaport | Inactive | $51.69 |
| Inez Weimann | rodolfo_kirlin@gmail.com | North Amy | Inactive | $43.30 |
| Total | $835.45 | |||
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. Kate Block | alphonso.bashirian@hotmail.com | Port Orloborough | Inactive | $780.67 | |
| Arlene Herzog | daniel.conn@hotmail.com | South Bart | Active | $780.97 | |
| Angela Heaney | nathaniel19@gmail.com | Fritschside | Active | $213.64 | |
| Adam Beer | guy.bahringer@hotmail.com | Arnoldoshire | Inactive | $29.36 | |
| Arturo Kovacek | al_oberbrunner@hotmail.com | North Dameon | Inactive | $508.96 | |
| Total | $2,313.60 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Kadin Harber | jake96@yahoo.com | Battle Creek | Active | $841.18 | |
| Patty Lubowitz | donnie22@yahoo.com | South Reannashire | Active | $181.44 | |
| Dr. Billy McLaughlin | aleen40@hotmail.com | Weimannside | Active | $800.54 | |
| Patrick Goyette | amanda.balistreri@yahoo.com | North Florianborough | Active | $421.38 | |
| Bennie Aufderhar | lula4@yahoo.com | Schimmelmouth | Active | $886.50 | |
| Total | $3,131.04 | ||||
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 | |
|---|---|---|---|---|
| Judy Russel | alana_runolfsdottir@gmail.com | Waelchiburgh | Active | $486.05 |
| Brandi Bashirian | albin.cartwright@yahoo.com | Longview | Inactive | $62.98 |
| Amanda Stanton | shannon.murray@hotmail.com | South Javontestead | Inactive | $826.76 |
| Jed Nienow | merle_funk76@hotmail.com | Fort Santina | Inactive | $283.29 |
| Lilian Bartoletti | beth_bergstrom7@yahoo.com | North Carlo | Active | $622.68 |
| Alvin Kunde PhD | tracy6@hotmail.com | Keaganside | Inactive | $238.40 |
| Nicole Heidenreich | lynette32@gmail.com | Cletuston | Inactive | $1,049.90 |
| Cecelia Blanda | brenna.haag71@hotmail.com | Bloomington | Active | $1,029.31 |
| Cecil Lockman | gregg65@hotmail.com | Urbana | Active | $474.96 |
| Christian Considine | sebastian79@gmail.com | Port Jaymeville | Active | $812.26 |
| Ms. Estelle Pollich | horace.corwin@yahoo.com | Ziemebury | Inactive | $396.29 |
| Estelle Rogahn | ollie_langworth41@hotmail.com | Olafield | Active | $611.97 |
| Dianna Hegmann | grant.hayes@yahoo.com | Lake Joanport | Inactive | $621.68 |
| Miss Arlene Witting III | lucius.stiedemann@hotmail.com | Nataliaburgh | Active | $1,073.64 |
| Leanne Feest | edmund_hackett77@gmail.com | Lake Evangeline | Active | $789.86 |
| Total | $9,380.03 | |||
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 |