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 | Bank Transfer | $710.79 |
| INV002 | Paid | Credit Card | $553.26 |
| INV003 | Unpaid | PayPal | $339.78 |
| INV004 | Pending | Bank Transfer | $304.73 |
| INV005 | Unpaid | PayPal | $344.96 |
| INV006 | Paid | Bank Transfer | $628.91 |
| INV007 | Unpaid | Bank Transfer | $950.47 |
| Total | $3,832.90 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kenny Dickens | Customer Markets Technician | kenny_dickens43@hotmail.com | Viewer | |
| Bryant Harber | Legacy Tactics Engineer | bryant.harber56@yahoo.com | Member | |
| Helmer O'Connell | Global Program Director | helmer_oconnell18@hotmail.com | Member | |
| Mitchell Gleason | Senior Creative Agent | mitchell.gleason@yahoo.com | Member | |
| Nona Tremblay | Regional Intranet Assistant | nona.tremblay@gmail.com | Viewer | |
| Abbie Ritchie | National Response Developer | abbie.ritchie@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 |
|---|---|---|
Donald Willms Forward Integration Executive donald_willms86@gmail.com | Viewer | |
Nia Braun Forward Directives Strategist nia.braun@yahoo.com | Member | |
Amir Koss Dynamic Configuration Consultant amir.koss0@hotmail.com | Member | |
Izabella Stamm Direct Infrastructure Supervisor izabella.stamm12@yahoo.com | Admin | |
Chesley Gorczany Chief Branding Technician chesley.gorczany92@hotmail.com | Member | |
Tina Ward National Mobility Executive tina_ward@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 |
|---|---|---|
Donny Abshire National Tactics Specialist donny_abshire@yahoo.com | Admin | |
Alexie Hilpert Investor Data Planner alexie_hilpert@hotmail.com | Admin | |
Hester Ernser Direct Interactions Producer hester.ernser20@hotmail.com | Viewer | |
Waino Terry Senior Integration Orchestrator waino_terry@yahoo.com | Admin | |
Frederique Collier Direct Tactics Administrator frederique.collier71@yahoo.com | Viewer | |
Ezekiel Stark-Zemlak Internal Solutions Assistant ezekiel_stark-zemlak40@hotmail.com | Viewer | |
Clayton Prohaska District Web Strategist clayton_prohaska83@hotmail.com | Member | |
Uriel Walsh Lead Identity Administrator uriel_walsh38@yahoo.com | Admin | |
Cody Batz Dynamic Research Coordinator cody.batz@gmail.com | Viewer | |
Salvatore Hessel Legacy Division Liaison salvatore.hessel@hotmail.com | Viewer | |
Douglas Stark Product Integration Developer douglas.stark@gmail.com | Admin | |
Ivan Sauer Regional Accounts Coordinator ivan.sauer65@yahoo.com | Viewer | |
Jennyfer Feest Internal Security Director jennyfer_feest@hotmail.com | Viewer | |
Glen Reynolds Human Tactics Representative glen.reynolds@yahoo.com | Viewer | |
Jaqueline Barrows Senior Group Analyst jaqueline_barrows@yahoo.com | Viewer | |
Louis Effertz Senior Optimization Director louis.effertz84@hotmail.com | Member | |
Carolanne Nader District Solutions Representative carolanne_nader@yahoo.com | Viewer | |
Ed Schneider Forward Directives Representative ed_schneider@hotmail.com | Member | |
Mack Gleichner Internal Integration Director mack.gleichner@hotmail.com | Member | |
Fae Hodkiewicz Future Paradigm Technician fae_hodkiewicz81@yahoo.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 | |
|---|---|---|---|---|
| Todd Gutkowski Sr. | paulette_barton@yahoo.com | Johanhaven | Inactive | $1,039.09 |
| Sharon Buckridge | laurine26@hotmail.com | Everett | Inactive | $779.19 |
| Ms. Rosalia Dare | traci_mueller49@hotmail.com | Port Ayana | Inactive | $436.86 |
| Candice Kuvalis | stefanie_glover@yahoo.com | North Fred | Active | $213.07 |
| Gus Rath | donnie_cole18@gmail.com | Hannafurt | Inactive | $864.99 |
| Total | $3,333.20 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lonie Smith @ian_pollich47 | tess.mclaughlin@hotmail.com | Damienhaven | Inactive | $357.66 |
Earline Pacocha Jr. @rick_mcclure | marguerite_hammes48@yahoo.com | Lake Mauricio | Inactive | $1,095.10 |
Jaquelin Lemke @shayna92 | merle.denesik-stokes33@hotmail.com | East Gertrude | Active | $421.52 |
Douglas Douglas @gretchen.runolfsson | tamara_funk@gmail.com | McCulloughside | Inactive | $125.65 |
Dashawn Green @garrett41 | jeanne_lubowitz34@gmail.com | Shaunton | Inactive | $1,119.12 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Merritt Koepp | lorenza.green44@hotmail.com | East Joannstead | Active | $1,076.63 |
| Patti Gottlieb | mylene_maggio@gmail.com | West Covina | Active | $138.42 |
| Mr. Laurence Strosin | tillman78@yahoo.com | Lake Alexzander | Inactive | $531.95 |
| Wm Lockman | marguerite.murphy@yahoo.com | Fort Felicia | Inactive | $130.54 |
| Sabina Hermann | allan51@hotmail.com | Garryview | Inactive | $392.72 |
| Total | $2,270.26 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rickie Gutkowski | agustin.kihn@gmail.com | West Vera | Inactive | $762.68 |
| Kendall Emmerich | randall.wilderman56@gmail.com | Hilpertfield | Inactive | $1,092.41 |
| Camille Torphy | veronica17@yahoo.com | Leonardboro | Inactive | $354.53 |
| Sylvester Konopelski | aaron_mcdermott38@gmail.com | Pollichbury | Active | $457.38 |
| Sonja Legros-Schowalter | minnie80@hotmail.com | West Nya | Inactive | $1,059.86 |
| Total | $3,726.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Magnolia Keebler | patricia_kub@gmail.com | Eugene | Active | $134.55 |
| Pablo Ullrich | parker_nader14@hotmail.com | Gutmannburgh | Inactive | $1,187.51 |
| Kathy Goodwin III | sam_olson@yahoo.com | Gutkowskifort | Inactive | $1,071.50 |
| Zachary Hills | mildred_kuhlman77@hotmail.com | Erie | Active | $584.04 |
| Laisha O'Connell | nathaniel.heaney0@hotmail.com | East Rodney | Active | $830.64 |
| Total | $3,808.24 | |||
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 | ||
|---|---|---|---|---|---|
| Sonia Reynolds | marge48@gmail.com | South Patrick | Active | $203.91 | |
| Mr. Rene Tromp | sabina_parker-franecki34@yahoo.com | Schneiderland | Active | $726.15 | |
| Jalyn Bartell | julio_ebert@yahoo.com | Wisozkcester | Inactive | $451.01 | |
| Keith Weber Jr. | beaulah.jacobi@hotmail.com | Abrahamfield | Active | $193.11 | |
| Davin Roob | marina.kris-lakin16@yahoo.com | Zboncakland | Active | $1,134.28 | |
| Total | $2,708.46 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lora Predovic | sylvia1@gmail.com | Port Raven | Active | $516.49 | |
| Elliot Adams IV | brittany.goldner37@gmail.com | East Sophiemouth | Inactive | $1,179.30 | |
| Yolanda Rogahn | lolita98@hotmail.com | West Edgar | Active | $244.32 | |
| Erica Ritchie | dock.swift@yahoo.com | Natalieview | Active | $52.09 | |
| Arturo Bogan | sofia99@yahoo.com | Caguas | Active | $775.28 | |
| Total | $2,767.48 | ||||
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 | |
|---|---|---|---|---|
| Melba Conn | liliana.rohan@hotmail.com | Maureenboro | Active | $615.67 |
| Raoul Nicolas-Cruickshank MD | anya.barton18@hotmail.com | Lynetteville | Active | $974.46 |
| Jane Turner | malcolm7@gmail.com | Palm Coast | Inactive | $67.71 |
| Kadin Predovic | durward6@hotmail.com | Lake Matildaborough | Active | $1,169.90 |
| Anabel Bartoletti | lorena_schmitt25@hotmail.com | Hayward | Inactive | $591.07 |
| Winifred Kihn DVM | aubree1@hotmail.com | South Aurelia | Inactive | $475.12 |
| Leona Mante | julian43@hotmail.com | Terrytown | Inactive | $1,039.76 |
| Daisy Carroll | renee.swift@yahoo.com | Jasonworth | Inactive | $626.66 |
| Luz Smith | joana17@gmail.com | West Triciafield | Active | $239.35 |
| Adrianna Oberbrunner | morgan91@hotmail.com | Jaskolskistead | Active | $450.62 |
| Cooper Ondricka | arne7@hotmail.com | Fort Maye | Active | $540.29 |
| Bethany Maggio | paula_fadel@gmail.com | Gottliebmouth | Inactive | $1,163.20 |
| Cheryl Jacobson | laury_stracke71@hotmail.com | North Melanie | Active | $202.44 |
| Junius Reinger | jerome_cassin@gmail.com | Sioux Falls | Active | $186.55 |
| Nikko Bruen IV | lamar.jones8@yahoo.com | Titusville | Inactive | $333.37 |
| Total | $8,676.17 | |||
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 |