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 | $426.20 |
| INV002 | Paid | Credit Card | $917.15 |
| INV003 | Paid | Bank Transfer | $206.64 |
| INV004 | Unpaid | PayPal | $694.61 |
| INV005 | Unpaid | PayPal | $409.04 |
| INV006 | Pending | Credit Card | $300.26 |
| INV007 | Paid | PayPal | $148.18 |
| Total | $3,102.08 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Geraldine McKenzie | Chief Operations Director | geraldine_mckenzie23@hotmail.com | Admin | |
| Nova Schaefer | Regional Directives Administrator | nova.schaefer78@gmail.com | Viewer | |
| Laurence Spencer | Corporate Marketing Associate | laurence_spencer81@gmail.com | Member | |
| Dwight Nikolaus | Human Division Manager | dwight_nikolaus42@gmail.com | Admin | |
| Joe Roob | District Branding Supervisor | joe.roob@yahoo.com | Admin | |
| Jett Jacobi | Future Program Representative | jett.jacobi@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 |
|---|---|---|
Daija Rosenbaum-O'Reilly Human Infrastructure Agent daija_rosenbaum-oreilly@yahoo.com | Admin | |
Patsy Mann Legacy Brand Strategist patsy_mann1@gmail.com | Member | |
Vera Parker-Kertzmann Central Functionality Executive vera_parker-kertzmann67@yahoo.com | Admin | |
Tatum Tromp Senior Group Producer tatum_tromp@yahoo.com | Admin | |
Roderick Dare Product Paradigm Executive roderick_dare44@gmail.com | Member | |
Ida Beatty Human Division Strategist ida.beatty26@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 |
|---|---|---|
Rogers Kunde Human Infrastructure Planner rogers.kunde59@hotmail.com | Member | |
Grayce Hayes Direct Configuration Developer grayce_hayes@hotmail.com | Admin | |
Maida Wolff Global Applications Director maida_wolff9@yahoo.com | Viewer | |
Manuel McLaughlin Forward Applications Administrator manuel_mclaughlin@yahoo.com | Viewer | |
Jett Schulist International Branding Administrator jett.schulist84@hotmail.com | Admin | |
Rashad Treutel Senior Communications Specialist rashad_treutel@gmail.com | Viewer | |
Ira Jacobs Human Quality Representative ira_jacobs@hotmail.com | Viewer | |
Kirk Ebert Senior Assurance Executive kirk_ebert36@gmail.com | Admin | |
Urban Kling Product Interactions Consultant urban.kling19@hotmail.com | Admin | |
Santiago Mohr Product Research Director santiago_mohr@gmail.com | Admin | |
Velma Franey Central Brand Engineer velma.franey44@gmail.com | Viewer | |
Rita Huels Investor Data Administrator rita_huels18@gmail.com | Viewer | |
Halle Nicolas Corporate Data Coordinator halle.nicolas41@yahoo.com | Admin | |
Iliana Hessel Human Research Designer iliana.hessel@hotmail.com | Admin | |
Erika Hauck Product Accountability Developer erika.hauck50@gmail.com | Admin | |
Hiram Kertzmann Global Metrics Administrator hiram.kertzmann90@hotmail.com | Viewer | |
Elva Howe District Configuration Engineer elva_howe97@hotmail.com | Admin | |
Margarete Senger National Infrastructure Liaison margarete.senger@hotmail.com | Viewer | |
Jordan Runolfsdottir Dynamic Group Liaison jordan_runolfsdottir@yahoo.com | Viewer | |
Lela Murray Internal Accounts Planner lela.murray@gmail.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 | |
|---|---|---|---|---|
| Gregorio Erdman | bryan83@yahoo.com | Dooleyfield | Inactive | $846.09 |
| Selina Jenkins | heidi_reichel@gmail.com | Port Tiffanyberg | Inactive | $458.17 |
| Dwight Ledner I | sonya_osinski@gmail.com | National City | Active | $513.47 |
| Stephan Haley | lloyd51@yahoo.com | Abbiebury | Active | $17.41 |
| Wanda Morar | vickie_abernathy@gmail.com | Wolfbury | Active | $1,022.37 |
| Total | $2,857.51 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Carmen Jacobi @alicia_prosacco | sabrina_weissnat@hotmail.com | Rochelleview | Active | $1,108.36 |
Nora Harvey @amie_gutmann | jerrell.macgyver30@gmail.com | Margarettaborough | Inactive | $729.11 |
Lorenza Hand @elias69 | claude_kris@yahoo.com | North Grant | Inactive | $271.56 |
Elda Pfannerstill I @ginger_white | pearlie_damore74@hotmail.com | West Margarita | Active | $1,196.01 |
Mr. Arnold Kovacek Sr. @lorenzo1 | felicity.schneider73@yahoo.com | Floydhaven | Inactive | $9.90 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Evalyn Schimmel Jr. | glenn77@yahoo.com | Ratketown | Inactive | $275.82 |
| Dr. Nellie Gulgowski V | evelyn13@hotmail.com | Lolafield | Inactive | $872.57 |
| Trisha Conroy | armand.lueilwitz18@hotmail.com | Harveyton | Inactive | $205.05 |
| Ethan Mayer | kari_yundt63@hotmail.com | New Elvira | Inactive | $569.82 |
| Jadyn Stroman II | georgette_cruickshank4@yahoo.com | Port Tavares | Active | $348.65 |
| Total | $2,271.91 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Creola Lakin | allan_buckridge-ferry@gmail.com | Sunrise | Active | $621.41 |
| Hazle Wiza | javonte_dietrich@hotmail.com | Rosemariechester | Inactive | $401.41 |
| Carl Feeney | tyrone.pacocha20@hotmail.com | Prohaskaton | Active | $1,129.13 |
| Jay McGlynn | dameon37@gmail.com | Wisozk-Labadiefort | Inactive | $805.95 |
| Eileen Blanda | angie34@hotmail.com | South Joey | Active | $659.96 |
| Total | $3,617.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wanda Prosacco | cynthia60@gmail.com | Lindfort | Active | $298.56 |
| Antwon Funk | neal.hoeger-dietrich@yahoo.com | Vanfurt | Active | $841.80 |
| Connor Rowe | seth33@hotmail.com | East Waylon | Inactive | $1,113.47 |
| Ashton Keebler I | greyson.hickle52@yahoo.com | Satterfieldstead | Active | $55.56 |
| Lisa Von | troy_effertz@hotmail.com | San Diego | Active | $360.40 |
| Total | $2,669.79 | |||
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 | ||
|---|---|---|---|---|---|
| Lloyd Pollich | jake65@yahoo.com | North Arch | Active | $1,037.83 | |
| Olive Beer | brendan.lind@yahoo.com | Willisboro | Inactive | $442.55 | |
| Dewayne Gibson | byron.thiel36@gmail.com | Lake Tony | Active | $1,107.12 | |
| Hope Hegmann | erin_smitham44@yahoo.com | Richland | Active | $256.44 | |
| Patty Wisoky | marcella_goodwin47@gmail.com | Lisatown | Inactive | $447.06 | |
| Total | $3,291.00 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Wade Feest | hank3@gmail.com | Wiegandbury | Active | $375.99 | |
| Lacy Hahn-Mills III | meagan_bechtelar@gmail.com | Port Elsa | Active | $132.76 | |
| Dan Bergnaum | milton_spencer@yahoo.com | Botsfordland | Inactive | $80.26 | |
| Mallory Hahn | kristina1@yahoo.com | Port Darnell | Inactive | $93.39 | |
| Amos Schoen-Bode IV | mathew49@hotmail.com | New Sheriburgh | Inactive | $172.56 | |
| Total | $854.96 | ||||
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 | |
|---|---|---|---|---|
| Steve Krajcik | alena_reilly@yahoo.com | Boyleburgh | Active | $463.00 |
| Fay Bruen | owen_hettinger-hansen@hotmail.com | Tracy | Active | $693.43 |
| Thea Johnson-Halvorson | heidi.ullrich-lueilwitz5@gmail.com | Hayesport | Inactive | $1,152.33 |
| Dr. Crawford Willms | haley.trantow@yahoo.com | Edwinboro | Active | $337.60 |
| Kent Walter | dorothy60@hotmail.com | Lake Margotstad | Active | $67.00 |
| Seamus Gorczany | nicholaus.hoppe84@yahoo.com | Efrenbury | Active | $936.58 |
| Mrs. Janis Walker | ollie9@gmail.com | Blanda-Williamsonfort | Active | $582.02 |
| Yasmine Witting | makenna.tillman21@gmail.com | New Dominick | Inactive | $261.15 |
| Santiago Dickinson | dorothea.morissette49@gmail.com | Moenmouth | Active | $1,176.13 |
| Bernice Dibbert | jesse94@hotmail.com | Joliet | Active | $167.47 |
| Kristine Pfannerstill DVM | rebeca68@yahoo.com | Nealcester | Inactive | $945.98 |
| Trevion Berge | lester_wintheiser-ohara@gmail.com | New Eileenborough | Inactive | $687.59 |
| Vicente Kreiger DDS | leon.bode61@gmail.com | Millermouth | Active | $1,092.69 |
| Ida Labadie | raphaelle_reinger62@gmail.com | Destinhaven | Active | $444.10 |
| Leon Corwin | lexi.bailey@gmail.com | Lynchmouth | Active | $619.76 |
| Total | $9,626.83 | |||
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 |