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 | Credit Card | $605.84 |
| INV002 | Unpaid | Bank Transfer | $112.43 |
| INV003 | Paid | PayPal | $980.84 |
| INV004 | Paid | PayPal | $350.28 |
| INV005 | Unpaid | PayPal | $402.36 |
| INV006 | Unpaid | Credit Card | $759.05 |
| INV007 | Paid | PayPal | $383.27 |
| Total | $3,594.07 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nya Bergnaum | Investor Solutions Supervisor | nya_bergnaum51@hotmail.com | Admin | |
| Larry Renner | Senior Program Representative | larry_renner44@hotmail.com | Viewer | |
| Lana Funk | Central Integration Specialist | lana_funk@gmail.com | Viewer | |
| Doyle Heidenreich | National Web Strategist | doyle.heidenreich26@gmail.com | Viewer | |
| Stuart Paucek | Customer Intranet Analyst | stuart_paucek41@yahoo.com | Viewer | |
| Guillermo Padberg | Central Integration Executive | guillermo_padberg@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 |
|---|---|---|
Marcelo Jakubowski Senior Directives Supervisor marcelo.jakubowski@yahoo.com | Member | |
Joyce Mann Future Metrics Designer joyce.mann20@yahoo.com | Member | |
Virgil Okuneva Principal Mobility Coordinator virgil.okuneva34@yahoo.com | Viewer | |
Marlen Kozey Direct Interactions Supervisor marlen_kozey26@gmail.com | Viewer | |
August Russel Direct Functionality Specialist august.russel75@gmail.com | Member | |
Myra Hodkiewicz Regional Configuration Engineer myra.hodkiewicz@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 |
|---|---|---|
Antonina Hickle Legacy Branding Associate antonina_hickle@hotmail.com | Admin | |
Aimee Roob District Communications Producer aimee_roob@gmail.com | Admin | |
Edward Wuckert National Factors Associate edward_wuckert17@hotmail.com | Admin | |
Gabriel Wolf Central Branding Facilitator gabriel_wolf@hotmail.com | Admin | |
Else O'Conner Global Mobility Associate else_oconner@yahoo.com | Viewer | |
Randolph Purdy National Division Strategist randolph.purdy@gmail.com | Viewer | |
Perry Douglas-Ondricka National Optimization Supervisor perry.douglas-ondricka@yahoo.com | Member | |
Leopoldo MacGyver International Tactics Manager leopoldo_macgyver@hotmail.com | Admin | |
Dock Hahn Corporate Metrics Engineer dock.hahn@yahoo.com | Member | |
Randall Anderson Investor Factors Architect randall_anderson@hotmail.com | Viewer | |
Lewis Daniel Direct Factors Orchestrator lewis.daniel@hotmail.com | Viewer | |
Kristofer Herman International Group Architect kristofer_herman@gmail.com | Admin | |
Gino Schulist Principal Program Designer gino_schulist@gmail.com | Member | |
Sheldon Harvey Forward Metrics Analyst sheldon_harvey@hotmail.com | Member | |
Albina Hills Lead Marketing Consultant albina_hills6@hotmail.com | Member | |
Ida Bogisich Product Tactics Officer ida.bogisich@yahoo.com | Member | |
Randal Mosciski Legacy Mobility Executive randal.mosciski45@gmail.com | Admin | |
Sedrick Langosh International Paradigm Producer sedrick_langosh88@hotmail.com | Viewer | |
Hallie Wilkinson Customer Metrics Technician hallie_wilkinson@hotmail.com | Viewer | |
Lynda Little Legacy Functionality Coordinator lynda.little@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 | |
|---|---|---|---|---|
| Jonathon Hilpert | blanca45@gmail.com | Harrisonburg | Inactive | $926.48 |
| Drew Feest | ron57@gmail.com | Port Graycestad | Inactive | $785.60 |
| Jenny Halvorson | luciano.raynor@yahoo.com | Kristyton | Inactive | $177.74 |
| Miss Anya Gislason-Swift | domenic.jakubowski68@yahoo.com | West Melyssaboro | Active | $844.14 |
| Erwin Waters | laverna_schinner89@gmail.com | Marcelluston | Inactive | $238.10 |
| Total | $2,972.06 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Maxwell Zboncak @pat.wilkinson24 | lucia.weissnat@gmail.com | Clintborough | Active | $246.58 |
Florian Fadel @dessie36 | eva18@yahoo.com | Doral | Active | $70.92 |
Pearline Ritchie @joe.maggio90 | tremaine_hoppe88@gmail.com | Youngstown | Inactive | $580.64 |
Arjun Bauch-Mitchell II @lucia_kerluke16 | cole33@hotmail.com | Rennerboro | Inactive | $1,168.87 |
Anya Orn @eda_champlin48 | donna_little55@hotmail.com | Brandonport | Active | $392.58 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Giles Bogisich MD | myles_lind25@gmail.com | Elvastead | Inactive | $832.08 |
| Dr. Monte Vandervort | ericka.russel@gmail.com | North Bethesda | Inactive | $957.30 |
| Alayna Pfeffer Sr. | meghan87@yahoo.com | New Bradley | Inactive | $419.21 |
| Wade Cremin | renee53@hotmail.com | Anitachester | Inactive | $1,040.14 |
| Isabell Fay | nicklaus12@yahoo.com | Elizabeth | Inactive | $1,171.31 |
| Total | $4,420.04 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Athena Pfeffer | sophia_adams46@gmail.com | Robertsville | Inactive | $1,035.43 |
| Claudia Hintz-Gibson | eda.bins@gmail.com | Kuhnstad | Active | $333.06 |
| Jadyn Kohler | jake.mcglynn@hotmail.com | Watsonfield | Inactive | $192.65 |
| Duane Will | missouri_hills@hotmail.com | Port Debbie | Active | $1,101.91 |
| Fay Crooks | dominic.crist45@hotmail.com | Stephaniebury | Active | $378.30 |
| Total | $3,041.35 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kory Lind | bernice.welch@hotmail.com | West Hartford | Inactive | $919.04 |
| Tony Pagac II | kareem39@gmail.com | South Garyshire | Active | $676.68 |
| Joanna Emard | johnson60@yahoo.com | Evansville | Active | $424.69 |
| Mr. Cary Mann | teagan_oconner@yahoo.com | Maddisonfurt | Inactive | $565.06 |
| Mamie Dicki | merle.gleason87@hotmail.com | East Alexandrine | Active | $349.06 |
| Total | $2,934.53 | |||
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 | ||
|---|---|---|---|---|---|
| Ella Jast | marquis.kuvalis30@gmail.com | Fort Agustin | Active | $439.84 | |
| Muhammad Okuneva | natasha.gutmann@hotmail.com | Pfefferboro | Active | $557.21 | |
| Kelsie Wisozk MD | brandi_christiansen@gmail.com | Phoenix | Active | $77.89 | |
| Arno Rice | kattie41@hotmail.com | Reynoldshaven | Active | $1,197.76 | |
| Dora Bauch | orin_wisozk25@yahoo.com | Ignacioberg | Active | $1,109.11 | |
| Total | $3,381.81 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Vinnie Heathcote | leonie_kiehn44@hotmail.com | Patienceton | Active | $821.85 | |
| Estel Durgan | armando45@gmail.com | New Ruthton | Inactive | $1,043.72 | |
| Lura Dietrich | tyrone97@hotmail.com | East Hobart | Inactive | $711.37 | |
| Elbert Bechtelar | everette_schiller@yahoo.com | Weissnathaven | Inactive | $416.74 | |
| Scott Hoeger | kendra.sawayn25@gmail.com | South Nellie | Inactive | $128.38 | |
| Total | $3,122.06 | ||||
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 | |
|---|---|---|---|---|
| Chester Emard IV | aubrey_mayer21@yahoo.com | West Merle | Active | $1,160.62 |
| Tony Keeling | angela35@yahoo.com | Walkerstead | Inactive | $282.47 |
| Ira Schamberger IV | michelle_rogahn33@yahoo.com | Boscofort | Inactive | $260.39 |
| Dr. Aron Walker | dorothy_marvin@gmail.com | Hallehaven | Inactive | $319.15 |
| Phil Corkery | philip65@hotmail.com | New Madalyn | Inactive | $500.73 |
| Larue Stark | stacy.ferry95@hotmail.com | Joycechester | Inactive | $1,165.65 |
| Sammy Altenwerth | donna43@hotmail.com | Meghanburgh | Inactive | $418.55 |
| Alice Hahn | rosalie.shanahan@gmail.com | North Rachaelmouth | Active | $319.35 |
| Mandy Von | clemens.emmerich28@yahoo.com | San Leandro | Inactive | $1,033.10 |
| Eda Kunde | shelia31@hotmail.com | East Rustystead | Inactive | $239.09 |
| Lexie Waelchi | ebony40@yahoo.com | Port Jesus | Inactive | $767.87 |
| Samuel Balistreri | ollie_smith@hotmail.com | West Minnie | Active | $610.07 |
| Taurean Denesik | skye_casper@hotmail.com | Fort Ibrahimmouth | Inactive | $804.50 |
| Mr. Mariela Little | marielle.torphy20@gmail.com | Kubfield | Inactive | $409.49 |
| Mrs. Vickie Rau | nick_ruecker@yahoo.com | Brandocester | Inactive | $693.33 |
| Total | $8,984.36 | |||
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 |