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 | $377.97 |
| INV002 | Pending | Bank Transfer | $843.29 |
| INV003 | Pending | PayPal | $301.73 |
| INV004 | Unpaid | Credit Card | $247.94 |
| INV005 | Unpaid | Credit Card | $192.04 |
| INV006 | Pending | Bank Transfer | $526.42 |
| INV007 | Pending | Bank Transfer | $310.61 |
| Total | $2,800.00 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kolby Kessler | Product Markets Supervisor | kolby.kessler86@gmail.com | Admin | |
| Gabriel Murray | Customer Factors Assistant | gabriel_murray33@gmail.com | Member | |
| Patsy Lynch-Reinger | Principal Operations Liaison | patsy.lynch-reinger@hotmail.com | Viewer | |
| Alexanne Kautzer | National Implementation Strategist | alexanne_kautzer9@hotmail.com | Viewer | |
| Maryann Boyer | Principal Security Director | maryann_boyer32@gmail.com | Viewer | |
| Brown Kunze | Dynamic Solutions Engineer | brown_kunze@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 |
|---|---|---|
Karla Kuphal Customer Mobility Developer karla_kuphal@yahoo.com | Viewer | |
Magdalena Deckow Forward Identity Liaison magdalena.deckow48@hotmail.com | Admin | |
Wayne Schumm Investor Factors Officer wayne_schumm@yahoo.com | Member | |
Haylee Schaefer Investor Branding Officer haylee_schaefer@yahoo.com | Viewer | |
Demetris Thiel Lead Tactics Administrator demetris_thiel@yahoo.com | Member | |
Evalyn Kuhic Principal Markets Director evalyn.kuhic80@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Gustavo Deckow Principal Markets Supervisor gustavo.deckow32@yahoo.com | Viewer | |
Fernando Kling-Dooley Future Mobility Director fernando.kling-dooley@gmail.com | Viewer | |
Judith Hane Legacy Solutions Facilitator judith_hane@yahoo.com | Admin | |
Cora Simonis Chief Usability Representative cora_simonis@hotmail.com | Member | |
Fred Will Regional Accounts Officer fred.will48@yahoo.com | Viewer | |
Jacquelyn Corkery Customer Interactions Developer jacquelyn_corkery72@gmail.com | Member | |
Irma Carroll Future Infrastructure Orchestrator irma_carroll96@yahoo.com | Viewer | |
Casimer Walsh Global Group Developer casimer_walsh@gmail.com | Member | |
Verdie Thiel-Koelpin International Configuration Associate verdie_thiel-koelpin@hotmail.com | Viewer | |
Andrea Lind Customer Program Director andrea_lind@hotmail.com | Viewer | |
Shania Feeney Product Tactics Assistant shania_feeney19@yahoo.com | Viewer | |
Carolyn Mante Future Applications Facilitator carolyn.mante@hotmail.com | Member | |
Ebba Hirthe Senior Markets Liaison ebba_hirthe80@yahoo.com | Admin | |
Effie Streich Customer Program Executive effie.streich12@yahoo.com | Viewer | |
Eddie Thiel Central Implementation Associate eddie_thiel@gmail.com | Member | |
Carlos Bogan Lead Communications Liaison carlos.bogan@yahoo.com | Member | |
Lemuel Roberts International Directives Facilitator lemuel.roberts@hotmail.com | Admin | |
Mabel Collins Corporate Factors Agent mabel_collins@gmail.com | Member | |
Cody Hettinger National Accounts Agent cody.hettinger@gmail.com | Viewer | |
Jorge Considine Forward Operations Producer jorge.considine@gmail.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 | |
|---|---|---|---|---|
| Nellie Predovic | nina_lind47@gmail.com | Rufusboro | Inactive | $224.26 |
| Ellis Marks | jaydon_kautzer@yahoo.com | Jacobifurt | Active | $1,143.27 |
| Rosalee Oberbrunner | declan_steuber@hotmail.com | Lake Sigrid | Inactive | $678.70 |
| Irvin Buckridge | florence66@hotmail.com | West Ward | Active | $289.33 |
| Clifford Brekke | vivien.wunsch85@gmail.com | New Mattiefurt | Inactive | $1,121.04 |
| Total | $3,456.60 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Gretchen Towne @rogers65 | ann.konopelski70@yahoo.com | Eastvale | Inactive | $815.91 |
Oren Botsford @german98 | giuseppe_gulgowski90@yahoo.com | East Preston | Inactive | $225.23 |
Dawn Brakus-Kerluke @rick69 | cole4@gmail.com | Daxshire | Active | $820.34 |
Miss Bennett Douglas MD @taryn.dickinson34 | lindsey.bogisich74@hotmail.com | Port Estevanchester | Inactive | $999.28 |
Ivy Schuppe @tim16 | bernice75@hotmail.com | East Joanport | Active | $369.93 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Chaim Nolan II | samara_donnelly62@hotmail.com | Estrellastead | Active | $633.93 |
| Alfred Howe | eunice_ward@hotmail.com | North Winstonside | Inactive | $150.54 |
| Mr. Fredrick Halvorson I | amiya_lang8@gmail.com | Sporerside | Active | $720.76 |
| Jesse Steuber Jr. | madelyn.johns@hotmail.com | Simonistown | Inactive | $1,001.71 |
| Jon Blick | melinda_white20@hotmail.com | Houston | Active | $857.79 |
| Total | $3,364.73 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leila Willms-Wintheiser MD | kristoffer69@gmail.com | Port Marthaland | Active | $1,141.09 |
| David Deckow | robert9@gmail.com | Fort Jack | Active | $613.23 |
| Justina Grady | juliet_padberg38@hotmail.com | Kunzestead | Inactive | $479.52 |
| Mr. Russell Swift III | davonte_rodriguez@hotmail.com | Lake Laurenchester | Inactive | $1,024.63 |
| Erma Howell | miracle16@yahoo.com | Gregoryport | Inactive | $67.40 |
| Total | $3,325.87 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Russ Denesik | danny_kiehn68@gmail.com | Fort Helenland | Active | $306.71 |
| Mathew Veum II | lauriane_williamson56@gmail.com | Fort Nicoburgh | Inactive | $848.36 |
| Harriet Mraz | tami11@gmail.com | Louiehaven | Active | $1,123.26 |
| Ernestine Pollich | kimberly_cummings@yahoo.com | Rathmouth | Active | $413.19 |
| Melinda Schoen | andrew89@yahoo.com | Keenanboro | Inactive | $824.26 |
| Total | $3,515.78 | |||
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 | ||
|---|---|---|---|---|---|
| Alison Herzog | julius.christiansen@gmail.com | Lake Eddie | Active | $146.46 | |
| Myah Schroeder | ollie.streich10@hotmail.com | Stratford | Active | $626.16 | |
| Lonzo Schroeder DDS | cindy_oberbrunner50@gmail.com | West Julietown | Active | $1,049.03 | |
| Brooke Altenwerth | louise.lemke87@hotmail.com | Port Vita | Inactive | $38.42 | |
| Clarence Jacobi | marta_murazik@gmail.com | Fort Osvaldo | Inactive | $15.02 | |
| Total | $1,875.09 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bailey Kertzmann | janice73@gmail.com | Alexandria | Inactive | $79.55 | |
| Samantha Moen | randolph52@hotmail.com | North Port | Inactive | $865.22 | |
| Mr. Claudine Zboncak | lorene76@yahoo.com | East Ronfurt | Active | $707.75 | |
| Fred Mertz | roger.koelpin@gmail.com | Mertzfield | Inactive | $354.57 | |
| Heather Hane | yazmin_abbott@yahoo.com | Cummerataview | Inactive | $546.19 | |
| Total | $2,553.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 | |
|---|---|---|---|---|
| Bernadette Thiel | maybell31@hotmail.com | Oliviaview | Active | $832.73 |
| Clifford Gleichner | cielo7@hotmail.com | South Veraview | Active | $451.21 |
| Nicklaus Waters | rodrigo0@yahoo.com | Jacobicester | Active | $906.22 |
| Tim Heller | bertha.romaguera@hotmail.com | Lake Prince | Inactive | $31.88 |
| Myra Welch | marshall32@yahoo.com | Kylecester | Active | $603.56 |
| Levi Hilll | elmo60@yahoo.com | Port Luis | Active | $1,155.87 |
| Verner Dietrich | domenick38@gmail.com | Schambergerville | Active | $897.87 |
| Friedrich Gottlieb | cecilia_jacobs93@hotmail.com | Mrazton | Inactive | $486.28 |
| Guillermo Kohler | vito52@gmail.com | New Bonnieberg | Inactive | $769.60 |
| Brittany Jacobson | robyn12@hotmail.com | West Jasminestead | Inactive | $1,072.41 |
| Milan Sporer | nelson_hayes71@hotmail.com | Jerodfurt | Active | $924.94 |
| Trinity Bernier II | colin_beier55@gmail.com | New Rosinaport | Inactive | $495.35 |
| Alan Cassin Jr. | connie.feeney52@gmail.com | Ethelcester | Active | $298.01 |
| Herman Zulauf | joey.shanahan@yahoo.com | Monahaven | Inactive | $301.76 |
| Julius Hettinger I | liana54@yahoo.com | Redlands | Active | $691.81 |
| Total | $9,919.50 | |||
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 |