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 | Credit Card | $502.69 |
| INV002 | Unpaid | Bank Transfer | $761.17 |
| INV003 | Pending | Credit Card | $224.66 |
| INV004 | Unpaid | PayPal | $955.67 |
| INV005 | Paid | Bank Transfer | $338.77 |
| INV006 | Paid | Bank Transfer | $772.11 |
| INV007 | Paid | Bank Transfer | $541.13 |
| Total | $4,096.20 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Valerie Upton | Internal Integration Consultant | valerie_upton@gmail.com | Viewer | |
| Toby Nikolaus | Internal Markets Officer | toby_nikolaus@gmail.com | Member | |
| Wilson Thiel | Human Quality Assistant | wilson_thiel@hotmail.com | Member | |
| Rex Nicolas | Senior Operations Assistant | rex_nicolas65@hotmail.com | Viewer | |
| Selmer Barton | Central Usability Specialist | selmer.barton28@hotmail.com | Admin | |
| Taylor Douglas | Global Intranet Liaison | taylor.douglas@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 |
|---|---|---|
Lucille Bailey International Response Developer lucille_bailey35@gmail.com | Admin | |
Herman Runte-Will Corporate Operations Orchestrator herman.runte-will50@hotmail.com | Viewer | |
Hollie Ondricka Global Implementation Coordinator hollie_ondricka@yahoo.com | Member | |
Nathen Herzog International Communications Producer nathen_herzog@gmail.com | Viewer | |
Ryan Daugherty Legacy Research Consultant ryan.daugherty@hotmail.com | Viewer | |
Hope Nitzsche National Metrics Analyst hope_nitzsche20@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 |
|---|---|---|
Christina Haley National Interactions Associate christina_haley96@hotmail.com | Member | |
Geneva Farrell Corporate Infrastructure Specialist geneva_farrell46@gmail.com | Member | |
Shannon Hegmann Future Implementation Consultant shannon_hegmann@gmail.com | Member | |
Guillermo Marvin Investor Operations Consultant guillermo.marvin@hotmail.com | Viewer | |
Marie Swaniawski Corporate Data Associate marie.swaniawski@yahoo.com | Member | |
Laurie Runolfsson International Intranet Producer laurie_runolfsson@hotmail.com | Viewer | |
Darlene Leuschke Dynamic Assurance Consultant darlene_leuschke54@hotmail.com | Member | |
Alberta Spencer National Paradigm Agent alberta_spencer@yahoo.com | Admin | |
Berta Ruecker Lead Data Agent berta.ruecker@gmail.com | Viewer | |
Frankie Hyatt Internal Response Analyst frankie_hyatt@hotmail.com | Viewer | |
Rene Brown Dynamic Security Executive rene_brown@hotmail.com | Viewer | |
Ida Mueller Legacy Research Strategist ida_mueller18@yahoo.com | Viewer | |
Brennon Farrell Principal Mobility Agent brennon_farrell92@hotmail.com | Admin | |
Mike Runolfsdottir Regional Security Director mike.runolfsdottir41@gmail.com | Admin | |
Beatrice Pfeffer National Program Liaison beatrice.pfeffer@yahoo.com | Admin | |
Shaun Cormier Human Metrics Strategist shaun_cormier@hotmail.com | Admin | |
Juliana Rolfson Global Accountability Administrator juliana_rolfson@gmail.com | Member | |
Sherman Altenwerth Legacy Functionality Architect sherman.altenwerth52@gmail.com | Viewer | |
Craig Emmerich Global Group Facilitator craig.emmerich1@yahoo.com | Admin | |
Boyd Dickens-Pfeffer Forward Usability Engineer boyd_dickens-pfeffer@yahoo.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 | |
|---|---|---|---|---|
| Jeremiah Wilkinson | salvador_gleichner92@gmail.com | Purdyport | Active | $326.83 |
| Dr. Chelsea Trantow | marianne.hodkiewicz@yahoo.com | Flossiestead | Active | $1,019.64 |
| Brad Leuschke | marlon_schowalter61@gmail.com | West Maycester | Active | $480.78 |
| Guillermo Wiegand | diana44@yahoo.com | Blickcester | Active | $102.23 |
| Mr. Edmund Franecki | eula.mccullough41@yahoo.com | Kadinview | Inactive | $210.39 |
| Total | $2,139.87 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Arvel Hauck III @edmund_strosin10 | krista_koepp@yahoo.com | Bountiful | Inactive | $739.20 |
Stanton Lowe @sherman_casper | jamie_effertz@yahoo.com | West Kentoncester | Active | $870.68 |
Bernard Hammes @kolby26 | lula.bayer50@hotmail.com | Alexandria | Inactive | $542.61 |
Opal Willms @valerie.mckenzie9 | april28@gmail.com | Toyhaven | Active | $319.11 |
Angelo Corkery DDS @marcelle_wolf99 | rosie_homenick35@hotmail.com | Strackeville | Active | $283.90 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Frederique Hyatt | ladarius.heidenreich97@yahoo.com | Warner Robins | Inactive | $372.13 |
| Ms. Lucie Stehr | tammy54@hotmail.com | East Shany | Inactive | $971.82 |
| Nicholas Bergstrom | angel.hand@gmail.com | Gutkowskiside | Inactive | $219.50 |
| Bernard Lakin | courtney_nikolaus@gmail.com | Cathedral City | Active | $1,182.81 |
| Addison Bartoletti IV | dwayne3@yahoo.com | North Jordynstead | Active | $499.83 |
| Total | $3,246.09 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Edmund Zieme | jorge.cormier@hotmail.com | San Jacinto | Active | $192.32 |
| Wilhelmine Strosin | graham_hand65@yahoo.com | Sydneemouth | Inactive | $49.74 |
| Leonard Bode | celia29@yahoo.com | Elouiseton | Inactive | $630.65 |
| Pat Connelly | bennett11@gmail.com | Lake Bradberg | Inactive | $473.30 |
| Lionel Friesen | alexane.sipes28@gmail.com | Ellicott City | Inactive | $684.00 |
| Total | $2,030.01 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Martin Grimes | drew.sanford37@yahoo.com | Port Idell | Inactive | $98.78 |
| Kamryn Von | jody74@yahoo.com | South Jaime | Inactive | $491.99 |
| Briana Kovacek | dudley.prosacco@hotmail.com | Smithamview | Inactive | $213.51 |
| Jailyn Kiehn | autumn.raynor38@gmail.com | Parma | Inactive | $214.55 |
| Albert Hayes | nichole.spinka38@yahoo.com | Gleichnerburgh | Inactive | $874.14 |
| Total | $1,892.97 | |||
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 | ||
|---|---|---|---|---|---|
| Estell Kutch | bridgette20@yahoo.com | Dickinsonside | Inactive | $176.94 | |
| Warren Senger | melany49@hotmail.com | Zulaufbury | Inactive | $470.60 | |
| Doris Murray | darrell78@yahoo.com | Koeppbury | Inactive | $867.36 | |
| Mike Wyman | marian_doyle64@yahoo.com | Kuhicside | Inactive | $406.25 | |
| Bert McKenzie PhD | garry63@gmail.com | New Abelardoburgh | Inactive | $1,062.10 | |
| Total | $2,983.25 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Katrina Price-Armstrong | jake2@yahoo.com | Norwoodbury | Active | $1,171.49 | |
| Melyna Miller Jr. | lorene25@yahoo.com | East Clementinatown | Inactive | $696.01 | |
| Paula Mueller | jan89@hotmail.com | St. Peters | Inactive | $345.90 | |
| Antonietta Breitenberg | doreen_monahan2@yahoo.com | Spinkafurt | Active | $698.70 | |
| Haylie Hoeger | kristie.pagac4@hotmail.com | Fort Aurore | Active | $823.57 | |
| Total | $3,735.67 | ||||
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 | |
|---|---|---|---|---|
| Mr. Henri Crona | aracely_kulas64@yahoo.com | Dachberg | Inactive | $704.51 |
| Alec Walsh | nicola_stamm96@yahoo.com | Casandrafurt | Active | $187.63 |
| Ms. Micheal Wiza | timmy.kunde@gmail.com | Sagehaven | Inactive | $1,136.44 |
| Jerald Yost | timothy_will82@hotmail.com | Teresaborough | Active | $55.33 |
| Yolanda Schaden-Kohler | eula.nader10@gmail.com | Deltona | Active | $422.06 |
| Kadin Rippin | patricia0@hotmail.com | Hipolitoboro | Active | $457.00 |
| Joel Dach | lowell_graham39@yahoo.com | Reillyton | Inactive | $280.89 |
| Meagan Davis | ryan.tromp@yahoo.com | Melbourne | Active | $873.51 |
| Clint Johnston | janet.mcglynn@yahoo.com | Plano | Active | $877.70 |
| Frank Mayert | gisselle18@hotmail.com | Lake Mavis | Active | $824.40 |
| Jimmy Auer | ann.hagenes@hotmail.com | Shemarhaven | Inactive | $693.49 |
| Sandy Morar | paolo96@gmail.com | Hansenfield | Inactive | $1,113.03 |
| Brendan Hoeger III | dereck88@yahoo.com | Coon Rapids | Inactive | $826.00 |
| Ryann Batz | renee.nader@yahoo.com | Carlifurt | Inactive | $255.96 |
| Ethel Trantow | maymie23@yahoo.com | Nicholasland | Active | $81.89 |
| Total | $8,789.84 | |||
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 |