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 | Bank Transfer | $768.08 |
| INV002 | Pending | Bank Transfer | $692.80 |
| INV003 | Pending | Bank Transfer | $406.21 |
| INV004 | Unpaid | Credit Card | $616.27 |
| INV005 | Pending | PayPal | $659.73 |
| INV006 | Pending | Bank Transfer | $436.83 |
| INV007 | Unpaid | PayPal | $896.65 |
| Total | $4,476.57 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jacey Dietrich | Legacy Web Coordinator | jacey.dietrich@hotmail.com | Viewer | |
| Adolph Gerhold-Streich | National Security Producer | adolph.gerhold-streich@yahoo.com | Admin | |
| Forrest Douglas | Internal Implementation Coordinator | forrest_douglas@hotmail.com | Viewer | |
| Lola Marquardt | Customer Accounts Executive | lola_marquardt@gmail.com | Viewer | |
| Ebony Leannon | Chief Implementation Coordinator | ebony.leannon84@hotmail.com | Viewer | |
| Edna Schmitt | Principal Solutions Engineer | edna.schmitt90@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 |
|---|---|---|
Crystal Buckridge Internal Creative Director crystal.buckridge@gmail.com | Admin | |
Regina Fadel-Bogisich Investor Operations Architect regina.fadel-bogisich@yahoo.com | Admin | |
Fred Roob Global Applications Officer fred_roob4@hotmail.com | Viewer | |
Yasmeen Hettinger Chief Branding Agent yasmeen_hettinger17@gmail.com | Admin | |
Eunice Halvorson Dynamic Division Assistant eunice.halvorson65@gmail.com | Viewer | |
Michelle Hayes Central Communications Designer michelle.hayes66@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 |
|---|---|---|
Sonja Daugherty Senior Brand Supervisor sonja.daugherty@hotmail.com | Viewer | |
Dexter Lockman Customer Web Technician dexter_lockman58@hotmail.com | Viewer | |
Wilbur Hyatt Dynamic Accountability Specialist wilbur.hyatt47@yahoo.com | Member | |
Vernie Kozey Customer Applications Technician vernie.kozey@gmail.com | Admin | |
Natalie Smith Chief Brand Consultant natalie_smith8@hotmail.com | Viewer | |
Janice Zemlak Dynamic Functionality Developer janice.zemlak75@gmail.com | Viewer | |
Ethan Cronin Product Mobility Administrator ethan.cronin@hotmail.com | Admin | |
Franklin Labadie National Response Analyst franklin.labadie@yahoo.com | Admin | |
Mackenzie Doyle Forward Tactics Specialist mackenzie.doyle@gmail.com | Admin | |
Yoshiko Ward Principal Interactions Strategist yoshiko.ward41@hotmail.com | Member | |
Christine Aufderhar Chief Marketing Orchestrator christine_aufderhar64@yahoo.com | Viewer | |
Rufus Champlin Corporate Integration Technician rufus_champlin@hotmail.com | Member | |
Reid Jakubowski Customer Identity Analyst reid.jakubowski85@hotmail.com | Member | |
Betty Weber Corporate Branding Executive betty.weber@hotmail.com | Member | |
Mario Bins International Tactics Liaison mario_bins87@gmail.com | Admin | |
Brett Pfannerstill Human Group Developer brett.pfannerstill@gmail.com | Member | |
Vesta Collier Legacy Communications Consultant vesta_collier71@yahoo.com | Admin | |
Coralie Jaskolski District Accountability Supervisor coralie_jaskolski@hotmail.com | Admin | |
Santina Littel-Fritsch Human Markets Consultant santina_littel-fritsch@gmail.com | Member | |
Meaghan Hilll Customer Directives Coordinator meaghan_hilll@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 | |
|---|---|---|---|---|
| Caden Mertz | cora21@hotmail.com | Lake Elsinore | Active | $1,090.85 |
| Glenna Waelchi | reba.schaefer80@gmail.com | Ryleighview | Active | $1,198.29 |
| Regina Hand | jerry_dicki@yahoo.com | South Irving | Active | $373.67 |
| Roosevelt Hudson | fabiola.will@hotmail.com | Jacobitown | Inactive | $105.25 |
| Ryan Wiegand-Hilll | ines98@gmail.com | Grahamburgh | Inactive | $254.46 |
| Total | $3,022.52 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Jessika Nitzsche @aylin.kautzer | vernie3@hotmail.com | North Carlos | Active | $77.86 |
Kathryn Schmidt @kelley39 | larue.gottlieb13@yahoo.com | Trompfield | Inactive | $941.56 |
Dr. Zachary Lockman @priscilla.jacobs | kelley_walter2@hotmail.com | North Keltonfield | Active | $783.23 |
Lydia Senger @markus20 | william.funk@hotmail.com | Carson City | Inactive | $196.76 |
Ahmad Hettinger @abel53 | joann31@yahoo.com | Rodneycester | Active | $535.23 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Blanche Durgan | kenneth.powlowski@yahoo.com | East Napoleon | Active | $91.37 |
| Nia Herzog | jonathon.turcotte53@yahoo.com | New Grayce | Inactive | $728.99 |
| Gino Wehner | nora.jacobs@hotmail.com | New Tomshire | Active | $612.98 |
| Brenden Buckridge | reginald42@hotmail.com | Johnathanfort | Inactive | $1,125.27 |
| Carol Fadel | gordon12@yahoo.com | McLaughlinstead | Active | $476.74 |
| Total | $3,035.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Haylie Veum | louie.farrell-cummings@gmail.com | Jettboro | Active | $23.40 |
| Tommy Marquardt | rosemary.bailey@gmail.com | Ahmadmouth | Active | $421.56 |
| Gabriella Kirlin | addie76@yahoo.com | Fort Lewis | Active | $36.51 |
| Kathy Pouros | grady.runte-paucek@gmail.com | Port Brandtview | Inactive | $720.38 |
| Iris Abbott | angelina12@yahoo.com | Schaden-Williamsontown | Inactive | $630.37 |
| Total | $1,832.22 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Phil Jacobson | ted44@gmail.com | North Jalyn | Inactive | $358.25 |
| Christ Raynor V | julius_pfannerstill@hotmail.com | East Shari | Inactive | $4.57 |
| Dewayne Kiehn DDS | jay.herman@yahoo.com | Port Vernietown | Active | $982.34 |
| Mr. Kurt McLaughlin I | myra_batz@hotmail.com | New Emile | Inactive | $1,192.49 |
| Jessyca Jast | angelica37@gmail.com | New Emiliochester | Active | $234.79 |
| Total | $2,772.44 | |||
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 | ||
|---|---|---|---|---|---|
| Colby Champlin | hannah70@hotmail.com | Rohancester | Active | $922.42 | |
| Patty Glover | duane98@yahoo.com | Bentonville | Inactive | $512.20 | |
| Corine Larkin | joshua64@gmail.com | Lefflerborough | Active | $1,171.42 | |
| Mr. Eriberto Grant | dayana_robel-windler@hotmail.com | Waldorf | Active | $274.79 | |
| Hope Brekke | jed31@gmail.com | West Andreacester | Inactive | $432.36 | |
| Total | $3,313.19 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Levi Ferry | sadie.bergstrom@hotmail.com | Coachella | Inactive | $879.35 | |
| Joelle Wuckert-Grant | franz.rath72@hotmail.com | West Marlene | Inactive | $385.90 | |
| Neoma Trantow-Dare | shane_raynor@gmail.com | Emardbury | Active | $389.97 | |
| Ms. Marilyn Lynch | lacy89@yahoo.com | Lake Kaylaton | Active | $987.16 | |
| Allison Skiles | geneva74@gmail.com | Nonaport | Inactive | $328.41 | |
| Total | $2,970.79 | ||||
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 | |
|---|---|---|---|---|
| Geraldine Littel | robert51@yahoo.com | South Samarastead | Active | $499.45 |
| Angelo Roob | katrina21@gmail.com | Lake Joyceworth | Active | $907.74 |
| Mary King | brittany8@hotmail.com | Melodyfield | Inactive | $645.01 |
| Merlin Lueilwitz | kenneth_marquardt@gmail.com | Johnworth | Active | $956.21 |
| Enos Stiedemann-O'Conner IV | brent56@yahoo.com | Waco | Inactive | $50.70 |
| Dr. Nick Harris | vella.smitham@hotmail.com | Macejkovicfurt | Inactive | $587.99 |
| Heidi Parisian | darby.schowalter@hotmail.com | Bentonville | Inactive | $190.39 |
| Clarence Sauer | myra22@hotmail.com | Henrietteside | Inactive | $718.69 |
| Donnie Brakus | leanna84@hotmail.com | Emeliefield | Inactive | $874.10 |
| Kara Schamberger | rosamond45@hotmail.com | Vickiburgh | Inactive | $264.48 |
| June Simonis | wilfrid_reinger@gmail.com | North Clovisworth | Inactive | $574.95 |
| Friedrich O'Conner | ebony_watsica@gmail.com | Caseytown | Inactive | $1,133.51 |
| Dora Marquardt | faith.weissnat-conroy@hotmail.com | Hesselville | Inactive | $702.71 |
| Stephen Wuckert | liliana79@yahoo.com | Bettyhaven | Active | $218.66 |
| Miss Jo Tromp | colin1@hotmail.com | Loismouth | Active | $204.61 |
| Total | $8,529.20 | |||
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 |