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 | PayPal | $898.97 |
| INV002 | Unpaid | Bank Transfer | $546.47 |
| INV003 | Paid | Bank Transfer | $165.20 |
| INV004 | Paid | PayPal | $207.97 |
| INV005 | Pending | Bank Transfer | $437.67 |
| INV006 | Pending | PayPal | $880.61 |
| INV007 | Pending | PayPal | $103.29 |
| Total | $3,240.18 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jaylen Reichert | Dynamic Identity Administrator | jaylen.reichert19@gmail.com | Viewer | |
| Tonya Bogisich | District Response Analyst | tonya_bogisich@yahoo.com | Viewer | |
| Amely Hagenes | Forward Tactics Specialist | amely_hagenes@hotmail.com | Viewer | |
| Marian Deckow | Regional Solutions Assistant | marian.deckow91@yahoo.com | Viewer | |
| Margaret Quitzon | Global Intranet Agent | margaret_quitzon@yahoo.com | Viewer | |
| Loraine Schuppe | Investor Applications Liaison | loraine.schuppe@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Cody Johnson Customer Factors Administrator cody_johnson@hotmail.com | Viewer | |
Lonnie Olson Human Brand Officer lonnie.olson70@yahoo.com | Member | |
Noemi Maggio Senior Paradigm Officer noemi.maggio1@gmail.com | Admin | |
Alton Hirthe Corporate Intranet Analyst alton.hirthe96@hotmail.com | Member | |
Jasper Kassulke International Metrics Executive jasper.kassulke58@hotmail.com | Member | |
Ludie Mayer Principal Integration Specialist ludie.mayer62@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Alyssa Abbott Direct Solutions Analyst alyssa.abbott28@hotmail.com | Viewer | |
Ryder Rau Corporate Quality Consultant ryder_rau@yahoo.com | Member | |
Valerie Champlin Forward Communications Developer valerie_champlin@gmail.com | Viewer | |
Lucia Lowe Dynamic Mobility Architect lucia.lowe62@hotmail.com | Member | |
Ramon Strosin Corporate Operations Engineer ramon_strosin@yahoo.com | Member | |
Reanna White Legacy Integration Specialist reanna_white@yahoo.com | Admin | |
Heidi Nitzsche Central Identity Agent heidi_nitzsche0@gmail.com | Viewer | |
Don Hayes Central Integration Officer don.hayes@gmail.com | Admin | |
Fabiola DuBuque Senior Quality Producer fabiola_dubuque68@gmail.com | Admin | |
Ethyl Smith Corporate Configuration Orchestrator ethyl_smith81@hotmail.com | Admin | |
Winnifred Bartell Forward Branding Designer winnifred_bartell@hotmail.com | Admin | |
Viola Wisozk Principal Solutions Consultant viola_wisozk47@gmail.com | Viewer | |
Ayden Lind Principal Paradigm Supervisor ayden.lind@gmail.com | Admin | |
Beverly Carter Human Web Architect beverly_carter@yahoo.com | Admin | |
Leticia Wisoky Legacy Markets Executive leticia_wisoky33@gmail.com | Viewer | |
Monica Lang Customer Implementation Facilitator monica_lang98@hotmail.com | Admin | |
Kristina Emard Future Configuration Architect kristina.emard@gmail.com | Admin | |
Kayli Turcotte Chief Interactions Associate kayli.turcotte38@yahoo.com | Member | |
Fae Greenfelder Forward Integration Orchestrator fae_greenfelder28@hotmail.com | Admin | |
Kristy Pfannerstill Direct Program Engineer kristy.pfannerstill@gmail.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 | |
|---|---|---|---|---|
| Rosa Carter | annie_rohan16@gmail.com | Michelestead | Active | $106.01 |
| Abdullah Tromp | shelley_kunze65@gmail.com | South Rex | Active | $960.00 |
| Allison Denesik | adeline.jenkins91@yahoo.com | Murrieta | Active | $899.85 |
| Emmet Pacocha | kevon.treutel@hotmail.com | Blue Springs | Active | $179.69 |
| Joanne Brakus | patsy.bartell27@yahoo.com | Austin | Active | $807.81 |
| Total | $2,953.36 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Wilfred Bosco @dessie_bruen36 | doreen27@gmail.com | Dibbertboro | Active | $835.71 |
Mr. Zoe Beahan @marcos_nienow-wisoky48 | leah4@yahoo.com | West Nettie | Inactive | $523.06 |
May Hoppe @sherwood.conroy | wyatt25@gmail.com | Fort Schuyler | Active | $547.40 |
Christian Kuhic @dessie87 | juliet_lang57@yahoo.com | Sharifield | Active | $799.94 |
Lila Champlin @eileen64 | clinton_torp@yahoo.com | Mosesmouth | Active | $397.72 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Madaline Homenick | patty.bahringer4@gmail.com | Jazmynfield | Inactive | $889.99 |
| Reanna Hudson | alberto_kilback51@hotmail.com | Port Keaganview | Active | $531.17 |
| Mr. Fern Schmeler | sherman_bogan@hotmail.com | East Anabelleworth | Inactive | $333.46 |
| Kallie Tromp PhD | belinda8@gmail.com | Stevenberg | Active | $971.62 |
| Dedric Purdy | federico56@hotmail.com | Pine Hills | Inactive | $490.12 |
| Total | $3,216.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Forrest Ratke DVM | dallas87@gmail.com | West Faith | Inactive | $501.09 |
| Amanda Barrows | travis.hoeger@gmail.com | Lake Cheryl | Inactive | $637.69 |
| Clarence Breitenberg | amiya.walsh62@gmail.com | Lake Maceyburgh | Active | $543.47 |
| Melyssa Green | clayton.dach88@hotmail.com | Bessietown | Inactive | $781.98 |
| Jerome Kovacek | kelton56@gmail.com | North Agneschester | Inactive | $9.61 |
| Total | $2,473.84 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Reginald Koelpin | vivianne69@hotmail.com | Orlando | Inactive | $663.02 |
| Cassandra Morissette | randy_brakus@hotmail.com | South Rashawnworth | Inactive | $457.76 |
| Joel Quitzon | monroe_muller98@hotmail.com | South Miltonfurt | Inactive | $669.87 |
| Sadie King-Flatley IV | daniella.hayes@gmail.com | Victorville | Active | $929.72 |
| Mr. Maurice Hansen | demarco79@yahoo.com | Shanahanton | Active | $359.77 |
| Total | $3,080.14 | |||
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 | ||
|---|---|---|---|---|---|
| Lela Gerlach I | sister_dickinson90@hotmail.com | Fort Jaylenstad | Inactive | $67.72 | |
| Lilly Buckridge | rosie.feil@yahoo.com | Fort Brannon | Active | $742.07 | |
| Ima Wehner | fernando67@yahoo.com | Orphafield | Inactive | $180.61 | |
| Timothy Anderson | darren.halvorson@hotmail.com | Sammamish | Inactive | $126.86 | |
| Ms. Patricia Pollich | morris46@yahoo.com | North Marcburgh | Inactive | $924.01 | |
| Total | $2,041.27 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alfredo Hettinger | margarita.kertzmann68@gmail.com | North Sabrina | Active | $1,187.05 | |
| Keven Pacocha III | eula68@hotmail.com | Littlechester | Inactive | $1,006.62 | |
| Eddie Pouros | jon.rice77@hotmail.com | Schultzhaven | Inactive | $659.65 | |
| Miss Roberta Lebsack | brain68@hotmail.com | Lake Mauriciobury | Inactive | $1,067.34 | |
| Anjali Reichel | ernest_beier@hotmail.com | New Martin | Active | $987.97 | |
| Total | $4,908.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 | |
|---|---|---|---|---|
| Lorene Leffler Jr. | blake_dietrich@hotmail.com | West Roel | Inactive | $996.41 |
| Ivan Stokes | glen_miller@hotmail.com | Binsstead | Inactive | $212.81 |
| Uriah Gorczany I | sarah.hegmann13@hotmail.com | Port Lindaville | Inactive | $925.12 |
| Veronica DuBuque | maryann37@yahoo.com | Rosenbaumcester | Active | $364.94 |
| Jeffrey Bartoletti | gunnar42@hotmail.com | Lake Ridge | Active | $194.55 |
| Krystal Skiles-Schmidt | murphy_metz@gmail.com | Murrieta | Inactive | $578.92 |
| Jerald Nitzsche | tiffany.batz@gmail.com | Wisokystad | Active | $365.66 |
| Zoe Turcotte | jasper.wolff72@yahoo.com | Henriettachester | Inactive | $638.20 |
| Kara Halvorson | kamron74@yahoo.com | East Alberta | Active | $13.31 |
| Delphine Kiehn | jeremy_block@hotmail.com | Bakersfield | Active | $868.83 |
| Florida Douglas | margaret_nolan@yahoo.com | Littleshire | Inactive | $390.13 |
| Donna Rau | beverly42@hotmail.com | Lake Dangeloborough | Active | $870.63 |
| Marcelino Schumm-Mueller | gilda_graham@gmail.com | South Darnell | Active | $263.03 |
| Suzanne Stehr | favian31@gmail.com | Michaelcester | Active | $1,185.73 |
| Jeff Hackett | damon26@gmail.com | Kreiger-Turnerfield | Inactive | $1,130.88 |
| Total | $8,999.15 | |||
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 |