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 | PayPal | $520.82 |
| INV002 | Unpaid | Credit Card | $507.76 |
| INV003 | Unpaid | PayPal | $650.76 |
| INV004 | Paid | PayPal | $225.19 |
| INV005 | Paid | PayPal | $706.41 |
| INV006 | Pending | Credit Card | $634.06 |
| INV007 | Unpaid | Bank Transfer | $577.29 |
| Total | $3,822.29 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Enos Yundt | Forward Branding Agent | enos_yundt@yahoo.com | Member | |
| Carolina Murray | Dynamic Web Liaison | carolina_murray@hotmail.com | Viewer | |
| Gerald Jacobs | Forward Optimization Manager | gerald.jacobs@hotmail.com | Member | |
| Greyson Wolf | Future Applications Facilitator | greyson.wolf63@gmail.com | Viewer | |
| Brown Krajcik | Lead Response Strategist | brown_krajcik69@hotmail.com | Viewer | |
| Alek Nikolaus | District Tactics Administrator | alek_nikolaus@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 |
|---|---|---|
Kory Cummings Global Implementation Consultant kory_cummings@gmail.com | Admin | |
Paolo Runolfsdottir Legacy Branding Orchestrator paolo.runolfsdottir@yahoo.com | Member | |
Nikolas Bernhard Chief Security Developer nikolas.bernhard@hotmail.com | Viewer | |
Casper Fahey Regional Response Strategist casper.fahey46@yahoo.com | Member | |
Malvina Monahan Forward Accounts Assistant malvina_monahan@gmail.com | Member | |
Stacey Schimmel Regional Research Analyst stacey.schimmel68@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 |
|---|---|---|
Cullen Rowe Regional Markets Coordinator cullen.rowe70@hotmail.com | Member | |
Jason Carter Human Implementation Producer jason_carter36@gmail.com | Member | |
Desmond Baumbach Direct Marketing Facilitator desmond.baumbach@yahoo.com | Member | |
Damon Wilkinson District Configuration Coordinator damon_wilkinson47@gmail.com | Admin | |
Gwen Lebsack Dynamic Tactics Orchestrator gwen.lebsack@gmail.com | Admin | |
Vivienne Huels Chief Paradigm Technician vivienne_huels59@hotmail.com | Member | |
Don Bashirian Central Factors Manager don_bashirian@hotmail.com | Admin | |
Cortez Oberbrunner-Schumm Regional Integration Director cortez_oberbrunner-schumm@gmail.com | Member | |
Precious Leffler District Brand Orchestrator precious.leffler71@gmail.com | Admin | |
Demetris Block District Branding Associate demetris_block86@hotmail.com | Viewer | |
Alison Runte Forward Configuration Assistant alison_runte@hotmail.com | Viewer | |
Sanford Pfeffer Chief Brand Administrator sanford.pfeffer86@yahoo.com | Viewer | |
Maymie Ziemann Future Directives Associate maymie_ziemann@hotmail.com | Member | |
Hector Heaney Human Functionality Technician hector.heaney@gmail.com | Member | |
Lawrence Durgan Regional Creative Supervisor lawrence.durgan23@gmail.com | Member | |
Jovani Schowalter Future Paradigm Specialist jovani_schowalter5@yahoo.com | Member | |
Mckenzie Nitzsche Principal Usability Supervisor mckenzie_nitzsche@gmail.com | Member | |
Phyllis Sanford Principal Marketing Orchestrator phyllis.sanford@hotmail.com | Viewer | |
Brice Lehner Customer Branding Liaison brice.lehner83@gmail.com | Admin | |
Ethelyn Wiza Customer Creative Manager ethelyn_wiza5@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 | |
|---|---|---|---|---|
| Gary Labadie | brain58@hotmail.com | Mrazside | Inactive | $846.96 |
| Joe Pfeffer | emelie.raynor47@gmail.com | Grahamville | Active | $216.03 |
| Edmond Weimann PhD | eulalia_mcclure42@gmail.com | Tremblayboro | Inactive | $913.35 |
| Erick Roberts | mason.baumbach@hotmail.com | Lincoln | Active | $791.58 |
| Damon Nader | virginie.lesch@hotmail.com | Napa | Active | $1,014.71 |
| Total | $3,782.63 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Al Hyatt @eddie_hammes | genoveva34@hotmail.com | Largo | Inactive | $494.86 |
Stephen Hoppe MD @grady52 | vida.murray8@gmail.com | Gersonfield | Inactive | $221.61 |
Jaime Davis @edward.conn | sam_mante71@hotmail.com | North Hubertfield | Inactive | $526.03 |
Clarence Conroy @ernest34 | hermina66@yahoo.com | North Joseph | Inactive | $113.99 |
Jackie Koelpin @dave39 | rudy_gutkowski@yahoo.com | South Casimir | Active | $493.23 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Theodore Thiel | ally_hoppe@gmail.com | Reingerstead | Active | $1,006.60 |
| Leo Schmitt | estrella_cormier19@gmail.com | The Villages | Inactive | $850.96 |
| Ms. Kari Moore DDS | yasmeen92@hotmail.com | West Corrine | Inactive | $997.81 |
| Brandy Marvin | adrien_smith@gmail.com | Stracketon | Inactive | $920.62 |
| Marcos Murray | leann_reynolds76@hotmail.com | Fort Winston | Active | $475.00 |
| Total | $4,250.99 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jacqueline Adams | delta_hansen@hotmail.com | Alizastad | Inactive | $1,114.21 |
| Tami Rohan | raegan.schmeler31@yahoo.com | Providence | Inactive | $1,149.64 |
| Brooke Durgan | sean43@hotmail.com | West Kolbyborough | Inactive | $213.59 |
| Lydia Connelly | alana55@hotmail.com | Pollichport | Active | $512.35 |
| Amy Haley | kenna39@gmail.com | Jonton | Inactive | $813.58 |
| Total | $3,803.37 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Grant Bednar | evangeline.labadie@gmail.com | North Dantefield | Active | $967.06 |
| Mr. Kerry Flatley | jadyn37@hotmail.com | Reynoldshaven | Active | $218.83 |
| Amanda Mertz | hortense_trantow33@gmail.com | La Crosse | Active | $109.62 |
| Sheldon Krajcik | jadon_von-dare@yahoo.com | West Abby | Active | $61.20 |
| Olivia Stark II | paula12@yahoo.com | New Averystad | Inactive | $954.48 |
| Total | $2,311.19 | |||
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 | ||
|---|---|---|---|---|---|
| Melissa Larkin | viola.franecki@yahoo.com | Demetriuscester | Active | $188.42 | |
| Dr. Wendell Leffler | brett.bradtke61@yahoo.com | West Arjun | Inactive | $203.30 | |
| Darlene Stark | mathilde10@yahoo.com | South Wilton | Inactive | $145.91 | |
| Dr. Laurence Osinski | teagan_stanton76@gmail.com | North Pasquale | Inactive | $992.77 | |
| Garrett O'Keefe | lilla.satterfield@gmail.com | Severn | Active | $414.96 | |
| Total | $1,945.36 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Abraham Shields-Aufderhar | ricky_rippin@gmail.com | Zanderboro | Inactive | $799.58 | |
| Pauline Braun | narciso_powlowski@yahoo.com | Quincy | Active | $580.47 | |
| Chester Rempel | julien_adams18@gmail.com | Reedstead | Inactive | $351.54 | |
| Clint Bernhard-Douglas | reid11@gmail.com | Selinaview | Active | $148.55 | |
| Tom Gutmann | peggie85@yahoo.com | Shannonview | Active | $197.76 | |
| Total | $2,077.90 | ||||
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 | |
|---|---|---|---|---|
| Frankie Bosco | keara_dibbert@yahoo.com | New Zoeville | Inactive | $677.58 |
| Teresa Morissette | priscilla_maggio@gmail.com | Port Santinomouth | Active | $914.75 |
| Mr. Andre Weissnat PhD | kelsie82@gmail.com | North Norval | Inactive | $60.49 |
| Mr. Jonathan Keeling | elmer45@hotmail.com | Livermore | Active | $846.82 |
| Lois Hintz-Gusikowski | mariah_reinger43@hotmail.com | Jaidenworth | Active | $443.65 |
| Todd Konopelski | herbert.kilback@yahoo.com | Carrollside | Active | $53.84 |
| Christian Champlin | kieran.spencer31@hotmail.com | Blandafort | Inactive | $939.19 |
| Emilio Lubowitz-Bergstrom | clarissa_walker93@yahoo.com | Keonton | Inactive | $179.05 |
| Melanie Sauer | marta_strosin@gmail.com | North Kristy | Inactive | $801.77 |
| Irma Watsica | mohammed_cronin-quigley74@gmail.com | South Bradfordstead | Inactive | $263.58 |
| Gladys Strosin | krystel_yost75@yahoo.com | Twin Falls | Inactive | $539.03 |
| Jill Stroman | berneice.windler@hotmail.com | Julieton | Inactive | $669.51 |
| Tami Thiel | athena87@gmail.com | Lake Greggchester | Inactive | $668.40 |
| Ms. Teresa Lang | sanford48@gmail.com | Chula Vista | Active | $1,085.77 |
| Essie Mohr | cloyd49@yahoo.com | North Melyssa | Active | $877.14 |
| Total | $9,020.57 | |||
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 |