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 | Bank Transfer | $274.39 |
| INV002 | Paid | Credit Card | $102.90 |
| INV003 | Unpaid | Bank Transfer | $627.00 |
| INV004 | Unpaid | Credit Card | $243.41 |
| INV005 | Paid | PayPal | $491.20 |
| INV006 | Pending | Bank Transfer | $569.23 |
| INV007 | Paid | Credit Card | $469.59 |
| Total | $2,777.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Polly Streich | Chief Configuration Consultant | polly.streich@hotmail.com | Admin | |
| Jamel Schuppe | Corporate Markets Specialist | jamel_schuppe78@hotmail.com | Member | |
| Akeem Gutmann | Direct Configuration Producer | akeem_gutmann59@hotmail.com | Admin | |
| Annamarie Tillman | Central Data Supervisor | annamarie_tillman39@yahoo.com | Admin | |
| Allene Champlin | Dynamic Accountability Technician | allene_champlin@hotmail.com | Member | |
| Rocio Ledner | District Division Coordinator | rocio_ledner52@gmail.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 |
|---|---|---|
Edwina Dibbert Future Operations Facilitator edwina_dibbert@gmail.com | Admin | |
Rhett Volkman Future Marketing Assistant rhett_volkman66@yahoo.com | Member | |
Eva Mayert Direct Configuration Engineer eva.mayert27@gmail.com | Admin | |
Herbert Senger Principal Brand Designer herbert_senger@yahoo.com | Admin | |
Salvatore Stoltenberg Global Security Manager salvatore_stoltenberg22@yahoo.com | Admin | |
Mossie Runolfsdottir Global Solutions Architect mossie_runolfsdottir53@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 |
|---|---|---|
Taurean Gottlieb National Accountability Specialist taurean.gottlieb@hotmail.com | Member | |
Osvaldo Cummings Internal Directives Developer osvaldo.cummings54@gmail.com | Viewer | |
Giles Gutkowski Human Mobility Facilitator giles_gutkowski@yahoo.com | Member | |
Owen Feil National Usability Coordinator owen_feil@hotmail.com | Viewer | |
Sophia Mosciski Future Configuration Director sophia_mosciski83@gmail.com | Admin | |
Reta Gleason Legacy Factors Orchestrator reta_gleason@yahoo.com | Admin | |
Karli Hayes Investor Group Assistant karli.hayes@yahoo.com | Member | |
Reyes Gislason Chief Mobility Orchestrator reyes.gislason25@gmail.com | Member | |
Amalia Sanford Customer Markets Liaison amalia_sanford@yahoo.com | Viewer | |
Brennon Kuhic Corporate Response Administrator brennon.kuhic@gmail.com | Admin | |
Rebecca Wolff Human Creative Liaison rebecca_wolff@gmail.com | Admin | |
Solon Gulgowski District Program Developer solon.gulgowski89@hotmail.com | Admin | |
Colin McKenzie Investor Paradigm Coordinator colin.mckenzie@hotmail.com | Member | |
Kara Zboncak Regional Functionality Representative kara_zboncak4@hotmail.com | Viewer | |
Matt Cronin Human Applications Assistant matt.cronin26@hotmail.com | Member | |
Baron Mitchell Regional Branding Director baron_mitchell@hotmail.com | Member | |
Mervin Kuhn Central Applications Executive mervin.kuhn@gmail.com | Viewer | |
Lon Kassulke International Marketing Producer lon.kassulke90@gmail.com | Viewer | |
Magnus Mohr Customer Operations Administrator magnus_mohr47@gmail.com | Admin | |
Keenan Marquardt Direct Usability Representative keenan_marquardt@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 | |
|---|---|---|---|---|
| Jennie Beatty | alfred78@hotmail.com | Racine | Active | $980.85 |
| Jerry Durgan | jimmie37@yahoo.com | Salina | Inactive | $1,001.19 |
| Maryann Hamill | gerda.gorczany98@yahoo.com | Hesperia | Inactive | $43.22 |
| Stanley Erdman | sadie.anderson1@hotmail.com | Nakiaville | Active | $638.40 |
| Darrin Jacobi-Trantow | edgar23@gmail.com | Oswaldview | Active | $1,068.49 |
| Total | $3,732.15 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Victor Corkery @adan33 | colin.kuhlman19@yahoo.com | East Erynberg | Active | $1,008.36 |
Lindsay Wilderman @sean45 | carissa_jacobs@gmail.com | Sydneyshire | Inactive | $122.06 |
Wayne Lockman @lacy_kling-torp | graciela.cormier26@gmail.com | Wilfredoshire | Inactive | $1,141.54 |
Lee Keeling @angelo.mills88 | easton89@hotmail.com | Novi | Active | $379.46 |
Derrick Auer @malika47 | cory82@gmail.com | Ernserworth | Inactive | $197.99 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Janice Rogahn | dorris96@yahoo.com | Dareboro | Active | $286.15 |
| Oscar Dare | wendell_wisoky26@yahoo.com | West Lavonne | Inactive | $767.55 |
| Janis Ritchie | brett7@hotmail.com | South Herminioberg | Inactive | $1,011.88 |
| Shannon Ankunding MD | maximillia.huels@gmail.com | Lake Kevonside | Inactive | $827.98 |
| Nellie Roob | selina.mckenzie@hotmail.com | West Furmanborough | Active | $832.64 |
| Total | $3,726.20 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Blanche Goodwin | demarco16@yahoo.com | Lueilwitzberg | Inactive | $966.07 |
| Faye Hane | sydnie67@yahoo.com | Port Florencioberg | Inactive | $669.74 |
| Courtney Koelpin | georgiana_larson@hotmail.com | West Sibyl | Active | $205.69 |
| Cindy Corkery | madisen60@yahoo.com | Visalia | Active | $1,101.54 |
| Emmett Langosh | alberto.feest74@hotmail.com | South Eloyhaven | Active | $1,164.73 |
| Total | $4,107.77 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lawrence Orn | dejuan35@yahoo.com | Spencerboro | Active | $548.33 |
| Leah Hamill | anthony69@gmail.com | Schummton | Active | $671.89 |
| Sylvia Koch | devon19@hotmail.com | Wymanton | Active | $1,085.07 |
| Jennifer Rohan | amos_nitzsche@gmail.com | Conroyfort | Active | $295.39 |
| Patricia Gleason | rubye.stoltenberg66@yahoo.com | Salvadorhaven | Inactive | $45.60 |
| Total | $2,646.28 | |||
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 | ||
|---|---|---|---|---|---|
| Carolyn Stamm | sienna.keeling74@hotmail.com | North Antoinette | Inactive | $44.87 | |
| Katherine Koss | isadore8@hotmail.com | Lake Kaylin | Inactive | $128.41 | |
| Oscar Auer | aimee.carter94@gmail.com | Gleasontown | Active | $576.65 | |
| Robyn Dickinson | courtney.marks23@hotmail.com | Connorfurt | Inactive | $969.46 | |
| Andy Welch | princess.bradtke24@gmail.com | Goodwintown | Active | $932.64 | |
| Total | $2,652.03 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alvin Ritchie | colton_quigley90@hotmail.com | South Autumnfurt | Inactive | $21.22 | |
| Jerry Runolfsdottir | mitchel.harris5@yahoo.com | Shawnstead | Active | $447.47 | |
| Pam Hudson | geo_kunde@gmail.com | Minnetonka | Inactive | $991.57 | |
| Tara Stiedemann | ollie_bashirian@yahoo.com | Martinhaven | Inactive | $481.95 | |
| Miguel Lind | gianni_connelly@yahoo.com | Marksfield | Active | $778.66 | |
| Total | $2,720.87 | ||||
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 | |
|---|---|---|---|---|
| Miss Janie Yundt DVM | al70@hotmail.com | West Reagan | Inactive | $360.32 |
| Dr. Jana Grimes | retha_schultz@gmail.com | Aubreetown | Inactive | $54.14 |
| Lee Schultz | jeffrey65@yahoo.com | Hillsboro | Active | $312.00 |
| Horace Spencer | nya_watsica@gmail.com | Lake Isadore | Inactive | $938.62 |
| Danny Hills | loy_kling81@gmail.com | Prohaskaworth | Inactive | $422.97 |
| Miss Jill Cartwright | casandra_paucek15@yahoo.com | Schaeferstead | Active | $704.70 |
| Marianne Goodwin | vickie_bahringer@yahoo.com | McLaughlinboro | Inactive | $44.35 |
| Brian Muller | khalid78@gmail.com | Lake Ninastad | Active | $459.83 |
| Miss Bernadette White | sibyl.schmidt74@gmail.com | Jastland | Active | $788.30 |
| Patsy Waelchi | aniya_lueilwitz@gmail.com | Flagstaff | Inactive | $25.80 |
| Ramon Daugherty | molly87@hotmail.com | East Eldoraberg | Inactive | $1,091.67 |
| Wallace Veum | fabiola.olson@yahoo.com | Loweworth | Active | $987.15 |
| Michelle Mueller | cody_anderson@yahoo.com | East Ali | Inactive | $275.93 |
| Angela Wisoky | harmon_williamson43@gmail.com | North Alfonzoton | Inactive | $180.89 |
| Jenna Prohaska | german58@gmail.com | Kent | Inactive | $1,170.51 |
| Total | $7,817.18 | |||
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 |