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 | Credit Card | $498.54 |
| INV002 | Unpaid | Bank Transfer | $476.84 |
| INV003 | Unpaid | Bank Transfer | $318.64 |
| INV004 | Paid | Bank Transfer | $426.13 |
| INV005 | Paid | Credit Card | $794.88 |
| INV006 | Unpaid | PayPal | $427.46 |
| INV007 | Pending | Bank Transfer | $419.54 |
| Total | $3,362.03 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Chaya Skiles | Future Creative Executive | chaya_skiles@hotmail.com | Admin | |
| Estella Hudson | Direct Brand Executive | estella.hudson65@yahoo.com | Admin | |
| Savanna McKenzie | Lead Accounts Manager | savanna.mckenzie@gmail.com | Member | |
| Cole Douglas | Future Division Coordinator | cole.douglas38@yahoo.com | Admin | |
| Enrique Hettinger | Lead Security Coordinator | enrique_hettinger94@yahoo.com | Member | |
| Neoma O'Conner | Customer Operations Representative | neoma.oconner92@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 |
|---|---|---|
Maddison Kassulke Central Directives Facilitator maddison_kassulke@hotmail.com | Viewer | |
Dereck Murazik Customer Brand Assistant dereck.murazik38@gmail.com | Viewer | |
Javon Hettinger Investor Interactions Strategist javon_hettinger99@gmail.com | Admin | |
Maeve Heidenreich Direct Communications Analyst maeve.heidenreich91@hotmail.com | Admin | |
Geovanny Carter Legacy Optimization Planner geovanny_carter@yahoo.com | Admin | |
Loyce Kris Internal Communications Manager loyce_kris10@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Wilber Heller Senior Optimization Executive wilber_heller@yahoo.com | Viewer | |
Ellsworth Sawayn Human Implementation Associate ellsworth.sawayn@gmail.com | Admin | |
Pink Stanton International Integration Designer pink.stanton93@gmail.com | Viewer | |
Yasmin Turcotte Corporate Implementation Facilitator yasmin_turcotte@yahoo.com | Member | |
Tevin Hartmann Human Security Technician tevin.hartmann@yahoo.com | Viewer | |
Jordane Smitham International Solutions Supervisor jordane.smitham@hotmail.com | Viewer | |
Annalise Emmerich Legacy Program Agent annalise_emmerich@hotmail.com | Viewer | |
Jay Feest Central Functionality Liaison jay.feest@hotmail.com | Viewer | |
Laverne Hessel Senior Quality Supervisor laverne_hessel62@gmail.com | Viewer | |
Annamae Beahan National Mobility Facilitator annamae_beahan@yahoo.com | Viewer | |
Tessie Wiegand Global Communications Representative tessie_wiegand@yahoo.com | Admin | |
Lori Towne Legacy Marketing Orchestrator lori_towne@hotmail.com | Admin | |
Mellie Spinka Legacy Marketing Consultant mellie_spinka@gmail.com | Admin | |
Leopold Rath International Security Developer leopold_rath@hotmail.com | Admin | |
Jed Langworth Future Communications Planner jed_langworth59@gmail.com | Viewer | |
Krista Bashirian Internal Implementation Assistant krista.bashirian@yahoo.com | Admin | |
Lilyan Hansen National Mobility Technician lilyan.hansen@gmail.com | Admin | |
Aiyana Waters Principal Usability Strategist aiyana_waters@yahoo.com | Viewer | |
Fae Bode Human Program Developer fae.bode@gmail.com | Viewer | |
Paula Gibson Dynamic Web Director paula_gibson50@gmail.com | Member |
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 | |
|---|---|---|---|---|
| Bob Wolf | cathryn69@hotmail.com | Findlay | Active | $773.71 |
| Mr. Rodolfo Fahey | maci28@gmail.com | Port Jacey | Active | $95.29 |
| Karen Kertzmann | scarlett_gutkowski@yahoo.com | Hoegerview | Active | $645.19 |
| Tyler Lynch | maymie24@hotmail.com | Elifort | Inactive | $114.77 |
| Mike Jacobi | shayna58@gmail.com | East Amelia | Active | $23.57 |
| Total | $1,652.53 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Janis Russel @norberto.lynch | lela_goodwin51@hotmail.com | Salinas | Inactive | $723.66 |
Mrs. Nina Runolfsdottir @tara_robel | maximo12@hotmail.com | Waipahu | Active | $686.84 |
Clark Luettgen @aurelia_weber | brooks.haag@gmail.com | Loraineborough | Inactive | $1,070.47 |
Dean Vandervort-Predovic @glenda_mohr | jensen89@hotmail.com | Smyrna | Inactive | $689.25 |
Courtney Kulas V @dominic74 | consuelo.jenkins@hotmail.com | Myrtieville | Inactive | $1,112.05 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Patrick Koch | leif83@gmail.com | Jastland | Active | $24.89 |
| Boyd Cormier-Collins | casper.heidenreich18@hotmail.com | Port Hope | Active | $79.71 |
| Amy Heathcote | graham76@hotmail.com | South Norastead | Inactive | $862.37 |
| Daniel Lesch | dee_baumbach46@yahoo.com | Fort Shanon | Active | $19.46 |
| Karl Hansen | vivianne_damore97@hotmail.com | Pine Hills | Inactive | $1,175.31 |
| Total | $2,161.74 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Ashley Ryan | loren36@gmail.com | Greenville | Active | $834.05 |
| Vivian Klein | corrine.legros-quitzon29@yahoo.com | North Karianne | Inactive | $429.75 |
| Essie Paucek | serena_mosciski33@hotmail.com | Marshallfurt | Active | $905.18 |
| Jessica Fahey | evan_moen47@gmail.com | Longmont | Active | $639.81 |
| Wanda Witting | rosanna98@gmail.com | South Ozellashire | Inactive | $686.44 |
| Total | $3,495.23 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Abraham McGlynn | justine42@hotmail.com | Augustusland | Active | $81.24 |
| Kirk Osinski | maudie.goodwin@hotmail.com | Schinnerside | Active | $608.81 |
| Vincent Weber | alyce.gleichner15@hotmail.com | Rocklin | Active | $789.90 |
| Israel Mills | carole.koss27@gmail.com | Prosaccobury | Inactive | $245.20 |
| Chad Franecki | clay_wilderman92@hotmail.com | Oberbrunnerburgh | Inactive | $692.36 |
| Total | $2,417.51 | |||
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 | ||
|---|---|---|---|---|---|
| Christina Johnston | antone.mclaughlin@gmail.com | Fort Crawford | Active | $729.14 | |
| Edith Moen | jalyn58@gmail.com | Heidenreichview | Inactive | $59.57 | |
| Jodi Corkery | franco_rath32@yahoo.com | North Roycefield | Active | $5.98 | |
| Jenny Rogahn | benedict19@yahoo.com | Reillyberg | Inactive | $758.20 | |
| Joan Weimann | tillman.bednar@yahoo.com | East Jeramyburgh | Inactive | $663.02 | |
| Total | $2,215.91 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Kelli Harris | abel_olson4@yahoo.com | Israelstead | Inactive | $957.71 | |
| Bryan Auer | eula.herzog@yahoo.com | Kuvalisview | Active | $187.89 | |
| Gabriel Wisozk | clotilde1@gmail.com | Amyville | Inactive | $31.50 | |
| Dana Schroeder | keeley_berge53@gmail.com | Port Tess | Inactive | $922.63 | |
| Jesus Corwin | reilly_sawayn44@hotmail.com | Cameronboro | Active | $1,063.04 | |
| Total | $3,162.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 | |
|---|---|---|---|---|
| Geoffrey Boyer | angelica_williamson@yahoo.com | Spokane | Active | $746.61 |
| Mr. Jesus Hessel I | coralie.predovic44@gmail.com | Fort Makennachester | Active | $649.64 |
| Kellie Feeney | freddy.hackett@yahoo.com | Port Javierton | Active | $884.35 |
| Herman Rutherford | rhoda_mclaughlin63@yahoo.com | North Rethastad | Inactive | $784.36 |
| Sylvia Block | neva96@gmail.com | North Lemuelberg | Active | $905.94 |
| Christina Gorczany | meda.schoen@hotmail.com | Lake Robbiechester | Inactive | $182.76 |
| Miranda Gleason IV | kayley.ebert42@hotmail.com | Spring Valley | Inactive | $646.30 |
| Otis Hodkiewicz | makayla89@yahoo.com | Gustavebury | Active | $483.00 |
| Ashley Grant-Kreiger V | anastasia74@yahoo.com | East Brainworth | Inactive | $946.50 |
| Jeffrey Satterfield | mabelle.block4@hotmail.com | East Shawna | Inactive | $456.23 |
| Warren Deckow V | cruz_von@hotmail.com | Antoninahaven | Inactive | $424.46 |
| Noel Kuhic | mikayla20@yahoo.com | Haagberg | Inactive | $540.48 |
| Tomas Renner Sr. | orville22@gmail.com | Melbourne | Inactive | $429.10 |
| Ismael Hagenes | ignatius75@gmail.com | Woodbury | Inactive | $160.04 |
| Emmett Jakubowski | velva.gerlach@gmail.com | North Tiarabury | Active | $767.82 |
| Total | $9,007.59 | |||
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 |