Components
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 | $545.05 |
| INV002 | Unpaid | PayPal | $425.96 |
| INV003 | Unpaid | Credit Card | $900.02 |
| INV004 | Unpaid | PayPal | $830.51 |
| INV005 | Unpaid | PayPal | $898.77 |
| INV006 | Paid | Credit Card | $178.63 |
| INV007 | Unpaid | Credit Card | $241.96 |
| Total | $4,020.90 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Adriel Gleichner | Regional Paradigm Specialist | adriel_gleichner93@yahoo.com | Viewer | |
| Katie Daniel | Central Factors Manager | katie.daniel@gmail.com | Viewer | |
| Blake Luettgen | Forward Research Architect | blake.luettgen@gmail.com | Admin | |
| Prince Morar | Principal Research Liaison | prince.morar8@gmail.com | Admin | |
| Dee Satterfield | Central Assurance Supervisor | dee.satterfield@hotmail.com | Member | |
| Debbie Pouros-Tromp | Future Factors Strategist | debbie.pouros-tromp@hotmail.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 |
|---|---|---|
Boris Champlin International Program Director boris.champlin@gmail.com | Member | |
Louvenia Corkery Chief Program Representative louvenia_corkery@gmail.com | Member | |
Tiana Goyette Investor Brand Director tiana.goyette2@hotmail.com | Viewer | |
Jacques Abernathy Human Interactions Manager jacques.abernathy43@gmail.com | Viewer | |
Prudence D'Amore Product Integration Director prudence_damore@gmail.com | Member | |
Bartholome Beatty Corporate Communications Assistant bartholome_beatty48@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dejuan Beier Senior Quality Director dejuan_beier@hotmail.com | Admin | |
Chadd Watsica Future Branding Developer chadd.watsica35@gmail.com | Admin | |
Annette Sporer Chief Solutions Technician annette.sporer@hotmail.com | Viewer | |
Alison Murray Customer Usability Specialist alison_murray49@gmail.com | Viewer | |
Wilburn Jakubowski Product Implementation Associate wilburn.jakubowski44@hotmail.com | Admin | |
Wm Crooks Customer Interactions Liaison wm.crooks@gmail.com | Admin | |
Milton Green Legacy Solutions Associate milton_green97@yahoo.com | Admin | |
Mark Torp Principal Intranet Coordinator mark.torp@gmail.com | Viewer | |
Kaitlyn Schaden International Solutions Representative kaitlyn.schaden97@yahoo.com | Admin | |
Casimer Koepp Human Factors Agent casimer_koepp8@hotmail.com | Member | |
Rylan McCullough Global Division Developer rylan_mccullough@gmail.com | Viewer | |
Marilyne Ferry Forward Directives Developer marilyne.ferry68@hotmail.com | Admin | |
Dulce Ritchie Product Group Developer dulce_ritchie@yahoo.com | Member | |
Marcelina Bartoletti Global Branding Technician marcelina_bartoletti68@gmail.com | Viewer | |
Elizabeth Ernser Investor Operations Developer elizabeth_ernser@hotmail.com | Member | |
Chadd Ondricka District Research Officer chadd.ondricka@hotmail.com | Viewer | |
Gregory Sipes Direct Assurance Specialist gregory_sipes@hotmail.com | Admin | |
Tyrese Crist Principal Solutions Manager tyrese.crist@gmail.com | Viewer | |
Bethany Smith Regional Security Orchestrator bethany_smith22@hotmail.com | Viewer | |
Earnest Hermann District Factors Manager earnest_hermann@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 | |
|---|---|---|---|---|
| Verona Trantow | faith.ziemann@gmail.com | Casas Adobes | Inactive | $264.82 |
| Javier Herman | edmond19@yahoo.com | New Jaleelstad | Inactive | $894.97 |
| Mike Wilderman V | elisha_jenkins10@hotmail.com | West Rashawnfield | Active | $752.78 |
| Vickie Schamberger | emmett6@gmail.com | East Neha | Inactive | $289.50 |
| Bridget Howe | bennie_gislason99@gmail.com | Tromphaven | Inactive | $550.58 |
| Total | $2,752.65 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Verna Schuppe III @edmund.cummings42 | elijah.breitenberg@gmail.com | Providence | Inactive | $300.65 |
Bailey Kuhn @greta_okuneva1 | lydia.lesch41@hotmail.com | Hahnbury | Active | $824.22 |
Orin Nienow @nakia.jenkins | noemie.lueilwitz@gmail.com | East Halton | Inactive | $317.74 |
Jamir Schiller @abraham.parker57 | al.emmerich@gmail.com | Fort Albinaworth | Inactive | $571.70 |
Makayla Stoltenberg III @naomi33 | leigh7@gmail.com | Malden | Inactive | $1,027.51 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Jayde Stamm | destiney_armstrong67@gmail.com | North Ambrosefurt | Active | $201.16 |
| Kenneth Rolfson | rahsaan_brakus91@hotmail.com | Tremblayport | Active | $808.81 |
| Amina Boyer-Champlin | lea.parisian@hotmail.com | Clementinaboro | Active | $987.38 |
| Cooper Fritsch Jr. | meredith_kihn@yahoo.com | Battle Creek | Active | $24.53 |
| Mitchel Bradtke | danika90@yahoo.com | Russellburgh | Active | $70.09 |
| Total | $2,091.97 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Esteban Abbott | gardner.bins13@hotmail.com | Kovacekland | Inactive | $861.74 |
| Fanny Funk | jerrod_runte@yahoo.com | Cassandraton | Active | $790.65 |
| Marguerite Berge | jeannette42@yahoo.com | Port Rolandfield | Inactive | $831.18 |
| Ms. River O'Connell | naomi46@yahoo.com | Port Idella | Active | $770.46 |
| Darrel Rath | bernadette93@gmail.com | Shawnfield | Inactive | $526.09 |
| Total | $3,780.12 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dorian Schuster | doris.kessler@hotmail.com | Dedricworth | Inactive | $132.75 |
| Delphine Bayer | seth.walsh@gmail.com | Fort Katarinahaven | Active | $1,163.79 |
| Dan Reynolds | alexandra.ratke7@hotmail.com | East River | Active | $810.23 |
| Darnell Roberts | ashleigh_nitzsche@yahoo.com | New Toby | Inactive | $886.63 |
| Andres Sporer | dante92@hotmail.com | South Elinoreberg | Active | $252.07 |
| Total | $3,245.47 | |||
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 | ||
|---|---|---|---|---|---|
| Mrs. Joy Lind | marcia_littel41@yahoo.com | Kilbackside | Inactive | $263.20 | |
| Diane Fadel | karelle24@hotmail.com | North Deborah | Active | $419.93 | |
| Quincy Donnelly | norval.toy@hotmail.com | New Gretchen | Active | $1,198.36 | |
| Patty Weissnat MD | willa75@yahoo.com | Glen Burnie | Inactive | $716.03 | |
| Roosevelt Stiedemann | horace.hand@yahoo.com | New Kieranside | Inactive | $297.78 | |
| Total | $2,895.30 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dexter Hand | ashton10@gmail.com | West Dusty | Inactive | $527.22 | |
| Elnora Ritchie | barbara18@yahoo.com | West Phillipchester | Active | $691.35 | |
| Daryl Fahey | jailyn12@gmail.com | New Lonieport | Inactive | $273.56 | |
| Arnaldo Walsh | elsa_hagenes@gmail.com | Sergiofield | Active | $640.84 | |
| Keenan Dicki | ivan.beahan@yahoo.com | North Jordan | Inactive | $1,078.30 | |
| Total | $3,211.27 | ||||
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 | |
|---|---|---|---|---|
| Wilma Kemmer | werner.welch@gmail.com | Corneliusburgh | Inactive | $525.76 |
| Wellington Jones | clyde_kirlin18@hotmail.com | Hegmannhaven | Active | $1,132.37 |
| Imogene Botsford | queenie_kozey84@hotmail.com | Katieworth | Inactive | $1,189.92 |
| Jana Grimes | marques40@hotmail.com | Port Orange | Active | $948.41 |
| Rogelio Lowe | malcolm_zulauf@hotmail.com | Carmichael | Inactive | $1,199.73 |
| Carissa O'Conner | orlando_trantow87@hotmail.com | Millston | Inactive | $626.15 |
| Kailey McKenzie | pauline_gibson3@gmail.com | Deanboro | Inactive | $496.23 |
| Odessa Hauck | florence.graham21@yahoo.com | Layton | Active | $1,101.48 |
| Grant O'Hara | shawn.rodriguez36@hotmail.com | Nellaview | Active | $456.60 |
| Gladys Schoen | liliane51@yahoo.com | New Matthewmouth | Inactive | $682.23 |
| George Bruen | rebecca.miller@hotmail.com | Lehnerstead | Active | $426.05 |
| Letitia Greenfelder | crystel.jaskolski81@gmail.com | Carrollton | Active | $874.45 |
| Jacob Ward | malvina_lebsack@yahoo.com | Bowie | Active | $710.06 |
| Afton Cole | vernice_kertzmann@gmail.com | Howardfield | Active | $747.53 |
| Rosie Heaney | derek.gulgowski96@yahoo.com | South Valentina | Inactive | $431.69 |
| Total | $11,548.66 | |||
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 |