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 | $611.87 |
| INV002 | Unpaid | Credit Card | $781.32 |
| INV003 | Paid | Bank Transfer | $984.53 |
| INV004 | Pending | Bank Transfer | $107.50 |
| INV005 | Unpaid | Credit Card | $742.89 |
| INV006 | Pending | Bank Transfer | $899.24 |
| INV007 | Pending | Credit Card | $332.33 |
| Total | $4,459.68 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Tony Satterfield | International Mobility Agent | tony_satterfield@gmail.com | Member | |
| Alexis Torp | Customer Mobility Director | alexis_torp@gmail.com | Admin | |
| Janie Ziemann | Regional Interactions Architect | janie_ziemann87@hotmail.com | Admin | |
| Arturo Crist | Human Mobility Architect | arturo.crist@gmail.com | Admin | |
| Pamela Emard | Forward Assurance Supervisor | pamela.emard67@hotmail.com | Viewer | |
| Tessie Frami | International Research Strategist | tessie_frami@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 |
|---|---|---|
Don Block Forward Assurance Coordinator don_block@gmail.com | Admin | |
Jamie Swaniawski Internal Solutions Developer jamie.swaniawski@yahoo.com | Viewer | |
Cameron Stanton Future Usability Representative cameron.stanton@gmail.com | Admin | |
Percy Dibbert Human Mobility Agent percy.dibbert@hotmail.com | Viewer | |
Xander Zemlak District Program Developer xander.zemlak@hotmail.com | Viewer | |
Linda Weber National Research Consultant linda.weber5@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 |
|---|---|---|
Buck Bauch Lead Implementation Executive buck.bauch0@yahoo.com | Viewer | |
Estefania Vandervort Lead Operations Administrator estefania.vandervort@hotmail.com | Member | |
Giovanny Wiegand Customer Marketing Coordinator giovanny_wiegand@gmail.com | Member | |
Kimberly Auer Regional Usability Executive kimberly_auer@hotmail.com | Admin | |
Taylor Klocko Forward Usability Director taylor.klocko2@hotmail.com | Admin | |
Lamar Vandervort Internal Tactics Engineer lamar_vandervort@yahoo.com | Admin | |
Russ Baumbach Corporate Mobility Developer russ_baumbach@yahoo.com | Viewer | |
Aron Bernhard Direct Intranet Designer aron_bernhard@yahoo.com | Member | |
Leona Dickens Investor Brand Architect leona.dickens@yahoo.com | Admin | |
Angelica Abernathy District Intranet Technician angelica.abernathy7@gmail.com | Member | |
Penny Nitzsche Chief Optimization Executive penny_nitzsche@yahoo.com | Member | |
Rene Rosenbaum-Gusikowski Forward Integration Facilitator rene.rosenbaum-gusikowski@yahoo.com | Viewer | |
Leon Bogisich Dynamic Brand Consultant leon.bogisich@hotmail.com | Viewer | |
Jamaal MacGyver Corporate Branding Specialist jamaal_macgyver41@yahoo.com | Member | |
Jasper Bashirian Regional Factors Consultant jasper.bashirian@yahoo.com | Viewer | |
Yesenia Osinski-Doyle Lead Infrastructure Specialist yesenia.osinski-doyle25@gmail.com | Member | |
Tomas Stehr Product Division Facilitator tomas.stehr@gmail.com | Admin | |
Monte Klocko Global Applications Executive monte.klocko7@gmail.com | Admin | |
Leon Hintz-Walter Future Solutions Administrator leon.hintz-walter@yahoo.com | Admin | |
Kennedy Mitchell District Identity Manager kennedy_mitchell84@gmail.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 | |
|---|---|---|---|---|
| Alva Lesch | tricia68@hotmail.com | Lake Lilliestead | Active | $334.00 |
| Miss Deven Jakubowski | savion40@yahoo.com | South Tyrique | Active | $177.85 |
| Danial Mante | dena28@gmail.com | South Rose | Active | $465.32 |
| Misty Hartmann | arthur23@hotmail.com | Cummerataside | Inactive | $946.26 |
| Bailee Howe | travis5@yahoo.com | Schuppefurt | Inactive | $893.45 |
| Total | $2,816.88 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Willow Rowe @christine84 | constance39@gmail.com | Sarasota | Inactive | $445.55 |
Gabriel Quigley @sofia31 | perry56@gmail.com | South Omashire | Inactive | $178.26 |
Ray Crona @nola28 | emmanuel30@hotmail.com | Geraldineburgh | Inactive | $982.50 |
Rosemarie Reynolds @emilio_stoltenberg36 | rhea_strosin68@gmail.com | Fort Oliviaton | Inactive | $767.64 |
Howard Buckridge @stacey_goodwin | bette.bartoletti@gmail.com | New Elisafield | Inactive | $26.00 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roman Reichel | james_hahn@hotmail.com | Mylenefurt | Inactive | $52.10 |
| Hope Quitzon | hazle82@hotmail.com | West Moriah | Inactive | $1,087.40 |
| General Rowe | estella.feeney38@gmail.com | Raynorfurt | Active | $909.66 |
| Alessandro Mraz III | deondre34@hotmail.com | East Jaydefurt | Active | $275.50 |
| Mr. Anabelle Hegmann | elsa79@gmail.com | Grahambury | Inactive | $470.15 |
| Total | $2,794.81 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Della Vandervort | ana.aufderhar@hotmail.com | Lake Timothy | Inactive | $602.92 |
| Danial Pacocha | sasha_luettgen@gmail.com | Bashirianfield | Active | $54.22 |
| Katlynn Cormier | mateo_aufderhar@gmail.com | Fort Albertoberg | Active | $918.98 |
| Bryan Bashirian | reagan.barton74@hotmail.com | Olsonside | Active | $765.47 |
| Neal Doyle | rowena.lockman-okuneva75@yahoo.com | Lake Louisa | Inactive | $380.52 |
| Total | $2,722.11 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Desiree Fahey | wallace42@hotmail.com | North Joeyfort | Inactive | $978.92 |
| Roderick Will | reba51@hotmail.com | Keithbury | Inactive | $647.96 |
| Winifred Kerluke | ervin.renner24@hotmail.com | South Edmundton | Inactive | $635.35 |
| Juanita McGlynn | scotty17@gmail.com | Lake Veronica | Active | $467.19 |
| Raymundo Tillman | kent61@yahoo.com | Norvalberg | Active | $693.05 |
| Total | $3,422.47 | |||
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 | ||
|---|---|---|---|---|---|
| Lisandro Fisher | blanche.smith@gmail.com | South Evanton | Active | $85.77 | |
| Jeff Beier | harold.schamberger73@gmail.com | Yosthaven | Inactive | $631.77 | |
| Onie Waters | rogers88@hotmail.com | Evansville | Inactive | $1,093.59 | |
| Jake Mohr | caroline17@hotmail.com | Port Zion | Inactive | $857.58 | |
| Arthur Schinner-Erdman | clemmie.torphy-wehner57@yahoo.com | Berthastead | Active | $1,069.58 | |
| Total | $3,738.29 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Justen Haag | ebba.miller64@gmail.com | Pinellas Park | Active | $834.49 | |
| Mr. Fernando Barrows | stacy.abbott@yahoo.com | Champlinhaven | Active | $394.38 | |
| Ronald Hills I | elroy_treutel@hotmail.com | Larryworth | Inactive | $211.23 | |
| Olive Franecki Sr. | jeffrey75@yahoo.com | Kristinstad | Active | $739.73 | |
| Mr. Clyde Jakubowski | burdette.funk52@yahoo.com | Bloomington | Active | $788.38 | |
| Total | $2,968.21 | ||||
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 | |
|---|---|---|---|---|
| Carmela Stehr | holly55@gmail.com | Wadeland | Active | $913.76 |
| Susie Murphy | katlyn_goyette@gmail.com | Fort Osvaldochester | Inactive | $479.99 |
| Jack Kuhn | michelle_smitham@yahoo.com | Paulside | Active | $954.83 |
| Tommy Moore MD | marquis77@yahoo.com | New Dayna | Active | $858.93 |
| Wendy Strosin | lourdes_kilback@gmail.com | South Joe | Active | $806.64 |
| Cassandra Smith II | hope_hilpert@hotmail.com | Zacherychester | Active | $153.09 |
| Lance Wisozk | amber21@gmail.com | West Jeffstead | Active | $421.73 |
| Jacquelyn Sanford | johnny48@gmail.com | Port Claire | Active | $1,154.48 |
| Maryam Nolan | anita.heidenreich@gmail.com | Lehnertown | Active | $423.80 |
| Dorris Leuschke | anya58@hotmail.com | Eleanorfield | Active | $1,007.37 |
| Mae Wehner | joann.hagenes@yahoo.com | Yadiraton | Inactive | $317.67 |
| Howard Fisher | casimir.hane69@yahoo.com | Cerritos | Active | $166.09 |
| Mr. Arvel Hammes | floyd_conroy@yahoo.com | South Alexisbury | Active | $191.35 |
| Noah Walter | preston65@yahoo.com | Strosintown | Inactive | $662.77 |
| Mary Kunde | rosa.rowe@gmail.com | Owensboro | Active | $385.37 |
| Total | $8,897.87 | |||
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 |