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 | Credit Card | $501.41 |
| INV002 | Paid | PayPal | $724.39 |
| INV003 | Paid | Bank Transfer | $171.15 |
| INV004 | Paid | Credit Card | $721.29 |
| INV005 | Unpaid | Bank Transfer | $280.46 |
| INV006 | Unpaid | PayPal | $490.83 |
| INV007 | Unpaid | PayPal | $567.70 |
| Total | $3,457.23 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Justin Nikolaus | International Metrics Strategist | justin.nikolaus49@hotmail.com | Member | |
| Nicole Jaskolski | Chief Directives Liaison | nicole_jaskolski60@hotmail.com | Viewer | |
| Johnathan Jacobson | Principal Data Consultant | johnathan.jacobson@hotmail.com | Viewer | |
| Norman Lynch | Corporate Intranet Technician | norman.lynch@hotmail.com | Member | |
| Larry Kautzer | Principal Division Producer | larry_kautzer@gmail.com | Admin | |
| Horace Treutel | Internal Intranet Strategist | horace.treutel@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 |
|---|---|---|
William Prosacco Human Group Technician william.prosacco88@hotmail.com | Member | |
Valentin Weissnat International Functionality Director valentin_weissnat10@gmail.com | Member | |
Dolores Donnelly National Communications Developer dolores_donnelly@yahoo.com | Viewer | |
Bailee Kuphal-Anderson Human Intranet Orchestrator bailee.kuphal-anderson@hotmail.com | Viewer | |
William Erdman Investor Division Producer william.erdman94@hotmail.com | Viewer | |
Carmelo Weber-Towne Internal Identity Administrator carmelo.weber-towne@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 |
|---|---|---|
Alec VonRueden Customer Directives Technician alec_vonrueden@gmail.com | Admin | |
Rodney Deckow Central Web Designer rodney_deckow@hotmail.com | Admin | |
Karla Champlin Human Integration Producer karla_champlin@yahoo.com | Admin | |
Delores Ernser International Infrastructure Facilitator delores.ernser@hotmail.com | Member | |
Estelle Block Regional Accounts Facilitator estelle.block22@gmail.com | Admin | |
Noah Armstrong Internal Quality Agent noah.armstrong45@hotmail.com | Admin | |
Christina Quigley Legacy Web Agent christina.quigley18@yahoo.com | Admin | |
Enrique Rogahn National Accountability Technician enrique.rogahn10@gmail.com | Member | |
Lincoln Senger Regional Configuration Consultant lincoln_senger@hotmail.com | Member | |
Peggy Gulgowski Corporate Interactions Administrator peggy_gulgowski15@gmail.com | Viewer | |
Yvette Kohler Central Accountability Supervisor yvette.kohler20@hotmail.com | Admin | |
Patti Mitchell Internal Markets Orchestrator patti.mitchell@hotmail.com | Member | |
Mervin Runte Global Optimization Specialist mervin_runte59@gmail.com | Viewer | |
Vicki McGlynn Investor Solutions Technician vicki_mcglynn@yahoo.com | Viewer | |
Waldo Ritchie District Identity Developer waldo_ritchie@hotmail.com | Admin | |
Danny Beer Direct Markets Liaison danny.beer83@yahoo.com | Member | |
Glenn Tromp Forward Markets Producer glenn.tromp48@hotmail.com | Member | |
Jalon Kassulke-Schulist Central Data Administrator jalon.kassulke-schulist@hotmail.com | Member | |
Rey Hauck Internal Research Liaison rey.hauck@gmail.com | Admin | |
Geoffrey Wolff Chief Data Agent geoffrey_wolff@yahoo.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 | |
|---|---|---|---|---|
| Alayna Roberts | laron_white@gmail.com | Orntown | Active | $940.25 |
| Asia Mohr | jaiden.hilpert4@hotmail.com | Colefurt | Inactive | $216.04 |
| Charlotte Lakin | janis.cormier@hotmail.com | North Gabriellefield | Active | $874.19 |
| Breana King V | amber_grimes79@gmail.com | South Daveside | Active | $808.75 |
| Elroy Upton | jonathon.nader-boyer70@yahoo.com | Hirthe-Kilbackchester | Inactive | $949.19 |
| Total | $3,788.42 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jaden Reinger @rosemarie52 | irving_feeney30@hotmail.com | Leschstead | Active | $574.18 |
Ms. Caroline Kunde V @shelly9 | lisandro_senger75@yahoo.com | Ames | Inactive | $96.61 |
Ismael Zieme @ian_rippin69 | renee0@gmail.com | North Fae | Active | $816.83 |
Mr. Elody Schoen DVM @yasmine.hayes24 | vincenza_west58@hotmail.com | Coachella | Inactive | $1,065.65 |
Shane Schumm II @ismael93 | aurelia22@yahoo.com | Annetteport | Inactive | $33.11 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Roberta Kohler-Hoeger | casandra.pfannerstill@gmail.com | Rolfsonburgh | Active | $675.32 |
| Michelle Crooks | dolores_bayer54@yahoo.com | Gardena | Active | $317.75 |
| Kate Barrows | paolo.ritchie@gmail.com | East Marieton | Inactive | $768.77 |
| Rochelle Tromp | hobart_boehm98@hotmail.com | Lake Aron | Inactive | $61.87 |
| Parker Powlowski-Jenkins | leonel_hansen@gmail.com | New York | Active | $585.43 |
| Total | $2,409.14 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erik Schaden | stephon_hamill@yahoo.com | Chaddbury | Active | $871.09 |
| Novella Runte IV | marisa_kirlin@gmail.com | Blickview | Active | $1,051.86 |
| Bryan Bins | alma69@gmail.com | Hermannfield | Inactive | $436.21 |
| Phillip Nienow | bart_greenholt@hotmail.com | Oraburgh | Active | $1,134.75 |
| Jerrod O'Keefe | darrin.moen19@yahoo.com | Lake Albertaberg | Active | $163.44 |
| Total | $3,657.35 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Nick Beer | jensen_hauck-zulauf@hotmail.com | Rapid City | Inactive | $1,005.67 |
| Elwin Hahn | guy.green39@gmail.com | Bobbieport | Inactive | $675.49 |
| Margie Zemlak | zachary.ritchie@gmail.com | Rochester Hills | Active | $300.86 |
| Heather Jerde | joanne.bartell-quitzon90@yahoo.com | Hoppebury | Inactive | $959.07 |
| Mrs. Leah Oberbrunner | gerard_collins@gmail.com | Bernhard-Hettingerboro | Inactive | $625.54 |
| Total | $3,566.63 | |||
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 | ||
|---|---|---|---|---|---|
| Glen Pfannerstill | tyler_weimann-wisoky70@hotmail.com | Parker | Active | $464.01 | |
| Hector Kutch | travis.glover31@gmail.com | Bethesda | Inactive | $882.72 | |
| Marie Stanton | laila_lynch@gmail.com | West Shakirahaven | Active | $986.09 | |
| Florida Stehr | leatha.turner@yahoo.com | South Graysonstead | Active | $201.19 | |
| Dr. Freda Leuschke | furman.mckenzie@yahoo.com | Hugomouth | Inactive | $749.56 | |
| Total | $3,283.57 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alvin Mertz | casandra_wilkinson@gmail.com | Schneiderbury | Active | $763.51 | |
| Mr. Enrique Lindgren | jacob.cole@hotmail.com | Hialeah | Inactive | $64.64 | |
| Deborah Price | cecelia7@gmail.com | Port Veronicaworth | Inactive | $844.82 | |
| Marilou Berge I | mike_glover92@gmail.com | West Destinee | Inactive | $749.39 | |
| Lana Bednar | cassandre25@hotmail.com | Fort Chelsieside | Inactive | $434.06 | |
| Total | $2,856.42 | ||||
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 | |
|---|---|---|---|---|
| Chelsey Effertz | major.fay15@yahoo.com | Fort Judahtown | Inactive | $470.08 |
| Leonie King | betty.nicolas-mcclure@gmail.com | Deloresfield | Inactive | $254.76 |
| Erma Gibson | cody.leuschke@yahoo.com | Joseton | Active | $1,095.46 |
| Heather Spinka | josefa4@hotmail.com | Jastborough | Active | $44.89 |
| Dr. Tre Ryan | rosario29@hotmail.com | Reichertfort | Active | $1,122.60 |
| Salma Jenkins | blanca_howe7@yahoo.com | Perris | Active | $321.78 |
| Viva Denesik | ethel_haag59@yahoo.com | East Rexmouth | Inactive | $902.93 |
| Jocelyn Boyle | natasha.langworth@yahoo.com | Cruzland | Active | $4.45 |
| Melvin Fritsch | orville.pfannerstill22@gmail.com | West Joycetown | Inactive | $505.84 |
| Preston Fadel | candelario29@gmail.com | Jaidenland | Active | $1,024.86 |
| Clemens Blanda | maybelle_stokes57@yahoo.com | West Alton | Active | $164.57 |
| Ardith Kessler | zachary.lind93@gmail.com | New Norval | Inactive | $202.39 |
| Hazel Muller | pearlie44@hotmail.com | North Emilioville | Active | $1,092.22 |
| Jacob Schoen | leah_graham@gmail.com | Port Chaz | Active | $259.03 |
| Dr. Jennie Gottlieb | rufus_fahey69@gmail.com | Keeblershire | Active | $344.84 |
| Total | $7,810.70 | |||
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 |