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 | PayPal | $377.98 |
| INV002 | Pending | PayPal | $342.45 |
| INV003 | Unpaid | Credit Card | $372.59 |
| INV004 | Pending | Credit Card | $530.90 |
| INV005 | Unpaid | Credit Card | $944.14 |
| INV006 | Pending | Bank Transfer | $838.44 |
| INV007 | Unpaid | Credit Card | $429.82 |
| Total | $3,836.32 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Margie Kassulke | Lead Tactics Supervisor | margie.kassulke@gmail.com | Member | |
| Emmalee Toy | Central Infrastructure Orchestrator | emmalee.toy@gmail.com | Member | |
| Dan Boyer | Principal Brand Administrator | dan.boyer@gmail.com | Member | |
| Webster Willms | Product Data Supervisor | webster.willms@yahoo.com | Viewer | |
| Pamela Prohaska | Principal Group Orchestrator | pamela_prohaska@yahoo.com | Viewer | |
| Mitchel Heidenreich | Internal Accounts Coordinator | mitchel_heidenreich69@hotmail.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 |
|---|---|---|
Spencer Schiller Human Program Consultant spencer_schiller@yahoo.com | Member | |
Stanton Bergstrom Human Mobility Analyst stanton.bergstrom55@gmail.com | Admin | |
Gerardo Kertzmann Product Marketing Strategist gerardo_kertzmann@yahoo.com | Viewer | |
Jackson Conn Regional Functionality Strategist jackson.conn80@gmail.com | Viewer | |
Yvette Schultz Senior Communications Representative yvette_schultz32@gmail.com | Viewer | |
Shawna Herzog Investor Research Developer shawna.herzog@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Elmira Olson Senior Implementation Strategist elmira.olson37@hotmail.com | Viewer | |
Leonor Tillman Internal Marketing Analyst leonor_tillman27@hotmail.com | Viewer | |
Esperanza O'Reilly-Herzog Lead Creative Engineer esperanza.oreilly-herzog38@hotmail.com | Viewer | |
Miranda Jaskolski Dynamic Brand Liaison miranda.jaskolski@hotmail.com | Viewer | |
Boyd Kautzer Legacy Integration Architect boyd.kautzer@gmail.com | Member | |
Kenyatta Kuphal International Identity Agent kenyatta.kuphal@hotmail.com | Member | |
Glenda Green Future Solutions Strategist glenda.green@yahoo.com | Viewer | |
Irene Funk National Optimization Executive irene.funk50@hotmail.com | Admin | |
Cruz Schowalter Forward Directives Specialist cruz_schowalter@hotmail.com | Admin | |
Anthony Franecki Senior Branding Officer anthony.franecki@yahoo.com | Admin | |
Grayson Hudson Forward Directives Designer grayson_hudson99@yahoo.com | Member | |
Randal Larkin-Hand Forward Creative Planner randal.larkin-hand@hotmail.com | Admin | |
Vickie Lakin-Reichert Lead Functionality Agent vickie_lakin-reichert42@gmail.com | Viewer | |
Benny Padberg International Security Coordinator benny.padberg98@gmail.com | Viewer | |
Kaia Greenfelder Product Operations Liaison kaia.greenfelder@yahoo.com | Admin | |
Vicki Baumbach District Brand Consultant vicki.baumbach@yahoo.com | Member | |
Abe Casper Investor Solutions Developer abe.casper58@gmail.com | Member | |
Kareem Leannon Lead Factors Director kareem_leannon52@gmail.com | Viewer | |
Kaela Feil Regional Solutions Engineer kaela.feil@gmail.com | Member | |
Nella Schoen National Security Manager nella.schoen@hotmail.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 | |
|---|---|---|---|---|
| Joel McLaughlin | kellen_raynor50@gmail.com | Patsyville | Active | $549.04 |
| Aliya Barrows | elizabeth21@yahoo.com | Patsyworth | Active | $829.71 |
| Cesar Shields | edward_bergstrom69@hotmail.com | New Herbert | Active | $655.55 |
| Jarrod West | ocie_harris59@hotmail.com | Norfolk | Active | $323.20 |
| Claire Nitzsche | hulda_huel20@hotmail.com | Mount Vernon | Active | $975.04 |
| Total | $3,332.54 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tanya Nitzsche @aurore.kutch | lon_harber88@hotmail.com | Garrettboro | Inactive | $535.39 |
Malcolm Klocko @pietro_halvorson | ulises58@hotmail.com | Jonesboro | Inactive | $184.10 |
Ms. Kurt Murray II @vaughn45 | santiago_cremin92@hotmail.com | Lake Janiyaside | Active | $691.31 |
Eulah Swift @doreen_welch | allison90@gmail.com | Adolfchester | Active | $1,001.97 |
Jennie Nitzsche @burdette53 | lucas_flatley80@hotmail.com | Hintzbury | Inactive | $1,185.62 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darron Kshlerin | freddie_hilpert19@yahoo.com | North Durwardshire | Active | $542.10 |
| Ashley Reichert MD | donna_roberts@yahoo.com | Kiehnburgh | Inactive | $399.46 |
| Nick Wyman | grace_torp73@gmail.com | North Seantown | Active | $952.46 |
| Blanca Luettgen PhD | heather91@hotmail.com | Dorcasside | Inactive | $1,137.98 |
| Hazel Cummings | mercedes45@hotmail.com | Schambergerburgh | Inactive | $1,036.36 |
| Total | $4,068.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sergio Renner | gretchen.boyle@yahoo.com | Edina | Inactive | $258.28 |
| Patsy Franey | nya29@gmail.com | Pasadena | Active | $539.75 |
| Dr. Dovie Beer | ivan99@hotmail.com | Anaheim | Active | $493.71 |
| Grace Bednar | marshall4@yahoo.com | Stammboro | Active | $482.69 |
| Jamie Heathcote III | lisa31@gmail.com | Jerdeside | Active | $41.74 |
| Total | $1,816.17 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marjorie O'Conner | maye.hagenes@hotmail.com | Kannapolis | Inactive | $760.89 |
| Raymundo Hagenes | norma.barton@gmail.com | North Loychester | Active | $734.44 |
| Mr. Krystal Upton | lisette63@gmail.com | Herminiotown | Inactive | $300.02 |
| Alejandro Ortiz | wilfred_jenkins@hotmail.com | Fort Smith | Inactive | $191.65 |
| Jettie Rutherford | javier.douglas@hotmail.com | Lake Bernice | Active | $72.04 |
| Total | $2,059.04 | |||
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 | ||
|---|---|---|---|---|---|
| Shelley Crona-Pfannerstill | ricardo.johnston83@hotmail.com | Fort Bettieshire | Inactive | $530.54 | |
| Lynn Gottlieb | matt.rodriguez@hotmail.com | Port Rosie | Active | $251.30 | |
| Jared McLaughlin-Kerluke | jonathon50@hotmail.com | East Valentinastead | Inactive | $586.42 | |
| Sandra Dickinson | brad_metz@yahoo.com | Port Aimee | Inactive | $136.46 | |
| Nellie Hermiston | isidro.berge@yahoo.com | Linaland | Active | $242.42 | |
| Total | $1,747.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Diane Koepp | elliot.johnston@hotmail.com | Rochester | Active | $898.02 | |
| Traci Wintheiser | peggy_oconnell-bauch@hotmail.com | Port Talon | Active | $112.99 | |
| Lisette Waelchi | betsy_wehner10@yahoo.com | Fort Ardellafort | Active | $1,032.10 | |
| Vickie Funk | esmeralda50@hotmail.com | Nolaworth | Active | $725.43 | |
| Ollie Hand | brandi_botsford@hotmail.com | Fort Mariahmouth | Inactive | $569.66 | |
| Total | $3,338.20 | ||||
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 | |
|---|---|---|---|---|
| Ariane Daniel | virgil_leuschke@gmail.com | Howeport | Active | $828.77 |
| Ken Lehner | cristina74@hotmail.com | Port Delilahboro | Inactive | $1,064.73 |
| Bryan Howe | juana.marks30@hotmail.com | Columbia | Inactive | $291.37 |
| Harvey Bayer | vanessa33@gmail.com | Ernaworth | Inactive | $211.53 |
| Janis Grimes MD | fritz_reichert-mckenzie31@gmail.com | New Olin | Inactive | $102.60 |
| Heath Hand | katie59@yahoo.com | Roslynport | Inactive | $798.40 |
| Steven Altenwerth PhD | tremaine.hettinger86@yahoo.com | Independence | Inactive | $139.64 |
| Beverly Kshlerin | tracy54@hotmail.com | Moenfurt | Active | $738.40 |
| Sadie McLaughlin | mae_blick@gmail.com | North Lilla | Inactive | $1,137.23 |
| Paul Ward | calista.lubowitz@yahoo.com | Tamiami | Inactive | $142.48 |
| Sam Stehr | fannie7@hotmail.com | Lake Bennie | Active | $320.10 |
| Alfred Kerluke | christopher_wilkinson@hotmail.com | Labadiestad | Inactive | $428.06 |
| Julio Dooley | natalie.jaskolski-torphy@yahoo.com | West Opheliatown | Active | $98.02 |
| Diana Adams | thad.homenick31@hotmail.com | Maxport | Inactive | $19.30 |
| Ethel Heidenreich | lawrence.gleichner@yahoo.com | Marlenmouth | Inactive | $1,156.78 |
| Total | $7,477.41 | |||
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 |