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 | Bank Transfer | $446.72 |
| INV002 | Pending | Credit Card | $886.29 |
| INV003 | Unpaid | Bank Transfer | $322.97 |
| INV004 | Unpaid | PayPal | $747.88 |
| INV005 | Paid | Credit Card | $257.34 |
| INV006 | Unpaid | PayPal | $942.84 |
| INV007 | Pending | Credit Card | $202.47 |
| Total | $3,806.51 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jon Will | National Functionality Producer | jon.will24@gmail.com | Admin | |
| Vilma Beer | Forward Program Technician | vilma_beer3@gmail.com | Viewer | |
| Joanna Konopelski | Customer Web Consultant | joanna.konopelski@yahoo.com | Viewer | |
| Keith Flatley | Legacy Accounts Associate | keith_flatley@yahoo.com | Viewer | |
| Geneva Strosin | Product Branding Facilitator | geneva.strosin@gmail.com | Viewer | |
| Meredith Ruecker | Internal Metrics Director | meredith.ruecker@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 |
|---|---|---|
Kathryne Towne Central Communications Coordinator kathryne_towne@gmail.com | Viewer | |
Julia Schmitt Customer Mobility Engineer julia.schmitt24@gmail.com | Member | |
Blake Klein Future Integration Director blake.klein@hotmail.com | Member | |
Terrence Olson Central Web Assistant terrence_olson@hotmail.com | Admin | |
Mossie Feest Future Data Consultant mossie_feest@gmail.com | Viewer | |
Charles Gusikowski Regional Accounts Consultant charles.gusikowski@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 |
|---|---|---|
Kent Predovic Lead Accounts Manager kent_predovic@gmail.com | Viewer | |
Gloria Romaguera Corporate Implementation Designer gloria.romaguera@gmail.com | Admin | |
Whitney Frami Customer Infrastructure Assistant whitney_frami@gmail.com | Viewer | |
Ronald Swaniawski International Group Facilitator ronald.swaniawski@hotmail.com | Member | |
Eda Kiehn Future Assurance Director eda_kiehn@hotmail.com | Viewer | |
Fletcher VonRueden Human Program Agent fletcher_vonrueden@hotmail.com | Member | |
Teri Willms Corporate Usability Executive teri.willms@yahoo.com | Viewer | |
Eloise Koss Lead Data Administrator eloise_koss46@gmail.com | Viewer | |
August Fay Senior Solutions Planner august.fay81@hotmail.com | Viewer | |
Elvie Buckridge Lead Tactics Architect elvie.buckridge@gmail.com | Admin | |
Leanne Boehm Future Infrastructure Officer leanne_boehm@hotmail.com | Admin | |
Evalyn D'Amore Regional Functionality Associate evalyn_damore@gmail.com | Member | |
Jeff Jast National Mobility Producer jeff_jast@hotmail.com | Viewer | |
Sonja Hermann Regional Markets Analyst sonja.hermann@yahoo.com | Viewer | |
Lisa Green Dynamic Tactics Orchestrator lisa.green97@gmail.com | Viewer | |
Eula Quigley Customer Division Analyst eula_quigley61@gmail.com | Member | |
Jordon DuBuque-Krajcik Chief Directives Strategist jordon_dubuque-krajcik@yahoo.com | Admin | |
Loren Rippin National Web Manager loren.rippin@gmail.com | Viewer | |
Elmira Swift Product Configuration Engineer elmira.swift@hotmail.com | Admin | |
Lawrence Cummerata Global Accounts Technician lawrence_cummerata4@hotmail.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 | |
|---|---|---|---|---|
| Chasity Pagac-Wyman II | lana.sauer32@yahoo.com | Joplin | Active | $152.28 |
| Fernando Hermann | roxanne56@yahoo.com | Glenview | Active | $346.24 |
| Cecil Balistreri | sonya.abernathy31@gmail.com | Inglewood | Active | $26.55 |
| Mr. Cletus Heathcote | ocie.turner6@yahoo.com | Handland | Active | $826.59 |
| Ervin DuBuque | christiana41@gmail.com | Lake Floyd | Active | $245.88 |
| Total | $1,597.54 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Shaun Kiehn @joaquin_quigley31 | guy_stehr-adams71@yahoo.com | Caspermouth | Active | $1,092.52 |
Adrienne Predovic @kate96 | laurie10@gmail.com | Casimerburgh | Inactive | $383.23 |
Tomas Marquardt @robyn9 | shanel.okuneva61@yahoo.com | Willburgh | Active | $578.97 |
Yvonne Rau @larry_gerhold10 | michele.mante@yahoo.com | Worcester | Inactive | $601.57 |
Lance Bashirian @chet.batz19 | marjolaine_okeefe72@hotmail.com | Fort Mervin | Inactive | $536.84 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Teagan Roob | michael_frami@gmail.com | Kuhicfurt | Active | $905.57 |
| Anastasia Kihn | magdalena_kuvalis0@hotmail.com | East Travisfort | Active | $121.92 |
| Calista Ortiz | lucia_braun@gmail.com | Lake Mercedeshaven | Inactive | $745.37 |
| Kamille Hintz | casimer.rohan@hotmail.com | Boyerboro | Inactive | $950.93 |
| Trisha Konopelski | mason.boehm24@yahoo.com | Lake Debbieberg | Active | $1,041.75 |
| Total | $3,765.54 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shany Sporer | anthony.goodwin23@yahoo.com | Veracester | Active | $865.62 |
| Ike Dickinson | delaney.dicki4@yahoo.com | Garrickburgh | Active | $87.55 |
| Ashtyn Mueller | gertrude_lindgren80@hotmail.com | West Olga | Active | $957.68 |
| Buddy Lubowitz | nelle63@hotmail.com | East Davin | Inactive | $637.58 |
| Jeff Lang | rita.carter21@yahoo.com | Melbourne | Inactive | $1,133.76 |
| Total | $3,682.19 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Kiera Feeney | melanie.ankunding34@gmail.com | Magdalenton | Active | $518.92 |
| Jo Ritchie | marcus5@gmail.com | Pearl City | Inactive | $157.58 |
| Isabel Bradtke | keyon_nader3@hotmail.com | Terifield | Inactive | $215.09 |
| Ms. Linda White | joann40@yahoo.com | Urbandale | Active | $850.86 |
| Bryon Lynch | dana_roob43@gmail.com | East Carmen | Active | $537.82 |
| Total | $2,280.27 | |||
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 | ||
|---|---|---|---|---|---|
| Roscoe Bergnaum Sr. | bertha.wunsch@gmail.com | Alexandrineshire | Active | $86.59 | |
| Mr. Tyson Abshire | javier_langosh@yahoo.com | Wardcester | Active | $163.80 | |
| Mabelle Dare | camryn.ankunding@hotmail.com | New Genefurt | Inactive | $464.93 | |
| Jake Bahringer-Green | pete.trantow22@yahoo.com | Buckridgecester | Inactive | $1,036.60 | |
| Elena Wisozk | rafael_torphy@hotmail.com | West Jordan | Active | $645.63 | |
| Total | $2,397.55 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Jesus Deckow | lilliana.lakin@hotmail.com | West Constance | Active | $1,141.36 | |
| Jodi Buckridge | cecil.gleichner55@yahoo.com | South Adrielfurt | Active | $755.76 | |
| Kattie Okuneva | alberta66@hotmail.com | New Fredrickborough | Inactive | $456.58 | |
| Mandy Macejkovic | alden_trantow19@gmail.com | Lake Gerhardburgh | Inactive | $653.47 | |
| Sandy Tremblay | elvie_marquardt32@gmail.com | South Gonzaloberg | Inactive | $527.54 | |
| Total | $3,534.71 | ||||
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 | |
|---|---|---|---|---|
| Bell Flatley | lia.roberts@hotmail.com | Carlottaburgh | Inactive | $500.06 |
| Sammy Watsica | madie3@hotmail.com | Fort Pattyborough | Active | $1,055.73 |
| Arielle Borer-Cummings | renee_schroeder@yahoo.com | New Carmelo | Inactive | $132.22 |
| Patsy Mertz | claudie_mayer@hotmail.com | Lake Arvelstad | Active | $834.79 |
| Dewey Torphy II | jennie27@yahoo.com | Port Anjali | Active | $43.98 |
| Mercedes Boehm | latoya_waters@hotmail.com | Johnstoncester | Active | $1,189.84 |
| Leon Tromp | rhett56@hotmail.com | New Jaydonworth | Active | $1,149.85 |
| Mr. Abel Rippin | jeremie.farrell@gmail.com | Melvinville | Active | $679.02 |
| Kailey Stehr MD | nichole12@yahoo.com | Bellingham | Inactive | $628.84 |
| Amara Senger | nick.farrell@hotmail.com | Fort Francesca | Active | $26.78 |
| Jared Johnson-Mante | calista94@yahoo.com | Wardberg | Active | $372.04 |
| Damon Gorczany | sean_shanahan@hotmail.com | South Christieburgh | Inactive | $148.31 |
| Domenico Von | jovani_dickens23@hotmail.com | Mesa | Inactive | $425.09 |
| Sheryl Boyle | molly67@gmail.com | Tempe | Active | $96.72 |
| Archie Fahey | adrian_feil@yahoo.com | South Rosamond | Inactive | $331.93 |
| Total | $7,615.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 |


