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 | $666.99 |
| INV002 | Unpaid | Credit Card | $765.34 |
| INV003 | Paid | Credit Card | $475.75 |
| INV004 | Pending | Credit Card | $213.43 |
| INV005 | Pending | PayPal | $274.29 |
| INV006 | Paid | PayPal | $306.84 |
| INV007 | Pending | PayPal | $985.35 |
| Total | $3,687.99 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Reva Considine | Dynamic Marketing Supervisor | reva_considine62@gmail.com | Admin | |
| Yolanda Bartell | National Functionality Assistant | yolanda_bartell@hotmail.com | Viewer | |
| Nadine Kirlin | Forward Program Designer | nadine.kirlin@gmail.com | Admin | |
| Annetta Kunze | Principal Metrics Administrator | annetta.kunze17@yahoo.com | Viewer | |
| Grady Huels | Forward Tactics Associate | grady_huels@yahoo.com | Viewer | |
| Gage Keeling | Dynamic Markets Coordinator | gage_keeling76@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 |
|---|---|---|
Rossie Lockman Future Response Analyst rossie_lockman25@yahoo.com | Viewer | |
Kaden Rippin District Response Representative kaden.rippin53@hotmail.com | Member | |
Estel Ebert Forward Usability Associate estel.ebert45@gmail.com | Viewer | |
Milan Haley Lead Branding Analyst milan_haley54@yahoo.com | Member | |
Kelly Gutkowski International Metrics Analyst kelly.gutkowski@yahoo.com | Admin | |
Assunta Erdman Corporate Web Engineer assunta_erdman31@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 |
|---|---|---|
Karen Kuphal Customer Factors Administrator karen_kuphal@gmail.com | Admin | |
Marc Stoltenberg Regional Factors Facilitator marc.stoltenberg@hotmail.com | Viewer | |
Brock Lemke Legacy Metrics Facilitator brock_lemke@gmail.com | Member | |
Jaleel Vandervort National Research Agent jaleel_vandervort46@yahoo.com | Viewer | |
Bria Bernier Product Interactions Analyst bria.bernier@gmail.com | Viewer | |
Kayden Lueilwitz Regional Marketing Designer kayden_lueilwitz@yahoo.com | Admin | |
Abby Kuvalis-Barrows Forward Applications Facilitator abby_kuvalis-barrows@gmail.com | Viewer | |
Kiel Bergstrom National Markets Director kiel_bergstrom@gmail.com | Member | |
Marcelino Hermann Senior Metrics Associate marcelino_hermann86@hotmail.com | Member | |
Haven Kuhlman Human Marketing Consultant haven_kuhlman43@hotmail.com | Member | |
Millie Murazik Customer Paradigm Administrator millie.murazik@hotmail.com | Member | |
Kristopher Harber Direct Factors Administrator kristopher_harber30@gmail.com | Viewer | |
Darwin Collier-Schumm Principal Data Producer darwin_collier-schumm69@yahoo.com | Admin | |
Freeda Tillman Dynamic Solutions Administrator freeda.tillman@gmail.com | Admin | |
Marisol Champlin International Paradigm Analyst marisol.champlin15@yahoo.com | Member | |
Bartholome Grimes Customer Group Director bartholome.grimes@hotmail.com | Member | |
Ramon Terry Principal Assurance Technician ramon_terry@gmail.com | Admin | |
Matilde Lueilwitz Chief Usability Analyst matilde.lueilwitz@yahoo.com | Member | |
Myrtice Quitzon Direct Marketing Strategist myrtice.quitzon43@gmail.com | Admin | |
Beau Larson Human Intranet Producer beau.larson@hotmail.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 | |
|---|---|---|---|---|
| Clara Okuneva | franco70@yahoo.com | Margate | Active | $695.00 |
| Mr. Bud Hintz | nicholas31@gmail.com | Buckeye | Active | $997.99 |
| Virgie Hilll | dakota_bogisich25@hotmail.com | East Marjolainestead | Active | $109.82 |
| Jillian Crist | anastacio.dicki@gmail.com | Rempelshire | Active | $593.74 |
| Camren Murazik | jaclyn_farrell@gmail.com | West Wilbertbury | Active | $77.87 |
| Total | $2,474.42 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Keagan Terry @junius_pouros | morton.denesik67@gmail.com | Maudborough | Inactive | $379.20 |
Mrs. Hilda Renner @lisa40 | oran32@gmail.com | Lake Gilbertochester | Active | $1,116.62 |
Gary Dicki @maximillia_bailey72 | sherman.adams@gmail.com | Port Lunaton | Inactive | $498.59 |
Micaela Hackett I @brayan_mayer33 | ivah_daniel31@gmail.com | Marybury | Inactive | $480.55 |
Fernando Kunde @gregorio92 | shyanne35@gmail.com | Lake Rodolfo | Inactive | $777.50 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dax Heathcote | dejon64@hotmail.com | Jefferson City | Inactive | $86.19 |
| Mrs. Kathryne Pacocha | kallie.bailey88@yahoo.com | Vivienneland | Inactive | $784.64 |
| Margot Ratke I | buck.dickens80@gmail.com | Brekkehaven | Inactive | $1,051.86 |
| Damien O'Hara | gunner69@gmail.com | Riverview | Active | $528.43 |
| Mr. Mateo Luettgen | halle_pfannerstill@gmail.com | Parisstad | Active | $726.90 |
| Total | $3,178.02 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Amaya Labadie | amy_koelpin10@hotmail.com | Paucektown | Inactive | $201.02 |
| Marisol Reichert | alejandra_hirthe98@yahoo.com | West Rexborough | Active | $615.08 |
| Nora Kemmer | anna_waters38@yahoo.com | Fort Ashley | Active | $667.83 |
| Payton Borer DVM | yasmin.runte@hotmail.com | Kshlerinview | Inactive | $586.12 |
| Else Koelpin | triston_donnelly@yahoo.com | Lake Frederique | Active | $456.99 |
| Total | $2,527.04 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jose Champlin | providenci_turner@gmail.com | Fort Althealand | Inactive | $212.79 |
| Kenny Hills | phil_schoen92@gmail.com | Wallaceton | Inactive | $1,124.57 |
| Angelita Kuphal | jarrod_sporer92@hotmail.com | Shanahanburgh | Active | $642.28 |
| Aubrey Gerhold | rupert_windler45@gmail.com | Allentown | Active | $1,161.90 |
| Otto DuBuque | jaeden19@gmail.com | North Ashleebury | Inactive | $172.41 |
| Total | $3,313.95 | |||
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 | ||
|---|---|---|---|---|---|
| Ashly Conn | sandy_labadie@yahoo.com | Jeraldborough | Active | $1,023.31 | |
| Nova Heaney | alayna_mayert@hotmail.com | Westfield | Inactive | $837.15 | |
| Pat Trantow | jacquelyn.bashirian@yahoo.com | North Una | Active | $950.88 | |
| Kate Bernhard DVM | filiberto.sauer89@hotmail.com | Mazieview | Inactive | $401.96 | |
| Mrs. Kiarra Bosco II | khalil_vandervort@hotmail.com | West Baileeburgh | Active | $844.56 | |
| Total | $4,057.86 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Dulce Wintheiser PhD | trevor_carter43@gmail.com | Whiteton | Active | $638.30 | |
| Maudie Hansen | buster_beer@hotmail.com | Kyliefurt | Inactive | $408.03 | |
| Sheridan Steuber | kendrick.kerluke31@yahoo.com | Erikamouth | Inactive | $343.13 | |
| Pete Fritsch | rozella45@yahoo.com | New Clair | Inactive | $315.60 | |
| James Kautzer | otho_skiles98@yahoo.com | Fort Mckenzie | Inactive | $561.44 | |
| Total | $2,266.50 | ||||
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 | |
|---|---|---|---|---|
| Hilbert Jenkins | collin2@yahoo.com | Vancouver | Active | $1,016.85 |
| Xander Klein I | rocky_okeefe@hotmail.com | Cerritos | Inactive | $248.85 |
| Terrill Metz | elta.bashirian91@gmail.com | Geoview | Inactive | $74.79 |
| Lonnie Swift | rolando.gleichner@hotmail.com | Tampa | Active | $1,081.79 |
| Lee Zieme | fredrick52@yahoo.com | Fort Emmet | Inactive | $255.20 |
| Bessie Weissnat | carlie_waelchi85@gmail.com | North Bartside | Inactive | $343.61 |
| Leanna Waelchi | adelbert16@yahoo.com | Fort Lera | Inactive | $1,048.52 |
| Eriberto Powlowski | abdullah34@hotmail.com | Eastvale | Inactive | $1,178.71 |
| Nels Blanda | dustin_rogahn@yahoo.com | Mount Prospect | Inactive | $717.66 |
| Augustine Langosh-Bahringer | ezequiel.jaskolski66@hotmail.com | Palo Alto | Inactive | $226.74 |
| Easton Wunsch | shanie82@yahoo.com | South Levicester | Inactive | $223.16 |
| Tyrell Tromp | willis.blick@gmail.com | Littelborough | Active | $898.77 |
| Frances Goodwin | kendra89@gmail.com | Baumbachfort | Active | $509.57 |
| Dr. Aylin Willms | darrick21@gmail.com | East Jaunita | Inactive | $554.03 |
| Leonardo Lebsack | king85@hotmail.com | Idaho Falls | Inactive | $1,024.74 |
| Total | $9,402.99 | |||
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 |