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 | PayPal | $913.84 |
| INV002 | Unpaid | Bank Transfer | $294.04 |
| INV003 | Paid | PayPal | $390.95 |
| INV004 | Paid | Bank Transfer | $523.00 |
| INV005 | Pending | Credit Card | $937.37 |
| INV006 | Unpaid | Bank Transfer | $975.22 |
| INV007 | Unpaid | Credit Card | $411.41 |
| Total | $4,445.83 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ben Kozey | Dynamic Configuration Supervisor | ben.kozey@gmail.com | Viewer | |
| Alexa Rutherford | Investor Configuration Director | alexa_rutherford@hotmail.com | Viewer | |
| Ettie Kessler | Investor Implementation Manager | ettie.kessler@hotmail.com | Admin | |
| Lorenzo Rodriguez | Chief Optimization Engineer | lorenzo_rodriguez@gmail.com | Admin | |
| Kristi Rice | Dynamic Factors Engineer | kristi_rice26@gmail.com | Member | |
| Anne Franecki | Senior Tactics Developer | anne_franecki68@hotmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jarvis Padberg Product Interactions Administrator jarvis_padberg@hotmail.com | Admin | |
Maxine Stroman International Creative Agent maxine_stroman@gmail.com | Viewer | |
Verdie Towne Dynamic Quality Orchestrator verdie.towne@gmail.com | Member | |
Cornelius West Human Functionality Orchestrator cornelius_west85@hotmail.com | Viewer | |
Tad Bergstrom National Operations Representative tad_bergstrom@hotmail.com | Member | |
Malika Considine Regional Implementation Technician malika.considine35@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 |
|---|---|---|
Ruby Ratke Legacy Marketing Executive ruby_ratke22@hotmail.com | Viewer | |
Roberta Hoeger Human Infrastructure Architect roberta_hoeger11@gmail.com | Viewer | |
Pasquale Beer-Sporer Forward Paradigm Associate pasquale_beer-sporer77@yahoo.com | Viewer | |
Lindsay Mitchell Customer Division Agent lindsay.mitchell92@yahoo.com | Member | |
Bryan Stoltenberg Regional Interactions Officer bryan_stoltenberg91@yahoo.com | Admin | |
Andrew Leannon Dynamic Communications Administrator andrew_leannon47@yahoo.com | Viewer | |
Karen Windler Central Group Strategist karen_windler@hotmail.com | Admin | |
Tim Hills International Paradigm Supervisor tim_hills@hotmail.com | Admin | |
Christina Bosco Investor Division Developer christina.bosco75@hotmail.com | Viewer | |
David Marquardt National Division Engineer david.marquardt@gmail.com | Member | |
Elijah Koepp Forward Brand Assistant elijah_koepp19@gmail.com | Member | |
Maurice Turner Chief Intranet Architect maurice.turner32@hotmail.com | Member | |
Nia Jones-Gutkowski Chief Marketing Strategist nia_jones-gutkowski65@hotmail.com | Viewer | |
Antonio Kuphal Central Applications Producer antonio_kuphal49@hotmail.com | Admin | |
Eladio Green District Applications Supervisor eladio.green@hotmail.com | Member | |
Isai Lubowitz Senior Web Planner isai_lubowitz67@hotmail.com | Admin | |
Ross Schaden Direct Assurance Engineer ross.schaden@hotmail.com | Viewer | |
Ari Kautzer Corporate Factors Analyst ari.kautzer@hotmail.com | Member | |
Patty Boyer Human Security Associate patty_boyer@hotmail.com | Member | |
Holly Nienow Internal Creative Architect holly.nienow@yahoo.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 | |
|---|---|---|---|---|
| Helen Walsh | myriam.smith76@gmail.com | East Jovanistead | Active | $99.90 |
| Bryant Marks | colin87@yahoo.com | Strackebury | Inactive | $436.10 |
| Mr. Ramon Huels | gardner_hills@gmail.com | New Oscar | Active | $815.90 |
| Naomi Labadie | colin.legros21@hotmail.com | East Calvin | Inactive | $949.88 |
| Macey Schaden | adella_glover@gmail.com | South Humbertocester | Inactive | $209.44 |
| Total | $2,511.22 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Julian Kozey @annette96 | ronald.borer88@hotmail.com | Lake Dewayne | Active | $456.61 |
Garrett Kozey @general5 | samantha_conn33@hotmail.com | Jessycaview | Inactive | $926.36 |
Sheldon Schulist @shirley.schmitt9 | earnest98@hotmail.com | Davinfurt | Inactive | $359.32 |
Nico Jast @connie_hilll | velva_stark76@gmail.com | West Lina | Active | $133.15 |
Mr. Bennie Kozey @heidi.ortiz | rafael_schmeler@yahoo.com | Fort Marie | Inactive | $1,138.48 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roberto Effertz | lucious.ankunding-mcclure@hotmail.com | Fort Simonborough | Inactive | $802.08 |
| Donna Swift | lisa.maggio63@gmail.com | New Roberto | Inactive | $544.56 |
| Gina Keeling | marcel.adams@hotmail.com | Port Marcofurt | Active | $876.84 |
| Brian Christiansen | dante_hudson@hotmail.com | Fort Winfieldstead | Inactive | $858.00 |
| Jacob Zulauf | deangelo99@yahoo.com | Sporerfield | Active | $669.99 |
| Total | $3,751.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mireille Ebert | shaylee.mosciski@hotmail.com | North Rebeca | Active | $988.92 |
| Kelsie Sawayn | rosalind.sporer-carroll@gmail.com | Lake Andretown | Inactive | $1,172.83 |
| Khalil Johnson | carrie.fahey68@gmail.com | Port Yasmeenstad | Active | $127.67 |
| Jaida Bosco | muriel60@gmail.com | Maxland | Inactive | $824.87 |
| Pierre O'Keefe | sheldon77@gmail.com | Tamiami | Active | $883.87 |
| Total | $3,998.16 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Paula Ryan | clinton17@yahoo.com | Lake Jeanette | Inactive | $1,107.09 |
| Malcolm Boehm | floyd20@hotmail.com | New Amosmouth | Inactive | $734.60 |
| Mrs. Marsha Brakus | gloria45@yahoo.com | Georgetown | Inactive | $205.13 |
| Jordan Cronin | brooks_pollich@gmail.com | Kassulkeburgh | Active | $747.51 |
| Renee Bechtelar-Mante DVM | elbert26@gmail.com | South Peggieboro | Active | $790.13 |
| Total | $3,584.46 | |||
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 Runte | hyman.anderson13@hotmail.com | Schaumburg | Active | $377.16 | |
| Jameson Rowe | robert_kuhlman-yundt@yahoo.com | Lake Daijaborough | Active | $243.08 | |
| Dr. Darrel Franecki | ed_ledner@yahoo.com | Port Lilybury | Inactive | $531.43 | |
| Randolph Schimmel | misty.greenfelder33@yahoo.com | Boehmmouth | Active | $629.15 | |
| Kobe Haley | pat_kutch@hotmail.com | North Estrellastead | Inactive | $926.58 | |
| Total | $2,707.40 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Abagail Satterfield | jess22@hotmail.com | East Derekburgh | Active | $90.37 | |
| Blanche Little-Deckow IV | jess_koelpin@gmail.com | Port Alexandrine | Inactive | $480.21 | |
| Miss Ada Walsh | ora76@hotmail.com | Diontown | Active | $723.52 | |
| Dax Breitenberg-Graham | penelope.quigley@yahoo.com | Wichita Falls | Inactive | $824.60 | |
| Pink Dooley V | meredith_kris9@gmail.com | New Allen | Active | $942.65 | |
| Total | $3,061.35 | ||||
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 | |
|---|---|---|---|---|
| Jaeden Stiedemann | alec_bins@hotmail.com | Leoneboro | Inactive | $221.59 |
| Gustavo Collier | tess81@yahoo.com | Shanyshire | Inactive | $1,155.76 |
| Elva Runolfsdottir | esther_schamberger@yahoo.com | Port Kelvin | Inactive | $35.03 |
| Greyson Lebsack | bria.king@gmail.com | Fort Marciachester | Inactive | $512.77 |
| Yolanda Turner | keely67@yahoo.com | North Deannaberg | Active | $1,071.54 |
| Anna Gusikowski | hattie.lemke38@hotmail.com | Richardson | Inactive | $128.04 |
| Roxane McCullough | anne72@yahoo.com | Leschshire | Inactive | $1,133.68 |
| Blanche Murphy | earnest_feeney62@hotmail.com | Fullerton | Inactive | $419.42 |
| Sherri Romaguera | lena80@gmail.com | Bradtkeport | Active | $442.79 |
| Triston Muller | neil_hayes@gmail.com | Bernadetteside | Inactive | $1,094.61 |
| Olivia Morissette | ben41@gmail.com | Lake Joseph | Inactive | $595.99 |
| Ray Wiza | claudia.dare76@gmail.com | New Perrybury | Inactive | $954.20 |
| Bryant Raynor | shelley_mohr54@gmail.com | Stuartfurt | Active | $998.25 |
| Jenny Kovacek | janie.donnelly85@yahoo.com | North Las Vegas | Inactive | $1,108.96 |
| Mr. Bernardo Ledner | abdiel92@hotmail.com | Wilmington | Inactive | $1,052.87 |
| Total | $10,925.50 | |||
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 |