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 | Credit Card | $887.05 |
| INV002 | Pending | Credit Card | $407.41 |
| INV003 | Paid | Credit Card | $805.36 |
| INV004 | Paid | Bank Transfer | $746.84 |
| INV005 | Pending | Bank Transfer | $960.44 |
| INV006 | Unpaid | PayPal | $162.33 |
| INV007 | Unpaid | PayPal | $374.50 |
| Total | $4,343.93 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Margarita Rempel | Senior Factors Designer | margarita_rempel@hotmail.com | Viewer | |
| Jake Brekke | Central Program Planner | jake.brekke@hotmail.com | Admin | |
| Norwood Maggio | Legacy Implementation Executive | norwood_maggio@yahoo.com | Member | |
| Naomie Pollich | Chief Accounts Manager | naomie_pollich45@gmail.com | Admin | |
| Jay Johnson | Central Response Engineer | jay_johnson37@hotmail.com | Viewer | |
| Ignatius Wisozk | Central Optimization Technician | ignatius.wisozk@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 |
|---|---|---|
Camille Heller District Directives Planner camille_heller10@yahoo.com | Member | |
Charlene Erdman Future Implementation Manager charlene_erdman@hotmail.com | Viewer | |
Vernice West Internal Usability Strategist vernice_west59@gmail.com | Member | |
Vincent Yundt Forward Markets Supervisor vincent_yundt@yahoo.com | Admin | |
Clementine Runolfsson Legacy Infrastructure Planner clementine.runolfsson99@gmail.com | Member | |
Leola Kuvalis Global Paradigm Consultant leola_kuvalis79@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 |
|---|---|---|
Janis Bosco Central Implementation Orchestrator janis.bosco13@gmail.com | Member | |
Antonio McDermott International Research Associate antonio.mcdermott33@hotmail.com | Viewer | |
Edmund McCullough Corporate Tactics Assistant edmund_mccullough77@gmail.com | Viewer | |
Gardner Aufderhar Direct Division Consultant gardner_aufderhar@hotmail.com | Admin | |
Lorraine Feil Internal Functionality Liaison lorraine_feil@hotmail.com | Viewer | |
Lucinda Adams Dynamic Division Agent lucinda_adams25@gmail.com | Member | |
Aimee Abshire Future Data Administrator aimee_abshire@gmail.com | Viewer | |
Stephen Roob Future Optimization Coordinator stephen.roob48@hotmail.com | Member | |
Irvin Steuber Corporate Marketing Producer irvin.steuber52@gmail.com | Member | |
Nadine Walsh Lead Factors Facilitator nadine_walsh26@gmail.com | Admin | |
Dixie Spencer Lead Identity Developer dixie_spencer28@gmail.com | Member | |
Herta Rowe Forward Markets Planner herta_rowe@yahoo.com | Admin | |
Andres Purdy Principal Identity Director andres_purdy71@hotmail.com | Member | |
Arvid Lind Dynamic Applications Engineer arvid_lind@gmail.com | Viewer | |
Jason Stanton International Optimization Orchestrator jason.stanton29@gmail.com | Member | |
Erin Adams Investor Security Architect erin_adams@yahoo.com | Viewer | |
Harrison Bechtelar Product Research Supervisor harrison.bechtelar38@hotmail.com | Member | |
Nichole Parisian Global Tactics Orchestrator nichole_parisian79@yahoo.com | Member | |
Gus Terry Senior Implementation Agent gus_terry@hotmail.com | Viewer | |
Jean Mohr Forward Security Facilitator jean_mohr@yahoo.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 | |
|---|---|---|---|---|
| Vincenza Lynch V | claudie.mcglynn75@hotmail.com | New Katiehaven | Inactive | $539.28 |
| Penny Champlin II | austin_durgan46@gmail.com | Jaleelmouth | Active | $840.54 |
| Margarett Schaefer | georgianna_mertz@hotmail.com | North Cobystead | Active | $26.70 |
| Tanya Schmeler Jr. | jennifer.welch@gmail.com | New Elena | Inactive | $710.01 |
| Ms. Elaine MacGyver III | charlotte_conroy@gmail.com | St. Cloud | Active | $268.61 |
| Total | $2,385.14 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Maudie Stanton DDS @madeline.bernhard-cassin | gabriel.abernathy@gmail.com | Bartolettistad | Active | $623.42 |
Mr. Nelda Walker @verna.macgyver39 | natalie.abernathy69@yahoo.com | New Jazmin | Active | $330.17 |
Kate Hessel @gilberto43 | teresa18@hotmail.com | Mullerport | Inactive | $1,111.22 |
Brandy Schuster @bernard.donnelly | ethan_casper9@hotmail.com | Jaskolskihaven | Active | $629.15 |
Ruben Sipes MD @june.erdman | harold.rolfson@hotmail.com | Brownboro | Inactive | $1,111.55 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gabrielle Feil | audreanne.kub-homenick70@yahoo.com | West Luisa | Active | $700.35 |
| Lowell McLaughlin | ali.ritchie19@gmail.com | Antonettefort | Active | $1,046.47 |
| Faith Hirthe | fredrick57@hotmail.com | Sunrise Manor | Inactive | $988.10 |
| Miss Aditya Mosciski | lindsey91@yahoo.com | New Treverland | Inactive | $314.56 |
| Mr. Elwyn Muller | sara.stokes4@gmail.com | Anabelleville | Active | $331.46 |
| Total | $3,380.94 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Clark Stark | chauncey.murray@gmail.com | South Rickybury | Active | $521.40 |
| Sidney Streich | tracey.stiedemann@hotmail.com | East Filomenaland | Inactive | $59.99 |
| Helga Gerlach | rhiannon_weber64@yahoo.com | New Tyrel | Active | $568.55 |
| Ira Stamm | rebeka.mayer@gmail.com | Yorba Linda | Active | $736.81 |
| Jackie Kiehn | kirk_harvey89@yahoo.com | Nashua | Inactive | $58.70 |
| Total | $1,945.45 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gideon O'Connell | macey72@gmail.com | Port Alec | Inactive | $8.33 |
| Andre Fadel | miguel31@hotmail.com | Lake Harriet | Inactive | $1,117.52 |
| Gaetano Boyer | allen_block@gmail.com | South Quintenborough | Active | $380.42 |
| Maverick Adams | alonzo_marks59@gmail.com | New Erica | Active | $616.83 |
| Teri Johns | alexandrine_purdy93@hotmail.com | Antoniofurt | Inactive | $897.74 |
| Total | $3,020.84 | |||
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 | ||
|---|---|---|---|---|---|
| Nettie Upton | joanne64@hotmail.com | North Pierrefield | Active | $1,043.18 | |
| Margarita Ankunding | regina_kunze50@yahoo.com | Lake Marcialand | Inactive | $26.70 | |
| Thea Herman | beverly_price@gmail.com | Houston | Active | $1,118.14 | |
| Ryan Borer | melba52@yahoo.com | Borerview | Inactive | $331.84 | |
| William Littel | kari.gerhold@gmail.com | Dickicester | Inactive | $1,177.62 | |
| Total | $3,697.48 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mauricio Mills | blake.cartwright@yahoo.com | Eugenemouth | Inactive | $1,179.51 | |
| Savion Jaskolski Jr. | alessandro_mante@hotmail.com | Mayertmouth | Inactive | $3.93 | |
| Clyde Wisozk | verlie60@gmail.com | Murrieta | Inactive | $780.87 | |
| Judge Russel | creola56@yahoo.com | Lake Herman | Active | $493.04 | |
| Shemar Hane | mohammad_keeling@yahoo.com | Lake Jane | Inactive | $1,089.23 | |
| Total | $3,546.58 | ||||
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 | |
|---|---|---|---|---|
| Andrea Williamson | warren81@yahoo.com | Jacobsmouth | Active | $323.20 |
| Ebony Skiles | quincy.herzog70@hotmail.com | Lake Douglas | Active | $154.17 |
| Jamey Lesch | raquel_konopelski@yahoo.com | Las Vegas | Active | $274.26 |
| Camden Aufderhar | shawna17@hotmail.com | Diamond Bar | Inactive | $956.84 |
| Terrance Bauch | fernando68@gmail.com | Goldnerville | Active | $1,090.57 |
| Hellen Hane | domingo_casper45@yahoo.com | Lake Wainostad | Inactive | $12.53 |
| Nichole Bins | clotilde.wolff65@hotmail.com | Davionchester | Inactive | $655.13 |
| Xavier Schmeler | bessie.ullrich75@gmail.com | Sanford | Inactive | $1,176.17 |
| Jarrell Heathcote | daniel95@gmail.com | Fort Gregoriobury | Inactive | $311.73 |
| Kristie Robel | lyle58@gmail.com | Kochland | Active | $892.48 |
| Esther Keebler | ron.gottlieb63@gmail.com | Wolfstead | Active | $929.97 |
| Dominic Runte IV | columbus.pouros@hotmail.com | Port Becky | Active | $234.00 |
| Felix Weimann | latoya.casper73@hotmail.com | Fort Sydnee | Active | $393.75 |
| Mitchel Thompson | milton_huel25@hotmail.com | Kuvalisport | Active | $891.05 |
| Winston Lubowitz III | lindsey_terry37@gmail.com | Koelpincester | Active | $1,097.38 |
| Total | $9,393.23 | |||
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 |