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 | $502.89 |
| INV002 | Pending | Credit Card | $326.35 |
| INV003 | Unpaid | PayPal | $484.49 |
| INV004 | Unpaid | Bank Transfer | $152.95 |
| INV005 | Pending | PayPal | $999.41 |
| INV006 | Pending | PayPal | $114.33 |
| INV007 | Pending | Bank Transfer | $667.46 |
| Total | $3,247.88 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Albert Jakubowski | Regional Web Representative | albert.jakubowski@yahoo.com | Admin | |
| Olaf Reynolds | Future Optimization Representative | olaf_reynolds45@yahoo.com | Viewer | |
| Abdiel Barrows | Dynamic Metrics Supervisor | abdiel_barrows@gmail.com | Member | |
| Tyrique Stamm | Lead Branding Supervisor | tyrique_stamm@gmail.com | Member | |
| Allison Hansen | Internal Program Strategist | allison_hansen65@yahoo.com | Viewer | |
| Eda Witting | Senior Intranet Producer | eda_witting@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 |
|---|---|---|
Arturo Schoen-Kshlerin Dynamic Brand Director arturo.schoen-kshlerin@hotmail.com | Member | |
Estell Maggio Central Implementation Strategist estell.maggio@hotmail.com | Member | |
Kendall Hessel Direct Solutions Representative kendall.hessel10@hotmail.com | Member | |
Katrine Kuhn Chief Operations Planner katrine_kuhn65@yahoo.com | Member | |
Gunner Ziemann National Accountability Architect gunner_ziemann@gmail.com | Admin | |
Mabel Crooks Global Brand Associate mabel.crooks17@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 |
|---|---|---|
Antonina White Regional Security Designer antonina.white56@yahoo.com | Admin | |
Cali Herzog Future Accounts Consultant cali.herzog@yahoo.com | Member | |
Guy Mraz National Infrastructure Consultant guy.mraz40@hotmail.com | Viewer | |
Verla Reinger Lead Paradigm Supervisor verla.reinger@gmail.com | Admin | |
Adele Hyatt Corporate Assurance Architect adele.hyatt79@hotmail.com | Admin | |
Celine Mueller National Data Facilitator celine.mueller97@hotmail.com | Member | |
Rosemary West Dynamic Tactics Planner rosemary.west48@hotmail.com | Member | |
Ahmad Renner-Jerde International Creative Representative ahmad_renner-jerde32@yahoo.com | Viewer | |
Rusty Dickens Human Web Engineer rusty.dickens63@hotmail.com | Member | |
Alta Ziemann Product Marketing Orchestrator alta_ziemann@yahoo.com | Viewer | |
Alanis Gutmann Investor Assurance Producer alanis_gutmann91@hotmail.com | Member | |
Ardella Ondricka District Optimization Executive ardella.ondricka@hotmail.com | Viewer | |
Mayra Kunde-Rutherford District Implementation Supervisor mayra_kunde-rutherford@hotmail.com | Admin | |
Adaline O'Kon Product Functionality Analyst adaline_okon12@hotmail.com | Admin | |
Cassandra Batz Product Accounts Specialist cassandra.batz79@hotmail.com | Admin | |
Thalia Kuhlman Forward Communications Administrator thalia.kuhlman@hotmail.com | Member | |
Ignatius Harber National Implementation Associate ignatius.harber73@gmail.com | Member | |
Jairo Nikolaus-Lynch Regional Tactics Manager jairo_nikolaus-lynch@hotmail.com | Viewer | |
Reed Zboncak Human Markets Officer reed_zboncak77@hotmail.com | Viewer | |
Rosendo Durgan Legacy Metrics Associate rosendo.durgan@yahoo.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 | |
|---|---|---|---|---|
| Debra Gislason | alexandrine52@gmail.com | Vivianeside | Inactive | $261.24 |
| Minnie Lowe | suzanne.champlin51@hotmail.com | Fort Laurine | Inactive | $496.68 |
| Whitney Hodkiewicz | korbin_mohr@gmail.com | Haaghaven | Inactive | $412.03 |
| Emmett Waelchi DVM | gabriella_kutch@gmail.com | Percivalfurt | Inactive | $1,194.15 |
| Clint Davis PhD | herman7@yahoo.com | Edinburg | Active | $1,126.50 |
| Total | $3,490.60 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Crystal McKenzie @geovany_greenholt39 | mayra_wintheiser@yahoo.com | North Walkerstead | Inactive | $3.61 |
Dr. Ian Kautzer III @keagan3 | matilde_volkman30@hotmail.com | South Daishaworth | Inactive | $330.03 |
Lorraine Metz @destany_gorczany37 | delia_bauch@gmail.com | Poway | Active | $347.49 |
Karl Schuster @vaughn40 | hans98@hotmail.com | Palm Beach Gardens | Inactive | $835.21 |
Dr. Tina Gutmann @eliseo_padberg | ahmad_johns@gmail.com | Spokane | Active | $1,069.99 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brad Vandervort | verona_abbott55@gmail.com | Jeffersonville | Inactive | $402.66 |
| Glen Walter | darian_hodkiewicz69@yahoo.com | Gerholdfort | Inactive | $798.53 |
| Leland Bechtelar | rolando_halvorson@hotmail.com | Lake Jaron | Active | $232.97 |
| Catherine Dare | augusta77@hotmail.com | Schroederbury | Inactive | $734.23 |
| Ms. Sally Rosenbaum | bill_howe84@gmail.com | Port Tellyburgh | Inactive | $792.02 |
| Total | $2,960.41 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lori Weissnat II | myron.grady@hotmail.com | Schowalterton | Inactive | $1,031.29 |
| Sylvester Turcotte | petra72@gmail.com | Cerritos | Active | $962.26 |
| Allison Stanton | prudence77@hotmail.com | Port Mabelletown | Active | $1,196.88 |
| Jesse Deckow | martina.zemlak@hotmail.com | Plantation | Active | $304.76 |
| Todd Harber | jailyn13@gmail.com | Lizastead | Inactive | $367.63 |
| Total | $3,862.82 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tonya Farrell Sr. | georgiana.cummings@gmail.com | Abbottshire | Inactive | $91.92 |
| Dr. Aaron Becker | tess_stanton@gmail.com | South Emile | Inactive | $914.29 |
| Preston Schmeler | kirsten2@yahoo.com | East Antonette | Inactive | $915.62 |
| Joanna Bednar | adriana.west58@gmail.com | West Ludie | Active | $278.61 |
| Molly Corkery | nathanael_stokes-rath@yahoo.com | Council Bluffs | Active | $1,145.36 |
| Total | $3,345.80 | |||
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 | ||
|---|---|---|---|---|---|
| Eileen Predovic | kassandra.considine81@hotmail.com | Hiltonboro | Inactive | $577.72 | |
| Mark Buckridge | arlie_morar69@hotmail.com | East Deonfield | Active | $191.88 | |
| Shannon Kuhlman | darian84@yahoo.com | South Lorenzo | Inactive | $205.08 | |
| Orville Rosenbaum | hayley.monahan93@gmail.com | Valerieview | Active | $823.39 | |
| Jody Jast | sarina.schamberger50@gmail.com | Mikaylaburgh | Inactive | $764.21 | |
| Total | $2,562.28 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Duane Koelpin | clay_hilll-torp75@hotmail.com | Millsville | Inactive | $1,111.04 | |
| Randal Mitchell | camilla_labadie@gmail.com | Osbaldocester | Inactive | $135.40 | |
| Karla Gerlach | eddie.oconnell49@hotmail.com | El Centro | Inactive | $1,149.67 | |
| Minnie Paucek | golda65@hotmail.com | Port Yeseniafield | Active | $821.98 | |
| Jerome Hermiston | maribel.white@gmail.com | Johnsonstad | Inactive | $853.13 | |
| Total | $4,071.22 | ||||
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 | |
|---|---|---|---|---|
| Ernestine Renner | axel_jaskolski@gmail.com | Bradtkestad | Inactive | $674.60 |
| Irene Bechtelar-Feeney Jr. | shania.barrows@yahoo.com | Fort Raeganfield | Inactive | $1,111.12 |
| Ramona Cronin | shawn0@hotmail.com | South Efrain | Active | $17.38 |
| Harvey Marquardt | sylvester.harvey90@yahoo.com | Lake Shanelleview | Inactive | $353.46 |
| Hubert Barton | annabel.aufderhar26@gmail.com | San Marcos | Active | $915.10 |
| Kim Lemke | macy.jaskolski@gmail.com | Cruickshankside | Active | $1,092.79 |
| Christopher Skiles | dustin62@yahoo.com | West Vernon | Inactive | $654.84 |
| Dr. Kelli Lubowitz I | devon_spinka@yahoo.com | Kaleighberg | Active | $451.72 |
| Lucy Torp | bertha.kerluke18@hotmail.com | New Nathaniel | Active | $430.56 |
| Sheryl Cormier | lela.monahan26@gmail.com | Mayertfort | Inactive | $894.15 |
| Jeffery Corwin | clarabelle.jerde11@hotmail.com | Appleton | Inactive | $120.63 |
| Ray Wiegand II | orrin91@gmail.com | West Estevanside | Active | $650.04 |
| Rene Pfeffer | georgianna32@gmail.com | Wolfport | Inactive | $401.46 |
| Vernon Wiza | brain5@hotmail.com | Lednertown | Inactive | $392.56 |
| Samantha Schimmel | rozella.fritsch24@hotmail.com | North Micah | Inactive | $78.28 |
| Total | $8,238.69 | |||
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 |