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 | Paid | Credit Card | $438.38 |
| INV002 | Pending | Credit Card | $562.00 |
| INV003 | Unpaid | Credit Card | $701.93 |
| INV004 | Pending | Bank Transfer | $305.52 |
| INV005 | Pending | Bank Transfer | $711.78 |
| INV006 | Pending | Credit Card | $509.11 |
| INV007 | Unpaid | Credit Card | $237.81 |
| Total | $3,466.53 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Antoinette Smitham | Central Metrics Analyst | antoinette.smitham22@hotmail.com | Viewer | |
| Eulah Dickinson | Product Directives Coordinator | eulah_dickinson@yahoo.com | Member | |
| Josefina Cassin | Lead Group Architect | josefina_cassin65@hotmail.com | Member | |
| Alisa Roob | Forward Research Specialist | alisa_roob@hotmail.com | Member | |
| Jarred Weissnat | Lead Functionality Engineer | jarred.weissnat44@gmail.com | Member | |
| Emmett Padberg | District Paradigm Associate | emmett.padberg16@hotmail.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 |
|---|---|---|
Mariela Weimann Future Markets Producer mariela_weimann@hotmail.com | Admin | |
Jill Ruecker Corporate Program Designer jill_ruecker@hotmail.com | Member | |
Antoinette McDermott Direct Mobility Officer antoinette_mcdermott12@hotmail.com | Member | |
Nathan Bauch-Schaefer Corporate Tactics Architect nathan_bauch-schaefer85@yahoo.com | Admin | |
Nelson Brekke Global Branding Engineer nelson_brekke@hotmail.com | Member | |
Nya Zboncak Chief Applications Manager nya_zboncak30@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 |
|---|---|---|
Adriel Murray Forward Usability Specialist adriel.murray26@hotmail.com | Member | |
Clarence Legros Central Accountability Executive clarence_legros96@gmail.com | Admin | |
Jalen Legros Global Marketing Developer jalen_legros@hotmail.com | Member | |
Ron Paucek Customer Identity Agent ron.paucek@yahoo.com | Member | |
Alessandro Brakus Direct Markets Executive alessandro_brakus36@hotmail.com | Viewer | |
Elena West-Jenkins Regional Infrastructure Director elena.west-jenkins@hotmail.com | Viewer | |
Donny Schultz Central Brand Engineer donny_schultz94@hotmail.com | Member | |
Andreanne Stehr Internal Paradigm Associate andreanne_stehr83@hotmail.com | Admin | |
Tyler Brekke Lead Paradigm Associate tyler.brekke33@hotmail.com | Member | |
Cynthia Larkin Global Program Agent cynthia.larkin@hotmail.com | Member | |
Arnold Farrell Chief Mobility Orchestrator arnold_farrell@yahoo.com | Admin | |
Lynn Champlin Global Intranet Planner lynn_champlin74@gmail.com | Viewer | |
Kiarra Spencer Global Security Officer kiarra.spencer24@gmail.com | Viewer | |
Wyatt White-Kozey Dynamic Optimization Assistant wyatt_white-kozey10@gmail.com | Admin | |
Jasmine Crona Regional Directives Administrator jasmine_crona39@gmail.com | Viewer | |
Ellen Wisozk Internal Intranet Facilitator ellen.wisozk96@gmail.com | Viewer | |
Orion Langworth Product Usability Strategist orion.langworth50@yahoo.com | Viewer | |
Philip Mueller Senior Applications Technician philip.mueller@hotmail.com | Member | |
Audreanne VonRueden Chief Configuration Engineer audreanne.vonrueden@gmail.com | Member | |
Ervin Fadel Internal Infrastructure Architect ervin.fadel@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 | |
|---|---|---|---|---|
| Donna Stokes | julian.durgan16@hotmail.com | Fort Jim | Inactive | $953.85 |
| Lorine Ryan | triston.metz86@hotmail.com | Reillyberg | Inactive | $909.42 |
| Sigmund Mohr-Bergnaum | ferne48@hotmail.com | Littlefield | Active | $180.17 |
| Lorene Daniel | jorge96@gmail.com | Rohan-Ziemefield | Active | $483.18 |
| Zoey Hilpert | sydnie.hauck@yahoo.com | Boscocester | Active | $452.44 |
| Total | $2,979.06 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bruce White @diego_williamson | laney.hoppe-greenfelder46@yahoo.com | Lake Taurean | Inactive | $462.06 |
Hilbert Johnston @amy94 | lana_collins16@yahoo.com | Lake Katiefield | Inactive | $888.61 |
Kyleigh Daniel @lucia.beier | tom.kreiger60@hotmail.com | Scottsdale | Inactive | $965.06 |
Breana Wiegand @andy.simonis | sallie_labadie7@gmail.com | Samantashire | Inactive | $604.17 |
Flavie Schuster @allie.stamm | juanita38@yahoo.com | Lake Anissachester | Inactive | $1,081.09 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josh Feil | hope37@gmail.com | Port Soniacester | Active | $357.20 |
| Maximillian McKenzie | abigayle18@gmail.com | Greeley | Active | $1,189.91 |
| Cecilia Gorczany-Koelpin | henry.hoppe@gmail.com | Fort Gerhard | Inactive | $721.91 |
| Mr. Keith Collier | shana66@yahoo.com | Castle Rock | Inactive | $451.61 |
| Patience Konopelski | emerson_muller@yahoo.com | Port Allison | Active | $988.51 |
| Total | $3,709.14 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marta Blick | ida_fadel@hotmail.com | Port Lizethburgh | Active | $460.15 |
| Gene Maggio V | edward.howell12@gmail.com | Port Estelberg | Active | $489.23 |
| Hailie Jakubowski | ervin58@hotmail.com | Grand Junction | Active | $645.36 |
| Karl Senger | sheila_zboncak@gmail.com | Camilleworth | Inactive | $608.61 |
| Lysanne Hagenes | paul_macejkovic@gmail.com | Garlandbury | Inactive | $893.69 |
| Total | $3,097.04 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kristen Boyle | jany_predovic@yahoo.com | Lessieside | Active | $105.98 |
| Mckenzie Gibson | gabrielle8@hotmail.com | East Wade | Inactive | $23.08 |
| Nancy Emmerich | thad34@yahoo.com | Haagstead | Active | $802.51 |
| Kayley Stark | gussie_cormier23@yahoo.com | East Ann | Active | $478.85 |
| Samir Klocko | aaron.paucek32@gmail.com | Daphneyland | Inactive | $486.02 |
| Total | $1,896.44 | |||
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 | ||
|---|---|---|---|---|---|
| Eduardo Kozey | rosina_goyette-hudson@gmail.com | Wuckertville | Active | $0.46 | |
| Kristy Turner | jarrell0@hotmail.com | Schummmouth | Active | $1,011.66 | |
| Cary Waters | kay.johns@hotmail.com | Fishers | Active | $280.25 | |
| Marc Daniel | vita_russel@hotmail.com | Essiechester | Inactive | $1,012.37 | |
| Ignacio Lowe | jacob45@gmail.com | New Marycester | Inactive | $539.40 | |
| Total | $2,844.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Sterling Mertz | katie49@yahoo.com | Spring | Active | $1,127.31 | |
| Dallas Ullrich | philip.nolan@gmail.com | Reynoldsside | Active | $425.34 | |
| Howard Simonis | joshuah_beatty@gmail.com | Gulfport | Inactive | $555.98 | |
| Amelia Stark | gerald_cormier91@gmail.com | Dachfurt | Inactive | $240.17 | |
| Myra Wisozk | kane52@hotmail.com | Port Einoshire | Active | $1,055.80 | |
| Total | $3,404.60 | ||||
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 | |
|---|---|---|---|---|
| Americo Ankunding | corey89@yahoo.com | Morgan Hill | Inactive | $147.29 |
| Lena Parisian | hans.kunde52@hotmail.com | North Hattie | Inactive | $629.22 |
| Lesley Collier | susie_cummings@yahoo.com | Bergstromboro | Active | $378.99 |
| Heather Boehm | neva.waters21@hotmail.com | Quitzonstead | Active | $650.80 |
| Anne Lockman | jerel64@yahoo.com | Jerrellmouth | Active | $1,133.78 |
| Laron Purdy | jamal.block@hotmail.com | Doylestad | Inactive | $979.71 |
| Sophie Bogan | cassandra_jakubowski@hotmail.com | Angelicastead | Inactive | $782.49 |
| Retta Mueller | candida_torphy11@gmail.com | Maryjaneland | Inactive | $1,067.64 |
| Shea Toy | alice.senger@yahoo.com | Lenexa | Active | $328.53 |
| Krystal Jacobs | jayme30@gmail.com | Lowell | Active | $611.30 |
| Francisco Muller | violet_windler60@yahoo.com | New Marianatown | Active | $517.64 |
| Mrs. Jeannette O'Reilly | tracey_mills@yahoo.com | Barrowsville | Active | $1,008.73 |
| Shelly Bernier | naomie.hayes15@hotmail.com | Feilstad | Inactive | $234.43 |
| Beverly Halvorson | tatyana.konopelski94@gmail.com | Kulasberg | Active | $1,054.88 |
| Kristie Braun | leo30@hotmail.com | Dearborn | Active | $155.38 |
| Total | $9,680.81 | |||
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 |