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 | $268.93 |
| INV002 | Pending | Credit Card | $498.83 |
| INV003 | Pending | Bank Transfer | $185.14 |
| INV004 | Unpaid | PayPal | $231.98 |
| INV005 | Pending | Credit Card | $182.39 |
| INV006 | Pending | Credit Card | $193.62 |
| INV007 | Pending | PayPal | $355.06 |
| Total | $1,915.95 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ona Swaniawski | Senior Applications Strategist | ona.swaniawski@hotmail.com | Viewer | |
| Nedra Hilpert | International Applications Developer | nedra_hilpert@gmail.com | Viewer | |
| Jaime Schinner | Senior Paradigm Director | jaime.schinner@hotmail.com | Admin | |
| Cooper Dicki | Investor Program Architect | cooper.dicki@hotmail.com | Viewer | |
| Taylor Krajcik | Corporate Division Facilitator | taylor_krajcik78@yahoo.com | Admin | |
| Hope Thiel | Senior Marketing Architect | hope.thiel@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Greg Moen International Solutions Producer greg.moen94@gmail.com | Member | |
Lori Hansen Investor Intranet Facilitator lori.hansen51@yahoo.com | Viewer | |
Theresa Fritsch Human Accounts Supervisor theresa.fritsch24@gmail.com | Viewer | |
Eveline Stokes Product Data Agent eveline.stokes@gmail.com | Admin | |
Joyce Becker Senior Program Director joyce_becker32@yahoo.com | Member | |
Zoe Ferry Chief Configuration Consultant zoe_ferry@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 |
|---|---|---|
Garret Kertzmann Internal Web Analyst garret.kertzmann@yahoo.com | Viewer | |
Bertram Harris District Intranet Liaison bertram.harris17@yahoo.com | Member | |
Jeff Padberg Principal Operations Representative jeff.padberg@hotmail.com | Member | |
Naomi Ebert Regional Factors Manager naomi_ebert32@hotmail.com | Admin | |
Joan Wolf Product Mobility Administrator joan_wolf@gmail.com | Member | |
Warren Price International Infrastructure Administrator warren_price@gmail.com | Admin | |
Kristie Trantow Regional Identity Orchestrator kristie.trantow@gmail.com | Admin | |
Kathryn Russel Dynamic Quality Facilitator kathryn_russel@hotmail.com | Member | |
Leigh Cartwright-Crooks Investor Directives Strategist leigh_cartwright-crooks@yahoo.com | Viewer | |
Tatum Schaden Dynamic Branding Officer tatum_schaden@gmail.com | Member | |
Leticia Muller Internal Implementation Executive leticia_muller@yahoo.com | Admin | |
Lorraine Harber Global Marketing Orchestrator lorraine_harber31@hotmail.com | Member | |
Steve Raynor Principal Integration Officer steve_raynor66@hotmail.com | Admin | |
Priscilla Daugherty Forward Communications Associate priscilla.daugherty43@hotmail.com | Viewer | |
Mohammad Donnelly Human Research Coordinator mohammad.donnelly54@gmail.com | Member | |
Dennis Watsica Global Optimization Representative dennis_watsica0@gmail.com | Admin | |
Stella Metz Global Metrics Architect stella_metz7@hotmail.com | Member | |
Leo Kessler Internal Group Director leo.kessler18@hotmail.com | Admin | |
Patty Robel Product Intranet Analyst patty.robel85@gmail.com | Viewer | |
Roy Tillman Human Operations Supervisor roy.tillman@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 | |
|---|---|---|---|---|
| Randal Balistreri | florencio3@hotmail.com | Salvatoreworth | Inactive | $547.51 |
| Ms. Daisy Pollich | krista_wuckert@hotmail.com | Austynstead | Inactive | $646.03 |
| Deanna Ebert DDS | evan_von@yahoo.com | Fort Nola | Inactive | $1.39 |
| Tyree Leffler | tara13@hotmail.com | Izaiahside | Active | $178.30 |
| Dr. Benny Rowe | abbey.dooley50@gmail.com | Elsefort | Inactive | $51.65 |
| Total | $1,424.88 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Buck Ullrich @clay8 | christelle_corkery73@yahoo.com | Fall River | Active | $674.46 |
Cesar West @rochelle35 | corine.tremblay43@hotmail.com | Mathewberg | Active | $506.48 |
Louise Collins @river18 | bell_rutherford98@yahoo.com | Alhambra | Inactive | $607.13 |
Burley Howell @jermey.corkery | rose_halvorson@yahoo.com | Kutchshire | Active | $599.90 |
Marjorie Reynolds @albina_ryan70 | sylvia51@hotmail.com | New Sandy | Inactive | $1,058.33 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Betsy Rohan | deontae_pacocha@hotmail.com | Farrellbury | Active | $194.32 |
| Mr. Glen Franecki | frank.romaguera68@gmail.com | Fort Kristie | Active | $1,113.75 |
| Katlynn Stanton | gwendolyn.hayes@hotmail.com | Schummbury | Inactive | $226.95 |
| Becky Thiel | duane_stroman77@yahoo.com | Christinestead | Active | $1,010.97 |
| Mr. Kristopher Krajcik | elnora.fisher1@yahoo.com | East Haleighville | Inactive | $110.01 |
| Total | $2,656.00 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dariana Beer | florine_king@gmail.com | Walnut Creek | Active | $470.51 |
| Florian Considine | tonya_raynor66@hotmail.com | Joneschester | Active | $79.20 |
| Monte Hettinger | weston.pacocha@gmail.com | Port Melvinastead | Inactive | $212.63 |
| Maximillia Becker | orin30@yahoo.com | Kihnburgh | Inactive | $666.71 |
| Karl Wisoky | eileen.dibbert@gmail.com | Mackfort | Inactive | $769.49 |
| Total | $2,198.54 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dean Dach | cecilia48@yahoo.com | Leslychester | Inactive | $224.17 |
| Lorraine Mann-Bashirian | bridget.cole@gmail.com | West Cliftonburgh | Active | $1,099.78 |
| Greg Waters | skyla97@gmail.com | Hugofurt | Active | $658.23 |
| Jonathan Corkery | matteo49@yahoo.com | Port Estefaniatown | Inactive | $1,134.72 |
| Richmond Hermann-Franecki | dillan96@yahoo.com | New Sammy | Active | $1,163.21 |
| Total | $4,280.11 | |||
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 | ||
|---|---|---|---|---|---|
| Evangeline Cormier | lila_keebler@hotmail.com | Miriamview | Active | $253.70 | |
| Melba Kling | delbert25@hotmail.com | Lake Mamiechester | Inactive | $361.42 | |
| Mr. Jeff Herman | isaias.wolf@gmail.com | West Wendyboro | Active | $185.67 | |
| Fred Reichert | shane_ledner@gmail.com | Doyletown | Inactive | $275.49 | |
| Miss Lucy Bechtelar | eric.olson@gmail.com | Charlieside | Inactive | $142.32 | |
| Total | $1,218.60 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ally Bahringer | ciara_homenick@hotmail.com | New Terrance | Active | $550.37 | |
| Darius Monahan | waino59@yahoo.com | North Nancy | Active | $81.00 | |
| Taylor Bartell | selina.sawayn81@gmail.com | Carterfort | Active | $531.47 | |
| Austin Stroman | jayde53@gmail.com | North Shawnborough | Inactive | $840.96 | |
| Hadley Rohan | lia_morar@yahoo.com | Bakersfield | Active | $1,096.53 | |
| Total | $3,100.33 | ||||
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 | |
|---|---|---|---|---|
| Joanne Bins | andy.keebler13@yahoo.com | Haverhill | Active | $270.78 |
| Misael Christiansen | pamela20@gmail.com | Heathcotestad | Active | $399.60 |
| Hugo Rempel | jordi28@gmail.com | South Collinfort | Inactive | $72.55 |
| Loy Barton | dewey25@gmail.com | Rodrigomouth | Active | $810.57 |
| Eleanore Ratke | deondre.strosin-stanton86@hotmail.com | Dearborn | Inactive | $487.09 |
| Davon Fadel | dixie68@yahoo.com | East Bobbyland | Inactive | $463.17 |
| Faith Stroman | jorge.hayes86@yahoo.com | Wuckertborough | Inactive | $122.56 |
| Arnoldo Konopelski | neal89@yahoo.com | New Dustinstead | Inactive | $990.68 |
| Jim Macejkovic | madeline.walsh-mosciski94@hotmail.com | South Horace | Active | $720.14 |
| Louis Kerluke DDS | mack_farrell73@hotmail.com | Port Lynnemouth | Active | $617.47 |
| Isidro Schultz | sammy.bartoletti-ebert@hotmail.com | South Whittier | Inactive | $459.13 |
| Geraldine Bosco | josiah_wilkinson23@gmail.com | Elbertview | Inactive | $393.37 |
| Demond Conroy | janice_kilback82@yahoo.com | South Judithland | Active | $255.60 |
| Blake Mayer | deion72@gmail.com | New Marsha | Active | $562.60 |
| Domenick Batz | ezequiel49@gmail.com | Demondcester | Active | $1,017.65 |
| Total | $7,642.96 | |||
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 |