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 | Bank Transfer | $667.11 |
| INV002 | Paid | Bank Transfer | $187.70 |
| INV003 | Paid | Credit Card | $856.11 |
| INV004 | Paid | Credit Card | $662.86 |
| INV005 | Pending | Bank Transfer | $846.37 |
| INV006 | Unpaid | PayPal | $467.94 |
| INV007 | Paid | Bank Transfer | $531.26 |
| Total | $4,219.35 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Bethany Toy | Central Optimization Executive | bethany_toy@hotmail.com | Admin | |
| Alexander Nitzsche | Principal Response Engineer | alexander.nitzsche@yahoo.com | Viewer | |
| Cedric Robel | Corporate Solutions Director | cedric_robel81@hotmail.com | Viewer | |
| Maryann Hodkiewicz | Product Mobility Designer | maryann_hodkiewicz@yahoo.com | Member | |
| Abigail Willms | Forward Group Technician | abigail.willms@gmail.com | Admin | |
| Sergio Johnston | Central Paradigm Supervisor | sergio.johnston94@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 |
|---|---|---|
Carl Walter Future Paradigm Engineer carl.walter@yahoo.com | Admin | |
Nella Ernser Forward Branding Designer nella.ernser@gmail.com | Viewer | |
Betsy Rowe Legacy Accounts Facilitator betsy.rowe@yahoo.com | Admin | |
Kyla Kemmer National Intranet Developer kyla.kemmer@hotmail.com | Admin | |
Pablo Gusikowski Principal Identity Supervisor pablo.gusikowski@yahoo.com | Member | |
Homer Ryan Chief Paradigm Agent homer.ryan27@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 |
|---|---|---|
Neha Cronin Central Implementation Agent neha_cronin1@yahoo.com | Viewer | |
Rosalee Gusikowski Dynamic Directives Analyst rosalee.gusikowski@gmail.com | Viewer | |
Caleb Gerhold Direct Marketing Officer caleb.gerhold@hotmail.com | Admin | |
Santino Hackett Forward Research Engineer santino_hackett@yahoo.com | Admin | |
Emmett Hettinger Chief Solutions Planner emmett_hettinger75@hotmail.com | Viewer | |
Joey Braun National Functionality Representative joey.braun51@gmail.com | Admin | |
Allen Pfeffer Dynamic Integration Specialist allen.pfeffer@yahoo.com | Admin | |
Rogelio Bahringer Corporate Group Architect rogelio.bahringer@gmail.com | Member | |
Peggy Windler Global Operations Strategist peggy.windler17@yahoo.com | Viewer | |
Lois Senger Customer Implementation Developer lois.senger83@yahoo.com | Viewer | |
Gordon Mayert Corporate Factors Developer gordon.mayert@gmail.com | Member | |
Monica Macejkovic Central Group Designer monica.macejkovic81@yahoo.com | Viewer | |
Orlando Wolff National Optimization Officer orlando_wolff35@yahoo.com | Viewer | |
Allan Barrows Investor Optimization Agent allan.barrows41@hotmail.com | Viewer | |
Jim Watsica Product Infrastructure Administrator jim.watsica@yahoo.com | Admin | |
Meghan Harber Senior Functionality Developer meghan.harber@hotmail.com | Viewer | |
Jennifer Beer Customer Group Designer jennifer_beer@yahoo.com | Member | |
Brandyn Wisoky-Rath Future Brand Administrator brandyn.wisoky-rath72@yahoo.com | Viewer | |
Amiya Howell-Barrows District Usability Analyst amiya.howell-barrows@hotmail.com | Viewer | |
Alexandre Fisher Principal Data Specialist alexandre.fisher11@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 | |
|---|---|---|---|---|
| Gustavo Mueller | bettye.turner@hotmail.com | Aurora | Inactive | $361.91 |
| Margie Friesen-Monahan V | elena30@gmail.com | Bossier City | Inactive | $594.44 |
| Preston Kohler | ismael.ferry@gmail.com | Gissellechester | Active | $148.55 |
| Amie Hermann | ross.renner@hotmail.com | New Darron | Inactive | $514.06 |
| Lorena Koelpin | maurice.schmeler@gmail.com | North Eddie | Inactive | $596.92 |
| Total | $2,215.88 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dr. Deanna Kiehn-Simonis @emiliano58 | savanah_hoeger78@yahoo.com | East Sofiaboro | Active | $86.74 |
Dr. Matthew Dach-Bosco @eileen.donnelly | duncan.jacobs@yahoo.com | East Mariahfield | Active | $493.43 |
Helen Schulist @marcella73 | alvis_daniel@hotmail.com | South Jerel | Inactive | $102.64 |
Adam Ebert @jaydon_bednar | michelle.green@yahoo.com | East Alvenaworth | Active | $774.45 |
Hannah Brown @joanne.reynolds | vicente_wyman28@gmail.com | Deanfort | Inactive | $233.21 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Carole Emmerich | liana_willms@hotmail.com | Kirashire | Active | $222.57 |
| Vilma Fadel | elody.senger42@hotmail.com | Tucson | Inactive | $224.52 |
| Candace Rempel | peggy45@hotmail.com | Welchburgh | Inactive | $627.07 |
| Gerardo Bernhard | rogelio.gottlieb@gmail.com | South Bobbyberg | Inactive | $985.82 |
| Anais Okuneva-Grady | matthew_will@gmail.com | West Matildefurt | Active | $978.22 |
| Total | $3,038.20 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Fredrick Cassin-Hamill | henrietta55@yahoo.com | Novi | Active | $126.67 |
| Rene Senger | ahmad3@hotmail.com | Severn | Inactive | $823.85 |
| Kadin Cruickshank-Keeling | fredy_kessler90@hotmail.com | Hempstead | Inactive | $479.98 |
| Gustave Bradtke PhD | stacey.carroll@hotmail.com | Port Jennings | Inactive | $211.00 |
| Samantha Kerluke-Jenkins | adolphus.labadie68@hotmail.com | New Garrickport | Active | $600.80 |
| Total | $2,242.30 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jaron Gleichner | candido_walsh@yahoo.com | New Aydenton | Active | $501.32 |
| Verna Kulas | martin.denesik8@hotmail.com | New Gwen | Inactive | $1,120.75 |
| Eduardo Huels | otho10@gmail.com | Bartonshire | Inactive | $575.34 |
| Magdalen Frami | eloise33@hotmail.com | Morissetteport | Inactive | $171.44 |
| Miss Alison Grady | alexandra69@hotmail.com | Skiles-Weimannstad | Active | $529.67 |
| Total | $2,898.52 | |||
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 | ||
|---|---|---|---|---|---|
| Marisa Streich | dante.lueilwitz77@gmail.com | Lake Autumn | Active | $237.56 | |
| Cleta Koch | joseph_metz65@gmail.com | West Valley City | Active | $1,004.54 | |
| Dixie Kunde | nya.reichel27@hotmail.com | Goldnerborough | Inactive | $666.51 | |
| Alma Bogan | manuel_stanton74@hotmail.com | Vista | Active | $1,123.55 | |
| Roberto Beahan | alexandra42@gmail.com | Franciscoview | Inactive | $1,071.42 | |
| Total | $4,103.58 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bertram Frami-Schneider | rosario33@gmail.com | Thornton | Inactive | $87.58 | |
| Mia Jaskolski | sue.nader71@yahoo.com | Asiaboro | Active | $614.55 | |
| Meda Dietrich | elenor.graham@yahoo.com | South Reese | Inactive | $193.15 | |
| Alison Smitham | ena.parisian@hotmail.com | West Cornellborough | Inactive | $1,019.77 | |
| Renee Heaney-Harvey | betty.goldner32@gmail.com | New Darlatown | Active | $679.87 | |
| Total | $2,594.92 | ||||
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 | |
|---|---|---|---|---|
| Helen Gottlieb-Mueller | maida.powlowski67@gmail.com | Lake Eloise | Inactive | $579.22 |
| Clifford Kirlin | helen_schoen@gmail.com | Mayboro | Inactive | $270.68 |
| Nash Hammes | sue59@yahoo.com | Corwinstead | Inactive | $446.47 |
| Everette Predovic | homer.gislason@hotmail.com | Rippinworth | Inactive | $844.49 |
| Dave Labadie | diamond.feil52@yahoo.com | Cathedral City | Active | $991.12 |
| Hugo Dickens | elvis_rempel54@yahoo.com | Centreville | Active | $185.90 |
| Alysson Streich | beulah_nolan76@gmail.com | West William | Active | $1,126.90 |
| James Harris | demario.wolf34@hotmail.com | San Bernardino | Active | $974.10 |
| Louis Bins | alonzo.hintz50@yahoo.com | East Jenifer | Active | $73.34 |
| Juan O'Connell | odell.walker37@gmail.com | San Bernardino | Active | $687.81 |
| Miss Ansley Hettinger I | cloyd_gleichner23@yahoo.com | Nienowberg | Active | $496.46 |
| Shelly Mueller | darien.morissette@gmail.com | Port Marcostead | Active | $246.58 |
| Rachel Walsh | emmy_labadie@yahoo.com | Pompano Beach | Active | $1,115.69 |
| Elijah Ondricka | ann.oconner@hotmail.com | Delphafurt | Inactive | $526.47 |
| Yvette Hane | anjali_kuvalis@yahoo.com | East Anafurt | Inactive | $443.97 |
| Total | $9,009.20 | |||
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 |