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 | Credit Card | $646.24 |
| INV002 | Unpaid | Bank Transfer | $645.44 |
| INV003 | Paid | PayPal | $329.38 |
| INV004 | Paid | PayPal | $206.31 |
| INV005 | Paid | Credit Card | $391.95 |
| INV006 | Pending | PayPal | $580.75 |
| INV007 | Pending | Credit Card | $362.09 |
| Total | $3,162.16 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Clint Blanda | Global Accounts Architect | clint_blanda31@hotmail.com | Admin | |
| Renee Lang | Lead Accounts Orchestrator | renee.lang@gmail.com | Member | |
| Lilla West-Thompson | Chief Paradigm Associate | lilla_west-thompson39@gmail.com | Admin | |
| Ethel Nolan | Forward Mobility Planner | ethel.nolan@gmail.com | Viewer | |
| Mack Cruickshank | Investor Division Developer | mack.cruickshank@hotmail.com | Admin | |
| Ebony Boyer-Rosenbaum | Dynamic Brand Administrator | ebony_boyer-rosenbaum@yahoo.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 |
|---|---|---|
Dewayne Feest Human Assurance Orchestrator dewayne.feest40@hotmail.com | Admin | |
Jeffrey Simonis Chief Implementation Planner jeffrey.simonis@gmail.com | Admin | |
Brandon Bartell Dynamic Markets Producer brandon_bartell@hotmail.com | Viewer | |
David Brown Global Program Technician david.brown@hotmail.com | Member | |
Dorcas Goodwin District Operations Developer dorcas.goodwin@hotmail.com | Admin | |
Bailee Feil Human Web Orchestrator bailee_feil74@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Helena Rohan Dynamic Assurance Planner helena_rohan61@hotmail.com | Member | |
Marcelino Becker Lead Marketing Agent marcelino.becker59@yahoo.com | Member | |
Chanel Sawayn International Quality Facilitator chanel_sawayn@hotmail.com | Viewer | |
Marianne Jenkins Direct Research Producer marianne_jenkins@hotmail.com | Viewer | |
Holly Kub Internal Brand Officer holly_kub@gmail.com | Admin | |
Dave Heaney Direct Response Assistant dave_heaney@yahoo.com | Viewer | |
Katelin Leuschke Chief Mobility Administrator katelin_leuschke@hotmail.com | Admin | |
Baby Langworth Internal Quality Supervisor baby_langworth@hotmail.com | Viewer | |
Mercedes O'Conner Global Identity Planner mercedes_oconner42@yahoo.com | Admin | |
Rosalia Cormier Internal Applications Orchestrator rosalia_cormier@yahoo.com | Viewer | |
Miriam Klein Internal Implementation Specialist miriam_klein48@yahoo.com | Admin | |
Patti Dare Human Brand Orchestrator patti.dare@hotmail.com | Admin | |
Lexie Upton Internal Accountability Analyst lexie.upton28@gmail.com | Viewer | |
Maurine Witting Investor Directives Specialist maurine_witting@gmail.com | Admin | |
Ellis Prosacco Dynamic Communications Strategist ellis.prosacco51@gmail.com | Member | |
Ruben Kilback Principal Group Developer ruben.kilback@hotmail.com | Member | |
Herman Kessler-Lowe National Mobility Engineer herman_kessler-lowe44@hotmail.com | Admin | |
Howard Boehm Product Directives Specialist howard_boehm@hotmail.com | Member | |
Carlos Bradtke Dynamic Intranet Designer carlos_bradtke@hotmail.com | Member | |
Christie Blick Global Solutions Facilitator christie.blick76@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Horace Weber | mike.barrows63@hotmail.com | West Dennisshire | Inactive | $805.31 |
| Dr. Bennie Oberbrunner | victoria70@hotmail.com | Lake Kayla | Inactive | $225.82 |
| Barney Casper | jim44@yahoo.com | Grimesborough | Inactive | $463.66 |
| Rashad Berge-Crist | marquise42@yahoo.com | Lompoc | Inactive | $1,052.74 |
| Margaret Murazik | yvonne.dickinson41@yahoo.com | Gastonia | Active | $289.60 |
| Total | $2,837.13 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Aracely Jones II @matt_kihn75 | lewis40@hotmail.com | Lake Anibal | Inactive | $178.05 |
Antwon Sawayn V @bill.bailey | vickie_block@hotmail.com | Streichfurt | Active | $193.04 |
Napoleon Langworth III @tyson_bauch87 | arnold15@hotmail.com | North Claudia | Inactive | $406.90 |
Esmeralda Homenick @william.bahringer | scott26@yahoo.com | East Brett | Inactive | $442.35 |
Betty Jakubowski @gerald_dicki | jerald.weber@hotmail.com | Enidstead | Inactive | $564.65 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josefina Pouros | howard_towne73@gmail.com | North Sergioland | Active | $928.00 |
| Mandy Jast | grady.mohr@yahoo.com | Lake Ellsworthbury | Active | $90.62 |
| Alberto Buckridge | kirk.flatley69@gmail.com | Rudolphfurt | Inactive | $767.55 |
| Leticia Bahringer V | roslyn_walker@gmail.com | Camden | Active | $632.87 |
| Era Lueilwitz | beaulah.mayer38@yahoo.com | Gunnerstad | Active | $875.61 |
| Total | $3,294.65 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Vada Turner | casimer72@gmail.com | Nitzscheside | Inactive | $597.19 |
| Maximilian Reichel PhD | daryl15@gmail.com | West Marcelboro | Active | $941.60 |
| Patti Kiehn III | rolando_jacobson@gmail.com | South Stephanyborough | Active | $551.21 |
| Milton Friesen | brandy.walsh@yahoo.com | Port Donnie | Active | $765.40 |
| Nigel Adams IV | sandra.kris36@gmail.com | Kalamazoo | Active | $572.42 |
| Total | $3,427.82 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ali Crist | kristofer.williamson@gmail.com | Bellevue | Inactive | $66.25 |
| Hettie Cremin | glenda_hintz@gmail.com | South Arlene | Active | $227.21 |
| Ramona Wintheiser | warren.stracke@gmail.com | East Rachelshire | Active | $371.71 |
| Zoe Luettgen | kathleen79@gmail.com | West Alaina | Inactive | $715.51 |
| Clyde Lesch I | sven.vonrueden@gmail.com | Mohrberg | Inactive | $995.86 |
| Total | $2,376.54 | |||
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 | ||
|---|---|---|---|---|---|
| Markus Williamson | mae29@gmail.com | Compton | Active | $1,126.00 | |
| Catherine Smith | janice49@hotmail.com | Vacaville | Active | $871.06 | |
| Jasmine Weber | gerardo69@yahoo.com | East Joelstead | Active | $182.08 | |
| Vera Ernser-McKenzie | cody.rau43@hotmail.com | Tulsa | Inactive | $856.33 | |
| Ramona Swift | katrina0@yahoo.com | Reingerville | Active | $658.38 | |
| Total | $3,693.85 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Darwin Frami | zack.corkery@hotmail.com | North Peggyville | Inactive | $938.27 | |
| Royce Corwin | micaela1@gmail.com | Karlaworth | Active | $891.03 | |
| Angie McGlynn | elsie.kiehn@yahoo.com | North Everettefield | Inactive | $1,145.73 | |
| Mrs. Jerrod Rosenbaum | anita78@hotmail.com | East Felixburgh | Active | $719.27 | |
| Mr. Gabriel Bogisich | luella88@hotmail.com | Castle Rock | Inactive | $1,153.37 | |
| Total | $4,847.67 | ||||
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 | |
|---|---|---|---|---|
| Elizabeth Altenwerth | murphy_volkman69@hotmail.com | Kuhlmanshire | Inactive | $765.96 |
| Darion Haley | zander70@gmail.com | Ankundingburgh | Active | $864.33 |
| Britney Willms | deondre_howe@yahoo.com | Lake Gingerfurt | Active | $1,029.32 |
| Gudrun Willms | jack_keeling98@gmail.com | Marvinland | Inactive | $484.64 |
| Greta Kuhlman | annabelle96@gmail.com | Gulgowskibury | Active | $587.51 |
| Miss Maggie Hegmann | ariane.rice37@hotmail.com | Mooreboro | Inactive | $107.16 |
| Zetta Spencer | magnus74@hotmail.com | Fort Serenity | Inactive | $559.01 |
| Seth Considine-Mosciski | chester_davis@gmail.com | North Christinaberg | Inactive | $899.67 |
| Gunnar Feest | elias_koelpin65@gmail.com | Starkview | Active | $242.42 |
| Bulah Nader | laura42@hotmail.com | Fort Spencerburgh | Active | $151.44 |
| Mr. Conrad Jaskolski | danny_brakus-gislason42@yahoo.com | South Ellenboro | Inactive | $1,081.78 |
| Leland Spencer | archibald.schultz81@gmail.com | Littelberg | Inactive | $832.54 |
| Orville Torphy I | tremayne65@hotmail.com | Bernierstead | Active | $1,199.16 |
| Jeffery Schimmel | don_heathcote64@gmail.com | North Irwin | Active | $590.93 |
| Mr. Justin Rowe | noel56@hotmail.com | Brownchester | Active | $662.23 |
| Total | $10,058.10 | |||
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 |