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 | $243.03 |
| INV002 | Unpaid | Bank Transfer | $508.40 |
| INV003 | Pending | Credit Card | $158.46 |
| INV004 | Unpaid | Credit Card | $388.16 |
| INV005 | Pending | PayPal | $951.82 |
| INV006 | Unpaid | Bank Transfer | $101.20 |
| INV007 | Unpaid | PayPal | $648.07 |
| Total | $2,999.14 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Randall Fadel | Future Quality Representative | randall_fadel82@hotmail.com | Member | |
| Leon Cummerata-Kunze | Direct Configuration Producer | leon.cummerata-kunze@yahoo.com | Admin | |
| Rahsaan Marvin | Chief Creative Developer | rahsaan_marvin@gmail.com | Member | |
| Valerie Murphy | International Division Analyst | valerie_murphy10@hotmail.com | Viewer | |
| Carlton Kling-Prosacco | Internal Tactics Executive | carlton_kling-prosacco@gmail.com | Member | |
| Edgar Altenwerth | Principal Configuration Facilitator | edgar.altenwerth@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 |
|---|---|---|
Winston Parker Legacy Quality Supervisor winston.parker20@hotmail.com | Viewer | |
Adolf Terry Principal Intranet Developer adolf_terry91@hotmail.com | Admin | |
Eric Kerluke Regional Paradigm Developer eric_kerluke64@gmail.com | Viewer | |
Sophia Fisher Future Creative Developer sophia.fisher@gmail.com | Viewer | |
Esther Towne-Oberbrunner Future Accounts Assistant esther_towne-oberbrunner@hotmail.com | Viewer | |
Tess Haag Product Interactions Representative tess_haag@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Friedrich West District Integration Designer friedrich.west14@gmail.com | Member | |
Susan Yost Senior Program Designer susan_yost56@hotmail.com | Member | |
Soledad Lockman Investor Group Officer soledad.lockman@gmail.com | Viewer | |
Judson Zboncak National Directives Supervisor judson_zboncak54@hotmail.com | Member | |
Jude Huel Investor Group Coordinator jude_huel@hotmail.com | Viewer | |
David Corwin Human Division Strategist david_corwin@hotmail.com | Member | |
Neva Little Human Assurance Agent neva.little@gmail.com | Member | |
Jeanne Deckow Investor Accounts Strategist jeanne_deckow3@gmail.com | Viewer | |
Jacquelyn Hackett-Hudson Lead Interactions Agent jacquelyn.hackett-hudson@gmail.com | Viewer | |
Karla Greenholt Investor Paradigm Director karla.greenholt@gmail.com | Viewer | |
Eula Erdman Human Security Developer eula_erdman62@hotmail.com | Admin | |
Viva Heller Dynamic Communications Technician viva.heller39@gmail.com | Viewer | |
Wilson Skiles Dynamic Branding Supervisor wilson_skiles@gmail.com | Viewer | |
Palma Cremin National Interactions Designer palma.cremin96@yahoo.com | Admin | |
Verna Little Internal Group Planner verna.little3@hotmail.com | Viewer | |
Austin Gottlieb Lead Optimization Orchestrator austin_gottlieb@gmail.com | Member | |
Friedrich Ledner Dynamic Security Strategist friedrich_ledner85@gmail.com | Member | |
Cornelius Dach National Accounts Strategist cornelius.dach17@yahoo.com | Viewer | |
Sarina Rosenbaum Forward Accounts Administrator sarina.rosenbaum@hotmail.com | Viewer | |
Leigh Dickinson Regional Operations Administrator leigh.dickinson71@hotmail.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 | |
|---|---|---|---|---|
| Alonzo Mante V | elnora54@yahoo.com | Willmstown | Inactive | $1,172.70 |
| Adrienne Schowalter-Ward | leilani_beer@hotmail.com | Lake Hazleville | Active | $787.19 |
| Bradford Franecki | oscar.nikolaus97@yahoo.com | North Rosemarie | Active | $258.40 |
| Alyce Kuhn | becky45@gmail.com | East Micheal | Inactive | $179.78 |
| Mona Larson | stephen4@yahoo.com | Fort Margarete | Inactive | $34.55 |
| Total | $2,432.62 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Chris Feest @raegan89 | christ55@gmail.com | Bloomington | Inactive | $146.74 |
Mrs. Lottie Balistreri @marcelle_dubuque | liam_paucek51@gmail.com | Lake Lysanneworth | Inactive | $179.97 |
Wyatt Hilpert @casper_blanda | malvina_schoen0@hotmail.com | Mishawaka | Active | $1,178.28 |
Reilly Jast Jr. @vicenta25 | alda_klocko@hotmail.com | Ritchieberg | Inactive | $385.84 |
Carolina Gottlieb @raymundo99 | helena_reinger@yahoo.com | Fort Joanne | Inactive | $136.23 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Desiree Ryan | kyle_lang@gmail.com | Katlynnview | Inactive | $274.11 |
| Mrs. Rosa Mueller | sally.white51@hotmail.com | Gabrielleshire | Inactive | $23.55 |
| Calvin Price | brian.toy@gmail.com | Mount Prospect | Inactive | $829.64 |
| Arthur Lebsack I | joy_hoppe69@gmail.com | Lake Donnieworth | Active | $124.59 |
| Earl Conn | shelly_hansen@gmail.com | Gretaburgh | Active | $711.96 |
| Total | $1,963.85 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Simon O'Connell | mathew.schroeder@gmail.com | Townefurt | Active | $109.67 |
| Freddie Dickens | kristopher.thiel17@hotmail.com | East Isaias | Inactive | $732.10 |
| Ms. Edd Bode | meredith.roberts81@gmail.com | Schmidtworth | Active | $424.28 |
| Kimberly Schuppe | bianka6@yahoo.com | Memphis | Active | $963.01 |
| Mr. Ahmad Smitham | emmalee.hoeger50@gmail.com | Sioux Falls | Inactive | $877.53 |
| Total | $3,106.59 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lexi Halvorson DDS | elise.veum25@yahoo.com | Houston | Inactive | $431.93 |
| Zachary Zieme | reynold31@hotmail.com | Fort Larry | Inactive | $356.55 |
| Eliza Kuvalis | marguerite.reichel21@hotmail.com | Willstead | Active | $622.48 |
| Gerardo Becker | loy98@yahoo.com | Oklahoma City | Active | $658.88 |
| Addie Lowe V | phillip.dickinson81@yahoo.com | Abilene | Active | $910.88 |
| Total | $2,980.72 | |||
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 | ||
|---|---|---|---|---|---|
| Olive Bruen | mustafa.macejkovic28@hotmail.com | Port Caesar | Active | $293.98 | |
| Deborah Lakin | patti84@hotmail.com | Urbandale | Active | $809.46 | |
| Erin Hudson | mellie_ferry@yahoo.com | Port Linwood | Active | $744.59 | |
| Dr. Mamie Rowe | darlene70@yahoo.com | Victorville | Inactive | $906.92 | |
| Cara Thompson-Hegmann | mathew_block@hotmail.com | Goyetteworth | Active | $814.72 | |
| Total | $3,569.67 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tania Brown | hilda0@hotmail.com | New Colestead | Active | $941.21 | |
| Archie Smith | susie18@yahoo.com | East Lorna | Active | $326.88 | |
| Ashleigh Dickinson-Leffler | jacky23@gmail.com | Wisozk-Connellyfield | Active | $846.11 | |
| Stephan Conn PhD | ira42@hotmail.com | Susannaboro | Inactive | $967.18 | |
| Emma Robel Jr. | rufus_harvey@yahoo.com | Fort Enriqueberg | Active | $621.79 | |
| Total | $3,703.17 | ||||
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 | |
|---|---|---|---|---|
| Jo Lehner | jillian.mcdermott87@hotmail.com | North Marilynborough | Active | $534.85 |
| Mercedes Mohr | amy.mayert63@yahoo.com | Cliftonview | Inactive | $816.48 |
| Adaline Mante | delia_parker@gmail.com | Jonesboro | Active | $129.31 |
| Kenya MacGyver | trinity.funk@hotmail.com | Janisfort | Inactive | $28.59 |
| Grady Bauch | josh_breitenberg@yahoo.com | Adamsberg | Inactive | $1,110.29 |
| Hugo Mann | monique.jerde60@gmail.com | Heidenreichchester | Inactive | $683.97 |
| Mozell Welch | halie_schmitt@hotmail.com | Twilaville | Active | $1,026.32 |
| Josh Raynor | arthur_rempel@yahoo.com | Aniyahborough | Active | $447.95 |
| Vilma Fritsch I | felipe8@hotmail.com | New Deronstad | Active | $508.26 |
| Max Kozey | sharon.spinka0@hotmail.com | West Ruben | Active | $934.17 |
| Olive Hegmann | angie45@yahoo.com | West Fredrick | Active | $1,116.55 |
| Miss Darrick Farrell | monique_schaden46@yahoo.com | Fort Zacheryfort | Inactive | $1,114.57 |
| Conrad Bosco | daren35@gmail.com | Fort Alanview | Inactive | $822.02 |
| Eusebio Hoeger | shyann9@yahoo.com | Grahamworth | Active | $295.74 |
| Glennie Padberg | carl.towne4@hotmail.com | Tarynhaven | Inactive | $1,120.36 |
| Total | $10,689.43 | |||
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 |