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 | $591.61 |
| INV002 | Paid | PayPal | $565.10 |
| INV003 | Pending | Credit Card | $707.66 |
| INV004 | Paid | PayPal | $898.01 |
| INV005 | Paid | Credit Card | $775.14 |
| INV006 | Pending | Bank Transfer | $970.52 |
| INV007 | Pending | Bank Transfer | $592.54 |
| Total | $5,100.58 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Leona Jones | Lead Interactions Orchestrator | leona_jones@gmail.com | Viewer | |
| Austyn Frami | District Response Associate | austyn.frami31@hotmail.com | Viewer | |
| Jeffery Shields | Regional Assurance Specialist | jeffery.shields@yahoo.com | Viewer | |
| Macy Schmitt | Internal Usability Strategist | macy_schmitt@hotmail.com | Member | |
| Inez Mohr | National Brand Analyst | inez_mohr24@hotmail.com | Admin | |
| Alec Veum | Internal Brand Planner | alec_veum46@yahoo.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 |
|---|---|---|
Dwayne Welch Corporate Research Administrator dwayne_welch@yahoo.com | Viewer | |
Alene Mosciski District Branding Consultant alene.mosciski54@gmail.com | Viewer | |
Dallas Christiansen Investor Metrics Engineer dallas_christiansen@gmail.com | Member | |
Verna Kohler Corporate Mobility Assistant verna_kohler@gmail.com | Admin | |
Jessica Deckow Senior Assurance Producer jessica.deckow@yahoo.com | Admin | |
Ana Balistreri Customer Accountability Manager ana.balistreri@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 |
|---|---|---|
Felix Bednar Forward Factors Designer felix.bednar@gmail.com | Admin | |
Malika Feeney Senior Group Technician malika_feeney@gmail.com | Member | |
Lance Luettgen Direct Usability Producer lance_luettgen82@gmail.com | Admin | |
Luella Pfeffer International Brand Strategist luella.pfeffer@gmail.com | Admin | |
Lenora Bradtke Human Metrics Technician lenora.bradtke63@gmail.com | Member | |
Ross Runolfsson Principal Branding Facilitator ross_runolfsson@gmail.com | Admin | |
Merle Shields Corporate Applications Liaison merle.shields@hotmail.com | Admin | |
Maria Champlin-Mante Senior Usability Facilitator maria_champlin-mante87@hotmail.com | Admin | |
Benny Hansen Principal Functionality Specialist benny.hansen@gmail.com | Member | |
Laverna Yost Regional Research Assistant laverna_yost39@gmail.com | Viewer | |
Beulah Satterfield Lead Branding Facilitator beulah.satterfield8@hotmail.com | Member | |
Wilson Ortiz National Accountability Director wilson.ortiz@gmail.com | Viewer | |
Retta Jacobson Product Configuration Technician retta_jacobson@gmail.com | Member | |
Ericka Emmerich National Communications Strategist ericka.emmerich@gmail.com | Admin | |
Constance Cummings District Intranet Developer constance_cummings@hotmail.com | Viewer | |
Axel Quitzon District Metrics Specialist axel.quitzon35@hotmail.com | Admin | |
Leif Casper Central Applications Producer leif.casper@hotmail.com | Viewer | |
Dillan Schowalter Global Markets Consultant dillan.schowalter@gmail.com | Admin | |
Dominique Hermann Direct Implementation Associate dominique.hermann@yahoo.com | Admin | |
Kirk Gutkowski Dynamic Creative Representative kirk.gutkowski@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 | |
|---|---|---|---|---|
| Al Altenwerth | jamison.graham-murray@gmail.com | Rochester Hills | Active | $166.98 |
| Javier Stokes | merlin_mann-kuvalis29@yahoo.com | Mission | Active | $74.22 |
| Everett Williamson | forrest_braun@yahoo.com | Greenwood | Active | $1,038.41 |
| Ofelia Lynch | rosa_batz85@hotmail.com | Marcusstead | Active | $434.06 |
| Ismael Kub | bennie.marks@yahoo.com | Allen | Active | $539.10 |
| Total | $2,252.77 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jannie Gerhold V @gwen86 | maureen.will7@hotmail.com | West Nyasia | Inactive | $364.82 |
Fritz Hackett @pauline71 | millie_ferry@yahoo.com | Fort Sheryl | Active | $338.62 |
Clara Schaden @kristopher82 | oscar_hegmann47@yahoo.com | O'Keefefurt | Inactive | $1,030.81 |
Harriet Ward @tremayne.wintheiser44 | shaylee_volkman25@gmail.com | Fort Cody | Active | $723.40 |
Shea Parisian @chesley.cummerata | pansy.kirlin@hotmail.com | Schroederfurt | Inactive | $718.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Clayton Swift | janiya.koepp@gmail.com | Corvallis | Inactive | $548.69 |
| Frida Romaguera | elinore.baumbach@hotmail.com | Waldorf | Active | $470.97 |
| Brant Marvin | carlton_hayes@gmail.com | El Centro | Active | $323.85 |
| Meghan Steuber | june34@yahoo.com | Boganshire | Active | $561.56 |
| Rae Yost | israel.zemlak@gmail.com | Lake Axel | Inactive | $254.96 |
| Total | $2,160.03 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elian Wunsch I | jayda97@gmail.com | Dillonshire | Inactive | $1,080.26 |
| Mylene Green | kallie.runolfsson@yahoo.com | Reynoldsbury | Inactive | $504.57 |
| Briana Heidenreich | jeramy76@hotmail.com | New Barontown | Active | $773.31 |
| Otilia Ruecker | tyra_bogisich@gmail.com | Erikacester | Inactive | $921.66 |
| Cordie Little V | enrique_upton@hotmail.com | Redondo Beach | Active | $27.98 |
| Total | $3,307.78 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Citlalli Hintz | hayden_zieme@gmail.com | East Katherineville | Active | $874.08 |
| Kathy MacGyver | erick_bartoletti@gmail.com | Deltaboro | Inactive | $765.45 |
| Verna Bosco IV | belinda90@hotmail.com | Bradcester | Active | $1,132.87 |
| Deondre Glover | harley_schaefer6@gmail.com | Pittsfield | Inactive | $618.04 |
| Ms. Faye Spinka | warren_becker@yahoo.com | Olivetown | Active | $808.57 |
| Total | $4,199.01 | |||
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 | ||
|---|---|---|---|---|---|
| Doris Waelchi DDS | ella.abernathy@hotmail.com | Arlieshire | Inactive | $1,150.34 | |
| Dr. Adriana Halvorson | lisa30@yahoo.com | Brekkefort | Active | $649.72 | |
| Dr. Gus Smitham | ova_haley7@gmail.com | Rosellaport | Inactive | $474.05 | |
| Bartholome Skiles-Fritsch | ray.effertz@gmail.com | Fort Hassan | Active | $1,017.61 | |
| Don Ernser | connor33@hotmail.com | Fort Victoria | Inactive | $375.46 | |
| Total | $3,667.18 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Gustave Ankunding | elijah.ondricka@yahoo.com | Midland | Inactive | $489.75 | |
| Kathleen Halvorson-Hoppe | trisha.hilpert89@yahoo.com | Bothell | Inactive | $242.99 | |
| Devonte Kunze | brennon12@gmail.com | Fort Lowellstead | Active | $1,033.01 | |
| Toni Lesch | judson.borer20@yahoo.com | East Ora | Inactive | $687.61 | |
| Marshall Yundt | hailie_conroy@yahoo.com | Hoover | Active | $97.95 | |
| Total | $2,551.31 | ||||
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 | |
|---|---|---|---|---|
| Juwan Vandervort | opal.batz@hotmail.com | East Howardfort | Active | $513.08 |
| Marjorie Medhurst | dave_larson@gmail.com | Strackeboro | Inactive | $1,184.47 |
| Gregoria Swaniawski | van_reichel@yahoo.com | Fullerton | Active | $1,142.87 |
| Earline Waelchi | camden.lubowitz95@yahoo.com | Lestershire | Inactive | $68.07 |
| Faith Carter | virginia_lemke7@yahoo.com | Connfield | Inactive | $421.23 |
| Mr. Aric Kautzer | joann_stiedemann@hotmail.com | O'Connellview | Active | $44.31 |
| Ann Kirlin-Tremblay | verla77@hotmail.com | West Yvette | Inactive | $476.17 |
| Elmer Dach | diane28@yahoo.com | Port Alice | Active | $969.92 |
| Mr. Wade Block | emilio_zemlak32@yahoo.com | Obieshire | Active | $1,138.11 |
| Guido Rau | jailyn.baumbach30@hotmail.com | Tonifurt | Active | $1,031.28 |
| Tess Swift | irene_fahey14@yahoo.com | Pollichburgh | Active | $761.40 |
| Adriel Toy | edwin.harris@yahoo.com | Port Laceyfield | Active | $868.43 |
| Abbigail Wolf | joann_padberg@gmail.com | South Kristy | Active | $867.54 |
| Marvin Breitenberg I | dena_mayer@hotmail.com | Clarkstad | Active | $699.96 |
| Gwen Hessel | ariel_murazik88@gmail.com | Danbury | Active | $979.88 |
| Total | $11,166.72 | |||
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 |