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 | $712.13 |
| INV002 | Pending | Bank Transfer | $152.41 |
| INV003 | Unpaid | Credit Card | $570.80 |
| INV004 | Paid | Bank Transfer | $367.25 |
| INV005 | Paid | Credit Card | $825.14 |
| INV006 | Pending | Bank Transfer | $185.40 |
| INV007 | Pending | Credit Card | $298.65 |
| Total | $3,111.78 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Amelia Waelchi | Product Solutions Liaison | amelia.waelchi8@gmail.com | Admin | |
| Otha Schiller-Windler | Principal Research Assistant | otha_schiller-windler@gmail.com | Viewer | |
| Destiny Farrell | Central Accounts Executive | destiny.farrell5@gmail.com | Viewer | |
| Donavon Marquardt | Investor Usability Analyst | donavon_marquardt@hotmail.com | Member | |
| Jack Cole | Forward Intranet Manager | jack_cole22@gmail.com | Admin | |
| Jewell Crooks | Product Security Associate | jewell_crooks26@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 |
|---|---|---|
Karine Heller Product Accounts Planner karine.heller57@hotmail.com | Member | |
Esteban Sanford Future Creative Strategist esteban_sanford@gmail.com | Member | |
Wilfredo Hand-Lynch Human Markets Representative wilfredo.hand-lynch3@hotmail.com | Viewer | |
Darron Howe Principal Intranet Supervisor darron_howe99@yahoo.com | Member | |
Nick Robel Human Assurance Associate nick.robel@gmail.com | Viewer | |
Eulalia Purdy Lead Branding Analyst eulalia_purdy56@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 |
|---|---|---|
Ellie McLaughlin International Directives Producer ellie.mclaughlin@hotmail.com | Viewer | |
Ashton Legros Internal Configuration Agent ashton_legros56@yahoo.com | Viewer | |
Pierce McDermott International Paradigm Administrator pierce_mcdermott1@gmail.com | Viewer | |
Orpha McCullough Legacy Usability Specialist orpha_mccullough@gmail.com | Admin | |
Heidi Champlin Lead Paradigm Planner heidi.champlin@yahoo.com | Member | |
Branson Lindgren Investor Security Orchestrator branson.lindgren@yahoo.com | Viewer | |
Aileen Heller Lead Optimization Representative aileen_heller@hotmail.com | Admin | |
Concepcion Breitenberg Central Assurance Manager concepcion_breitenberg@gmail.com | Member | |
Jaylin Runte Regional Quality Administrator jaylin_runte20@hotmail.com | Member | |
Katharina Bogisich Senior Quality Agent katharina.bogisich@yahoo.com | Viewer | |
Winifred Veum Future Interactions Assistant winifred.veum67@yahoo.com | Member | |
German Deckow Chief Operations Associate german_deckow92@gmail.com | Viewer | |
Rafaela Kihn International Division Agent rafaela.kihn@yahoo.com | Member | |
Ron Hamill Global Data Officer ron.hamill88@yahoo.com | Admin | |
Jimmy Heidenreich Product Brand Planner jimmy.heidenreich37@yahoo.com | Viewer | |
Gunnar Ernser Legacy Program Supervisor gunnar_ernser87@yahoo.com | Viewer | |
Flo Greenholt Senior Solutions Liaison flo.greenholt17@gmail.com | Admin | |
Donnell D'Amore Principal Operations Architect donnell_damore@gmail.com | Admin | |
Chadrick Ernser Forward Interactions Facilitator chadrick_ernser@gmail.com | Member | |
Eugenia Wilderman Principal Data Supervisor eugenia_wilderman@hotmail.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 | |
|---|---|---|---|---|
| Bradford Lakin | elyssa_beer@yahoo.com | Harberfurt | Inactive | $631.25 |
| Joy Larkin | zaria.walter@hotmail.com | San Leandro | Inactive | $962.23 |
| Pablo Ebert IV | coty25@hotmail.com | Maudefort | Active | $1,173.80 |
| Clint Wuckert | austin57@yahoo.com | Wunschboro | Active | $842.44 |
| Jordan O'Hara | domenick_rohan@gmail.com | Riverfurt | Inactive | $199.95 |
| Total | $3,809.67 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Cary Hauck Jr. @george_shanahan | jeremy.king69@yahoo.com | Carlsbad | Inactive | $875.65 |
Gilberto Gleason @lucio_lang79 | nathanael84@hotmail.com | Port Josefina | Active | $644.72 |
Jon Satterfield @reyna68 | mathew_gerlach@yahoo.com | New Ebony | Active | $148.02 |
Jorge Steuber @sadie_pollich | micheal.murray31@yahoo.com | East Cadeview | Active | $458.06 |
Elizabeth Schamberger @pearl.medhurst | dovie.pagac38@yahoo.com | Kansas City | Inactive | $127.25 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Owen Cummerata DVM | janae.jakubowski36@hotmail.com | O'Fallon | Inactive | $1,139.82 |
| Israel Maggio Jr. | erna.kessler@gmail.com | Bellland | Active | $759.75 |
| Ted Haley | alisha_kihn@yahoo.com | Fort Shayna | Inactive | $820.44 |
| Leona Hilll | hillary88@hotmail.com | Lawrence | Inactive | $204.65 |
| Scott West | marge67@yahoo.com | West Valley City | Inactive | $337.75 |
| Total | $3,262.41 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rosie Rempel | johnathon_cummerata-hyatt@yahoo.com | Lake Stefanieboro | Active | $636.41 |
| Jamie Olson | bobbie7@hotmail.com | Jamarchester | Active | $1,121.74 |
| Corey Carter I | joana2@gmail.com | Powlowskiborough | Inactive | $1,167.53 |
| Percy Collins Sr. | gustave32@yahoo.com | Swiftborough | Inactive | $970.34 |
| May Schroeder | jermey_vandervort69@yahoo.com | Lake Jewellport | Inactive | $507.57 |
| Total | $4,403.59 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Allen Hagenes | jerome_wolf16@gmail.com | Bonita Springs | Inactive | $127.22 |
| Travis Upton | isaias.olson7@gmail.com | Chesapeake | Inactive | $516.01 |
| Elijah McGlynn | webster_haley87@hotmail.com | New Baron | Inactive | $300.89 |
| Darrin Raynor | tad39@hotmail.com | Kirlinside | Active | $625.25 |
| Kristen MacGyver | teresa.yundt@gmail.com | South Alisonmouth | Inactive | $768.83 |
| Total | $2,338.20 | |||
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 | ||
|---|---|---|---|---|---|
| Bernard Homenick | effie56@gmail.com | Hintzfurt | Active | $773.77 | |
| Ms. Willie Borer | uriah_greenfelder78@yahoo.com | Lake Janeboro | Inactive | $259.58 | |
| Diane Howe-Purdy | rashawn.boehm40@gmail.com | New Rosalyncester | Active | $433.55 | |
| Ramona Padberg | bethel.little@yahoo.com | Batzfort | Active | $1,173.10 | |
| Stacey Mertz PhD | eleanora.rice77@gmail.com | Port Patsy | Inactive | $882.91 | |
| Total | $3,522.91 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lydia Hickle | travis4@yahoo.com | Fort Luisa | Active | $53.96 | |
| Cecilia Huel | alia.corkery46@gmail.com | Gaithersburg | Active | $91.16 | |
| Luther Ryan | angelica3@yahoo.com | Marysville | Active | $643.35 | |
| Dr. Roland Bayer | rosalee_schmidt36@gmail.com | Nicolasburgh | Active | $957.49 | |
| Victor DuBuque PhD | mohammed_wintheiser45@yahoo.com | East Karli | Inactive | $270.88 | |
| Total | $2,016.84 | ||||
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 | |
|---|---|---|---|---|
| Raquel Wiegand | roy.pouros@hotmail.com | New Lilianeland | Inactive | $240.40 |
| Estelle Batz | leopoldo.kirlin@hotmail.com | Harlingen | Active | $116.69 |
| Miguel Lowe | kristian.schinner@hotmail.com | Lake Carrie | Active | $876.88 |
| Marcella Cremin | brian.will-abernathy@gmail.com | South Darian | Active | $838.24 |
| Al Goyette | trent.weimann@gmail.com | Lake Boydmouth | Active | $1,172.13 |
| Glenda Gleichner | leanne_bergstrom37@hotmail.com | West Mireya | Active | $993.75 |
| Jeremiah Kihn | yasmin2@hotmail.com | Eusebioview | Inactive | $1,116.75 |
| Alton Kertzmann | kory63@gmail.com | Bethlehem | Inactive | $1,155.58 |
| Maggie Williamson | manuela.kunze@gmail.com | Kamronfurt | Inactive | $422.68 |
| Lorenzo Romaguera | emmalee.pollich@yahoo.com | Milpitas | Active | $697.79 |
| Leah Cremin | reymundo.tromp9@yahoo.com | Brakuscester | Inactive | $1,067.55 |
| Salvador Marvin II | brant_bogan50@yahoo.com | Reedland | Inactive | $502.74 |
| Rochelle Sipes-Upton | eva84@gmail.com | North Kaliville | Inactive | $120.42 |
| Jeffrey Feest | caesar_heaney@hotmail.com | Antonetteton | Inactive | $962.88 |
| Felipe Harvey | stone.rath28@gmail.com | Normaport | Active | $260.85 |
| Total | $10,545.33 | |||
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 |