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 | PayPal | $416.17 |
| INV002 | Pending | PayPal | $921.33 |
| INV003 | Pending | PayPal | $419.93 |
| INV004 | Paid | PayPal | $213.15 |
| INV005 | Unpaid | Credit Card | $447.49 |
| INV006 | Paid | PayPal | $881.62 |
| INV007 | Pending | Credit Card | $464.55 |
| Total | $3,764.24 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Romaine Larson | Future Functionality Analyst | romaine.larson@yahoo.com | Admin | |
| Breanne Bergnaum | Investor Creative Strategist | breanne.bergnaum@hotmail.com | Viewer | |
| Evangeline Smith | Central Tactics Supervisor | evangeline_smith48@gmail.com | Admin | |
| Arden Gutmann | Dynamic Branding Assistant | arden_gutmann15@gmail.com | Member | |
| Clarabelle Mitchell | Regional Applications Planner | clarabelle.mitchell50@yahoo.com | Viewer | |
| Kiley Gibson | Future Infrastructure Engineer | kiley.gibson@yahoo.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 |
|---|---|---|
Allison Lind Product Optimization Facilitator allison_lind71@gmail.com | Member | |
Dudley Parker District Group Coordinator dudley.parker@gmail.com | Viewer | |
Herbert Dooley Legacy Solutions Technician herbert_dooley@yahoo.com | Member | |
Drake Brown Senior Marketing Supervisor drake_brown@hotmail.com | Viewer | |
Elissa Hoppe Internal Metrics Producer elissa_hoppe@hotmail.com | Admin | |
Deshaun Pagac National Paradigm Manager deshaun.pagac70@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Gino Hayes Principal Applications Technician gino.hayes@yahoo.com | Admin | |
Chad Lemke Human Usability Orchestrator chad_lemke39@gmail.com | Admin | |
Leda Lemke Product Applications Executive leda.lemke@hotmail.com | Member | |
Amos Bednar Customer Intranet Orchestrator amos.bednar67@yahoo.com | Member | |
Alek DuBuque Central Integration Engineer alek_dubuque82@gmail.com | Admin | |
Haleigh Nienow-Reilly Global Accounts Agent haleigh.nienow-reilly@yahoo.com | Admin | |
Justus Lueilwitz Global Metrics Producer justus.lueilwitz36@hotmail.com | Viewer | |
Mohammad Stamm Legacy Quality Officer mohammad_stamm81@gmail.com | Viewer | |
Bridgette Frami Customer Assurance Manager bridgette_frami99@hotmail.com | Member | |
Elton Legros Legacy Mobility Liaison elton_legros@gmail.com | Member | |
Alfred Feeney Internal Paradigm Strategist alfred_feeney@gmail.com | Viewer | |
Nola Powlowski Global Optimization Liaison nola_powlowski@gmail.com | Member | |
Ansel Willms Future Communications Consultant ansel.willms97@yahoo.com | Viewer | |
William Dooley Direct Directives Consultant william.dooley@hotmail.com | Viewer | |
Malika Hayes Chief Integration Executive malika_hayes@gmail.com | Admin | |
Taurean Mayer Forward Accounts Executive taurean.mayer79@gmail.com | Member | |
Ruthe Weimann Direct Accountability Agent ruthe.weimann@hotmail.com | Admin | |
Marley Pacocha Internal Accounts Manager marley_pacocha@gmail.com | Viewer | |
Kayden Koelpin Legacy Metrics Executive kayden.koelpin31@hotmail.com | Viewer | |
Shaylee Sauer Human Paradigm Assistant shaylee.sauer91@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 | |
|---|---|---|---|---|
| Jaime Mayert | lenore.cassin@gmail.com | Collinsborough | Active | $83.59 |
| Pearl Steuber-O'Connell | thomas8@hotmail.com | South Vickieburgh | Active | $56.23 |
| Clarence Roob | gregorio57@gmail.com | Midwest City | Active | $407.62 |
| Tim Robel | shayne66@hotmail.com | Port Richmondstad | Active | $284.12 |
| Janet Boehm II | sammy.bogan37@hotmail.com | North Durward | Active | $506.99 |
| Total | $1,338.55 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Marshall Bernhard @jose.hettinger | wilfrid2@yahoo.com | Lefflerton | Inactive | $1,194.37 |
Dr. Jeanette Fay @winona.waelchi | denis.boyer-schmidt48@hotmail.com | Lake Dustin | Active | $658.25 |
Ms. Geneva Schultz @jamison_hane92 | sally99@hotmail.com | Bauchhaven | Active | $105.77 |
Eva Jones @schuyler_satterfield | zelma_fay41@hotmail.com | North Ovacester | Inactive | $359.92 |
Nancy Legros @grayson.lang | domenick.beatty@yahoo.com | Dickensfield | Inactive | $418.08 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Percy Kunze | leopold.pouros33@yahoo.com | Walkerfort | Active | $413.35 |
| Dr. Grant Rice | william.hilpert@gmail.com | New Jaredborough | Inactive | $351.16 |
| Teri Tremblay | lonie.paucek@yahoo.com | Terrillfield | Active | $223.06 |
| Jeanette Beier | ismael_runolfsson-nader@gmail.com | Erniebury | Active | $112.30 |
| Wayne Towne | gerardo_daugherty23@hotmail.com | West Irma | Active | $863.79 |
| Total | $1,963.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hannah Lowe | dolores_kuhic85@yahoo.com | Sheridanstad | Inactive | $173.32 |
| Deborah Berge | karine90@yahoo.com | Jorgeberg | Inactive | $1,197.68 |
| Susan Wyman | richmond_braun81@gmail.com | New Dallin | Inactive | $429.49 |
| Guy Kiehn | eliseo.jones83@yahoo.com | Harrisburg | Inactive | $27.85 |
| Guadalupe Crist | eloise_borer77@yahoo.com | New Shanie | Inactive | $993.21 |
| Total | $2,821.55 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Peggy Kessler | raheem.powlowski@hotmail.com | Aurelieburgh | Active | $129.57 |
| Ms. Michele Reichert | candida.marvin-murazik92@yahoo.com | Lake Travon | Active | $159.02 |
| Linda Kautzer | harmony_stoltenberg74@gmail.com | Candidachester | Inactive | $1,137.45 |
| Doug O'Kon | jaqueline_heaney6@hotmail.com | Hirthefort | Active | $141.33 |
| Ramon Stark | jacey97@yahoo.com | North Hubertshire | Active | $109.63 |
| Total | $1,677.00 | |||
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 | ||
|---|---|---|---|---|---|
| Alexandra Jacobson | daron_douglas54@yahoo.com | Kobeberg | Inactive | $1,051.20 | |
| Delbert Deckow | mitchel.spinka66@hotmail.com | Minnieworth | Inactive | $239.54 | |
| Theodore Casper | aida_beahan74@gmail.com | East Octaviashire | Active | $465.01 | |
| Dr. Faye Franey-Kunze V | jamel.ritchie-ritchie27@hotmail.com | Irvine | Active | $144.84 | |
| Rochelle Rippin | boyd_shields@gmail.com | West Ryley | Inactive | $377.90 | |
| Total | $2,278.49 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Kristie Okuneva | kenya.lowe@gmail.com | Joliet | Active | $117.17 | |
| Kim Pagac | jeanne.ledner@gmail.com | South Odell | Active | $977.23 | |
| Willie Ankunding | paige_nitzsche95@yahoo.com | West Howard | Active | $916.92 | |
| Mr. Isaac Lueilwitz PhD | estevan_green@gmail.com | South Florine | Active | $8.78 | |
| Priscilla Nolan | kavon_pfannerstill99@hotmail.com | Kertzmannshire | Inactive | $157.56 | |
| Total | $2,177.66 | ||||
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 | |
|---|---|---|---|---|
| Walter Moen | julianne6@gmail.com | South Jarodside | Inactive | $173.00 |
| Kimberly Flatley | abdullah.tromp18@yahoo.com | Fort Bridgettefurt | Active | $801.22 |
| Michael Mayert | jordi_jakubowski9@yahoo.com | Percivalboro | Inactive | $575.00 |
| Dave Skiles | lester91@yahoo.com | Olathe | Active | $261.50 |
| Mercedes Wolff | kian52@gmail.com | Emardton | Inactive | $1,190.11 |
| Cassandra Corkery | connie_stokes@gmail.com | San Juan | Active | $830.64 |
| Marsha Bosco-Nitzsche | jonas11@hotmail.com | Boehmport | Inactive | $810.70 |
| Jeffrey Abbott | jadyn_schmidt@yahoo.com | Aloha | Inactive | $1,067.96 |
| Anne Hammes | rosanna.braun@gmail.com | Binghamton | Active | $309.86 |
| Dustin Harris | khalil.streich@yahoo.com | Antoninafort | Inactive | $967.20 |
| Edgar Dooley | nella95@gmail.com | Keonshire | Inactive | $530.27 |
| Hugh Hermann-Bosco | myrl.satterfield@gmail.com | West Kaitlynside | Inactive | $1,067.26 |
| Verna Zieme | olaf16@gmail.com | Fort Sharontown | Inactive | $549.18 |
| Pauline Graham | quinn.zieme6@hotmail.com | Bozeman | Inactive | $990.95 |
| Shannon Dickens | stevie.hilpert46@hotmail.com | Wintheiserchester | Inactive | $1,002.10 |
| Total | $11,126.95 | |||
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 |