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 | PayPal | $948.84 |
| INV002 | Unpaid | PayPal | $593.88 |
| INV003 | Pending | Bank Transfer | $645.15 |
| INV004 | Unpaid | PayPal | $255.04 |
| INV005 | Unpaid | PayPal | $845.49 |
| INV006 | Pending | PayPal | $154.79 |
| INV007 | Unpaid | Credit Card | $916.82 |
| Total | $4,360.01 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Daija Shanahan | Direct Metrics Consultant | daija_shanahan@hotmail.com | Admin | |
| Jacob Leuschke | Dynamic Mobility Strategist | jacob.leuschke62@hotmail.com | Viewer | |
| Greta Stehr | Investor Operations Orchestrator | greta_stehr70@gmail.com | Admin | |
| Jerel Effertz | Lead Functionality Director | jerel_effertz61@gmail.com | Member | |
| Walter Flatley | Forward Intranet Coordinator | walter_flatley@hotmail.com | Member | |
| Eva Kessler | Senior Functionality Designer | eva_kessler79@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 |
|---|---|---|
Alec Goldner Corporate Security Specialist alec.goldner49@yahoo.com | Viewer | |
Carli Hermiston Dynamic Identity Developer carli_hermiston88@gmail.com | Viewer | |
Desmond Crist Chief Web Executive desmond.crist@gmail.com | Admin | |
Erika Wintheiser Corporate Markets Liaison erika.wintheiser82@yahoo.com | Admin | |
Susana Rice Dynamic Response Coordinator susana.rice86@yahoo.com | Admin | |
Cory Parker Principal Intranet Assistant cory_parker@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Terri Kovacek National Intranet Planner terri_kovacek@gmail.com | Member | |
Ludie Senger Chief Mobility Assistant ludie_senger77@gmail.com | Member | |
Megan Haag Future Intranet Representative megan.haag60@gmail.com | Admin | |
Gustave Koepp Principal Marketing Supervisor gustave.koepp@gmail.com | Viewer | |
Chanel Sipes Regional Branding Technician chanel_sipes49@gmail.com | Viewer | |
Colten O'Connell Investor Program Developer colten.oconnell88@hotmail.com | Admin | |
Ernesto Yundt Customer Accountability Analyst ernesto.yundt5@gmail.com | Admin | |
Stacy Aufderhar Internal Interactions Associate stacy_aufderhar@gmail.com | Viewer | |
Ryan Nolan Customer Communications Manager ryan_nolan7@yahoo.com | Member | |
Randolph Koepp District Markets Specialist randolph_koepp@hotmail.com | Admin | |
Sigrid Schuppe Dynamic Applications Designer sigrid.schuppe@hotmail.com | Admin | |
Andrea Hermiston Investor Mobility Coordinator andrea.hermiston@hotmail.com | Admin | |
Gladys Kohler International Implementation Coordinator gladys.kohler31@yahoo.com | Member | |
Lucille Monahan Chief Branding Assistant lucille.monahan48@hotmail.com | Member | |
Archie Herman International Operations Agent archie_herman@gmail.com | Viewer | |
Alena Schultz Customer Identity Supervisor alena_schultz81@hotmail.com | Viewer | |
Desiree Hansen-Sporer Dynamic Interactions Manager desiree_hansen-sporer33@hotmail.com | Member | |
Dominic Will Product Program Analyst dominic.will52@yahoo.com | Member | |
Freeman Lockman Customer Intranet Technician freeman_lockman51@hotmail.com | Viewer | |
Frederick Zulauf-Rohan Legacy Integration Specialist frederick_zulauf-rohan@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 | |
|---|---|---|---|---|
| Alize Becker | nikita47@hotmail.com | Maple Grove | Inactive | $221.20 |
| Mr. Abigayle Funk V | effie5@hotmail.com | Blue Springs | Active | $877.06 |
| Jeannette Kub MD | lori_bins@yahoo.com | Glendale | Inactive | $59.77 |
| Bartholome Hansen | vivian_gerhold84@yahoo.com | Schaeferborough | Active | $995.01 |
| Justen Nikolaus | marlee.pouros83@gmail.com | Biloxi | Inactive | $28.12 |
| Total | $2,181.16 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Westley Moore V @burley_lynch51 | matthew_lowe5@gmail.com | Santa Ana | Active | $530.70 |
Arlie Crist @cathy8 | paolo_mcglynn-heller@gmail.com | Cecilcester | Active | $440.24 |
Curtis Jenkins @donald4 | ramon10@hotmail.com | Madisenbury | Inactive | $386.75 |
Gilberto Metz @annette.baumbach31 | delbert.towne@yahoo.com | Rancho Palos Verdes | Active | $978.93 |
Jessika O'Conner DDS @jasmine_kreiger51 | eugene23@yahoo.com | Karinachester | Active | $383.96 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tevin Marvin | marquis79@gmail.com | Lake Naomieville | Inactive | $922.96 |
| Rogelio Gutkowski | kristina17@yahoo.com | North Leslie | Inactive | $1,130.55 |
| Devin Emmerich | devonte95@hotmail.com | Jeramieborough | Active | $430.87 |
| Melody Kutch | victoria50@hotmail.com | Lake Ford | Active | $171.54 |
| Rodney Cummings | hudson.bashirian@yahoo.com | Hilllview | Active | $336.65 |
| Total | $2,992.57 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Juanita Sauer | eden_graham@gmail.com | University | Inactive | $501.70 |
| Brooke Boyle | kamille27@gmail.com | Port Shelia | Inactive | $389.07 |
| Martine Reynolds | jany_pfannerstill@hotmail.com | East Garfieldport | Active | $309.43 |
| Tremayne Lowe | emmet_quigley-emard@yahoo.com | Port Miranda | Active | $386.99 |
| Lela Wintheiser | hipolito_rau22@yahoo.com | Bossier City | Inactive | $446.72 |
| Total | $2,033.91 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Marlon Jenkins | mark22@yahoo.com | Palm Bay | Active | $370.00 |
| Alvis Abbott | mike_hagenes@yahoo.com | Fort Lexi | Active | $493.63 |
| Eliane Dibbert | howell.okuneva56@gmail.com | Effertzhaven | Inactive | $1,145.07 |
| Alison Pouros | shanny.bahringer@gmail.com | East Cecil | Active | $995.87 |
| Mr. Rashad Ullrich | francisco90@gmail.com | North Bobbystad | Active | $251.41 |
| Total | $3,255.98 | |||
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 | ||
|---|---|---|---|---|---|
| Anahi Hickle | raegan.jacobs@hotmail.com | East Alvertastad | Active | $824.16 | |
| Charlene Ratke II | rhoda_kozey@gmail.com | Nicolasland | Active | $132.07 | |
| Margarita Huels | lucas28@gmail.com | Gerholdton | Active | $563.98 | |
| Dr. Krista Kutch | nichole_hammes@hotmail.com | Sengerburgh | Inactive | $248.97 | |
| Keven Ratke | shari.ruecker10@yahoo.com | Buckridgefort | Active | $1,187.85 | |
| Total | $2,957.03 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Merle Huels | robert.treutel@yahoo.com | Sunrise | Inactive | $411.01 | |
| Julio Walsh | misty37@gmail.com | Wehnerfurt | Active | $849.18 | |
| Luciano Nitzsche | theodore81@yahoo.com | West Barbaraside | Active | $151.22 | |
| Delphine Cassin III | meda.dare@hotmail.com | South Hugo | Inactive | $674.47 | |
| Raphael Waters-Beier | krystina.borer@gmail.com | Fort Jasmineworth | Active | $479.55 | |
| Total | $2,565.43 | ||||
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 | |
|---|---|---|---|---|
| Noah Streich | shyann82@hotmail.com | Altheaworth | Active | $500.25 |
| Antonina Rath | austin60@gmail.com | North Claraview | Active | $140.12 |
| Zena Jaskolski | wilfred_murazik@hotmail.com | Sparks | Inactive | $698.67 |
| Jairo Reilly | nadine70@hotmail.com | Huldaview | Active | $861.99 |
| Jolie Nitzsche | lenora_upton14@hotmail.com | Lake Vella | Inactive | $1,136.55 |
| Wilber Wilderman | micah34@yahoo.com | Jessycaville | Active | $555.55 |
| Clifford Borer | eulalia37@hotmail.com | Fort Imelda | Active | $925.19 |
| Rosella Schoen | alex.thiel@gmail.com | North Jamiefort | Active | $142.24 |
| Lila Wiegand-Walker | ernestine_mohr@yahoo.com | South Lorenemouth | Inactive | $709.02 |
| Lonnie Hintz | jack_russel@gmail.com | South Myron | Inactive | $856.10 |
| Curt Pacocha | reynold_weimann60@yahoo.com | North Christyberg | Active | $603.08 |
| Mr. Donnie Skiles III | darren.kautzer@hotmail.com | West Lanehaven | Active | $1,119.67 |
| Dale Larson-Hilll | ignatius.medhurst@gmail.com | Heaney-Reichertport | Inactive | $1,029.86 |
| Isadore O'Connell | eloisa25@gmail.com | Hayesmouth | Inactive | $773.24 |
| Melinda Lang | kristy_rowe@hotmail.com | Micahside | Active | $1,020.41 |
| Total | $11,071.94 | |||
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 |