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 | $332.12 |
| INV002 | Unpaid | Credit Card | $538.10 |
| INV003 | Pending | Credit Card | $616.78 |
| INV004 | Pending | PayPal | $500.57 |
| INV005 | Unpaid | Bank Transfer | $869.61 |
| INV006 | Pending | Credit Card | $719.70 |
| INV007 | Pending | Bank Transfer | $932.13 |
| Total | $4,509.01 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Mervin Lind | District Optimization Coordinator | mervin_lind@hotmail.com | Admin | |
| Green Kshlerin-Stamm | Corporate Creative Specialist | green.kshlerin-stamm@hotmail.com | Member | |
| Creola Gorczany | District Response Executive | creola_gorczany@gmail.com | Admin | |
| Herminia D'Amore | National Marketing Agent | herminia_damore@hotmail.com | Admin | |
| Esta Pollich | Future Security Coordinator | esta.pollich@hotmail.com | Admin | |
| Kelli Larson | District Usability Producer | kelli.larson77@yahoo.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 |
|---|---|---|
Laurine Spinka Lead Applications Supervisor laurine.spinka@yahoo.com | Admin | |
Sincere Hauck Legacy Mobility Orchestrator sincere_hauck52@hotmail.com | Viewer | |
Elias Johnston Direct Solutions Developer elias_johnston@gmail.com | Member | |
Rodrigo Morissette Global Paradigm Orchestrator rodrigo.morissette@yahoo.com | Viewer | |
Jeffery Quitzon National Creative Specialist jeffery_quitzon36@hotmail.com | Admin | |
Molly Johnson Customer Creative Specialist molly.johnson@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 |
|---|---|---|
Jordan Kulas Internal Solutions Coordinator jordan_kulas@gmail.com | Viewer | |
Leonard Goodwin Human Optimization Liaison leonard_goodwin88@hotmail.com | Admin | |
Adolf Stiedemann Direct Web Manager adolf.stiedemann@hotmail.com | Member | |
Alice Schaefer Global Accounts Designer alice.schaefer96@yahoo.com | Member | |
Edna Russel District Accountability Developer edna_russel@gmail.com | Member | |
Payton Crist Forward Brand Designer payton_crist@gmail.com | Admin | |
Haylie Ortiz National Quality Facilitator haylie.ortiz70@yahoo.com | Member | |
Merl Rempel International Research Facilitator merl.rempel57@gmail.com | Viewer | |
Gayle Bartell Senior Marketing Agent gayle.bartell4@hotmail.com | Admin | |
Joesph Effertz Regional Accountability Executive joesph.effertz30@yahoo.com | Admin | |
Bernard Dooley Customer Directives Facilitator bernard.dooley27@gmail.com | Member | |
Unique Heidenreich Investor Group Supervisor unique_heidenreich@yahoo.com | Viewer | |
Augustus Pacocha Senior Directives Representative augustus_pacocha75@hotmail.com | Admin | |
Jazmyn Hayes Lead Data Strategist jazmyn.hayes@gmail.com | Viewer | |
Junius Cormier Forward Intranet Assistant junius_cormier5@yahoo.com | Viewer | |
Brett Hoeger Investor Integration Strategist brett.hoeger37@yahoo.com | Viewer | |
Lonny Franey Product Solutions Facilitator lonny_franey@yahoo.com | Member | |
Carmine Osinski Legacy Security Liaison carmine_osinski@gmail.com | Admin | |
Erich Larson Lead Communications Agent erich.larson41@hotmail.com | Viewer | |
Norwood Moore International Markets Analyst norwood.moore@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 | |
|---|---|---|---|---|
| Margie Parisian | joseph_marks@hotmail.com | West King | Inactive | $465.14 |
| Ethel McLaughlin | shaina_lehner38@hotmail.com | New Alexzander | Active | $1,148.97 |
| Mrs. Erika Reilly | estel_rutherford72@gmail.com | North Ismaelmouth | Active | $611.14 |
| Wilfred Hauck | norwood_howell@yahoo.com | New Rebeca | Active | $437.55 |
| Alan Kerluke | judah_predovic@yahoo.com | North Florence | Active | $370.38 |
| Total | $3,033.18 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dr. Archie Hahn-Cremin @alysa30 | annie_ledner16@hotmail.com | West Garettmouth | Active | $32.64 |
Dave Blanda @savion.gleason63 | caroline.bayer@hotmail.com | Giovannicester | Inactive | $563.85 |
Mr. Matt Dickinson MD @jeremy_murazik74 | aubrey75@yahoo.com | Lockmanview | Active | $268.13 |
Theresa Stoltenberg @chad_rolfson | osvaldo_funk@hotmail.com | Gerlachton | Active | $163.37 |
Edna Armstrong @samantha.macgyver55 | derick.jacobs@yahoo.com | Creminport | Active | $958.13 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Chad Jenkins | lucius12@yahoo.com | Damoncester | Active | $794.57 |
| Shelia Tremblay | rory.jacobi-runolfsson@hotmail.com | Tillmanstad | Active | $849.33 |
| Saul Ernser | bo.carroll81@yahoo.com | Sydneyhaven | Active | $473.31 |
| Rudy Wuckert | melyna_koch@yahoo.com | Fort Tate | Inactive | $183.25 |
| Paula Reilly | rachael40@gmail.com | Annamarieville | Inactive | $851.06 |
| Total | $3,151.52 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ramiro Volkman | santino63@hotmail.com | West Patberg | Active | $644.99 |
| Florence Emmerich | devonte.huel45@yahoo.com | South Damion | Active | $164.02 |
| Lynn Collier | dalton.lubowitz39@hotmail.com | Lake Aftonmouth | Active | $879.96 |
| Spencer Hamill | arnaldo.hammes@gmail.com | Lake Judgemouth | Inactive | $985.93 |
| Debra Shanahan | brett.nicolas41@gmail.com | Elizabeth | Inactive | $430.41 |
| Total | $3,105.31 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Rufus Lakin IV | jany.fadel@hotmail.com | West Sonny | Active | $390.22 |
| Johnny Block | adrian_conn18@yahoo.com | North Shanefort | Inactive | $311.75 |
| Nathan Schmidt | susanna.kautzer@hotmail.com | Lake Lemuel | Active | $1,011.32 |
| Madeline Stehr | milo.hauck47@yahoo.com | Fredericshire | Inactive | $159.66 |
| Della Bayer | gillian89@hotmail.com | North Merritt | Active | $1,079.40 |
| Total | $2,952.35 | |||
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 | ||
|---|---|---|---|---|---|
| Mrs. Elizabeth Hermiston | carrie_legros4@yahoo.com | Maudton | Active | $1,068.03 | |
| Byron Bashirian | gabriella.runolfsson@gmail.com | South Britneybury | Inactive | $1,194.49 | |
| Sylvia Champlin Jr. | jon_klocko@yahoo.com | Lebsackburgh | Inactive | $1,130.67 | |
| Doreen Emmerich | rusty.mann67@yahoo.com | Carolina | Inactive | $100.86 | |
| Mrs. Jenna Rowe | benedict62@gmail.com | West Emmaworth | Inactive | $566.04 | |
| Total | $4,060.09 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lawrence Thiel | anjali28@hotmail.com | Danbury | Inactive | $771.59 | |
| Patti Tremblay | mathew_beahan36@yahoo.com | Pagacstad | Active | $379.36 | |
| Dr. Terence Kreiger-Bernhard | kyler.mclaughlin77@yahoo.com | Gaithersburg | Inactive | $608.34 | |
| Jon Shanahan | mikayla_hilpert90@gmail.com | Damienbury | Inactive | $491.84 | |
| Jeremy Dickinson | corbin.kuphal10@hotmail.com | Longview | Active | $41.99 | |
| Total | $2,293.12 | ||||
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 | |
|---|---|---|---|---|
| Martha Miller | shayne44@yahoo.com | Lake Velma | Inactive | $498.88 |
| Marcia Spinka III | webster_windler@hotmail.com | Kieraborough | Active | $168.44 |
| Sandy Hettinger | gideon.casper60@gmail.com | Fort Conner | Inactive | $1,120.75 |
| Willie Leuschke Sr. | glen_miller66@yahoo.com | Lake Jalonboro | Active | $554.75 |
| Jackie Farrell | reese32@hotmail.com | Wallacefurt | Inactive | $408.32 |
| Cheryl Champlin Sr. | brigitte51@hotmail.com | South Maximillianshire | Active | $270.30 |
| Marion Turner | yasmin.jerde42@gmail.com | Herzogside | Active | $929.58 |
| Dr. Beatrice Romaguera | karelle47@gmail.com | West Dylan | Inactive | $1,188.39 |
| Laurie Abernathy | breana.hoppe14@yahoo.com | Lake Vincenzostead | Active | $345.70 |
| Mr. Lamar Windler Sr. | neil_blick46@hotmail.com | Palmdale | Active | $25.00 |
| Brent Schiller | jayce_herman@gmail.com | Peytonland | Active | $206.78 |
| Karl Rutherford | rosalee_boyer20@gmail.com | Port Deonchester | Active | $1,063.78 |
| Kristi Bartoletti | norbert_howell@hotmail.com | Albinstad | Active | $49.39 |
| Mr. Clifton Gislason-Ruecker | santos_erdman@yahoo.com | Cruickshankfort | Inactive | $209.34 |
| Megan Dietrich | jacynthe58@yahoo.com | East Sanford | Inactive | $183.59 |
| Total | $7,222.99 | |||
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 |