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 | Pending | PayPal | $812.40 |
| INV002 | Paid | PayPal | $698.84 |
| INV003 | Pending | PayPal | $509.31 |
| INV004 | Paid | Credit Card | $706.70 |
| INV005 | Unpaid | Bank Transfer | $464.55 |
| INV006 | Unpaid | Credit Card | $413.53 |
| INV007 | Unpaid | Credit Card | $583.24 |
| Total | $4,188.57 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kevon Gleichner | National Intranet Manager | kevon.gleichner@yahoo.com | Viewer | |
| Micheal Konopelski | Central Accounts Designer | micheal_konopelski13@yahoo.com | Viewer | |
| Camille Grant | District Interactions Technician | camille.grant42@yahoo.com | Viewer | |
| Maurine Parisian | Corporate Identity Orchestrator | maurine_parisian60@yahoo.com | Viewer | |
| Darlene Kozey | Dynamic Configuration Executive | darlene.kozey78@gmail.com | Admin | |
| Newton Rogahn | Customer Applications Supervisor | newton_rogahn92@gmail.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 |
|---|---|---|
Sandra Gislason Principal Data Architect sandra.gislason@gmail.com | Viewer | |
Heber Abshire Direct Security Producer heber.abshire@yahoo.com | Viewer | |
Theron Lebsack Internal Marketing Associate theron_lebsack@gmail.com | Member | |
Elizabeth Wyman Legacy Tactics Orchestrator elizabeth_wyman@hotmail.com | Admin | |
Elias Moore Human Applications Orchestrator elias.moore@yahoo.com | Viewer | |
Alberta Glover Internal Tactics Orchestrator alberta_glover36@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Shelia Tremblay International Program Consultant shelia_tremblay@yahoo.com | Viewer | |
Christina Collins Corporate Functionality Coordinator christina.collins@gmail.com | Member | |
Russ Haley-Runolfsson District Web Supervisor russ_haley-runolfsson@gmail.com | Admin | |
Lucy King Dynamic Solutions Manager lucy.king32@gmail.com | Viewer | |
Mabel Skiles Customer Tactics Planner mabel_skiles@yahoo.com | Member | |
Isabella Hahn Customer Markets Producer isabella_hahn34@yahoo.com | Member | |
Sadie Balistreri-Hintz Global Infrastructure Associate sadie.balistreri-hintz93@yahoo.com | Viewer | |
Jonathon Lubowitz District Integration Manager jonathon.lubowitz99@gmail.com | Admin | |
Ruthe Gleason Central Web Developer ruthe_gleason34@yahoo.com | Member | |
Katrina Jacobson Future Response Engineer katrina.jacobson27@gmail.com | Viewer | |
Wm Harris International Accountability Architect wm.harris@gmail.com | Admin | |
Rhonda Ryan Chief Division Executive rhonda.ryan@hotmail.com | Viewer | |
Marilie Lakin International Data Strategist marilie.lakin13@gmail.com | Member | |
Clint Ullrich District Mobility Manager clint.ullrich63@hotmail.com | Member | |
Terri Kulas Senior Response Architect terri.kulas30@yahoo.com | Admin | |
Marilyne Waelchi Future Program Consultant marilyne.waelchi@gmail.com | Admin | |
Dianna Oberbrunner Chief Functionality Technician dianna.oberbrunner@hotmail.com | Viewer | |
Eula Torphy Central Applications Strategist eula_torphy48@yahoo.com | Admin | |
Eldon Bechtelar-Zboncak Central Identity Designer eldon_bechtelar-zboncak23@yahoo.com | Admin | |
Leatha Hettinger International Functionality Associate leatha_hettinger40@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 | |
|---|---|---|---|---|
| Verna Herzog | carolyn.treutel@yahoo.com | New Giovannyview | Inactive | $307.79 |
| Mattie Cummerata | howard36@hotmail.com | Port Yvonnefort | Active | $944.01 |
| Mollie Howe MD | wava.harber@yahoo.com | North Holly | Inactive | $383.57 |
| Russ Pouros | lillie_zieme@gmail.com | Satterfieldport | Active | $918.85 |
| Jeannette Smitham | robert10@yahoo.com | Victoria | Active | $623.04 |
| Total | $3,177.26 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Corey Rempel @candace.labadie | amalia_nikolaus57@hotmail.com | Cheektowaga | Active | $653.66 |
Dr. Aubrey Paucek @zachariah76 | rick93@hotmail.com | New Warrenport | Inactive | $131.31 |
Mr. Micheal Mohr @wilbur_pfannerstill | doreen.lind@yahoo.com | North Richland Hills | Inactive | $1,098.22 |
Janet Mann @matthew6 | everett_kertzmann99@gmail.com | Salinas | Inactive | $764.11 |
Alvina Schmidt @maximillia_kovacek38 | nadine.lakin46@gmail.com | West Marthaside | Inactive | $254.80 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Fannie Gusikowski Jr. | hanna.schumm@gmail.com | East Felixport | Active | $697.13 |
| Beatrice Wintheiser DVM | bertram28@hotmail.com | Willborough | Active | $676.25 |
| Johnny Gusikowski | aubrey.bergnaum@yahoo.com | Mount Prospect | Active | $1,044.41 |
| Victor Blanda | dale_klocko@gmail.com | Chandler | Inactive | $447.97 |
| Hilda Gutkowski | becky83@hotmail.com | Fort Olaf | Active | $341.10 |
| Total | $3,206.86 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Owen Terry | ashleigh_bednar21@yahoo.com | New Jostad | Active | $578.70 |
| Darrell Langworth | verda.pacocha@yahoo.com | South Melanieport | Inactive | $762.00 |
| Daniela Rogahn | theresa94@hotmail.com | Fort Beulahberg | Inactive | $569.22 |
| Bryon Prohaska | nichole_orn@gmail.com | Naomiefield | Inactive | $1,128.94 |
| Efren Koelpin | joey_hudson@yahoo.com | Eugene | Inactive | $168.19 |
| Total | $3,207.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Anderson Rath | jean_predovic@gmail.com | Kenner | Inactive | $943.30 |
| Calvin Wisoky | letitia_murazik55@hotmail.com | West Latoya | Active | $1,094.40 |
| Samanta Bartell III | tracey_renner94@hotmail.com | Elliotshire | Active | $325.81 |
| Dustin Schuppe | miguel.towne51@gmail.com | Lake Elainatown | Inactive | $416.30 |
| Madison Effertz | freddy.ziemann39@hotmail.com | O'Connellshire | Active | $451.38 |
| Total | $3,231.19 | |||
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 | ||
|---|---|---|---|---|---|
| Orpha Green Jr. | aaron_jerde-wuckert@hotmail.com | Napoleonside | Inactive | $1,006.40 | |
| Mr. Taya Adams | camylle_emmerich@gmail.com | Katlynchester | Active | $1,024.76 | |
| Abraham Bode | lexie.mccullough52@yahoo.com | Henryton | Inactive | $540.70 | |
| Uriel Kutch | allan85@yahoo.com | New Christineport | Active | $715.28 | |
| Kurt Reilly | eduardo.kuhic67@gmail.com | Fort Korbin | Inactive | $619.06 | |
| Total | $3,906.20 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Erin D'Amore | perry.ebert85@hotmail.com | Langosh-Herzogworth | Inactive | $715.21 | |
| Ludwig Kulas | lola_legros@yahoo.com | North Charleston | Active | $171.31 | |
| Mrs. Lauryn Herzog | teri52@yahoo.com | South Cameronfort | Active | $976.04 | |
| Josh Koch | earnestine.lemke@gmail.com | East Joantown | Active | $195.88 | |
| Efrain Sipes I | susan30@yahoo.com | North Granville | Inactive | $677.54 | |
| Total | $2,735.98 | ||||
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 | |
|---|---|---|---|---|
| Julien Balistreri | sara_wintheiser@hotmail.com | Port Aric | Inactive | $543.97 |
| Jana Farrell | kayley.schuster40@yahoo.com | Martinburgh | Inactive | $864.95 |
| Ellis Johnson | otis.ratke@gmail.com | Paradise | Inactive | $446.48 |
| Meda Glover | talon93@hotmail.com | West Horaciohaven | Active | $360.31 |
| Dannie Connelly Jr. | cletus.beatty@yahoo.com | Marjoriefurt | Inactive | $577.69 |
| Jeffrey Wintheiser | genevieve.fisher@gmail.com | Atlanta | Active | $720.11 |
| Laurel Leannon | cody_dicki-turcotte@yahoo.com | Krisberg | Inactive | $1,149.75 |
| Conrad Pfeffer | leo.bernhard18@gmail.com | Huelfield | Active | $733.74 |
| Herman Padberg | wellington_padberg28@hotmail.com | New Lindaberg | Inactive | $684.01 |
| Silvia King | alvin.kihn80@gmail.com | Rancho Cordova | Inactive | $735.96 |
| Diana Kirlin | phyllis_gleichner97@yahoo.com | Lake Greg | Inactive | $560.81 |
| Natasha Muller I | jennifer_sawayn-corkery@hotmail.com | Fayside | Active | $130.79 |
| Mrs. Gustave Windler | jevon_lubowitz24@hotmail.com | Buckridgemouth | Active | $299.36 |
| Saul Hermann | norman86@yahoo.com | Harrisshire | Active | $1,019.62 |
| Miguel Haley | newton6@gmail.com | New Osborneboro | Inactive | $919.46 |
| Total | $9,747.01 | |||
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 |