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 | Bank Transfer | $346.94 |
| INV002 | Pending | Bank Transfer | $186.91 |
| INV003 | Pending | Bank Transfer | $927.48 |
| INV004 | Pending | Bank Transfer | $776.56 |
| INV005 | Pending | PayPal | $742.76 |
| INV006 | Pending | Bank Transfer | $209.29 |
| INV007 | Unpaid | PayPal | $416.98 |
| Total | $3,606.92 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Daryl Yundt | Chief Configuration Consultant | daryl_yundt@yahoo.com | Admin | |
| Kasey Schmitt | Dynamic Tactics Assistant | kasey_schmitt@yahoo.com | Member | |
| Margarita Brekke | District Security Officer | margarita_brekke@yahoo.com | Member | |
| Julie Rogahn | Principal Identity Officer | julie_rogahn@hotmail.com | Viewer | |
| Paul Cassin-Mohr | Central Usability Facilitator | paul_cassin-mohr@yahoo.com | Viewer | |
| Doreen Kohler | Internal Implementation Coordinator | doreen.kohler87@yahoo.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Max Lockman Regional Communications Technician max.lockman89@gmail.com | Viewer | |
Lea Ratke Chief Identity Architect lea_ratke2@gmail.com | Member | |
Queenie Brown Product Creative Facilitator queenie_brown@gmail.com | Admin | |
Lyle Kulas Product Accounts Assistant lyle_kulas4@gmail.com | Member | |
William Sipes Corporate Program Designer william.sipes@yahoo.com | Admin | |
Emilio Lubowitz Dynamic Communications Officer emilio.lubowitz@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Lillian Okuneva Central Assurance Administrator lillian_okuneva@gmail.com | Member | |
Linwood Hickle Central Optimization Director linwood.hickle87@gmail.com | Member | |
Hilma Bode National Directives Coordinator hilma.bode@hotmail.com | Admin | |
Cameron Bradtke Lead Branding Developer cameron.bradtke@yahoo.com | Viewer | |
Augustine Adams National Security Executive augustine.adams@gmail.com | Admin | |
Brad Dicki Internal Assurance Consultant brad.dicki11@gmail.com | Admin | |
Orville Boehm Internal Factors Developer orville_boehm@hotmail.com | Member | |
Ruby Deckow-McClure Lead Program Administrator ruby.deckow-mcclure@yahoo.com | Member | |
Golden Roberts Corporate Usability Orchestrator golden.roberts25@hotmail.com | Viewer | |
Brayan Huels-Durgan Future Infrastructure Orchestrator brayan.huels-durgan@hotmail.com | Viewer | |
Edwin Rutherford Human Group Supervisor edwin.rutherford@hotmail.com | Member | |
Earnest Feest Senior Assurance Consultant earnest_feest@hotmail.com | Admin | |
Lelah Walsh Product Usability Strategist lelah.walsh@hotmail.com | Member | |
Alex Tillman National Operations Designer alex.tillman@gmail.com | Admin | |
Christopher Rogahn Lead Configuration Consultant christopher_rogahn@gmail.com | Admin | |
Blake Bernhard Principal Brand Manager blake.bernhard43@yahoo.com | Viewer | |
Raquel Runolfsson Future Solutions Engineer raquel.runolfsson74@yahoo.com | Member | |
Gracie Klocko Legacy Accountability Producer gracie_klocko28@gmail.com | Viewer | |
Waylon Towne Investor Metrics Agent waylon_towne@hotmail.com | Member | |
Augusta Mosciski Legacy Accountability Facilitator augusta.mosciski8@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 | |
|---|---|---|---|---|
| Mr. Grant Prosacco | marvin66@gmail.com | Boscohaven | Active | $1,183.29 |
| Inez Towne | harold.koch4@hotmail.com | New Kendrick | Inactive | $361.05 |
| Kennith Spinka | marietta.hettinger84@gmail.com | Mariamchester | Active | $1,175.60 |
| Odessa Roberts | aurore.hudson85@yahoo.com | O'Fallon | Active | $84.50 |
| Josephine Wiegand | traci_terry51@yahoo.com | East Laurychester | Active | $883.64 |
| Total | $3,688.08 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dexter Mante V @armand_keeling87 | petra.swaniawski74@yahoo.com | Sipesberg | Inactive | $271.66 |
Gianni Kilback @emery32 | sidney_mills83@yahoo.com | North Emily | Active | $406.73 |
Elena Wunsch @emanuel10 | mandy39@yahoo.com | Fredyside | Inactive | $23.08 |
Bill McLaughlin @priscilla.lowe | june42@yahoo.com | South Layla | Inactive | $110.01 |
Elyse Beatty @nelle_baumbach80 | kristin.hane@yahoo.com | New Alanaberg | Inactive | $838.88 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Derrick Boyer | matteo88@hotmail.com | West Edyth | Active | $434.24 |
| Oliver Okuneva | aylin_sanford15@hotmail.com | Deckow-Bashirianside | Inactive | $518.45 |
| Elmer McKenzie | cornelius.schimmel@hotmail.com | East Sarah | Inactive | $1,136.57 |
| Joesph Wuckert V | christine.veum37@hotmail.com | Stamford | Inactive | $708.72 |
| Marco Wyman | demond.kovacek@gmail.com | East Edmondview | Active | $545.53 |
| Total | $3,343.51 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Madisen Turner | nadine.beier@gmail.com | West Lena | Inactive | $1,096.70 |
| Kyla Hintz | hilda97@gmail.com | New Michel | Inactive | $1,019.48 |
| Mr. Savanna Deckow | lavinia.mcglynn@hotmail.com | Zemlakland | Active | $138.59 |
| Waino Durgan | sidney_braun25@hotmail.com | Rochester Hills | Inactive | $123.12 |
| Carolyn Dickinson | amya48@hotmail.com | Chino | Active | $1,040.37 |
| Total | $3,418.26 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Polly Zulauf | alessandro.king@hotmail.com | Effertzbury | Active | $1,187.25 |
| Nicole Spinka | bobby43@hotmail.com | Redmond | Inactive | $690.98 |
| Rosa Yost | dallas.hammes51@hotmail.com | Maureenland | Active | $670.94 |
| Tara Hudson | kara99@hotmail.com | North Napoleonport | Active | $302.09 |
| Kenyatta Cummings Jr. | isabel.erdman-spencer62@gmail.com | North Laurianne | Inactive | $405.05 |
| Total | $3,256.31 | |||
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 | ||
|---|---|---|---|---|---|
| Sheila Vandervort | tammy21@yahoo.com | South Amos | Inactive | $451.98 | |
| Mrs. Deanna Gottlieb | rosie.bradtke20@hotmail.com | Eloytown | Active | $357.60 | |
| Eddie Raynor | carmen6@hotmail.com | North Saraville | Active | $1,131.26 | |
| Eula Hauck | ora_koch@yahoo.com | Noahfield | Active | $970.51 | |
| Adrian Bayer | chelsea_runolfsson@yahoo.com | Hiramchester | Active | $313.78 | |
| Total | $3,225.13 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Christop Kozey | russell30@gmail.com | Pittsfield | Inactive | $113.54 | |
| Carolyne Pollich | leonard_rath@yahoo.com | New Rochelle | Inactive | $605.99 | |
| Magnus Mohr I | elise41@yahoo.com | Floyburgh | Active | $904.38 | |
| Joanie Effertz | maya_mante84@yahoo.com | Anthonybury | Inactive | $439.39 | |
| Enrico Crist | tyrese71@yahoo.com | Mekhitown | Inactive | $424.14 | |
| Total | $2,487.44 | ||||
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 | |
|---|---|---|---|---|
| Uriel Daugherty I | uriah_rohan@gmail.com | Thomasfield | Inactive | $688.39 |
| Allan Casper | jeff.rosenbaum@yahoo.com | Kaylieton | Inactive | $467.51 |
| Mrs. Coy Runolfsson | joyce82@yahoo.com | New Corineworth | Active | $399.55 |
| Cortez Flatley-Kertzmann | elvera72@yahoo.com | Baumbachworth | Inactive | $572.74 |
| Diana Braun | sonya.kutch85@hotmail.com | North Las Vegas | Active | $458.45 |
| Wendy Welch | gwen_armstrong@yahoo.com | Coleberg | Inactive | $318.27 |
| Miss Tammy Brekke-Collier | bernard.mckenzie81@gmail.com | Altamonte Springs | Active | $1,179.50 |
| Wilbert Monahan DVM | grady79@yahoo.com | Fort Emmet | Active | $594.72 |
| Cameron Streich | elijah86@yahoo.com | Palm Bay | Active | $626.31 |
| Cristina Watsica | henry69@hotmail.com | Torrance | Inactive | $1,007.01 |
| Consuelo Mueller | kristofer.hilll92@yahoo.com | Pharr | Inactive | $275.75 |
| Miss Ruby Koepp | lucio58@gmail.com | South Lonzobury | Active | $962.05 |
| Erica Lowe | hope_reilly77@hotmail.com | Port Aubrey | Active | $1.00 |
| Alonzo Mann | alba67@yahoo.com | Raynorborough | Active | $556.92 |
| Theo Oberbrunner II | hilda_trantow@yahoo.com | Lake Jeannette | Active | $1,054.96 |
| Total | $9,163.13 | |||
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 |