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 | Bank Transfer | $283.51 |
| INV002 | Unpaid | Credit Card | $740.13 |
| INV003 | Paid | PayPal | $226.15 |
| INV004 | Pending | Credit Card | $775.20 |
| INV005 | Pending | Bank Transfer | $518.17 |
| INV006 | Paid | Credit Card | $395.12 |
| INV007 | Unpaid | Bank Transfer | $933.99 |
| Total | $3,872.27 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Connor Murazik | Customer Brand Analyst | connor.murazik@yahoo.com | Member | |
| London Rosenbaum | Lead Directives Producer | london.rosenbaum@yahoo.com | Member | |
| Lourdes Prosacco | Corporate Research Engineer | lourdes_prosacco70@yahoo.com | Member | |
| Katelin Predovic | Product Mobility Producer | katelin_predovic77@yahoo.com | Viewer | |
| Luigi Torphy | Chief Marketing Supervisor | luigi.torphy@yahoo.com | Member | |
| Guadalupe King | Corporate Group Representative | guadalupe_king79@hotmail.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 |
|---|---|---|
Waldo Kautzer Customer Identity Representative waldo_kautzer78@gmail.com | Admin | |
Beulah Hilpert International Quality Associate beulah.hilpert@yahoo.com | Admin | |
Katlyn Huels Forward Accounts Facilitator katlyn.huels44@yahoo.com | Member | |
Dolores Hane Corporate Security Executive dolores_hane91@yahoo.com | Viewer | |
Elisabeth Koch Dynamic Integration Supervisor elisabeth.koch@gmail.com | Member | |
Jonathon Wolff Lead Response Engineer jonathon_wolff26@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kiel Murphy Legacy Marketing Officer kiel.murphy44@yahoo.com | Admin | |
Leon Kuhn Regional Implementation Producer leon_kuhn@yahoo.com | Viewer | |
Dallas Rau Product Response Planner dallas.rau@hotmail.com | Admin | |
Letha Becker-Monahan Human Data Coordinator letha_becker-monahan@yahoo.com | Member | |
Darnell Schmeler Dynamic Creative Agent darnell_schmeler62@gmail.com | Admin | |
Judy Gutmann Customer Creative Architect judy_gutmann33@yahoo.com | Admin | |
Kendra Shields Corporate Solutions Manager kendra_shields8@gmail.com | Viewer | |
Grace Moore Internal Communications Facilitator grace_moore@hotmail.com | Viewer | |
Bethany Sanford-Kihn Legacy Creative Liaison bethany_sanford-kihn94@gmail.com | Admin | |
Julian Mayer Regional Operations Manager julian_mayer@hotmail.com | Viewer | |
Tamara Bailey Dynamic Brand Supervisor tamara_bailey15@hotmail.com | Member | |
Micaela Donnelly Investor Program Strategist micaela_donnelly31@gmail.com | Admin | |
Cordie Rau Legacy Factors Coordinator cordie.rau@gmail.com | Member | |
Ramiro Jacobson-Osinski Senior Branding Liaison ramiro.jacobson-osinski64@gmail.com | Viewer | |
Hannah Sanford National Research Architect hannah_sanford81@gmail.com | Admin | |
James D'Amore Human Accounts Agent james.damore38@hotmail.com | Viewer | |
Cecelia Harber Corporate Infrastructure Producer cecelia.harber18@yahoo.com | Member | |
Vern Schaefer Lead Operations Analyst vern.schaefer34@yahoo.com | Admin | |
Richard Cole Principal Applications Producer richard.cole@gmail.com | Member | |
Deonte Considine Central Metrics Agent deonte.considine@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 | |
|---|---|---|---|---|
| Ginger West | rudolph.ernser1@hotmail.com | Port Veronica | Inactive | $865.99 |
| Blake Kautzer | christelle_langosh@gmail.com | Doylestad | Active | $856.75 |
| Antonia Denesik | ned.hammes@hotmail.com | West Katie | Active | $1,005.28 |
| Sheri Mueller | trent19@yahoo.com | East Angelo | Inactive | $796.96 |
| Mr. Jaquelin Lindgren | clifford81@yahoo.com | Port Athenaport | Inactive | $308.63 |
| Total | $3,833.61 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Joanny Weber @nelle93 | kaya1@hotmail.com | South Arianeborough | Active | $817.11 |
Stacy Maggio-Sipes @scottie73 | pearline_rogahn@gmail.com | Ebertboro | Inactive | $950.60 |
Phil Klocko @graciela_funk | mitchell51@hotmail.com | Yucaipa | Inactive | $350.67 |
Orland Carter @benjamin_hilpert46 | jacqueline37@yahoo.com | Hermannville | Active | $695.83 |
Melba Kreiger @abigail.sporer | rashawn_vonrueden@hotmail.com | Luciustown | Active | $1,004.07 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keegan Effertz | valentina_dibbert68@hotmail.com | Cicero | Active | $313.55 |
| Annabel Spinka | oren42@gmail.com | Beaumont | Active | $1,063.29 |
| Carli Huel | dewayne.heidenreich38@yahoo.com | South Alburgh | Inactive | $508.82 |
| Rickey Hyatt | austin54@hotmail.com | Leannontown | Active | $168.60 |
| Ms. Norma Ullrich | clinton_satterfield57@gmail.com | South San Francisco | Inactive | $1,056.03 |
| Total | $3,110.29 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Jade Kassulke | hugh53@gmail.com | North Elsie | Active | $1,043.52 |
| Emilio Haag | wesley_ernser@yahoo.com | Mesquite | Inactive | $499.68 |
| Carl Wiegand | sheryl79@gmail.com | Hampton | Active | $311.77 |
| Marguerite Nolan DDS | emilia_kreiger@hotmail.com | North Morgan | Active | $980.65 |
| Maureen Breitenberg | tomasa57@hotmail.com | Lafayette | Inactive | $795.41 |
| Total | $3,631.03 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Crawford Cole | jovani.goyette@hotmail.com | Reingerside | Active | $735.83 |
| Guy Beier | raquel32@gmail.com | Oxnard | Active | $255.31 |
| Turner Anderson | whitney.herman12@hotmail.com | Juanville | Active | $1,027.46 |
| Bryant Lynch | alverta.sawayn36@hotmail.com | Kubfurt | Active | $233.47 |
| Vivian Johnson | candace16@yahoo.com | New Henryberg | Inactive | $315.65 |
| Total | $2,567.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 | ||
|---|---|---|---|---|---|
| Jerrell Von | dwight.greenfelder-ziemann27@yahoo.com | North Nadineton | Inactive | $221.56 | |
| Clayton Lang | charlie.turcotte@hotmail.com | Lefflerstead | Inactive | $233.02 | |
| Daryl Hermiston | eva_schuppe@gmail.com | Green Bay | Active | $92.67 | |
| Mr. Evan Watsica | elizabeth.powlowski@yahoo.com | Janfort | Active | $745.46 | |
| Tyrese Okuneva DDS | lilla43@gmail.com | South Giovanniport | Active | $808.12 | |
| Total | $2,100.83 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Doris West | richmond_hackett@hotmail.com | Klockostead | Active | $621.65 | |
| Luis Lang | christopher.muller15@gmail.com | Flaviobury | Inactive | $197.48 | |
| Waino Wintheiser | tony22@hotmail.com | Kendrafurt | Inactive | $551.65 | |
| Timothy McKenzie | dennis_kerluke13@yahoo.com | Aufderharton | Active | $680.81 | |
| Brooklyn Treutel | valerie2@yahoo.com | Clifton | Inactive | $1,067.42 | |
| Total | $3,119.01 | ||||
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 | |
|---|---|---|---|---|
| Lindsay Legros | sarah.marks@gmail.com | Dominicshire | Active | $397.50 |
| Dr. Birdie Stracke | monica.koelpin63@yahoo.com | Port John | Inactive | $816.02 |
| Jacquelyn Monahan | trevor51@gmail.com | West Earlene | Active | $752.19 |
| Theresa Kuhn | alex.kuhic3@gmail.com | North Simeonton | Inactive | $877.19 |
| Filomena Mayer | jaylen78@gmail.com | Lemkefield | Active | $361.02 |
| Rosario Abbott | lewis14@yahoo.com | South Margueritefield | Inactive | $1,095.47 |
| Roselyn Batz | armando.beatty@yahoo.com | South Rodolfoville | Active | $759.18 |
| Tyrel Ritchie-Zemlak | raven.barrows44@hotmail.com | Weissnatview | Active | $108.69 |
| Shyanne Satterfield | dalton88@gmail.com | Bradton | Active | $928.14 |
| Mr. Jon Turner | olivia_ferry@yahoo.com | East Moises | Active | $348.25 |
| Van Willms | orlando.flatley@gmail.com | Juliusfurt | Inactive | $1,030.47 |
| Mr. Kody Beahan | gardner73@hotmail.com | Redding | Inactive | $257.05 |
| Gene Romaguera-Maggio | blanche_leffler@hotmail.com | Constanceboro | Inactive | $733.59 |
| Daphney Greenholt | dean.christiansen91@gmail.com | Buckeye | Inactive | $429.27 |
| Anderson Crona | marilou.hand@yahoo.com | Port Brandonhaven | Inactive | $1,145.25 |
| Total | $10,039.28 | |||
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 |



