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 | Unpaid | PayPal | $605.34 |
| INV002 | Pending | PayPal | $493.12 |
| INV003 | Paid | Credit Card | $254.32 |
| INV004 | Paid | PayPal | $789.87 |
| INV005 | Unpaid | Bank Transfer | $779.72 |
| INV006 | Pending | PayPal | $521.88 |
| INV007 | Pending | PayPal | $906.40 |
| Total | $4,350.65 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Krystina Rohan | Corporate Mobility Administrator | krystina.rohan@hotmail.com | Member | |
| Mary Franecki | Direct Integration Orchestrator | mary_franecki@hotmail.com | Viewer | |
| Mohamed Toy | District Communications Assistant | mohamed_toy@hotmail.com | Member | |
| Celestino Ullrich | Product Assurance Strategist | celestino_ullrich58@hotmail.com | Viewer | |
| Paula Schaefer | Future Response Consultant | paula_schaefer@gmail.com | Viewer | |
| Loretta Legros | International Accounts Specialist | loretta_legros@yahoo.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 |
|---|---|---|
Patrick Cartwright-Prohaska Corporate Communications Administrator patrick.cartwright-prohaska@gmail.com | Viewer | |
Buster Abernathy Internal Interactions Coordinator buster.abernathy98@yahoo.com | Member | |
Alvah Bins Chief Optimization Engineer alvah_bins@hotmail.com | Member | |
Vinnie Nienow Investor Response Designer vinnie_nienow79@yahoo.com | Member | |
Marie Wolf Legacy Metrics Supervisor marie.wolf97@gmail.com | Member | |
Kallie Ferry Principal Group Planner kallie.ferry27@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 |
|---|---|---|
Sandy Trantow Internal Integration Coordinator sandy_trantow@gmail.com | Admin | |
Tyrese Brekke Principal Applications Director tyrese_brekke93@yahoo.com | Admin | |
Glen Kuhn Investor Data Administrator glen.kuhn11@yahoo.com | Viewer | |
Neoma Langworth Corporate Creative Orchestrator neoma_langworth@hotmail.com | Viewer | |
Keyon Bins Human Assurance Planner keyon_bins29@gmail.com | Member | |
Kelley Gottlieb Principal Operations Designer kelley.gottlieb@yahoo.com | Viewer | |
Louise Herman Principal Identity Designer louise_herman@yahoo.com | Admin | |
Erik Cummerata Global Web Coordinator erik.cummerata@hotmail.com | Admin | |
Hugh DuBuque Product Marketing Assistant hugh_dubuque@yahoo.com | Admin | |
Devon Bernier Legacy Solutions Architect devon_bernier@gmail.com | Viewer | |
Emilio Frami Internal Accounts Strategist emilio_frami54@hotmail.com | Viewer | |
Teri Hermiston Global Quality Manager teri_hermiston69@hotmail.com | Member | |
Jordane MacGyver Dynamic Quality Consultant jordane.macgyver@yahoo.com | Member | |
Danielle Armstrong National Paradigm Representative danielle_armstrong@gmail.com | Admin | |
Melanie Gottlieb Chief Accounts Specialist melanie.gottlieb38@gmail.com | Viewer | |
Hector Cormier Future Solutions Manager hector.cormier28@yahoo.com | Member | |
Kasey Mohr Dynamic Configuration Analyst kasey_mohr97@hotmail.com | Viewer | |
Joyce Wisoky Dynamic Applications Associate joyce.wisoky75@yahoo.com | Admin | |
Teresa Barton Senior Infrastructure Architect teresa_barton@hotmail.com | Viewer | |
Maximilian Lindgren Human Implementation Supervisor maximilian.lindgren19@hotmail.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 | |
|---|---|---|---|---|
| Bonnie Nitzsche | darwin.ullrich-nader@hotmail.com | Millcreek | Active | $1,152.29 |
| Chelsea Heller | jamir_gleason37@hotmail.com | Ceres | Inactive | $282.94 |
| Annetta Oberbrunner | mckenna.maggio@yahoo.com | Davie | Active | $660.36 |
| Gregg Deckow | alvera_medhurst@yahoo.com | Hirthebury | Inactive | $919.45 |
| Evert Lakin | destany.towne8@hotmail.com | Dareboro | Inactive | $216.82 |
| Total | $3,231.86 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ella Bruen @ella_auer23 | alejandro_daugherty54@gmail.com | Hacienda Heights | Inactive | $237.33 |
Mr. Bradley Ratke @barton.stoltenberg30 | jeromy76@gmail.com | Sauerville | Active | $666.20 |
Rufus Nikolaus @miriam52 | peggy8@gmail.com | Stiedemanncester | Inactive | $505.67 |
Mr. Trent Waters @pasquale_casper | maryann.gorczany@gmail.com | Haleybury | Inactive | $487.29 |
Dale Doyle @arthur.gerhold55 | haley.olson@gmail.com | Johnsonfurt | Active | $660.66 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Reyes Johnson | amber74@yahoo.com | Garden Grove | Inactive | $693.68 |
| Dr. Misty Wilkinson | camden82@hotmail.com | Abbottburgh | Active | $670.09 |
| Katelynn Parker | shaun.west96@yahoo.com | North Tessie | Active | $396.82 |
| Magnus Auer | delores.schoen@hotmail.com | Yundtborough | Inactive | $964.84 |
| Vern Dach | cristina68@hotmail.com | Catalina Foothills | Active | $7.90 |
| Total | $2,733.33 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johnathon Koss | meggie31@hotmail.com | Delmerport | Active | $816.32 |
| Mr. Kamryn Doyle | alysha28@yahoo.com | Mollieton | Inactive | $378.23 |
| Benny Weissnat-Homenick | corene.volkman@yahoo.com | Modestofort | Active | $721.17 |
| Dejuan Purdy | donny_grimes@gmail.com | Malcolmbury | Inactive | $1,018.69 |
| Veronica Hartmann | jaylin_nolan@gmail.com | West Darrin | Active | $97.16 |
| Total | $3,031.57 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eleanor Parker | aglae.kirlin17@gmail.com | Isaacstead | Active | $650.75 |
| Dedrick Rath-Powlowski | santina.mckenzie@gmail.com | Naderboro | Active | $163.50 |
| Earnestine Hilll | belinda.parker57@gmail.com | Tigard | Active | $786.01 |
| Rhiannon Hickle | vern.prohaska61@yahoo.com | Harlingen | Inactive | $823.30 |
| Brad Schroeder | sigmund.legros22@hotmail.com | Skilescester | Inactive | $1,181.66 |
| Total | $3,605.22 | |||
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 | ||
|---|---|---|---|---|---|
| Penny Koch | shanie_abshire@gmail.com | New Silviaport | Active | $842.83 | |
| Haskell Kling | terrence31@hotmail.com | North Prudenceport | Active | $991.86 | |
| Matt Kessler | amelia86@hotmail.com | Schroederland | Inactive | $426.93 | |
| Elijah Graham | electa.gulgowski20@gmail.com | Ceciliaboro | Inactive | $507.81 | |
| Spencer Wolf | amelie_mosciski94@hotmail.com | Sauertown | Inactive | $771.98 | |
| Total | $3,541.41 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Henry Hahn | christop1@hotmail.com | New Americo | Active | $82.18 | |
| Christine Muller | einar91@yahoo.com | East Carletonport | Active | $601.34 | |
| Mrs. Wendy Oberbrunner | madisyn11@gmail.com | Lake Denise | Inactive | $353.49 | |
| Kallie Bernier | amaya_effertz0@yahoo.com | Rogahnboro | Inactive | $1,009.85 | |
| Rodolfo Gulgowski | adeline75@yahoo.com | Reynoldscester | Inactive | $521.00 | |
| Total | $2,567.86 | ||||
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 | |
|---|---|---|---|---|
| Laurie Aufderhar | fredrick61@gmail.com | Friesenmouth | Inactive | $167.37 |
| Ms. Rosa Yundt | pauline60@gmail.com | Eden Prairie | Active | $364.52 |
| Dr. Christy O'Reilly | deron.douglas@gmail.com | West Violaboro | Inactive | $1,192.15 |
| Doris Jones | reid_armstrong@hotmail.com | Fort Beverly | Active | $1,144.36 |
| Chauncey Donnelly | christie.homenick62@yahoo.com | South Mary | Inactive | $65.14 |
| Mr. Jose Orn | bennie_kling77@gmail.com | Cypress | Active | $392.95 |
| Jo Mayer | aniya_larson-carroll63@gmail.com | North Jimmy | Inactive | $1,175.07 |
| Angel Dooley | jailyn55@hotmail.com | South Adamtown | Active | $613.74 |
| Newton Gulgowski | patti.gerlach@gmail.com | Elmhurst | Inactive | $216.22 |
| Lucia Von | cesar.schultz@yahoo.com | Lake Verla | Active | $119.05 |
| Vita Parker | earl_johns79@yahoo.com | Virginiaboro | Active | $1,126.73 |
| Emelie Hessel-Barton | edwardo62@hotmail.com | West Dolly | Inactive | $1,119.85 |
| Georgia Littel | roland12@hotmail.com | East Catharine | Active | $1,007.30 |
| Brenda Bergstrom | wilfred.heller21@yahoo.com | Sigridview | Inactive | $960.63 |
| Penny Hauck | jennie.vonrueden6@yahoo.com | North Melindaborough | Inactive | $4.59 |
| Total | $9,669.67 | |||
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 |