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 | $826.49 |
| INV002 | Paid | PayPal | $662.06 |
| INV003 | Paid | Credit Card | $608.39 |
| INV004 | Paid | PayPal | $897.45 |
| INV005 | Paid | PayPal | $485.57 |
| INV006 | Pending | PayPal | $851.09 |
| INV007 | Unpaid | Credit Card | $302.89 |
| Total | $4,633.94 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lionel Streich | Product Accounts Developer | lionel.streich80@hotmail.com | Viewer | |
| Diana Kohler | Chief Configuration Consultant | diana_kohler@yahoo.com | Member | |
| Elizabeth Keebler | Principal Security Officer | elizabeth.keebler@hotmail.com | Viewer | |
| Lowell Kuhn | Global Response Analyst | lowell.kuhn57@yahoo.com | Admin | |
| Carmen Predovic | Direct Operations Assistant | carmen_predovic@yahoo.com | Member | |
| Sylvia Dooley | Senior Security Developer | sylvia.dooley50@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 |
|---|---|---|
Eddie Kulas Dynamic Research Coordinator eddie.kulas40@gmail.com | Admin | |
Mathew Turner Regional Brand Designer mathew.turner65@gmail.com | Viewer | |
Damon Luettgen Chief Communications Supervisor damon.luettgen@hotmail.com | Admin | |
Tanya Kiehn Corporate Accountability Producer tanya_kiehn93@gmail.com | Viewer | |
Geo Windler Dynamic Brand Engineer geo.windler@gmail.com | Member | |
Marie Morar District Marketing Strategist marie.morar@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Odell Stokes Lead Program Liaison odell.stokes@hotmail.com | Member | |
Josiane Larkin International Response Engineer josiane.larkin87@hotmail.com | Member | |
Yoshiko Funk Human Accountability Coordinator yoshiko.funk85@gmail.com | Member | |
Marshall Turcotte District Solutions Producer marshall_turcotte@gmail.com | Admin | |
Kristi Cassin Regional Identity Analyst kristi.cassin@yahoo.com | Member | |
Rogelio Harvey Direct Accountability Officer rogelio.harvey@yahoo.com | Admin | |
Breana Towne Forward Infrastructure Associate breana.towne@gmail.com | Admin | |
Eliezer Hayes Investor Web Architect eliezer.hayes75@yahoo.com | Viewer | |
Kristi Beier Product Research Specialist kristi.beier@gmail.com | Viewer | |
Bradley Lowe Principal Assurance Orchestrator bradley.lowe22@yahoo.com | Member | |
Simeon Mayert Human Directives Manager simeon.mayert27@yahoo.com | Admin | |
Archie Huels Internal Group Manager archie_huels@hotmail.com | Member | |
Claude Upton Global Accounts Orchestrator claude_upton@gmail.com | Viewer | |
Kathryn Herman Corporate Factors Agent kathryn_herman25@gmail.com | Admin | |
Andres Witting Future Brand Associate andres.witting25@yahoo.com | Admin | |
Clark Runolfsson Internal Web Assistant clark.runolfsson@yahoo.com | Admin | |
Essie Schmidt Human Optimization Specialist essie.schmidt33@yahoo.com | Viewer | |
Cora Prohaska Chief Paradigm Developer cora.prohaska16@yahoo.com | Viewer | |
Tamara Auer International Assurance Consultant tamara_auer44@hotmail.com | Admin | |
Adelle Stiedemann Lead Mobility Coordinator adelle_stiedemann17@yahoo.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 | |
|---|---|---|---|---|
| Geraldine Strosin | vivianne_skiles@yahoo.com | Braun-Buckridgeboro | Active | $91.25 |
| Mr. Olin Stracke | moriah_rodriguez@gmail.com | Deannaburgh | Inactive | $123.58 |
| Darla Cartwright DVM | cynthia_jones38@gmail.com | Carrollburgh | Inactive | $114.09 |
| Ivy Jacobs | marcos15@gmail.com | Fort Rufuston | Inactive | $360.51 |
| Harry Rutherford II | joy22@yahoo.com | San Francisco | Inactive | $874.49 |
| Total | $1,563.92 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rory Vandervort @mable69 | arnold_mayert29@yahoo.com | Bellcester | Inactive | $241.74 |
Nettie Tremblay @vida79 | krystal_walter@hotmail.com | New Eden | Active | $22.97 |
Vincent Homenick @clifton_daniel80 | clarissa18@yahoo.com | Fort Tomaston | Inactive | $896.48 |
Ms. Jarrett Ernser @doug.oreilly | clarabelle.hudson@hotmail.com | Salina | Inactive | $132.95 |
Cristian Baumbach @spencer_hauck54 | marjory_thompson@yahoo.com | Lake Johanna | Active | $1,038.30 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Winston Durgan | anahi_crona@yahoo.com | East Manuelland | Active | $390.67 |
| Doyle Cronin-Watsica | joaquin.prohaska@gmail.com | Eveshire | Inactive | $381.05 |
| Darlene Kertzmann-Romaguera | gussie.cormier76@gmail.com | East Anne | Inactive | $20.89 |
| Melba Kozey | david.deckow81@yahoo.com | East Anthonymouth | Active | $282.62 |
| Frankie Jones II | joy_rice70@yahoo.com | Port Paulineport | Active | $692.52 |
| Total | $1,767.75 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darryl Daugherty | miranda19@gmail.com | Darrelshire | Active | $328.74 |
| Buck Walsh | liam63@yahoo.com | Riverton | Inactive | $230.55 |
| Makenna O'Keefe I | george.heidenreich@yahoo.com | Carson | Active | $778.81 |
| Enrique Simonis | walter_lakin@yahoo.com | Lake Audraland | Active | $1,063.45 |
| Rose O'Kon-Feeney | ryann_wiza@hotmail.com | North Alejandro | Inactive | $504.71 |
| Total | $2,906.26 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Garrett Hayes | nikolas_stokes@hotmail.com | East Sandraburgh | Inactive | $528.51 |
| Rafael Harber | janice_frami41@hotmail.com | East Kavonburgh | Inactive | $255.45 |
| Marjory Kertzmann | michele_will@gmail.com | Lake Anitashire | Active | $134.40 |
| Coby Walker | thurman10@hotmail.com | Kissimmee | Inactive | $473.10 |
| Marie Reinger DDS | charlotte69@yahoo.com | East Timmyfort | Inactive | $789.72 |
| Total | $2,181.18 | |||
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 | ||
|---|---|---|---|---|---|
| Asa Orn | roxane.kulas43@gmail.com | Grand Rapids | Inactive | $1,110.33 | |
| Lela Kertzmann | homer62@yahoo.com | Fort Abrahamboro | Active | $488.52 | |
| Eduardo Lindgren | kim33@yahoo.com | Treverborough | Active | $578.11 | |
| Alyce Gottlieb | dayne.steuber40@gmail.com | Fort Davionside | Active | $1,169.65 | |
| Domingo Crooks | maybelle72@yahoo.com | East Alexandrea | Inactive | $1,182.10 | |
| Total | $4,528.71 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Marcel Harber | hattie_schulist@hotmail.com | Murraystead | Inactive | $1,093.18 | |
| Deborah McKenzie | flora71@gmail.com | Keeblerborough | Active | $871.96 | |
| Thad Hane | harmony.nienow57@yahoo.com | North Bethesda | Inactive | $972.46 | |
| Aisha Dickinson | darla_yundt52@hotmail.com | Fritsch-Cruickshankhaven | Active | $524.58 | |
| Barbara Shanahan | neal49@gmail.com | Brekkebury | Inactive | $1,160.41 | |
| Total | $4,622.59 | ||||
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 | |
|---|---|---|---|---|
| Kaley Armstrong | samantha.ledner41@hotmail.com | Dennisstad | Active | $289.70 |
| Juvenal West | hilbert64@hotmail.com | North Eulahville | Inactive | $781.13 |
| Sherman Bednar | van96@yahoo.com | South Ariannaview | Inactive | $725.13 |
| Jazmyn Gusikowski | gerda_jacobs@gmail.com | Henderson | Inactive | $817.47 |
| Leila Crona | philip83@yahoo.com | Fort Lynettefort | Inactive | $122.26 |
| Cameron Murray MD | jalen65@yahoo.com | Lake Alex | Active | $1,062.53 |
| Joe Bartoletti | olga.huels@hotmail.com | North Solon | Inactive | $218.05 |
| Aubrey Schaefer | jordan.gottlieb@yahoo.com | Lake Maxville | Inactive | $766.58 |
| Garrick Zboncak | giovanna_konopelski@gmail.com | Beerborough | Active | $1,013.66 |
| Norwood Parisian | melyna.friesen@hotmail.com | Kemmerbury | Active | $1,008.93 |
| Jeremy Farrell | jacob28@hotmail.com | Lake Lance | Active | $872.22 |
| Rahul Nitzsche | ally_keeling@yahoo.com | Jacquelynfort | Active | $1,018.17 |
| Adeline Will | leann_pfeffer@gmail.com | Priscillamouth | Active | $89.75 |
| Liana Feeney | renee_satterfield23@gmail.com | St. Cloud | Inactive | $522.03 |
| Mr. Alysson Lind | arno.donnelly61@hotmail.com | Audieton | Active | $336.57 |
| Total | $9,644.18 | |||
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 |