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 | Pending | PayPal | $360.30 |
| INV002 | Pending | PayPal | $119.05 |
| INV003 | Pending | Credit Card | $144.70 |
| INV004 | Pending | PayPal | $694.80 |
| INV005 | Unpaid | Bank Transfer | $561.80 |
| INV006 | Unpaid | Credit Card | $682.43 |
| INV007 | Unpaid | Bank Transfer | $792.57 |
| Total | $3,355.65 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Joseph Nicolas | Principal Infrastructure Manager | joseph.nicolas63@gmail.com | Member | |
| Joan Rodriguez | Internal Quality Strategist | joan_rodriguez@hotmail.com | Viewer | |
| Blaze Wilkinson | Human Accounts Assistant | blaze_wilkinson@hotmail.com | Member | |
| Larry Schaden | Future Research Developer | larry.schaden@gmail.com | Member | |
| Elinore Mills | Senior Accounts Developer | elinore_mills@gmail.com | Admin | |
| Emilio Thompson | International Marketing Analyst | emilio.thompson4@gmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Juwan Bergstrom Future Applications Representative juwan.bergstrom66@hotmail.com | Member | |
Renee Stanton Chief Web Agent renee_stanton@hotmail.com | Viewer | |
Billy Johns Principal Data Agent billy_johns20@hotmail.com | Viewer | |
Kristina Lesch Chief Applications Planner kristina.lesch34@hotmail.com | Viewer | |
Laurence Klein Dynamic Accounts Facilitator laurence.klein24@hotmail.com | Admin | |
Rosamond Maggio Central Response Manager rosamond_maggio@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ignacio Renner Future Solutions Coordinator ignacio_renner74@yahoo.com | Member | |
Giles Pollich Senior Interactions Analyst giles.pollich4@yahoo.com | Viewer | |
Noemy Lynch Customer Intranet Liaison noemy_lynch64@gmail.com | Admin | |
Demond McClure Regional Program Officer demond_mcclure58@yahoo.com | Admin | |
Vinnie Cronin Dynamic Response Facilitator vinnie.cronin@hotmail.com | Viewer | |
Abe Hackett Dynamic Functionality Technician abe_hackett@yahoo.com | Member | |
Name Batz Principal Creative Executive name.batz@hotmail.com | Admin | |
Adolphus Fisher Lead Usability Liaison adolphus_fisher@gmail.com | Member | |
Major Wisozk Forward Brand Architect major.wisozk32@yahoo.com | Admin | |
Joy Paucek District Security Representative joy.paucek57@yahoo.com | Viewer | |
Tia Beer Legacy Marketing Strategist tia.beer@gmail.com | Member | |
Daphnee Hamill Product Interactions Manager daphnee_hamill@yahoo.com | Admin | |
Connor Senger-Goldner International Communications Consultant connor.senger-goldner@yahoo.com | Member | |
Parker Jacobson District Solutions Strategist parker.jacobson55@hotmail.com | Viewer | |
Rhett Price Regional Research Producer rhett.price12@yahoo.com | Member | |
Patsy Rath District Accountability Developer patsy.rath@yahoo.com | Admin | |
Henriette Crona Future Paradigm Consultant henriette_crona@yahoo.com | Admin | |
Manley Schuppe International Mobility Producer manley_schuppe@hotmail.com | Member | |
Kale Kuhic Forward Research Producer kale_kuhic16@yahoo.com | Member | |
Danial Kohler Future Operations Technician danial.kohler@gmail.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 | |
|---|---|---|---|---|
| Felix Gusikowski | boris57@yahoo.com | Friesenworth | Inactive | $419.90 |
| Miss Rachael Armstrong | bret_christiansen22@yahoo.com | West Delphiafort | Inactive | $270.29 |
| Myron Macejkovic-Schumm | adrien_schmitt@hotmail.com | Vineland | Inactive | $1,116.61 |
| Elsa Hegmann | alisa1@yahoo.com | Sacramento | Active | $756.89 |
| Edgar Heaney | bernice71@hotmail.com | Effertzstead | Active | $962.44 |
| Total | $3,526.13 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Nicholas Kassulke @terrance.hackett96 | eliezer.jacobi51@yahoo.com | North Houston | Active | $1,065.46 |
Cody Shields @odessa.jacobi | garnett_moore28@hotmail.com | Fort Nobleton | Inactive | $325.36 |
Ms. Ramona Klocko V @audreanne.ullrich | marilie55@yahoo.com | Bruentown | Inactive | $357.57 |
Elias Reichert @devon.ernser | garett50@gmail.com | New Antonia | Inactive | $668.82 |
Dr. Tim Abernathy @korey.predovic | richard_waelchi@yahoo.com | New Bernhardburgh | Active | $786.71 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Erma Gorczany | tiara84@yahoo.com | Oberbrunnerfield | Inactive | $844.31 |
| Nicole Baumbach | thelma_aufderhar-dicki45@yahoo.com | Hoegerland | Inactive | $246.48 |
| Eugene Stehr | adrienne.kuhn@yahoo.com | East Amparofurt | Inactive | $530.79 |
| Dr. Kelvin Strosin | bridie.ebert@yahoo.com | Cesarview | Inactive | $899.42 |
| Robin Farrell | maxine.bogan65@gmail.com | Port Luraberg | Inactive | $917.42 |
| Total | $3,438.42 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dwight Dare | veronica.walsh88@yahoo.com | East Maximoland | Active | $576.76 |
| Homer Smith | kenya_armstrong-wolf72@yahoo.com | Altamonte Springs | Active | $881.61 |
| Andre Kuhn | enrico_hoeger32@gmail.com | Port Zoeycester | Active | $59.80 |
| Sammy O'Reilly | kali_larson@yahoo.com | West Aglaechester | Active | $1,005.46 |
| Darla Murray | golda_hamill@gmail.com | Kubchester | Inactive | $1,002.33 |
| Total | $3,525.96 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mabel Bechtelar | ida48@hotmail.com | Elwincester | Inactive | $225.93 |
| Sue Considine | demarco.moen9@gmail.com | Emardstead | Active | $630.75 |
| Lora Lindgren | brenna.witting99@yahoo.com | South Mylene | Inactive | $605.81 |
| Dexter Gerlach | mohammed13@gmail.com | South Ismaelborough | Active | $1,060.17 |
| Miss Lucia Labadie | marilie29@yahoo.com | Simi Valley | Active | $1,089.36 |
| Total | $3,612.02 | |||
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 | ||
|---|---|---|---|---|---|
| Dwight Jast | amira.greenfelder88@gmail.com | Denesikberg | Active | $709.02 | |
| Gabriel Marquardt | sabrina84@hotmail.com | Port Easton | Inactive | $209.74 | |
| Mabel Spencer | janie32@gmail.com | Teaganton | Inactive | $234.25 | |
| Ms. Jeannie Gutmann | moriah9@hotmail.com | Keltonfort | Inactive | $621.00 | |
| Brandy Abshire DVM | darrick_rutherford-hoeger@yahoo.com | East Leonard | Inactive | $1,073.12 | |
| Total | $2,847.13 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bonnie Abbott | kathryn.gusikowski@hotmail.com | Theobury | Inactive | $150.67 | |
| Claude Bashirian | kyla.nikolaus@gmail.com | Jarrettland | Active | $114.73 | |
| Jason Goyette | faye.corkery-cummerata61@hotmail.com | Lindgrenton | Inactive | $202.32 | |
| Lora Daniel | emilie41@gmail.com | Fond du Lac | Active | $838.30 | |
| Arnold Nader | evert.larkin@hotmail.com | North Hanna | Active | $588.74 | |
| Total | $1,894.76 | ||||
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 | |
|---|---|---|---|---|
| Vicki Bernhard-Krajcik | jaquan.runolfsson@gmail.com | McCulloughton | Active | $517.11 |
| Jenna Gulgowski | rhianna64@yahoo.com | Olathe | Inactive | $130.72 |
| Marcella Konopelski | gisselle_borer@gmail.com | North Hoytside | Active | $199.69 |
| Milton Hane-Sporer | may57@hotmail.com | North Jerod | Active | $910.22 |
| Julia Walker | reuben62@yahoo.com | Hodkiewiczside | Inactive | $105.20 |
| Morris Gislason | aurore.hettinger34@yahoo.com | West Jeanette | Inactive | $1,111.91 |
| Alfonso Bailey | emmanuelle71@yahoo.com | West Gustaveview | Active | $984.04 |
| Caleb Flatley | frankie57@gmail.com | Lewisville | Active | $12.01 |
| Everett Sporer | mohamed9@yahoo.com | Nadiacester | Active | $972.58 |
| Tyrone Smith | daren68@hotmail.com | Schmittstad | Inactive | $103.72 |
| Kari Ledner DVM | kody98@yahoo.com | East Allene | Active | $1,145.37 |
| Tracey Champlin | rogers.herman91@yahoo.com | Wilkinsonland | Active | $590.37 |
| Frank Cronin | myrtice67@gmail.com | Bodeworth | Active | $228.66 |
| Kyle Wilderman IV | unique17@hotmail.com | Giovannyburgh | Inactive | $407.20 |
| Lynette Nitzsche | raphael.lakin@gmail.com | Loveland | Active | $193.34 |
| Total | $7,612.14 | |||
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 |