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 | $393.69 |
| INV002 | Unpaid | PayPal | $975.39 |
| INV003 | Paid | Bank Transfer | $368.61 |
| INV004 | Unpaid | Credit Card | $840.49 |
| INV005 | Paid | Bank Transfer | $672.88 |
| INV006 | Unpaid | Bank Transfer | $906.34 |
| INV007 | Unpaid | Bank Transfer | $857.44 |
| Total | $5,014.84 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Beryl Crona | National Creative Consultant | beryl.crona@hotmail.com | Member | |
| Kennedy Hayes | Dynamic Accountability Coordinator | kennedy_hayes79@gmail.com | Admin | |
| Kimberly Cole | Forward Group Strategist | kimberly_cole@yahoo.com | Admin | |
| Marion Schmitt | Senior Factors Producer | marion.schmitt@yahoo.com | Member | |
| Megane Wilderman-Grady | Dynamic Marketing Director | megane_wilderman-grady@hotmail.com | Viewer | |
| Hadley Durgan | Product Paradigm Planner | hadley_durgan@yahoo.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 |
|---|---|---|
Merlin Berge Investor Research Director merlin_berge23@gmail.com | Admin | |
Holden Bartell Chief Optimization Architect holden.bartell26@hotmail.com | Member | |
Carleton Trantow Legacy Applications Analyst carleton.trantow@hotmail.com | Viewer | |
Granville Anderson Customer Data Orchestrator granville_anderson@yahoo.com | Member | |
Joy Dicki Lead Data Consultant joy_dicki@gmail.com | Admin | |
Shanelle Paucek Central Infrastructure Specialist shanelle_paucek83@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Tobin Erdman Customer Web Liaison tobin_erdman47@hotmail.com | Member | |
Stella Barrows-Weber Senior Assurance Coordinator stella.barrows-weber26@gmail.com | Viewer | |
Golden Romaguera Global Mobility Technician golden_romaguera58@gmail.com | Viewer | |
August Fahey Principal Program Developer august_fahey32@hotmail.com | Admin | |
Boris Collier Future Response Assistant boris.collier22@hotmail.com | Viewer | |
Ashlee Fahey-Goyette Forward Intranet Representative ashlee.fahey-goyette54@gmail.com | Viewer | |
Kayley Larkin Dynamic Security Officer kayley.larkin@gmail.com | Member | |
Daren Kulas Central Tactics Technician daren.kulas77@yahoo.com | Admin | |
Kimberly Bogisich District Infrastructure Strategist kimberly_bogisich39@yahoo.com | Viewer | |
Gerald Crona Senior Security Director gerald_crona@hotmail.com | Member | |
Jovany Fay Chief Response Agent jovany_fay@hotmail.com | Admin | |
Braxton Fay Principal Accountability Manager braxton_fay80@hotmail.com | Admin | |
Annamarie Adams Forward Mobility Manager annamarie_adams@gmail.com | Admin | |
Renee Dickinson-Jaskolski Dynamic Optimization Consultant renee_dickinson-jaskolski@hotmail.com | Member | |
Cali O'Keefe National Branding Developer cali_okeefe@yahoo.com | Admin | |
Joaquin Goldner Regional Metrics Designer joaquin_goldner@gmail.com | Viewer | |
Jeramie Hilpert Investor Assurance Liaison jeramie_hilpert39@hotmail.com | Viewer | |
Charity Considine Lead Tactics Technician charity.considine99@yahoo.com | Member | |
Angelita Jacobson Customer Metrics Assistant angelita_jacobson51@gmail.com | Admin | |
Breanne Sanford Forward Directives Producer breanne.sanford@gmail.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 | |
|---|---|---|---|---|
| Clifford Bruen-Strosin | wade_bahringer@yahoo.com | West Myrnaville | Active | $972.15 |
| Mae Trantow | jalen_goldner72@gmail.com | New Mosesstad | Active | $772.83 |
| Edmond Schroeder | alfredo.prosacco@yahoo.com | Lambertcester | Inactive | $996.42 |
| Krystal Bergnaum I | cortez_murphy@hotmail.com | Fort Shanaberg | Active | $217.18 |
| Harold Schmitt | leola57@yahoo.com | Johns Creek | Active | $630.69 |
| Total | $3,589.27 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Erica Rath @russ.connelly93 | alysha.heidenreich@hotmail.com | Port Carolyne | Inactive | $77.18 |
Dr. Susan Wisozk-Hansen @giovanny.koelpin61 | claud92@yahoo.com | Hacienda Heights | Active | $649.43 |
Claire Schmitt @tristian_emard | kelly.botsford49@yahoo.com | Metafort | Active | $1,114.13 |
Merle Doyle @toney20 | jakayla39@yahoo.com | New Danial | Inactive | $690.21 |
Wanda Murray @birdie_schowalter | francisco65@hotmail.com | Schneiderhaven | Inactive | $995.51 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Billy Huels | brice.weissnat27@yahoo.com | North Albertfort | Inactive | $954.95 |
| Jose Paucek | adah.batz40@gmail.com | Lake Danniefort | Inactive | $826.54 |
| Julius O'Hara | desmond_gottlieb@yahoo.com | Feliciaport | Active | $327.92 |
| Austin Harris | zachary_effertz@yahoo.com | Independence | Active | $718.31 |
| Wilbur Koelpin-Trantow | dolly10@yahoo.com | Fort Keatonchester | Inactive | $1,187.57 |
| Total | $4,015.29 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Edmund Schuster | roxane_franey@hotmail.com | Lockmanside | Inactive | $401.69 |
| Sergio Daniel | garnet_pfeffer7@yahoo.com | East Shad | Inactive | $817.16 |
| Lola Waters | gabriel66@hotmail.com | East Alexander | Inactive | $421.26 |
| Terri Kozey | hailey_schaefer-hintz@gmail.com | San Juan | Active | $609.49 |
| Dr. Corey Schinner | florida_dietrich82@gmail.com | North Roselyntown | Active | $1,123.56 |
| Total | $3,373.16 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Charlene Erdman | krystal35@hotmail.com | Mullerville | Inactive | $259.29 |
| Forrest Effertz | koby18@yahoo.com | Kautzerfort | Inactive | $1,102.43 |
| Marcus Mitchell | dewitt_witting@hotmail.com | West Heath | Active | $607.78 |
| Geoffrey Abernathy | shanel_ortiz-romaguera@yahoo.com | South Rosalyn | Active | $540.32 |
| Herbert Hammes PhD | flavie.considine@hotmail.com | Schultzworth | Active | $283.36 |
| Total | $2,793.18 | |||
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 | ||
|---|---|---|---|---|---|
| Kent Bahringer Jr. | tyrique.howell66@yahoo.com | Merced | Active | $292.42 | |
| Jonathan Pacocha-Reichert IV | cecile6@hotmail.com | Fort Rafaeltown | Active | $1,057.51 | |
| Delores Schiller-Veum | eliseo.goodwin87@gmail.com | McGlynnhaven | Active | $43.62 | |
| Steve Russel | tate28@hotmail.com | West Lafayette | Active | $774.58 | |
| Georgia Emmerich | lazaro75@gmail.com | Hammesport | Inactive | $990.70 | |
| Total | $3,158.83 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Cornelius Brakus | felicity92@yahoo.com | South Salvatorestead | Active | $1,160.31 | |
| Billy Rodriguez | vicente_pollich18@gmail.com | Lake Cayla | Inactive | $115.18 | |
| Vera Marvin | lonzo44@yahoo.com | New Reyes | Active | $297.39 | |
| Felix Bernier | kurtis78@gmail.com | South Russelchester | Active | $626.23 | |
| Dr. Brandi Jones | rory_mckenzie47@yahoo.com | Elizabethtown | Active | $120.64 | |
| Total | $2,319.75 | ||||
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 | |
|---|---|---|---|---|
| Cecelia Kunze | isabella_wiegand@hotmail.com | North Nestor | Active | $1,164.22 |
| Dr. Ella Hermann | audrey_murray90@hotmail.com | Lake Jayda | Inactive | $1,084.86 |
| Jacob Jones | derick.sawayn@yahoo.com | South Nicolas | Inactive | $305.01 |
| Miriam Crona | elisabeth.lakin40@gmail.com | North Reva | Active | $239.74 |
| Rebecca Kertzmann | lorna_beatty51@yahoo.com | Lake Lyric | Active | $732.14 |
| Patti Steuber | rosemarie.waters4@hotmail.com | Tulare | Active | $623.39 |
| Amber Sauer-Blanda | chelsie.moen32@gmail.com | Lake Elisabeth | Active | $707.57 |
| Keith Goldner | yazmin64@hotmail.com | South Oral | Active | $839.74 |
| Juan Wunsch | lilly76@yahoo.com | Fort Freemanfurt | Active | $721.46 |
| Tony Emmerich | meredith86@yahoo.com | Jastport | Inactive | $511.06 |
| Anita Braun | gayle.cremin@hotmail.com | Antoniaworth | Active | $1,052.92 |
| Gary Ullrich | tyler.homenick88@yahoo.com | North Keltonfort | Active | $1,177.47 |
| Jody O'Hara | pearl46@hotmail.com | Llewellynshire | Inactive | $249.51 |
| Allison Auer | constance_lebsack-crona88@gmail.com | Lake Ahmed | Inactive | $1,091.55 |
| Kevin Balistreri | newton57@hotmail.com | Fort Zechariahboro | Inactive | $126.85 |
| Total | $10,627.49 | |||
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 |