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 | Unpaid | PayPal | $836.68 |
| INV002 | Pending | Credit Card | $680.74 |
| INV003 | Pending | Credit Card | $603.69 |
| INV004 | Unpaid | PayPal | $913.66 |
| INV005 | Unpaid | PayPal | $712.86 |
| INV006 | Pending | Bank Transfer | $995.08 |
| INV007 | Paid | Credit Card | $635.91 |
| Total | $5,378.62 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Michele Bradtke | Customer Markets Consultant | michele.bradtke@gmail.com | Admin | |
| Agnes Yundt | Legacy Response Strategist | agnes.yundt82@gmail.com | Member | |
| Lurline Murray | Investor Accounts Liaison | lurline.murray45@gmail.com | Member | |
| Vera Corwin | Corporate Factors Designer | vera_corwin@hotmail.com | Viewer | |
| Cleo Rogahn | Legacy Group Associate | cleo.rogahn@yahoo.com | Admin | |
| Ena Willms | Customer Group Engineer | ena.willms@yahoo.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 |
|---|---|---|
Bobbie Beahan Regional Communications Analyst bobbie_beahan@hotmail.com | Viewer | |
Keith Powlowski Investor Operations Supervisor keith_powlowski46@hotmail.com | Viewer | |
Brandon Kessler Lead Tactics Executive brandon_kessler@gmail.com | Member | |
Jarvis Hammes Forward Integration Strategist jarvis_hammes78@hotmail.com | Member | |
Orpha Metz National Implementation Manager orpha_metz@gmail.com | Admin | |
Hope Kertzmann Lead Functionality Developer hope.kertzmann@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Victoria Treutel Corporate Quality Developer victoria_treutel@gmail.com | Member | |
Grant Hermann Senior Implementation Director grant_hermann45@gmail.com | Member | |
Tabitha Gerhold Corporate Usability Designer tabitha_gerhold14@hotmail.com | Viewer | |
Vern Kuhic-Hermiston Forward Factors Analyst vern_kuhic-hermiston40@gmail.com | Admin | |
Delia Herzog Dynamic Accountability Assistant delia.herzog26@yahoo.com | Member | |
Nelson Walter Legacy Branding Administrator nelson_walter2@yahoo.com | Admin | |
Bulah Moen International Infrastructure Planner bulah_moen33@gmail.com | Admin | |
Kevin Wilkinson-Blanda Human Functionality Supervisor kevin_wilkinson-blanda@hotmail.com | Viewer | |
Eunice MacGyver Chief Integration Coordinator eunice_macgyver87@hotmail.com | Member | |
George Monahan Lead Accounts Facilitator george_monahan@yahoo.com | Admin | |
Lyle Leuschke Regional Data Strategist lyle_leuschke43@gmail.com | Member | |
Mona Hauck Human Web Analyst mona.hauck46@hotmail.com | Viewer | |
Julie Kovacek Corporate Implementation Associate julie.kovacek3@gmail.com | Member | |
Ahmad Williamson Internal Infrastructure Manager ahmad_williamson37@gmail.com | Viewer | |
Irma Auer National Marketing Manager irma_auer81@gmail.com | Member | |
Lulu Zulauf International Applications Director lulu.zulauf@gmail.com | Admin | |
Esta Schamberger Principal Infrastructure Planner esta_schamberger@yahoo.com | Admin | |
Clare White-Smitham Future Operations Producer clare.white-smitham@hotmail.com | Viewer | |
Lila Rowe International Accountability Representative lila.rowe@gmail.com | Member | |
Everette Rolfson Direct Creative Coordinator everette.rolfson26@gmail.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 | |
|---|---|---|---|---|
| Dominic Schmeler-Gleichner III | trisha70@gmail.com | Redondo Beach | Active | $1.97 |
| Dr. Maude Bradtke-Erdman IV | vera_senger60@gmail.com | Satterfieldstad | Active | $1,004.24 |
| Stacy Hudson | alta.gulgowski12@yahoo.com | Lake Araceli | Active | $54.54 |
| Brandy Runolfsdottir | flossie.nikolaus@yahoo.com | Bradtkeland | Inactive | $137.61 |
| Patti Grady | terry_franecki@gmail.com | Brookestad | Active | $279.17 |
| Total | $1,477.53 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Quinton Thompson @elaine79 | ruby.murazik@yahoo.com | Rowechester | Inactive | $1,164.96 |
Carla Huel @lori_metz-jenkins | maria_steuber0@gmail.com | Murray-Gibsonberg | Inactive | $1,149.13 |
Lilyan Ratke V @tyree11 | danny.wolff@yahoo.com | Greenholtbury | Inactive | $116.89 |
Franklin Turner @jakayla_connelly | felipe_schowalter32@gmail.com | Jaydeboro | Active | $332.01 |
Reta Schultz @carey14 | garrett_beier@gmail.com | Port Lucie | Inactive | $225.42 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Carole Conn | laurianne41@gmail.com | Catherineburgh | Inactive | $92.09 |
| Timmy Kuhn | easton.haag@hotmail.com | Lake Bobbie | Active | $556.87 |
| Rosemary Flatley | amie.rodriguez7@hotmail.com | Ryleystad | Inactive | $1,135.19 |
| Stefan Hintz | sandra14@yahoo.com | Rathbury | Inactive | $350.48 |
| Virginie Glover-Leannon | bobbie.blanda@yahoo.com | Kshlerincester | Active | $1,065.22 |
| Total | $3,199.85 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cristina Cassin | judith_fay@hotmail.com | Schroederbury | Inactive | $518.60 |
| Mr. Don Dietrich | bethany_ryan@gmail.com | East Estelle | Inactive | $176.69 |
| Miguel Spencer III | sadie.denesik70@hotmail.com | Fort Michael | Inactive | $513.30 |
| Dr. Sherman Harber | dylan_legros-anderson77@gmail.com | West Madisyn | Inactive | $601.34 |
| Saul Klocko | dena.herman58@hotmail.com | Maggiotown | Inactive | $169.73 |
| Total | $1,979.66 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Betty Cole | georgia_roob@hotmail.com | Port Matt | Inactive | $482.91 |
| Damon Zieme | rene_volkman21@yahoo.com | North Domenico | Active | $177.70 |
| Maegan Kuvalis | terrence47@yahoo.com | New Addiebury | Active | $260.39 |
| Hugh Powlowski | jayde_kertzmann37@hotmail.com | Whiteland | Inactive | $1,130.55 |
| Walter Dibbert | everett_braun@gmail.com | Winifredborough | Active | $1,176.31 |
| Total | $3,227.86 | |||
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 | ||
|---|---|---|---|---|---|
| Milton Wyman | lessie.blick-krajcik64@gmail.com | Rockford | Inactive | $120.10 | |
| Elias Lowe | mandy.jacobs@yahoo.com | Salinas | Inactive | $1,117.76 | |
| Ada Feest | dayne.rohan71@hotmail.com | Mohrton | Inactive | $974.62 | |
| Orlo Wintheiser | april_cronin@hotmail.com | Lake Rosalie | Active | $24.87 | |
| Branson Renner-Brekke | lamar7@gmail.com | O'Connerton | Active | $1,055.06 | |
| Total | $3,292.41 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Darlene Jacobi | tressa92@yahoo.com | Sparks | Inactive | $802.49 | |
| Lauryn Schaefer | korbin89@gmail.com | Pontiac | Inactive | $1,094.44 | |
| Nelda Koss I | celestine50@gmail.com | Fort Sue | Inactive | $242.48 | |
| Alexane Beatty | miranda_grimes@yahoo.com | South Kirstin | Active | $318.66 | |
| Tyreek Runolfsson | loretta.barrows@yahoo.com | West Eusebioboro | Active | $880.55 | |
| Total | $3,338.62 | ||||
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 | |
|---|---|---|---|---|
| Shelly Kihn | fannie_bashirian34@hotmail.com | Lake Joshuahaven | Active | $353.03 |
| Garrett Nicolas | douglas_cummerata32@gmail.com | Gutkowskiworth | Inactive | $1,027.27 |
| Emilio Dickens | ted73@yahoo.com | Middletown | Inactive | $36.11 |
| Carlee Spinka | betty.balistreri@yahoo.com | Maxinefurt | Active | $810.97 |
| Jaden Dickens PhD | margaret5@yahoo.com | Lake Wilhelm | Active | $998.24 |
| Sister Wisoky PhD | alessandra.beier@yahoo.com | Johanfurt | Active | $1,031.64 |
| Norman Larkin-Dickens | onie.rath@hotmail.com | Appleton | Inactive | $298.58 |
| Ottilie Batz | noel.schuster@hotmail.com | Norfolk | Inactive | $843.08 |
| Barney Tromp | audrey.rohan@hotmail.com | New Ephraimstad | Inactive | $480.94 |
| Dallas Emmerich | melody.sanford@gmail.com | Antonettaton | Active | $210.94 |
| Lindsay Grimes III | scott_lowe@hotmail.com | Milford | Inactive | $814.31 |
| Bertha Heidenreich | leanna0@yahoo.com | North Bret | Inactive | $557.22 |
| Sarina Bailey | kristine98@yahoo.com | Edaville | Active | $781.76 |
| Cary Kutch | norbert_maggio72@gmail.com | Port Raul | Active | $1,085.08 |
| Clare Murray | gaston48@gmail.com | New Mario | Active | $675.89 |
| Total | $10,005.06 | |||
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 |