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 | $682.30 |
| INV002 | Pending | Bank Transfer | $807.79 |
| INV003 | Unpaid | PayPal | $820.72 |
| INV004 | Unpaid | Credit Card | $917.98 |
| INV005 | Pending | Credit Card | $882.66 |
| INV006 | Pending | PayPal | $675.05 |
| INV007 | Unpaid | PayPal | $882.22 |
| Total | $5,668.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Maverick Quigley | Product Research Supervisor | maverick.quigley60@hotmail.com | Member | |
| Cristian Roberts | Direct Paradigm Developer | cristian.roberts49@hotmail.com | Viewer | |
| Maximillia Balistreri | Corporate Metrics Engineer | maximillia.balistreri22@hotmail.com | Member | |
| Vella Fritsch | Dynamic Intranet Liaison | vella.fritsch71@gmail.com | Viewer | |
| Kathlyn Mante | Senior Data Supervisor | kathlyn_mante@yahoo.com | Member | |
| Elton Schimmel | Lead Directives Architect | elton_schimmel37@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 |
|---|---|---|
Darby Emmerich Lead Optimization Officer darby.emmerich84@yahoo.com | Viewer | |
Dexter Brekke Central Tactics Producer dexter_brekke@yahoo.com | Member | |
Ellie Jakubowski-O'Conner International Accounts Liaison ellie_jakubowski-oconner@hotmail.com | Member | |
Erna White International Brand Engineer erna_white61@hotmail.com | Admin | |
Norberto Huels Lead Assurance Strategist norberto_huels81@hotmail.com | Viewer | |
Lula Bashirian National Assurance Officer lula.bashirian2@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Daniela O'Reilly Corporate Optimization Manager daniela_oreilly74@yahoo.com | Admin | |
Dashawn Kozey Corporate Paradigm Facilitator dashawn_kozey19@hotmail.com | Member | |
Amy Hilll Central Paradigm Associate amy_hilll@yahoo.com | Viewer | |
Stephany Dickinson Dynamic Quality Technician stephany.dickinson49@hotmail.com | Member | |
Darius Haag District Assurance Director darius.haag@gmail.com | Admin | |
Mathias Runolfsdottir Product Applications Specialist mathias.runolfsdottir69@yahoo.com | Admin | |
Callie Witting Legacy Communications Liaison callie.witting39@yahoo.com | Viewer | |
Jensen Wunsch Global Communications Representative jensen_wunsch13@gmail.com | Viewer | |
Iva Barrows District Group Architect iva_barrows@hotmail.com | Admin | |
Alicia Fritsch Lead Accounts Consultant alicia_fritsch34@gmail.com | Admin | |
Mac Langworth Corporate Accountability Orchestrator mac_langworth74@hotmail.com | Member | |
Jenifer Osinski Human Metrics Technician jenifer_osinski47@yahoo.com | Viewer | |
Vivienne Labadie Global Usability Coordinator vivienne.labadie@gmail.com | Viewer | |
Rubie Anderson Human Marketing Assistant rubie_anderson@hotmail.com | Member | |
Casimir Bednar Future Research Representative casimir.bednar@gmail.com | Admin | |
Winifred Howell Chief Communications Designer winifred.howell90@yahoo.com | Member | |
Otho Rippin Internal Markets Administrator otho.rippin@hotmail.com | Admin | |
Hailey Herzog Central Accountability Representative hailey.herzog81@hotmail.com | Member | |
David McCullough Legacy Directives Developer david.mccullough60@gmail.com | Admin | |
Ashton Kuphal Future Tactics Producer ashton_kuphal41@gmail.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 | |
|---|---|---|---|---|
| Silvia Dooley | judd_morar58@yahoo.com | Greensboro | Inactive | $568.66 |
| Francisco Ruecker-Schuster | shayna22@yahoo.com | Lake Bethany | Inactive | $616.35 |
| Erika Kertzmann I | rory_jacobson-greenfelder@gmail.com | Port Trisha | Active | $51.03 |
| Scott Zieme MD | sven.green@gmail.com | Abshireside | Inactive | $256.53 |
| David Mosciski-Price Sr. | stuart_murray20@yahoo.com | Runteton | Inactive | $171.69 |
| Total | $1,664.26 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ted Yundt @fidel.medhurst | donny_monahan97@yahoo.com | Krisburgh | Active | $755.07 |
Chad Welch @bethany69 | devante_morissette87@gmail.com | Lake Eunaville | Inactive | $579.99 |
Dora Aufderhar @freeda_streich | hailee_schowalter-hintz@yahoo.com | West Mablestad | Inactive | $608.77 |
Rhonda Murazik @delphia_smitham37 | oma18@gmail.com | Jeromyboro | Active | $945.36 |
Clint Dach DDS @ignacio_muller-reinger | clementine_mckenzie@hotmail.com | West Kyrashire | Active | $1,001.85 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dale Watsica MD | danielle71@yahoo.com | West Bulah | Active | $99.85 |
| Kelly O'Hara | izaiah_kuhlman@gmail.com | Josefinaland | Active | $720.42 |
| Alejandro Rutherford | madisyn.hudson@hotmail.com | Considinestad | Active | $1,037.52 |
| Jenna Prosacco | janice_koepp65@yahoo.com | Lake Hipolitofort | Active | $860.14 |
| Clark Littel | bettye76@gmail.com | Dereckburgh | Active | $236.50 |
| Total | $2,954.43 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darla Hartmann | samantha.jones@gmail.com | North Everettechester | Active | $332.12 |
| Gustavo Shanahan | mariam.jast@yahoo.com | Kuvalisport | Inactive | $447.98 |
| Ernesto Hoeger | claudia.dibbert-conroy57@hotmail.com | Medford | Active | $668.71 |
| Dianna Champlin | gust.crona@gmail.com | Albany | Inactive | $547.00 |
| Andrew Ward | deven80@gmail.com | Allyville | Inactive | $578.99 |
| Total | $2,574.80 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lynette Kub | lennie.mante43@gmail.com | Wheaton | Active | $280.20 |
| Mrs. Eva Kshlerin | glenna_pfeffer@gmail.com | South Demetriusborough | Active | $17.18 |
| Kirk Konopelski | kennith.gottlieb@yahoo.com | South Adolph | Active | $35.67 |
| Jerry Conn IV | ricardo16@hotmail.com | New Lilian | Inactive | $1,171.81 |
| Lucas Hartmann | trever.daniel39@gmail.com | East Emmett | Active | $820.25 |
| Total | $2,325.11 | |||
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 | ||
|---|---|---|---|---|---|
| Violet Mitchell IV | angeline.wisoky48@yahoo.com | South Rockybury | Inactive | $940.26 | |
| Cornelius Weber | sincere93@yahoo.com | Fort Sandrafurt | Active | $510.14 | |
| Ms. Dianna Bayer-Schinner | ines82@gmail.com | Troy | Inactive | $12.95 | |
| Vicki Hackett | lauryn87@hotmail.com | Danastad | Active | $146.87 | |
| Jennifer Cremin | wilfred82@gmail.com | Lake Anyafield | Inactive | $189.56 | |
| Total | $1,799.78 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ada Wolf | adriana_considine@gmail.com | Hickleberg | Active | $103.92 | |
| Lauren Schiller | greg13@gmail.com | West Zorafurt | Inactive | $146.96 | |
| Martin Franecki | juwan80@yahoo.com | Port Vladimir | Inactive | $856.89 | |
| Preston Mraz PhD | valentina.ferry9@hotmail.com | New Camilafurt | Inactive | $56.57 | |
| Rhonda Kozey | zakary.stiedemann@gmail.com | Oxnard | Inactive | $1,040.65 | |
| Total | $2,204.99 | ||||
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 | |
|---|---|---|---|---|
| Sonya Rosenbaum | laron_wuckert@yahoo.com | Schusterworth | Active | $565.41 |
| Stanley Bartell Jr. | ali89@yahoo.com | Millerberg | Inactive | $783.15 |
| Ana Russel | savannah64@yahoo.com | New Noahbury | Active | $120.37 |
| Dr. Gwen Brown | jimmy75@yahoo.com | Fall River | Inactive | $11.42 |
| Sylvia Kertzmann | eryn_quigley@gmail.com | Lake Jessyfield | Active | $1,044.86 |
| Fannie Stoltenberg | tess25@hotmail.com | East Josh | Inactive | $462.69 |
| Debra Daniel | yasmin.christiansen82@hotmail.com | Kassulkestad | Active | $123.66 |
| Cristina Ebert Sr. | joel83@hotmail.com | Fort Myers | Inactive | $623.79 |
| Claude Haley | kevin_stark94@hotmail.com | Barbarastad | Active | $38.95 |
| Luis Lang | darrick_durgan56@yahoo.com | South Montyburgh | Active | $1,140.88 |
| Bessie Goyette-Bradtke | vito.pfannerstill54@gmail.com | Port Lawrence | Active | $519.26 |
| Dr. Alton Hintz | juliana2@hotmail.com | Killeen | Active | $881.15 |
| Kristen VonRueden | romaine.howell63@hotmail.com | Shakirabury | Active | $227.69 |
| Lewis Harber | regan_dietrich64@yahoo.com | Runolfsdottirfield | Inactive | $571.59 |
| Marc Abernathy | susanna40@hotmail.com | Arafort | Active | $96.02 |
| Total | $7,210.89 | |||
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 |