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 | Unpaid | PayPal | $459.45 |
| INV002 | Pending | PayPal | $494.11 |
| INV003 | Unpaid | Credit Card | $282.75 |
| INV004 | Paid | PayPal | $654.69 |
| INV005 | Unpaid | Bank Transfer | $843.67 |
| INV006 | Paid | PayPal | $915.39 |
| INV007 | Paid | PayPal | $787.81 |
| Total | $4,437.87 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Barbara Medhurst | Product Quality Officer | barbara_medhurst@gmail.com | Member | |
| Geoffrey Legros | Senior Metrics Planner | geoffrey_legros@hotmail.com | Member | |
| Stanley Auer | Corporate Accounts Analyst | stanley_auer61@yahoo.com | Admin | |
| Elvie Hamill | Investor Tactics Engineer | elvie.hamill39@hotmail.com | Viewer | |
| Jacinto Hahn | Future Infrastructure Architect | jacinto.hahn35@hotmail.com | Admin | |
| Marlon Witting | National Program Strategist | marlon.witting58@yahoo.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ezekiel Ebert Customer Intranet Assistant ezekiel_ebert@yahoo.com | Viewer | |
Lori Ratke-Nitzsche Regional Assurance Officer lori.ratke-nitzsche@yahoo.com | Admin | |
Breana Gutkowski Product Accountability Orchestrator breana_gutkowski40@yahoo.com | Admin | |
Orie Luettgen International Applications Architect orie.luettgen@hotmail.com | Admin | |
Eleanor Koepp Chief Directives Liaison eleanor.koepp@gmail.com | Admin | |
Clementine Auer District Program Associate clementine.auer@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Shyann Mann-Pagac Forward Communications Assistant shyann.mann-pagac55@gmail.com | Member | |
Sigurd Zieme Principal Accounts Planner sigurd.zieme7@hotmail.com | Viewer | |
Jayne Walker Corporate Usability Executive jayne.walker9@yahoo.com | Member | |
Virgil Wiza Regional Assurance Strategist virgil.wiza@yahoo.com | Viewer | |
Juliet Paucek Internal Applications Agent juliet_paucek@hotmail.com | Member | |
Leora Hessel National Implementation Engineer leora.hessel45@hotmail.com | Admin | |
Matt Ruecker Dynamic Marketing Orchestrator matt_ruecker@gmail.com | Member | |
Doyle Sipes Future Solutions Coordinator doyle.sipes47@yahoo.com | Admin | |
Clinton Corkery Central Brand Liaison clinton.corkery@yahoo.com | Member | |
Della Predovic District Paradigm Consultant della_predovic@yahoo.com | Admin | |
Josh Dach Global Operations Assistant josh.dach47@hotmail.com | Member | |
Sue Veum National Research Director sue_veum@yahoo.com | Viewer | |
Helen Roberts Lead Response Architect helen_roberts@yahoo.com | Member | |
Mercedes Bernhard Customer Marketing Coordinator mercedes_bernhard71@hotmail.com | Admin | |
Howard Beer Future Usability Executive howard_beer4@yahoo.com | Admin | |
Lauren Kulas Regional Implementation Supervisor lauren_kulas57@gmail.com | Viewer | |
Brittany Runolfsdottir Corporate Metrics Designer brittany_runolfsdottir56@yahoo.com | Admin | |
Davin Kuvalis Legacy Accounts Associate davin.kuvalis@yahoo.com | Member | |
Randy Jenkins National Identity Representative randy_jenkins56@yahoo.com | Admin | |
Celia Anderson Human Optimization Consultant celia_anderson@yahoo.com | Viewer |
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 | |
|---|---|---|---|---|
| Hilma Hudson-Spencer PhD | ernesto.huel@gmail.com | Silasville | Inactive | $904.01 |
| Rose Hudson | kamren.reichert79@gmail.com | New Peggyburgh | Active | $331.69 |
| Nathen Hudson | luther.zemlak98@gmail.com | Virginia Beach | Inactive | $584.09 |
| Lempi Hermann | flavio64@yahoo.com | Lehigh Acres | Active | $11.91 |
| Mr. Rudy Sporer | zora35@yahoo.com | Orlando | Inactive | $581.29 |
| Total | $2,412.99 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mittie Oberbrunner-Skiles @andrew.yost | minnie_crooks@gmail.com | Port Katelin | Inactive | $2.43 |
Celia Robel @iris.morar41 | amir64@gmail.com | North Kennyborough | Inactive | $1,118.00 |
Adela Dickens II @thurman_mclaughlin | paolo56@gmail.com | Danielfurt | Active | $74.19 |
Loretta Bogisich @kailyn76 | evert.hackett51@yahoo.com | Dellaton | Active | $1,062.20 |
Neva Grant @stacey_quitzon91 | geovanni_kutch19@hotmail.com | Littletown | Inactive | $98.87 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Liliana Dicki | shawna_mcdermott-kuphal@gmail.com | Juliusport | Active | $1,082.51 |
| Mindy Mraz | renee_larkin46@yahoo.com | Murray | Active | $952.52 |
| Blanca Kertzmann | shawna9@gmail.com | Richmond | Inactive | $470.04 |
| Dr. Alexa Schowalter | mike65@yahoo.com | Robynfort | Active | $884.07 |
| Clifton Welch | vanessa_friesen-collier14@hotmail.com | West Lorenechester | Active | $1,005.14 |
| Total | $4,394.28 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Glenn Gorczany Jr. | karelle85@hotmail.com | North Desireeshire | Active | $356.97 |
| Ocie Becker | morton_reichel@hotmail.com | Schoenport | Inactive | $262.77 |
| Whitney Weber | gregg89@hotmail.com | Port Theresafurt | Active | $834.93 |
| Mr. Frederique Durgan | helen43@hotmail.com | Bethesda | Active | $1,151.97 |
| Georgiana Greenfelder | patrick23@yahoo.com | Meridian | Active | $557.07 |
| Total | $3,163.71 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Emily Keebler Jr. | gilberto_weissnat44@yahoo.com | South Elmiraboro | Active | $585.33 |
| Odessa Feeney | herta84@gmail.com | Port Amirton | Inactive | $1,190.66 |
| Melissa Fadel | bethany.lubowitz@gmail.com | New Joannefield | Inactive | $330.37 |
| Kennedi Effertz | toni26@gmail.com | Lake Forest | Inactive | $217.96 |
| Kiera Mueller | francesco.donnelly@hotmail.com | Lake Marlon | Inactive | $457.19 |
| Total | $2,781.51 | |||
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 | ||
|---|---|---|---|---|---|
| Faye Harvey | sydni92@yahoo.com | Arcadia | Inactive | $1,173.16 | |
| Silvia Balistreri | ofelia_douglas19@gmail.com | Ryanshire | Active | $376.22 | |
| Joey Halvorson | clement_shanahan@yahoo.com | Stokeston | Active | $279.23 | |
| Jerel Runolfsson | quincy_lehner3@gmail.com | Clarksville | Inactive | $80.81 | |
| Barry Ankunding | valerie72@hotmail.com | East Violetteview | Active | $1,125.06 | |
| Total | $3,034.48 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Todd Sipes | bridgette33@gmail.com | Severn | Active | $721.61 | |
| Mr. Dominick Hoppe | patricia92@gmail.com | Joannefield | Active | $422.85 | |
| Bernice Huel-Block | jacquelyn_will-denesik53@gmail.com | Fort Taylor | Active | $1,031.92 | |
| Grace Moen | valerie_metz44@gmail.com | Garrettcester | Inactive | $340.68 | |
| Elias Robel-Mosciski | dan_nikolaus76@gmail.com | Latoyafort | Inactive | $900.81 | |
| Total | $3,417.87 | ||||
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 | |
|---|---|---|---|---|
| Eloise Wehner | warren34@yahoo.com | Port Eleanoratown | Inactive | $546.52 |
| Shawn Treutel | charles77@hotmail.com | Metairie | Inactive | $1,028.72 |
| Manuel Fritsch | guillermo67@yahoo.com | Crystalside | Inactive | $296.51 |
| Kale McCullough | jonathan.feil@yahoo.com | Federicoside | Inactive | $179.09 |
| Bo Conn | cary.aufderhar@gmail.com | Claudiaport | Active | $150.07 |
| Annette Murphy | dewey87@hotmail.com | Ratkeworth | Active | $338.27 |
| Blanche Morar | lucinda.hills50@yahoo.com | West Brianshire | Active | $262.93 |
| Myrtis Lemke | dax19@hotmail.com | East Bethanybury | Active | $354.71 |
| Marco Schuppe | skylar_feil45@yahoo.com | South Luisfield | Active | $59.03 |
| Joel Legros | morris51@hotmail.com | San Francisco | Active | $388.94 |
| Mr. Judah Schuster | rosalie.reilly49@gmail.com | Torphyboro | Inactive | $1,174.70 |
| Rylee Schamberger-Nitzsche | clement22@gmail.com | Dougland | Active | $175.85 |
| Dr. Yvette Maggio I | edith.kuphal@hotmail.com | East Cassiestad | Active | $566.90 |
| Jacinto Leuschke | drew.leannon@yahoo.com | Ernestochester | Inactive | $52.32 |
| Joanna Waelchi | hazel.roob88@hotmail.com | Marshallfield | Inactive | $1,187.11 |
| Total | $6,761.67 | |||
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 |