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 | $528.25 |
| INV002 | Unpaid | Credit Card | $743.95 |
| INV003 | Unpaid | Credit Card | $571.04 |
| INV004 | Unpaid | Bank Transfer | $412.97 |
| INV005 | Paid | Credit Card | $760.21 |
| INV006 | Pending | Bank Transfer | $799.99 |
| INV007 | Paid | Credit Card | $242.37 |
| Total | $4,058.78 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Pietro Leffler | Product Identity Representative | pietro.leffler33@hotmail.com | Viewer | |
| Marcia Rohan | Senior Configuration Engineer | marcia.rohan53@yahoo.com | Admin | |
| Heaven Nolan | Investor Data Orchestrator | heaven.nolan32@yahoo.com | Member | |
| Molly Grant | Legacy Group Coordinator | molly.grant@yahoo.com | Member | |
| Dustin Cruickshank | District Optimization Strategist | dustin.cruickshank@hotmail.com | Admin | |
| Wanda Wolf | Human Factors Developer | wanda_wolf10@gmail.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 |
|---|---|---|
Ruth Larson Regional Web Consultant ruth.larson63@yahoo.com | Member | |
Remington Cremin Product Group Executive remington.cremin11@gmail.com | Admin | |
Timmy Beatty Lead Directives Representative timmy_beatty@hotmail.com | Member | |
Josh Collier Principal Program Director josh_collier10@hotmail.com | Admin | |
Sonja Harber Lead Markets Supervisor sonja.harber93@gmail.com | Viewer | |
Kale Franey Internal Research Architect kale_franey95@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 |
|---|---|---|
Stephen Lueilwitz Central Communications Strategist stephen.lueilwitz@yahoo.com | Admin | |
Turner Hagenes National Security Developer turner_hagenes@hotmail.com | Admin | |
Rachel Price District Factors Strategist rachel.price@gmail.com | Admin | |
Yvonne Hauck National Assurance Liaison yvonne.hauck92@gmail.com | Admin | |
Alicia Stanton Internal Operations Liaison alicia_stanton1@yahoo.com | Member | |
Demarcus Cummerata Investor Branding Manager demarcus.cummerata@yahoo.com | Member | |
Evans West Central Creative Liaison evans.west@hotmail.com | Member | |
Jada Hills Senior Identity Designer jada.hills35@gmail.com | Member | |
Angie O'Kon Forward Markets Producer angie.okon@gmail.com | Admin | |
Jan Beer International Creative Representative jan.beer@yahoo.com | Member | |
Eileen Rath Chief Communications Facilitator eileen_rath84@yahoo.com | Viewer | |
Jamar Muller-Spinka Internal Markets Officer jamar.muller-spinka@gmail.com | Member | |
Rod Connelly Human Paradigm Agent rod.connelly49@yahoo.com | Admin | |
Jeanette Ernser Dynamic Marketing Liaison jeanette.ernser@hotmail.com | Admin | |
Anais Fritsch Product Usability Designer anais_fritsch13@hotmail.com | Viewer | |
Nicole Orn-Vandervort International Program Administrator nicole.orn-vandervort@hotmail.com | Admin | |
Marty Hodkiewicz International Identity Liaison marty_hodkiewicz@yahoo.com | Admin | |
Eve Rodriguez District Interactions Technician eve.rodriguez61@yahoo.com | Admin | |
Garry Dicki Corporate Accountability Manager garry.dicki@hotmail.com | Viewer | |
Lorena Fritsch Internal Metrics Designer lorena_fritsch46@hotmail.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 | |
|---|---|---|---|---|
| Mrs. Silvia Ruecker | winston_feest@hotmail.com | Kozeyfurt | Inactive | $715.10 |
| Leroy Lubowitz | florence28@yahoo.com | East Don | Active | $292.42 |
| Randy Hettinger | barrett.robel@gmail.com | Fort Dianna | Inactive | $1,106.23 |
| Dr. Toby Botsford | blanca_turner7@gmail.com | Summermouth | Inactive | $501.70 |
| Kiana Fisher DDS | alyssa54@gmail.com | Fort Nicole | Inactive | $307.40 |
| Total | $2,922.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Sheri Bailey @kathryn13 | yasmine.cremin50@gmail.com | Fort Devanteshire | Inactive | $440.55 |
Marsha West @maximilian.wiza | precious77@gmail.com | New Philworth | Inactive | $256.56 |
Aaliyah Roob-Hettinger @wallace72 | osbaldo.zieme@yahoo.com | Danielshire | Active | $384.61 |
Guillermo Corwin @bella_macejkovic36 | alison.okuneva15@yahoo.com | West Eleanor | Active | $542.06 |
Rickey Nikolaus @neal_bartoletti | lonnie.boehm@yahoo.com | Corkerymouth | Active | $35.01 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Melissa Greenholt | shari.fay@yahoo.com | Farmington | Active | $756.87 |
| Bella Mosciski | earnest.powlowski69@yahoo.com | East Honolulu | Active | $922.01 |
| Wallace Hartmann | cheryl.lesch-cremin68@yahoo.com | Rogahnview | Inactive | $505.85 |
| Jason Koch | elsie59@yahoo.com | Adeliaboro | Active | $43.33 |
| Albert Ebert | johnathan.cassin89@hotmail.com | West Chance | Inactive | $296.70 |
| Total | $2,524.76 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ellis Bahringer | larry.grimes@gmail.com | Rileyview | Active | $259.31 |
| Dr. Frances Blick | eric.towne@gmail.com | Keeblerfort | Inactive | $1,056.95 |
| Calvin Watsica | felicita.schaefer@gmail.com | Gavinburgh | Active | $834.41 |
| Mazie Wintheiser | mohammad24@yahoo.com | Wehnerbury | Inactive | $54.70 |
| Mr. Kayden Monahan | essie64@hotmail.com | Strosincester | Inactive | $962.73 |
| Total | $3,168.10 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leroy Hegmann | deshawn_spinka66@gmail.com | Port Erma | Inactive | $568.87 |
| Dr. Samanta Rempel | lula_terry@hotmail.com | Port Javier | Active | $1,159.73 |
| Jeremy Mertz | julio.thompson27@hotmail.com | South Casey | Active | $622.27 |
| Alonzo Goldner | manley_nolan10@gmail.com | Patriciafield | Inactive | $963.36 |
| Ella Crona I | kenyon0@yahoo.com | West Gwendolyn | Active | $283.41 |
| Total | $3,597.64 | |||
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 | ||
|---|---|---|---|---|---|
| Tyrique Hagenes | henrietta50@yahoo.com | New Rex | Inactive | $186.31 | |
| Blaze Ziemann | joy97@yahoo.com | Zemlakport | Active | $682.24 | |
| Kent Schumm | dora.bode-skiles28@hotmail.com | New Louise | Inactive | $971.75 | |
| Verdie Nitzsche | elyssa13@hotmail.com | Salt Lake City | Active | $824.35 | |
| Mr. Rocky Jones | marta.mante4@yahoo.com | New Brunswick | Inactive | $879.79 | |
| Total | $3,544.44 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bettye Welch | nelle.sipes@gmail.com | North Glenn | Inactive | $373.12 | |
| Bethel Davis PhD | maria34@gmail.com | Santa Clarita | Inactive | $166.70 | |
| Crystel Rogahn | xander.bogisich70@yahoo.com | New Peyton | Active | $894.21 | |
| Yolanda Armstrong | ayden30@gmail.com | Whitneymouth | Active | $712.19 | |
| Glennie Dietrich | ayana.hauck63@yahoo.com | Nehachester | Inactive | $847.77 | |
| Total | $2,993.99 | ||||
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 | |
|---|---|---|---|---|
| Sigrid Pfeffer | virgil.feest@hotmail.com | Betsyland | Inactive | $864.97 |
| Kris Schiller-Quigley | aurelio.larson2@hotmail.com | Orem | Active | $753.33 |
| Mr. Damon Wolff | lola.hackett@hotmail.com | Israelview | Active | $642.24 |
| Miranda Ziemann Jr. | ozella.heaney82@yahoo.com | New Ninaport | Inactive | $847.31 |
| Fredy Christiansen | leatha.hyatt7@hotmail.com | Port Dillonport | Inactive | $52.88 |
| Gage Labadie | anastasia.dooley@hotmail.com | Bell Gardens | Inactive | $232.58 |
| Enrique Stoltenberg-Adams | phil1@gmail.com | South Heloisestead | Active | $993.56 |
| Lindsey VonRueden | camren12@gmail.com | South Marcia | Active | $734.93 |
| Ada Kihn | cassandra_konopelski67@gmail.com | Carlottafield | Active | $150.62 |
| Kirsten Fisher | elisa1@yahoo.com | Lehigh Acres | Active | $617.42 |
| Branson Crist | tiffany20@hotmail.com | Fort Vernon | Inactive | $448.15 |
| Hazel Nikolaus MD | ayla_konopelski24@yahoo.com | Roryview | Active | $384.31 |
| Kallie Hauck | darrel_cremin@yahoo.com | Virginia Beach | Active | $869.00 |
| Mr. Lorenzo Ryan | susan.gerlach41@hotmail.com | Deborahfort | Active | $578.08 |
| Candice Hintz II | rosalie0@gmail.com | Eugene | Inactive | $535.07 |
| Total | $8,704.45 | |||
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 |

