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 | $957.72 |
| INV002 | Paid | PayPal | $535.82 |
| INV003 | Paid | Credit Card | $442.36 |
| INV004 | Unpaid | Credit Card | $986.29 |
| INV005 | Paid | Bank Transfer | $289.81 |
| INV006 | Paid | Credit Card | $367.34 |
| INV007 | Unpaid | Bank Transfer | $967.69 |
| Total | $4,547.03 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kelley Legros-Rowe | Legacy Markets Coordinator | kelley.legros-rowe70@hotmail.com | Viewer | |
| Fernando Altenwerth | Lead Infrastructure Designer | fernando_altenwerth@yahoo.com | Admin | |
| Ervin Ankunding | Dynamic Accounts Associate | ervin_ankunding95@gmail.com | Admin | |
| Rowena Zulauf | Direct Optimization Agent | rowena_zulauf@gmail.com | Viewer | |
| Arturo Runolfsson | International Accounts Specialist | arturo.runolfsson58@yahoo.com | Viewer | |
| Rhoda Borer | Senior Markets Officer | rhoda.borer@gmail.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 |
|---|---|---|
Keagan Leannon Principal Usability Architect keagan.leannon29@hotmail.com | Admin | |
Chyna Koelpin Senior Infrastructure Producer chyna.koelpin55@yahoo.com | Admin | |
Desiree Murphy Direct Security Liaison desiree.murphy13@hotmail.com | Viewer | |
Aron Johnson Forward Operations Specialist aron.johnson4@hotmail.com | Admin | |
Martha Orn Central Quality Administrator martha_orn11@hotmail.com | Member | |
Kattie Johns Legacy Division Executive kattie_johns@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 |
|---|---|---|
Jany Frami Product Accountability Agent jany.frami55@hotmail.com | Viewer | |
Garry Kassulke Customer Configuration Representative garry.kassulke@yahoo.com | Member | |
Maude Hand District Communications Planner maude.hand31@hotmail.com | Admin | |
Tamia Bashirian Product Data Strategist tamia.bashirian24@yahoo.com | Admin | |
Pearline McClure Lead Applications Architect pearline_mcclure87@gmail.com | Viewer | |
Bobby Price Dynamic Security Strategist bobby_price53@yahoo.com | Admin | |
Julius Stiedemann Product Program Executive julius_stiedemann@yahoo.com | Viewer | |
Linda Auer International Interactions Director linda.auer@yahoo.com | Member | |
Hertha Prosacco Human Infrastructure Associate hertha_prosacco44@gmail.com | Viewer | |
Winston Batz Product Data Assistant winston_batz10@gmail.com | Admin | |
Sue Erdman Global Branding Manager sue.erdman98@gmail.com | Viewer | |
Elroy Corkery Future Division Consultant elroy_corkery26@gmail.com | Admin | |
Santa Nikolaus Chief Research Consultant santa.nikolaus@hotmail.com | Member | |
Edwin Ebert Regional Creative Planner edwin_ebert@hotmail.com | Viewer | |
Lonny Ryan Forward Functionality Assistant lonny.ryan@hotmail.com | Admin | |
Priscilla Satterfield Lead Creative Strategist priscilla_satterfield48@hotmail.com | Admin | |
Maci Stark Global Accounts Engineer maci_stark@gmail.com | Member | |
Lela Prohaska Product Infrastructure Facilitator lela_prohaska9@yahoo.com | Admin | |
Shanie Waelchi Global Data Officer shanie.waelchi@yahoo.com | Member | |
Elvera Krajcik Corporate Security Consultant elvera.krajcik42@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Mr. Darin Roob | frankie.murphy@gmail.com | Jenkinsburgh | Active | $122.56 |
| Karl Turcotte | mildred41@yahoo.com | Hermanfurt | Inactive | $176.12 |
| Jana Marvin | lorine_prohaska@yahoo.com | Pablocester | Inactive | $690.44 |
| Veronica Deckow IV | destany95@gmail.com | Bergnaumview | Inactive | $390.65 |
| Grover Hoeger | renee_wolf17@hotmail.com | Manchester | Active | $1,069.31 |
| Total | $2,449.08 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Brooke Schmitt @jerad7 | clint45@hotmail.com | Port Nettieburgh | Active | $1,078.75 |
Marty Reichel @carlo98 | bernie_rosenbaum@hotmail.com | East Yasmeen | Inactive | $675.94 |
Pedro Trantow @kylie.emard94 | sean_mitchell40@hotmail.com | East Gavinshire | Active | $690.47 |
Clint Stamm-Mraz III @joshua16 | rick_yost96@gmail.com | Sanford | Active | $746.81 |
Dr. Jamison Nitzsche @sarina_stark52 | ricky.brekke@gmail.com | Rutherfordton | Inactive | $960.40 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Reese Dicki | anne75@hotmail.com | Howemouth | Inactive | $277.62 |
| Easton Nicolas | vicente88@hotmail.com | Kerlukehaven | Active | $927.24 |
| Mr. Zola Kreiger | jamil87@gmail.com | Tremainehaven | Active | $862.15 |
| Kenyatta Ratke | winifred.goyette57@hotmail.com | Palm Coast | Inactive | $738.93 |
| Linwood Feest Sr. | anita.schuppe92@yahoo.com | Bayer-Hyattborough | Inactive | $1,146.71 |
| Total | $3,952.65 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Etha Dibbert IV | kamille_ankunding21@hotmail.com | Schinnerworth | Inactive | $194.69 |
| Rebeca Keeling-Langworth | rosalie_howell@hotmail.com | Hettingerstead | Active | $499.16 |
| Gabrielle Kshlerin | wilbur82@yahoo.com | Walshland | Active | $744.02 |
| Edmond Reilly | dennis.erdman29@gmail.com | Duluth | Active | $1,101.02 |
| Maxine Herman | gabriel_koelpin@gmail.com | Lake Orrin | Inactive | $869.41 |
| Total | $3,408.30 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dwayne Hirthe | flavio.johnson@yahoo.com | Port Jalon | Active | $831.06 |
| Geneva Runolfsdottir | sherry_kirlin23@gmail.com | Cincinnati | Active | $356.90 |
| Kristi Lang III | josianne_gerhold@hotmail.com | Dothan | Active | $770.63 |
| Katlyn Dare | allen93@gmail.com | Fort Anabelberg | Inactive | $216.72 |
| Edmond Welch | jaron.hills@yahoo.com | Port Drakeville | Active | $711.58 |
| Total | $2,886.89 | |||
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 | ||
|---|---|---|---|---|---|
| Jaquelin Marvin | jamir13@hotmail.com | Portage | Inactive | $465.79 | |
| Beverly Considine | tasha19@yahoo.com | Fort Vanessa | Inactive | $61.00 | |
| Nelle O'Connell | shaun_kessler83@yahoo.com | Ebertfort | Inactive | $189.76 | |
| Calvin Jones | clemens72@yahoo.com | East Soledad | Active | $694.85 | |
| Nicolette Kertzmann DDS | kristie.dibbert@hotmail.com | Sierra Vista | Inactive | $710.33 | |
| Total | $2,121.73 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Harry Bauch | oma.cartwright@hotmail.com | Billings | Active | $623.02 | |
| Lloyd Hyatt | lou_weissnat65@gmail.com | Garybury | Inactive | $617.46 | |
| Miss Keshaun Pollich | theresia.schoen66@yahoo.com | Attleboro | Inactive | $722.41 | |
| Jefferey Lockman | leroy_schultz@gmail.com | Lake Aidashire | Inactive | $385.03 | |
| Vicky Rowe | beau86@hotmail.com | Marthamouth | Active | $839.14 | |
| Total | $3,187.06 | ||||
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 | |
|---|---|---|---|---|
| Mrs. Viviane Cummings | eleanora24@yahoo.com | Mozellchester | Active | $907.19 |
| Sheri Kozey | litzy_mueller19@gmail.com | Littelworth | Active | $408.23 |
| Larissa Zemlak | sergio59@hotmail.com | Schneiderville | Active | $90.65 |
| Sue Brown | mamie83@hotmail.com | Ethanfurt | Inactive | $174.00 |
| Herman O'Reilly | jerome.brekke@hotmail.com | New Virginia | Inactive | $301.00 |
| Jimmy Lynch | tom.gutkowski42@hotmail.com | Camarillo | Active | $1,193.67 |
| Ethel Hagenes | olen.johnston93@gmail.com | Fort Emmettberg | Active | $1,159.76 |
| Damien Blanda | franz.auer@gmail.com | Flossietown | Inactive | $224.63 |
| Laverne Stiedemann | bryon_brakus70@yahoo.com | Lake Tayaland | Inactive | $534.04 |
| Imani Kautzer | trevor_corkery43@hotmail.com | La Mirada | Inactive | $35.97 |
| Dan Greenfelder IV | trey26@gmail.com | Cicero | Active | $389.49 |
| Penny Bayer | ephraim_sporer70@hotmail.com | Brandon | Active | $501.39 |
| Edward O'Hara | ralph57@hotmail.com | Shawnee | Active | $232.94 |
| Mr. Elijah Mills | dawn.barton99@hotmail.com | Wittingstead | Active | $613.98 |
| Makayla Kovacek | antonio_stracke-prohaska17@yahoo.com | Timmystead | Active | $1,082.95 |
| Total | $7,849.89 | |||
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 |