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 | $258.84 |
| INV002 | Paid | PayPal | $367.82 |
| INV003 | Pending | PayPal | $580.69 |
| INV004 | Pending | Credit Card | $377.95 |
| INV005 | Paid | PayPal | $637.76 |
| INV006 | Unpaid | Credit Card | $883.52 |
| INV007 | Paid | Credit Card | $809.21 |
| Total | $3,915.79 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rashawn O'Kon | Direct Functionality Designer | rashawn_okon83@gmail.com | Admin | |
| Rose Becker | Regional Accounts Designer | rose_becker1@yahoo.com | Member | |
| Grace Weissnat | Principal Usability Coordinator | grace.weissnat@gmail.com | Admin | |
| Connor Mraz | Human Quality Planner | connor.mraz54@gmail.com | Viewer | |
| Shelley Cole | National Accounts Director | shelley.cole@yahoo.com | Viewer | |
| Kerry Lesch | Legacy Group Executive | kerry.lesch@gmail.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 |
|---|---|---|
Gilda Volkman District Factors Strategist gilda.volkman@yahoo.com | Admin | |
Zoey Johnson Product Usability Associate zoey.johnson14@gmail.com | Viewer | |
Willard Erdman Direct Usability Manager willard_erdman28@gmail.com | Admin | |
Anna Bins Regional Program Administrator anna_bins@hotmail.com | Viewer | |
Esperanza Jakubowski Customer Communications Designer esperanza.jakubowski@yahoo.com | Viewer | |
Weston Bogan Dynamic Directives Representative weston_bogan@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Litzy Muller Investor Factors Liaison litzy.muller@yahoo.com | Viewer | |
Kelvin Beier Corporate Implementation Designer kelvin_beier@yahoo.com | Member | |
Aniya White National Accountability Supervisor aniya.white15@hotmail.com | Member | |
Martine Fritsch Direct Usability Director martine.fritsch49@yahoo.com | Viewer | |
Giovanna Daugherty Legacy Security Manager giovanna.daugherty@hotmail.com | Member | |
Gina Murphy Forward Communications Strategist gina.murphy@hotmail.com | Viewer | |
Geoffrey Kerluke Direct Tactics Planner geoffrey.kerluke86@hotmail.com | Admin | |
Jeanie Armstrong Forward Infrastructure Facilitator jeanie_armstrong@gmail.com | Admin | |
Lavinia Altenwerth Internal Directives Facilitator lavinia_altenwerth24@gmail.com | Member | |
Ciara Marquardt Lead Program Producer ciara_marquardt2@gmail.com | Viewer | |
Eddie Ritchie Dynamic Marketing Representative eddie.ritchie@gmail.com | Member | |
Amy Runolfsdottir Corporate Functionality Specialist amy.runolfsdottir67@yahoo.com | Admin | |
Torrey Jenkins Future Accounts Architect torrey_jenkins@gmail.com | Member | |
Aurelio Cole Central Usability Liaison aurelio_cole@hotmail.com | Viewer | |
Louise McDermott Global Infrastructure Associate louise_mcdermott@hotmail.com | Member | |
Gayle Vandervort-Shields Global Applications Consultant gayle.vandervort-shields@hotmail.com | Member | |
Nikko Kuhn Forward Intranet Executive nikko.kuhn@gmail.com | Viewer | |
Albin Gutkowski Product Identity Associate albin_gutkowski64@yahoo.com | Member | |
Alejandra Hilpert Global Directives Analyst alejandra_hilpert70@hotmail.com | Admin | |
Vidal Mann Regional Web Representative vidal_mann@hotmail.com | Admin |
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 | |
|---|---|---|---|---|
| Lindsay Macejkovic IV | bart12@hotmail.com | Conroe | Inactive | $908.03 |
| Patsy Sanford | chloe_gutkowski@gmail.com | Gulgowskishire | Inactive | $608.24 |
| Alvina Krajcik | gilberto3@hotmail.com | Christianaboro | Active | $185.19 |
| Dewey McLaughlin | nina32@hotmail.com | Loveland | Active | $970.20 |
| Forrest Hand | tianna44@gmail.com | Kleinstead | Inactive | $102.13 |
| Total | $2,773.79 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Rogelio Trantow @katarina39 | rashawn22@hotmail.com | Hermannstead | Inactive | $571.97 |
Elsie Becker @toni.daniel19 | priscilla63@yahoo.com | East Leif | Active | $593.35 |
Alfreda Leuschke DDS @victor81 | darrin44@yahoo.com | Durganstead | Active | $303.36 |
Mr. Cedrick Kuphal II @lydia_hettinger | cecile.ondricka45@hotmail.com | New Orleans | Inactive | $167.23 |
Mr. Gary Lueilwitz @sabrina8 | nova.heaney@hotmail.com | Weimann-Thielfurt | Active | $1,028.02 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jewell Koch | dangelo.beahan86@yahoo.com | Port Emely | Active | $304.11 |
| Roberta Jacobi Sr. | river_raynor76@hotmail.com | Alejandroville | Inactive | $732.24 |
| Erica Connelly | gianni_blick@gmail.com | Xzavierport | Active | $982.49 |
| Lois Prohaska | nya.bauch@gmail.com | North Reececester | Inactive | $148.65 |
| Paul Zboncak | anastasia.osinski@yahoo.com | Lewisville | Active | $974.76 |
| Total | $3,142.25 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ilene Schamberger | cielo_pollich@yahoo.com | Osinskiview | Active | $593.44 |
| Byron Auer | al97@yahoo.com | Roswell | Inactive | $27.58 |
| Macey Brakus | roland.kessler83@hotmail.com | New Darwincester | Active | $1,087.72 |
| Maxine Gerhold | kirsten81@gmail.com | North Charleston | Active | $844.48 |
| Hassie Durgan | antonia30@gmail.com | McKenzieberg | Inactive | $926.57 |
| Total | $3,479.79 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Luigi Ritchie | clayton_renner69@yahoo.com | Dudleymouth | Active | $1,060.66 |
| Leola Hoeger | rudolph_schimmel@yahoo.com | Parkermouth | Inactive | $1,110.17 |
| Jermain Ward | mildred_kerluke35@hotmail.com | Glendale | Active | $147.57 |
| Simon Wisoky | ramon.russel@hotmail.com | Kilbackville | Inactive | $1,168.18 |
| Claude King | victor_waters61@hotmail.com | Fort Winfield | Inactive | $27.05 |
| Total | $3,513.63 | |||
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 | ||
|---|---|---|---|---|---|
| Micheal Braun | spencer_leannon@hotmail.com | North Maude | Inactive | $1,059.18 | |
| William Romaguera | hilbert.kutch73@yahoo.com | Seamusport | Active | $511.08 | |
| Dahlia Gutkowski | dean_tremblay80@yahoo.com | Moore | Inactive | $992.71 | |
| Willard Stiedemann | ivy23@hotmail.com | O'Connerstad | Active | $103.54 | |
| Carol Abbott | timmy25@hotmail.com | Jonstead | Active | $785.60 | |
| Total | $3,452.11 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ernesto Kunde | vance_corwin@gmail.com | Sethcester | Inactive | $750.73 | |
| Anita Gusikowski | arnoldo_stark@hotmail.com | Trujillo Alto | Active | $993.41 | |
| Cheyanne Greenholt | adrien.crooks1@yahoo.com | Wauwatosa | Inactive | $17.18 | |
| Mrs. Ebony Wuckert | anita68@yahoo.com | Norwalk | Inactive | $1,068.50 | |
| Miss Aylin Stanton | bonnie_romaguera0@hotmail.com | East Ike | Inactive | $1,117.05 | |
| Total | $3,946.87 | ||||
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 | |
|---|---|---|---|---|
| Leona Lemke | karen_frami9@yahoo.com | Fort Emmett | Inactive | $720.87 |
| Jerald Schaefer | brent67@yahoo.com | South Leeview | Active | $461.12 |
| Zelma Moen | milton.gorczany@gmail.com | Phoenix | Active | $406.75 |
| Adela Gibson-Bosco | bonita75@gmail.com | Stephaniafurt | Inactive | $681.21 |
| Amos Volkman | lina_sanford@yahoo.com | San Diego | Inactive | $675.22 |
| Marcelle Zulauf | kendra.rosenbaum25@yahoo.com | New Leticia | Inactive | $399.45 |
| Miss Jadyn Lindgren | lucius.boyle23@hotmail.com | Arnoldfield | Inactive | $359.04 |
| Chester Rowe-Hansen | roger.kerluke@hotmail.com | Grand Prairie | Inactive | $894.40 |
| Zachary Lockman | joseph.nitzsche@gmail.com | Ratkefurt | Inactive | $389.56 |
| Cyril Hoeger | alma56@hotmail.com | Fort Davonteburgh | Inactive | $936.69 |
| Horace Hermann | ivy_hilll11@yahoo.com | Omaha | Active | $513.58 |
| Lucienne Marks | james_johns@hotmail.com | New Jevonstead | Inactive | $933.87 |
| Baron Bergnaum | olga_waelchi@hotmail.com | McKinney | Active | $1,058.61 |
| Miranda Koepp | rodolfo_trantow@yahoo.com | South Diana | Inactive | $754.77 |
| Jeremiah Krajcik | samantha.oberbrunner37@yahoo.com | Mesa | Inactive | $418.90 |
| Total | $9,604.04 | |||
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 |