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 | Bank Transfer | $500.48 |
| INV002 | Paid | Credit Card | $675.45 |
| INV003 | Paid | Bank Transfer | $544.12 |
| INV004 | Paid | PayPal | $948.12 |
| INV005 | Paid | PayPal | $945.86 |
| INV006 | Paid | Bank Transfer | $130.97 |
| INV007 | Unpaid | Bank Transfer | $274.20 |
| Total | $4,019.20 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Reanna Paucek | Human Factors Consultant | reanna.paucek90@hotmail.com | Member | |
| Kyler Pacocha | Corporate Assurance Engineer | kyler.pacocha@yahoo.com | Member | |
| Emile Bailey | National Directives Designer | emile.bailey@yahoo.com | Admin | |
| Destini Walter | Regional Identity Agent | destini_walter@gmail.com | Admin | |
| Hillary O'Conner-Rutherford | Customer Factors Consultant | hillary.oconner-rutherford61@gmail.com | Viewer | |
| Leta Schinner | National Security Analyst | leta_schinner78@hotmail.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 |
|---|---|---|
Shanie Ziemann Regional Functionality Consultant shanie.ziemann68@yahoo.com | Viewer | |
Dahlia Cruickshank Human Creative Planner dahlia.cruickshank41@gmail.com | Admin | |
Freeda Murphy Global Creative Designer freeda_murphy70@yahoo.com | Admin | |
Moses Feil Direct Group Assistant moses.feil0@yahoo.com | Member | |
Dashawn Goldner-Lindgren Investor Functionality Specialist dashawn.goldner-lindgren@hotmail.com | Admin | |
Bret Von Direct Research Analyst bret_von@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Estefania Baumbach District Factors Representative estefania.baumbach@hotmail.com | Viewer | |
Albina Fay Human Operations Strategist albina_fay@yahoo.com | Viewer | |
Pascale Schimmel Chief Quality Analyst pascale.schimmel@gmail.com | Admin | |
Mariana Simonis Regional Implementation Representative mariana.simonis44@gmail.com | Member | |
Gino Willms Principal Solutions Supervisor gino_willms16@hotmail.com | Viewer | |
Frederique Kessler Senior Brand Coordinator frederique.kessler28@gmail.com | Viewer | |
Francisca Krajcik Central Security Agent francisca_krajcik57@gmail.com | Member | |
Lorenza Gutmann Global Program Planner lorenza_gutmann8@hotmail.com | Admin | |
Joel Howe Senior Factors Architect joel.howe70@yahoo.com | Admin | |
Luigi Gutmann Legacy Solutions Orchestrator luigi_gutmann@yahoo.com | Member | |
Alda Bergstrom Human Program Analyst alda.bergstrom@hotmail.com | Admin | |
Jazlyn Hilll Customer Response Consultant jazlyn.hilll@gmail.com | Admin | |
Salvador West-Orn District Functionality Manager salvador.west-orn95@yahoo.com | Viewer | |
Arnold Johnson Legacy Program Developer arnold.johnson3@gmail.com | Admin | |
Granville Rowe Internal Tactics Officer granville_rowe@gmail.com | Member | |
Trevor Morar-Walsh Human Functionality Representative trevor.morar-walsh38@yahoo.com | Admin | |
Ahmed Herzog Future Paradigm Liaison ahmed_herzog61@hotmail.com | Viewer | |
Elvie Schamberger Central Marketing Architect elvie_schamberger@hotmail.com | Admin | |
Terrence Schulist Investor Interactions Architect terrence_schulist@gmail.com | Viewer | |
Eldon Tromp Direct Implementation Associate eldon_tromp@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 | |
|---|---|---|---|---|
| John Tremblay | danial.hickle20@yahoo.com | Midland | Inactive | $940.42 |
| Rosa Reynolds | trinity_trantow61@hotmail.com | Kennedybury | Inactive | $351.72 |
| Ebony Fadel | lexus43@yahoo.com | Gladysstead | Active | $140.59 |
| Anthony Schowalter | elliott33@yahoo.com | South Julian | Active | $469.49 |
| Miss Jeannie Gleichner IV | elsie.stark@yahoo.com | Fort Althealand | Active | $722.71 |
| Total | $2,624.93 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Beth Waelchi @ernie56 | drew_conroy@hotmail.com | Las Cruces | Active | $267.83 |
Tony Howe @kathryn35 | claudie_mcclure60@hotmail.com | South Dangelo | Active | $695.76 |
Rosalie Mueller I @toni77 | stan.marquardt92@yahoo.com | Sibylstead | Inactive | $244.26 |
Catherine Blick @lue_bernier10 | darien39@yahoo.com | Gastonia | Active | $296.32 |
Yvette O'Connell @laverne_klein72 | myra_kilback@gmail.com | Pfefferfort | Inactive | $961.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Arturo Gerhold | augustine_hackett@gmail.com | New Elinore | Inactive | $1,161.60 |
| Celia Fadel | carolyn.wunsch-gislason@yahoo.com | Kubfield | Active | $488.53 |
| Nichole Stamm | ara_fahey40@gmail.com | Leeton | Active | $1,120.64 |
| Nichole Waelchi | prudence30@yahoo.com | Ambertown | Inactive | $1,185.00 |
| Erma Maggio | colt_hackett27@hotmail.com | Lehnerland | Active | $52.31 |
| Total | $4,008.08 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hattie Kessler | mattie39@gmail.com | Hahnchester | Inactive | $552.31 |
| Kelli Streich | hoyt3@hotmail.com | Fort Lonnie | Inactive | $543.26 |
| Freddie Osinski | kaylin81@gmail.com | East Raphaelle | Active | $69.04 |
| Jeff Fritsch | zechariah62@yahoo.com | Loveland | Active | $540.12 |
| Abel Ullrich | darryl_haag@gmail.com | Lake Rick | Inactive | $34.02 |
| Total | $1,738.75 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Billie Runolfsdottir | lera15@yahoo.com | Bashirianfort | Inactive | $39.26 |
| Dr. Winifred Weimann | bette_roob@gmail.com | Montebello | Inactive | $860.82 |
| Guillermo Rolfson | yoshiko_parker@gmail.com | Ondrickafort | Inactive | $1,069.52 |
| Blanche Schmitt | harvey.connelly@hotmail.com | Port Orange | Active | $901.14 |
| Ms. Penny Johnston | dock.kirlin2@hotmail.com | Juliusville | Active | $942.29 |
| Total | $3,813.03 | |||
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 | ||
|---|---|---|---|---|---|
| David Lang | elvera.robel47@hotmail.com | Langberg | Active | $417.60 | |
| Elias Williamson | claire.fisher5@yahoo.com | Hodkiewiczside | Active | $630.62 | |
| Jonathon VonRueden | lina_predovic68@gmail.com | West Nash | Inactive | $789.26 | |
| Perry Quigley PhD | kody_ortiz70@hotmail.com | New Verner | Inactive | $1,012.00 | |
| Sam Ullrich | alverta50@hotmail.com | Port Velva | Inactive | $949.84 | |
| Total | $3,799.32 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Darnell Ernser | dorris.aufderhar@yahoo.com | Johnsonview | Active | $803.03 | |
| Ray Hintz | amiya8@gmail.com | West Seneca | Inactive | $605.87 | |
| Bob Feil | bella_gerlach@hotmail.com | West Arnostead | Active | $500.45 | |
| Homer Kub | carroll34@gmail.com | Torrance | Inactive | $1,025.02 | |
| Irene Muller | augusta_kertzmann72@yahoo.com | Casper | Active | $406.40 | |
| Total | $3,340.77 | ||||
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 | |
|---|---|---|---|---|
| Doyle Hermann | porter36@yahoo.com | Elenorcester | Active | $900.22 |
| Antoinette Lowe | leon.emard58@gmail.com | Compton | Inactive | $67.62 |
| Lola Jakubowski DVM | tremaine_donnelly87@yahoo.com | Palm Desert | Inactive | $420.76 |
| Andre Marquardt | hertha.steuber88@hotmail.com | New Roncester | Active | $605.67 |
| Ricardo Bechtelar | fred17@hotmail.com | East Crystal | Active | $154.26 |
| Van Heathcote | verdie_bins@yahoo.com | Richardson | Active | $1,025.15 |
| Barry Daugherty-Boyer | kody.hilpert@gmail.com | New Kennabury | Inactive | $44.17 |
| Phyllis Grimes | donna.swift31@gmail.com | Kuhnchester | Active | $1,074.70 |
| Dr. Javier Waelchi | jayda87@gmail.com | Kirlinbury | Inactive | $1,167.38 |
| Gina Hilpert | ivy_murphy@hotmail.com | Sengermouth | Active | $525.76 |
| Martha Baumbach | lucio.cartwright@yahoo.com | Abbottbury | Inactive | $1,094.89 |
| Johnnie Cronin | angeline.watsica58@yahoo.com | Port Darby | Inactive | $364.18 |
| Noah Ferry DVM | alba_kunde-kirlin@yahoo.com | Bocester | Active | $822.38 |
| Dolores Wisozk | marietta.senger7@gmail.com | Danialboro | Active | $320.23 |
| Henry Ondricka | edgar.schroeder@hotmail.com | Fort Esteban | Inactive | $736.90 |
| Total | $9,324.27 | |||
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 |