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 | Unpaid | Credit Card | $243.52 |
| INV002 | Pending | Credit Card | $524.34 |
| INV003 | Unpaid | Bank Transfer | $707.55 |
| INV004 | Pending | Bank Transfer | $375.98 |
| INV005 | Pending | Bank Transfer | $525.51 |
| INV006 | Pending | PayPal | $523.05 |
| INV007 | Paid | PayPal | $224.12 |
| Total | $3,124.07 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Randy Abshire | Principal Creative Facilitator | randy_abshire@yahoo.com | Viewer | |
| Bell Block | District Division Designer | bell.block@gmail.com | Viewer | |
| Vilma Bogisich | Human Accountability Supervisor | vilma.bogisich@hotmail.com | Admin | |
| Jarrett Goldner | Lead Integration Developer | jarrett_goldner@hotmail.com | Admin | |
| Quinten Zulauf | National Optimization Manager | quinten.zulauf@yahoo.com | Viewer | |
| David Prosacco | Direct Data Facilitator | david_prosacco20@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 |
|---|---|---|
Oma Mertz Dynamic Usability Technician oma_mertz25@hotmail.com | Member | |
Sylvester Brown Lead Interactions Coordinator sylvester_brown@hotmail.com | Admin | |
Madilyn Brakus Internal Communications Officer madilyn.brakus@yahoo.com | Member | |
Hattie Braun District Identity Producer hattie_braun@yahoo.com | Admin | |
Jeffery Cartwright Central Marketing Engineer jeffery_cartwright20@yahoo.com | Viewer | |
Alexandra Wyman Forward Quality Producer alexandra_wyman@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dasia Lueilwitz Direct Optimization Manager dasia_lueilwitz@yahoo.com | Viewer | |
Alfreda Wilkinson Investor Response Consultant alfreda_wilkinson67@hotmail.com | Admin | |
Marlen Kessler Chief Implementation Orchestrator marlen.kessler@yahoo.com | Viewer | |
Damien Herman Human Marketing Director damien.herman@hotmail.com | Member | |
Marlon Kunze Investor Branding Associate marlon.kunze15@yahoo.com | Viewer | |
Abigayle Koepp Internal Identity Officer abigayle_koepp46@gmail.com | Admin | |
Garett Orn Senior Integration Executive garett.orn@yahoo.com | Viewer | |
Stefan McKenzie District Identity Director stefan_mckenzie@hotmail.com | Viewer | |
Jammie Kovacek Principal Response Liaison jammie.kovacek@yahoo.com | Member | |
Oceane Lindgren Investor Assurance Representative oceane.lindgren12@gmail.com | Member | |
Dixie Bechtelar National Creative Assistant dixie_bechtelar63@gmail.com | Admin | |
Kenyon Watsica Legacy Paradigm Supervisor kenyon.watsica84@hotmail.com | Viewer | |
Imani Konopelski Dynamic Solutions Director imani.konopelski12@hotmail.com | Member | |
Bryon Fisher Regional Optimization Designer bryon.fisher80@gmail.com | Viewer | |
Harvey Aufderhar Global Security Designer harvey_aufderhar@gmail.com | Member | |
Alena Goldner Future Infrastructure Specialist alena.goldner@gmail.com | Admin | |
Mireille Shanahan Chief Assurance Strategist mireille.shanahan70@hotmail.com | Viewer | |
Joanne Kuphal Lead Identity Supervisor joanne.kuphal@gmail.com | Viewer | |
Beaulah Kris Internal Security Developer beaulah.kris42@hotmail.com | Viewer | |
Yvonne Turcotte Senior Solutions Officer yvonne_turcotte86@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 | |
|---|---|---|---|---|
| Allan Armstrong | mabelle_greenholt@yahoo.com | Wichita Falls | Active | $435.54 |
| Connie Swaniawski PhD | adriel.smitham@gmail.com | Colinburgh | Inactive | $961.59 |
| Aubrey Sanford | buford.franey96@hotmail.com | Edina | Active | $577.04 |
| Raymond Flatley | bonita_gleichner12@gmail.com | Lake Corene | Active | $673.28 |
| Robyn Hintz | mavis.will15@yahoo.com | Terryville | Inactive | $892.02 |
| Total | $3,539.47 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Guadalupe Von-Kunde @margaretta.leannon72 | christopher_hansen74@yahoo.com | North Daltonview | Active | $813.62 |
Emily Dibbert II @rosie_schmidt | stuart3@hotmail.com | Starkborough | Inactive | $755.96 |
Guadalupe Cormier @chanel.adams-jacobson96 | jean39@hotmail.com | Macon-Bibb County | Active | $457.17 |
Leonard Frami @jazlyn.jacobs71 | kyleigh_bins@gmail.com | North Candida | Active | $718.41 |
Vera Tillman Jr. @alanna_treutel | chasity.schaden24@gmail.com | Lake Myrtice | Active | $855.45 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Nicole Conroy II | kenya16@hotmail.com | Reynoldland | Active | $1,014.02 |
| Lisa Howell V | forrest.schoen27@yahoo.com | East Alejandrinfield | Active | $1,136.45 |
| Justin Abbott | allison.bailey-auer@yahoo.com | Roseville | Active | $641.27 |
| Candace Williamson | rey48@gmail.com | Hoboken | Inactive | $164.04 |
| Ora Rice | guillermo_oconnell80@yahoo.com | South Matilda | Inactive | $1,142.95 |
| Total | $4,098.73 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tonya Turcotte | alf20@hotmail.com | Connieworth | Active | $1,066.41 |
| Tanya Predovic | rickie_lowe@yahoo.com | Lake Forest | Active | $598.33 |
| Juana Sipes | bret.weber76@gmail.com | Maynardburgh | Active | $494.15 |
| Dr. Russell Hane | general_osinski@gmail.com | Adrianberg | Inactive | $230.26 |
| Ben Mills | allene.larkin17@yahoo.com | North Judge | Active | $292.26 |
| Total | $2,681.41 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Joseph Fritsch | ricardo10@yahoo.com | Ronaldofurt | Active | $99.00 |
| Ruben Farrell | austen43@yahoo.com | Lake Eleanoraside | Active | $1,007.46 |
| Tyrone Roberts | jayce.haley@yahoo.com | Peggieview | Active | $169.41 |
| Bridget Thiel | naomi_ritchie78@hotmail.com | Carolineside | Active | $965.63 |
| Jodi Schamberger | lennie_bechtelar@yahoo.com | New Hannah | Inactive | $840.26 |
| Total | $3,081.76 | |||
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 | ||
|---|---|---|---|---|---|
| Lowell Braun III | luciano_abbott22@gmail.com | Fort Myers | Inactive | $28.84 | |
| Marcia Klein PhD | cecilia23@gmail.com | New Elliottborough | Inactive | $882.47 | |
| Willie Trantow | katlyn_anderson@gmail.com | Heidenreichboro | Active | $495.76 | |
| Homer Denesik | antwon_wilderman@yahoo.com | Encinitas | Inactive | $985.54 | |
| Gordon Pouros | zachery26@yahoo.com | Jessycaside | Active | $40.62 | |
| Total | $2,433.23 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ms. Kelley Leannon | angelina50@yahoo.com | East Diannaville | Active | $696.56 | |
| Jessie Berge | tremaine45@yahoo.com | North Martinboro | Inactive | $477.45 | |
| Miranda Mills | drew79@gmail.com | East Micaela | Active | $142.97 | |
| Mrs. Nichole Rutherford-Marvin | mozelle.mohr9@hotmail.com | Miramar | Active | $1,025.38 | |
| Rosemarie Yost-Bechtelar | edythe.pollich11@gmail.com | Arlenefield | Active | $957.98 | |
| Total | $3,300.34 | ||||
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 | |
|---|---|---|---|---|
| Mr. Darrin Marvin | anjali.emmerich@hotmail.com | North Murray | Inactive | $183.51 |
| Antonia Fritsch | ignatius_koelpin47@yahoo.com | Urbana | Active | $1,043.29 |
| William Hahn PhD | mariah.stiedemann@hotmail.com | Fort Vivienne | Inactive | $881.97 |
| Yolanda Frami I | audie_emard@yahoo.com | New Jermainebury | Inactive | $1,084.40 |
| Clyde Collier | monica_cremin50@gmail.com | Lake Clementina | Active | $820.66 |
| Lorena Ullrich | carmelo55@gmail.com | Yuba City | Inactive | $864.07 |
| Vivian Denesik | imani76@gmail.com | Schadenchester | Active | $615.77 |
| Kenneth Klocko | clotilde10@hotmail.com | Lehi | Active | $116.57 |
| Diana Dibbert | ervin_stoltenberg@gmail.com | Halleboro | Active | $643.29 |
| Carole Grady | chadd41@yahoo.com | New Darienberg | Active | $597.78 |
| Boyd Bahringer DVM | vincent_kertzmann0@hotmail.com | Luthertown | Active | $908.92 |
| Miranda Rogahn | kattie90@gmail.com | Clayburgh | Active | $727.84 |
| Mrs. Samantha Mraz | laron.braun@hotmail.com | Chadton | Inactive | $207.99 |
| Marcella Weissnat | otto_denesik@gmail.com | Macejkovicboro | Active | $999.13 |
| Meredith Bernhard | oswald.cartwright@yahoo.com | North Brook | Inactive | $591.05 |
| Total | $10,286.24 | |||
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 |