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 | $811.38 |
| INV002 | Pending | Bank Transfer | $779.25 |
| INV003 | Unpaid | Bank Transfer | $721.27 |
| INV004 | Pending | Credit Card | $805.62 |
| INV005 | Pending | Credit Card | $144.40 |
| INV006 | Paid | PayPal | $240.45 |
| INV007 | Unpaid | PayPal | $910.97 |
| Total | $4,413.34 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Samir Bartell | Investor Mobility Producer | samir.bartell26@gmail.com | Admin | |
| Julian Kautzer | Legacy Quality Producer | julian_kautzer@hotmail.com | Member | |
| Kyler Hettinger | Forward Mobility Technician | kyler.hettinger@yahoo.com | Admin | |
| Esteban Franecki | Future Branding Manager | esteban_franecki62@yahoo.com | Admin | |
| Randi Krajcik | Future Identity Assistant | randi_krajcik@yahoo.com | Member | |
| Duncan Erdman | Corporate Identity Agent | duncan.erdman@gmail.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 |
|---|---|---|
Melyssa Kris Legacy Configuration Officer melyssa_kris@gmail.com | Admin | |
Thad Hickle Senior Assurance Specialist thad.hickle@gmail.com | Admin | |
Armand Kuvalis International Integration Manager armand.kuvalis44@yahoo.com | Admin | |
Marlin Boyer Central Functionality Analyst marlin.boyer@yahoo.com | Viewer | |
Johnson Bednar Customer Security Engineer johnson_bednar47@hotmail.com | Member | |
Dorthy Kovacek Corporate Accountability Liaison dorthy.kovacek@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 |
|---|---|---|
Mitchell Kiehn District Group Representative mitchell_kiehn@yahoo.com | Admin | |
Ezekiel Wintheiser Internal Communications Supervisor ezekiel_wintheiser88@hotmail.com | Member | |
Angela Ondricka Customer Data Administrator angela.ondricka@gmail.com | Member | |
Delpha Cole Senior Identity Consultant delpha.cole42@gmail.com | Viewer | |
Eulalia Shanahan Human Division Producer eulalia_shanahan@yahoo.com | Admin | |
Aylin Bednar Lead Interactions Coordinator aylin.bednar74@gmail.com | Viewer | |
Evie Abshire Human Identity Officer evie_abshire14@yahoo.com | Member | |
Jordi Collins Customer Configuration Supervisor jordi.collins@yahoo.com | Member | |
Eugenia Sipes Senior Response Technician eugenia_sipes29@gmail.com | Member | |
Anais Kohler Dynamic Marketing Engineer anais_kohler68@gmail.com | Viewer | |
Jordyn Kerluke International Optimization Agent jordyn_kerluke@yahoo.com | Admin | |
Ernestina King Internal Markets Planner ernestina_king@hotmail.com | Admin | |
Edmond Padberg Product Intranet Architect edmond_padberg86@yahoo.com | Viewer | |
Mozelle Heaney Legacy Tactics Assistant mozelle_heaney@gmail.com | Viewer | |
Astrid Rice Internal Response Analyst astrid_rice@yahoo.com | Viewer | |
Raleigh Weber Chief Marketing Engineer raleigh_weber@gmail.com | Admin | |
Micheal Durgan Dynamic Mobility Supervisor micheal.durgan@gmail.com | Admin | |
Owen Cormier Legacy Accountability Facilitator owen.cormier@hotmail.com | Admin | |
Zander Sporer Regional Functionality Technician zander.sporer@yahoo.com | Member | |
Nelda Abbott Senior Marketing Specialist nelda.abbott84@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 | |
|---|---|---|---|---|
| Isabel Casper I | raheem71@hotmail.com | Duanefield | Inactive | $975.20 |
| Amos Rice | sammie.ward@hotmail.com | West Devon | Inactive | $617.12 |
| Esther Crooks | terrence.hansen10@hotmail.com | East Finnfurt | Active | $1,145.21 |
| Charlene Gerlach | willy.mayert@yahoo.com | Wilson | Active | $772.77 |
| Elena Terry | jacky_hand-dibbert@gmail.com | Baileeton | Inactive | $371.97 |
| Total | $3,882.27 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Guadalupe Adams I @rafaela_durgan | gerhard.lynch@hotmail.com | Carrollton | Active | $304.05 |
Dr. Meghan Sporer @micaela_bartell | gregoria84@yahoo.com | Jacobihaven | Inactive | $297.39 |
Sophia Wehner @jermaine_kihn | shany8@gmail.com | South Demarcusmouth | Active | $308.12 |
Gerald Bayer @kenyon.kilback | cooper.kiehn@gmail.com | East Elnora | Inactive | $607.03 |
Tim Batz Sr. @conrad.langworth86 | richard.brakus@yahoo.com | Douglasland | Inactive | $757.86 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ben Conroy Sr. | jocelyn_jerde83@gmail.com | Lake Chelsey | Active | $775.29 |
| Hilda Rosenbaum II | briana.schimmel@yahoo.com | Rueckerside | Active | $690.76 |
| Kendra Schroeder | monte47@hotmail.com | South Emmy | Inactive | $300.85 |
| Boyd Cronin | elmer_kiehn54@gmail.com | St. Louis Park | Active | $1,054.02 |
| Julie Goyette | jarvis_herzog@hotmail.com | Koelpinworth | Inactive | $71.87 |
| Total | $2,892.79 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alex Kirlin | adrian_marks95@gmail.com | Kreigerside | Active | $1,096.82 |
| Mrs. Tasha Watsica | aaron.luettgen@gmail.com | Lake Maybelletown | Inactive | $38.46 |
| Andres Jerde | celestino.bednar@hotmail.com | Nitzscheburgh | Active | $770.11 |
| Winston Koepp | donnell38@gmail.com | Schinnerborough | Active | $1,057.37 |
| Harvey DuBuque | pauline_halvorson71@yahoo.com | Port Freedafield | Active | $650.02 |
| Total | $3,612.78 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Casey Muller DDS | jimmie_kuhn75@gmail.com | Waukesha | Inactive | $818.79 |
| Preston Torp | rosanna19@gmail.com | East Jessview | Inactive | $969.64 |
| Kathleen Padberg | justus_kulas80@yahoo.com | Jersey City | Inactive | $1,128.54 |
| Amos Goldner | raphaelle.okon@gmail.com | North Genovevafield | Inactive | $954.82 |
| Arnold Hettinger | eudora67@gmail.com | The Hammocks | Inactive | $1,179.20 |
| Total | $5,050.99 | |||
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 | ||
|---|---|---|---|---|---|
| Daryl Kuhn | nettie59@hotmail.com | West Meaganshire | Active | $486.74 | |
| Felicia Roob | kallie65@hotmail.com | East Lucas | Active | $1,179.12 | |
| Fernando Haley | pinkie_dibbert@gmail.com | Elsefort | Inactive | $1,016.91 | |
| Larry Kling | fredy25@gmail.com | Stehrstead | Inactive | $453.08 | |
| Merle Gulgowski | tiana_corkery13@gmail.com | East Damionland | Inactive | $1,118.31 | |
| Total | $4,254.16 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mitchell Schoen Sr. | fanny45@hotmail.com | Minervaberg | Inactive | $603.59 | |
| Garry Bogan | sonya.thompson28@hotmail.com | Lake Johnnie | Active | $1,011.51 | |
| Joan Heaney | cleta59@gmail.com | Broken Arrow | Active | $412.82 | |
| Anita Cassin | alan22@gmail.com | North Dejonborough | Active | $542.25 | |
| Sally Hilll | sheridan24@yahoo.com | Christopside | Inactive | $1,083.07 | |
| Total | $3,653.24 | ||||
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 | |
|---|---|---|---|---|
| Velma Walsh MD | norbert.hahn@gmail.com | Plano | Inactive | $261.10 |
| Rodney Welch | rosalinda_stehr66@hotmail.com | Cristalfort | Inactive | $109.22 |
| Wilma Hegmann | felipa_borer91@hotmail.com | Dwightchester | Active | $904.24 |
| Roxanne Schowalter | lilian.rolfson67@gmail.com | New Virginie | Active | $640.35 |
| Dr. Kyle Jones | brent.sawayn10@yahoo.com | Edmundchester | Inactive | $339.20 |
| Dallas Kemmer | mazie.heidenreich14@yahoo.com | Kemmerport | Active | $404.85 |
| Luther Tremblay | stella51@yahoo.com | Tiffanystad | Inactive | $1,042.22 |
| Ray Feest | kiarra5@gmail.com | Jamieport | Inactive | $440.69 |
| Jeremiah Hettinger | jazmyn_crona8@gmail.com | Muellershire | Active | $549.83 |
| Marilyn Simonis | jordy.kunde@hotmail.com | Flavieville | Inactive | $1,183.11 |
| Ben Kutch | raquel0@hotmail.com | North Alvinafield | Inactive | $1,030.20 |
| Darnell Stamm | otis.stiedemann6@gmail.com | Lake Lauriestead | Active | $322.09 |
| Lola Beatty | willard.schoen@hotmail.com | Caesarmouth | Inactive | $490.24 |
| Lillie Gusikowski | shanna63@hotmail.com | Smithberg | Inactive | $408.24 |
| Bertha Little | magdalen64@yahoo.com | Lake Steve | Active | $384.55 |
| Total | $8,510.13 | |||
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 |