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 | Paid | PayPal | $280.90 |
| INV002 | Paid | Bank Transfer | $708.02 |
| INV003 | Pending | PayPal | $807.93 |
| INV004 | Unpaid | PayPal | $232.54 |
| INV005 | Unpaid | PayPal | $742.85 |
| INV006 | Paid | Credit Card | $427.46 |
| INV007 | Paid | PayPal | $377.29 |
| Total | $3,576.99 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jana Herman | Forward Applications Architect | jana.herman@hotmail.com | Viewer | |
| Florian Will | Internal Program Producer | florian_will59@gmail.com | Viewer | |
| Bradford Gusikowski | Dynamic Assurance Architect | bradford.gusikowski78@gmail.com | Viewer | |
| Glenna Terry | International Group Supervisor | glenna_terry75@gmail.com | Member | |
| Henrietta Heidenreich | National Branding Liaison | henrietta.heidenreich29@gmail.com | Admin | |
| Elmira Beahan | Human Operations Liaison | elmira_beahan@yahoo.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 |
|---|---|---|
Rose Hane Senior Solutions Consultant rose_hane@yahoo.com | Viewer | |
Buster Gleason Forward Program Technician buster_gleason@gmail.com | Member | |
Diana Grady Global Markets Executive diana.grady@hotmail.com | Viewer | |
Clotilde Sawayn Legacy Factors Liaison clotilde_sawayn@yahoo.com | Viewer | |
Corbin Franecki Product Markets Director corbin_franecki@gmail.com | Admin | |
Dixie O'Hara Dynamic Factors Liaison dixie.ohara@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 |
|---|---|---|
Jeannie Lang-Wolf Corporate Group Consultant jeannie.lang-wolf72@gmail.com | Viewer | |
Dereck Dare Senior Markets Engineer dereck.dare53@hotmail.com | Admin | |
Blanca Abbott Central Data Consultant blanca_abbott49@gmail.com | Admin | |
Regina Leffler Corporate Brand Strategist regina_leffler@yahoo.com | Viewer | |
Kadin Reinger Corporate Marketing Representative kadin_reinger18@hotmail.com | Member | |
Justin Beier Future Response Developer justin.beier@yahoo.com | Admin | |
Abel Kuhlman Internal Interactions Assistant abel.kuhlman@gmail.com | Admin | |
Jon Aufderhar National Communications Designer jon.aufderhar57@gmail.com | Member | |
Karl Cremin Future Markets Developer karl.cremin@gmail.com | Viewer | |
Mervin Oberbrunner Customer Security Technician mervin.oberbrunner15@gmail.com | Viewer | |
Maymie Pfannerstill Product Accountability Engineer maymie_pfannerstill@hotmail.com | Member | |
Garret Rau Central Accounts Specialist garret.rau42@gmail.com | Viewer | |
Pedro Kuhlman Central Branding Administrator pedro_kuhlman@hotmail.com | Admin | |
Deshaun Ward Senior Web Engineer deshaun_ward36@hotmail.com | Member | |
Lillian Considine Forward Web Planner lillian_considine@yahoo.com | Member | |
Rolando Sauer Product Identity Consultant rolando.sauer@hotmail.com | Viewer | |
Bethany Bailey Principal Security Facilitator bethany_bailey@gmail.com | Viewer | |
Vivienne Runte Human Infrastructure Orchestrator vivienne_runte84@yahoo.com | Viewer | |
Viviane Ebert Dynamic Brand Representative viviane_ebert31@yahoo.com | Member | |
Estelle Turcotte National Tactics Specialist estelle.turcotte@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 | |
|---|---|---|---|---|
| Vicki Hudson | rosetta_murray73@hotmail.com | San Ramon | Active | $265.69 |
| Marcia McClure | marcos_little@hotmail.com | East Magnoliabury | Inactive | $783.74 |
| Vicki Reinger-Kulas | kelley.bednar@gmail.com | Fort Marjorie | Active | $620.92 |
| Abdiel Koch | bailey.auer@gmail.com | Lakincester | Inactive | $367.20 |
| Albert Corkery | gerard64@yahoo.com | West Tomtown | Inactive | $423.64 |
| Total | $2,461.19 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Horace Simonis @brandyn.blick | andrea_tremblay@yahoo.com | West Lelia | Inactive | $864.64 |
Hudson Hickle @dan_oberbrunner | telly.rohan74@yahoo.com | New Christine | Active | $50.87 |
Abel Weimann @cory.mohr27 | tracy_graham@yahoo.com | New Tina | Inactive | $881.25 |
Gregg O'Reilly @darnell_hyatt2 | jean_deckow@hotmail.com | Torpside | Inactive | $450.28 |
Mr. Arielle Dickinson DDS @rita_dibbert14 | nash.runolfsdottir72@yahoo.com | West Flavie | Inactive | $199.67 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Daniela Abernathy | rita_jenkins@yahoo.com | Yostview | Active | $991.62 |
| Haleigh Kuhlman | talon.haag@hotmail.com | New Reed | Inactive | $146.14 |
| Veronica Hilpert | rachelle.olson@gmail.com | Cortneyfort | Inactive | $753.31 |
| Seth Greenfelder | guy.von36@yahoo.com | Elijahburgh | Inactive | $923.25 |
| Christina O'Connell | traci74@gmail.com | Tamarac | Active | $535.61 |
| Total | $3,349.93 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Joan Mueller | brandon_sanford@yahoo.com | West Ransombury | Active | $643.60 |
| Leta Crist | myrl.metz80@hotmail.com | Dejuanmouth | Inactive | $161.35 |
| Mireya McKenzie | peter.lehner3@gmail.com | Debbieborough | Inactive | $326.41 |
| Sherry Lynch | joyce.koch@gmail.com | Rosettahaven | Active | $13.15 |
| Henry Powlowski | jenny_miller@gmail.com | Coachella | Inactive | $508.22 |
| Total | $1,652.73 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cleo Hackett DVM | ernie_bahringer@gmail.com | Jordiburgh | Inactive | $557.01 |
| Kristina Haley | daisy.gibson91@gmail.com | Goodwinboro | Inactive | $144.86 |
| Clyde Rempel | mandy_thompson@hotmail.com | Lake Tylerbury | Inactive | $1,017.22 |
| Scott Marquardt | watson42@gmail.com | Port Juwanshire | Active | $621.64 |
| Mr. Elijah Kuhlman MD | jerald.hansen@hotmail.com | Stiedemannstad | Inactive | $445.03 |
| Total | $2,785.76 | |||
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 | ||
|---|---|---|---|---|---|
| Floyd Schinner | madeline.barrows@yahoo.com | North Chaz | Inactive | $647.48 | |
| Kristy Jerde | ralph.grady61@gmail.com | Edinburg | Inactive | $1,178.65 | |
| Cierra Orn | kelton_kshlerin@gmail.com | East Hectorcester | Active | $264.90 | |
| Cordelia Funk DDS | misty.shields-willms@hotmail.com | Dunwoody | Inactive | $353.51 | |
| Mallory Douglas Sr. | dejon.gleason@hotmail.com | Curtisstead | Active | $854.34 | |
| Total | $3,298.88 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ms. Esperanza Bayer | lora.tremblay@hotmail.com | East Jesse | Inactive | $492.87 | |
| Malcolm McKenzie | darion_beahan@gmail.com | Wintheiserville | Active | $663.06 | |
| Lenore Veum-Monahan | keegan.ferry85@gmail.com | Suzanneshire | Active | $137.60 | |
| Douglas Runolfsdottir-Gibson | carol_goldner@gmail.com | Fontana | Inactive | $1,143.13 | |
| Edna Jast | jefferey_okeefe27@gmail.com | Donnellyport | Inactive | $46.97 | |
| Total | $2,483.63 | ||||
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 | |
|---|---|---|---|---|
| Shanelle Funk | natalie.hills@yahoo.com | Lake Henri | Active | $138.63 |
| Orlando Bayer | dolly53@gmail.com | Walkercester | Active | $210.79 |
| Shelia Kilback | jovani42@hotmail.com | Hyattboro | Active | $801.64 |
| Eileen Pfannerstill | esteban52@gmail.com | Marysville | Inactive | $770.26 |
| Mrs. Winifred Schaefer | elsie_ohara-simonis19@hotmail.com | Davis | Active | $582.20 |
| Emmet Rodriguez | herbert81@hotmail.com | Greenmouth | Active | $494.35 |
| Jensen Brown | lena_donnelly21@yahoo.com | Klockoville | Inactive | $690.76 |
| Murphy Bernier | lionel_rosenbaum75@gmail.com | Garyborough | Inactive | $173.46 |
| Rene Conroy | ted48@gmail.com | Cleveland | Inactive | $444.70 |
| Virgil Hahn | macy.feil73@yahoo.com | East Shayna | Active | $215.64 |
| Shelia Hauck | cindy86@yahoo.com | Chadrickchester | Active | $668.24 |
| Wellington Shields III | demarco_lakin7@hotmail.com | Ziemannbury | Inactive | $81.61 |
| Jonas Olson | mavis_braun81@gmail.com | Apex | Active | $551.47 |
| Colin Durgan | joseph99@yahoo.com | MacGyvercester | Active | $1,151.07 |
| Hester Champlin | elda_abbott86@yahoo.com | Cedar Rapids | Active | $806.47 |
| Total | $7,781.29 | |||
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 |