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 | Bank Transfer | $272.57 |
| INV002 | Unpaid | PayPal | $378.25 |
| INV003 | Pending | PayPal | $588.86 |
| INV004 | Unpaid | Credit Card | $995.90 |
| INV005 | Unpaid | PayPal | $256.00 |
| INV006 | Pending | PayPal | $301.02 |
| INV007 | Pending | Credit Card | $989.06 |
| Total | $3,781.66 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Serenity Klein | Chief Tactics Coordinator | serenity.klein28@hotmail.com | Admin | |
| Sierra Bailey | Chief Marketing Director | sierra_bailey@yahoo.com | Member | |
| Dusty Kertzmann | Human Metrics Planner | dusty.kertzmann@yahoo.com | Admin | |
| Karen Ziemann | Regional Factors Executive | karen.ziemann@gmail.com | Admin | |
| Tommy Ferry | Dynamic Integration Administrator | tommy_ferry55@yahoo.com | Viewer | |
| Kim Collins | Corporate Research Associate | kim.collins@yahoo.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 |
|---|---|---|
Johanna Larson District Accounts Engineer johanna.larson@gmail.com | Admin | |
Vella Predovic Legacy Solutions Designer vella_predovic@yahoo.com | Admin | |
Greg Wunsch Investor Optimization Designer greg_wunsch62@hotmail.com | Member | |
Astrid Ortiz Global Interactions Developer astrid_ortiz58@gmail.com | Viewer | |
Lola Wisoky Global Interactions Specialist lola_wisoky37@hotmail.com | Member | |
Logan Wyman Lead Integration Executive logan.wyman@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Hulda Abernathy Dynamic Optimization Consultant hulda_abernathy@gmail.com | Viewer | |
Estelle Pagac Central Accounts Technician estelle.pagac@gmail.com | Member | |
Emory Bayer Legacy Markets Representative emory_bayer@yahoo.com | Admin | |
Allison Gibson Regional Group Director allison.gibson15@yahoo.com | Member | |
Darrin Will Chief Communications Technician darrin.will2@gmail.com | Viewer | |
Maximo Cassin Central Paradigm Associate maximo_cassin79@hotmail.com | Member | |
Tyreek Ratke Investor Security Strategist tyreek.ratke67@yahoo.com | Viewer | |
Edith Predovic Dynamic Integration Agent edith.predovic@hotmail.com | Viewer | |
Erika O'Conner Future Metrics Analyst erika.oconner@hotmail.com | Member | |
Elyssa Hahn Customer Web Executive elyssa.hahn@yahoo.com | Admin | |
Katie Conroy National Branding Planner katie.conroy31@hotmail.com | Viewer | |
Abe Kohler Lead Accounts Specialist abe.kohler@hotmail.com | Admin | |
Winston Hodkiewicz International Integration Manager winston_hodkiewicz80@yahoo.com | Admin | |
Fred Roob International Operations Architect fred_roob64@hotmail.com | Viewer | |
Sheldon Jacobi Dynamic Response Associate sheldon_jacobi44@gmail.com | Viewer | |
Edmund Steuber Global Implementation Liaison edmund_steuber@yahoo.com | Member | |
Bennett Herzog Central Markets Planner bennett_herzog@hotmail.com | Admin | |
Phyllis Thompson Forward Integration Director phyllis.thompson@gmail.com | Member | |
Frank Nienow Principal Integration Analyst frank_nienow7@yahoo.com | Member | |
Eugene Rutherford Regional Brand Coordinator eugene.rutherford83@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 | |
|---|---|---|---|---|
| Karli Pouros V | pauline.casper65@yahoo.com | Glenview | Active | $35.94 |
| Archibald Moen | cesar48@yahoo.com | Waynebury | Active | $92.85 |
| Jessyca Lehner | winona_anderson42@hotmail.com | Riverside | Active | $849.21 |
| Vicki Jakubowski | koby65@gmail.com | North Tracestead | Inactive | $412.83 |
| Alton Bosco DDS | ronnie73@yahoo.com | Sandy | Inactive | $626.18 |
| Total | $2,017.01 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ms. Melody Haag @noah_kling | antonia84@yahoo.com | East Felixshire | Active | $594.65 |
Brad Homenick @stephen.torp37 | harmony_treutel@hotmail.com | Fort Ralphfield | Active | $816.76 |
Retta Cummerata @clinton.upton57 | geovany81@gmail.com | South Kyleborough | Active | $551.16 |
Spencer Bechtelar @kathleen.hand24 | joanne48@gmail.com | Fort Seamusfurt | Active | $341.38 |
Billie Morissette @caesar.ortiz43 | judy_reichert@gmail.com | Auer-Collierbury | Inactive | $88.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dorothy Kertzmann | janice.lowe@gmail.com | Luellaburgh | Active | $1,129.52 |
| Lela Nitzsche | herman_weimann36@yahoo.com | South Vickiefield | Active | $635.64 |
| Stacey Grant | concepcion_howe@hotmail.com | Brandonport | Active | $69.70 |
| Jacob McClure MD | gustavo83@hotmail.com | Gleasonfield | Active | $543.27 |
| Timothy Pfannerstill | silvia81@gmail.com | Jonesburgh | Active | $834.96 |
| Total | $3,213.09 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Name Moen | stephany68@gmail.com | Fountain Valley | Active | $326.15 |
| Norma Rutherford | emma_cremin35@yahoo.com | Ritchieville | Inactive | $121.69 |
| Maximo Kshlerin | santiago_waelchi75@yahoo.com | Gutmannside | Active | $312.98 |
| Essie Kuvalis | arnold.lakin61@yahoo.com | Walshfort | Inactive | $317.75 |
| Ms. Sonia Hilll | everett64@hotmail.com | Vineland | Inactive | $322.79 |
| Total | $1,401.36 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kate Becker I | norman73@gmail.com | Leolashire | Active | $537.77 |
| Elian Kertzmann | edmund_bradtke@hotmail.com | Fort Lorenzboro | Active | $71.50 |
| Zetta Goldner | spencer.leannon62@yahoo.com | Nienowland | Inactive | $59.86 |
| Vance Raynor-Gleason | kiley_huel37@hotmail.com | New Cecilecester | Active | $1,162.32 |
| Ms. Layne Schoen | morris_hansen85@gmail.com | Bartolettihaven | Active | $973.67 |
| Total | $2,805.12 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Devin Trantow V | iva_heller@yahoo.com | Christbury | Active | $409.97 | |
| Carlie Howe | helene.keeling50@gmail.com | East Cecil | Inactive | $164.35 | |
| Mafalda Williamson | douglas_corkery@gmail.com | West Louis | Active | $35.57 | |
| Nestor Kris | olga.wolff23@hotmail.com | Berkeley | Inactive | $1,005.33 | |
| Suzanne Aufderhar | merle.crona98@yahoo.com | West Kierahaven | Inactive | $509.13 | |
| Total | $2,124.35 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ruth Satterfield | reyna.stamm-barrows@hotmail.com | Caldwell | Active | $11.64 | |
| Dexter Walsh III | salvador_veum@gmail.com | Spencerton | Inactive | $435.05 | |
| Silvia Runolfsson | dolores.bashirian14@yahoo.com | Wildermanshire | Inactive | $742.92 | |
| Elijah Bogisich | esta98@gmail.com | Pearlburgh | Active | $294.44 | |
| Dr. Javier Purdy | terrance.zulauf60@yahoo.com | Frankville | Active | $305.23 | |
| Total | $1,789.28 | ||||
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 | |
|---|---|---|---|---|
| Mr. Luis Raynor | norma.stark98@yahoo.com | Lake Axelfort | Active | $111.69 |
| Lyda Robel | maggie82@hotmail.com | St. Cloud | Inactive | $37.08 |
| Flora Gleason | mona95@hotmail.com | Port Valerieworth | Inactive | $447.72 |
| Dr. Brandy Walker | zackery31@yahoo.com | Kenosha | Inactive | $797.49 |
| Dr. Jarvis Huels | loren.feil71@hotmail.com | Kohlercester | Inactive | $917.78 |
| Oliver Barrows | maegan57@hotmail.com | Fort Carlland | Active | $639.31 |
| Alexandrine Lockman | lesly88@gmail.com | Todfield | Inactive | $834.25 |
| Kayla Roob | margret_ankunding-bechtelar@gmail.com | Allen | Inactive | $87.33 |
| Nash Kiehn | jacey_satterfield@hotmail.com | South Owenstead | Active | $651.16 |
| Verona Marks | harry.rath@yahoo.com | Heloisebury | Active | $152.79 |
| Dayna Hilpert | daryl_romaguera76@hotmail.com | Port Delfinaboro | Active | $449.69 |
| Clifton Rempel | dave9@hotmail.com | North Natalieside | Inactive | $128.80 |
| Tanya Emard | eldon_bartoletti@hotmail.com | West Tommie | Active | $250.52 |
| Elias Langworth | homer.ledner@hotmail.com | Mohrton | Active | $930.77 |
| Lela Dicki | larry_franecki@hotmail.com | Port Merleville | Inactive | $406.03 |
| Total | $6,842.41 | |||
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 |