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 | Credit Card | $726.31 |
| INV002 | Paid | PayPal | $955.86 |
| INV003 | Unpaid | Credit Card | $725.16 |
| INV004 | Unpaid | Bank Transfer | $779.93 |
| INV005 | Paid | Bank Transfer | $976.38 |
| INV006 | Pending | PayPal | $690.17 |
| INV007 | Paid | Credit Card | $535.43 |
| Total | $5,389.24 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jamil Trantow | Investor Usability Coordinator | jamil_trantow@hotmail.com | Member | |
| Eric Price | Lead Branding Strategist | eric_price1@gmail.com | Viewer | |
| Jocelyn Harber | Global Response Officer | jocelyn.harber@gmail.com | Viewer | |
| Kayley Hermiston | Regional Accounts Administrator | kayley_hermiston46@gmail.com | Viewer | |
| Cory Ankunding | Future Web Facilitator | cory_ankunding@yahoo.com | Admin | |
| Alma Nicolas | Investor Research Associate | alma_nicolas@hotmail.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 |
|---|---|---|
Julian Champlin Forward Mobility Orchestrator julian_champlin@gmail.com | Admin | |
Giovanna Barrows Internal Intranet Administrator giovanna_barrows25@hotmail.com | Viewer | |
Shyann Fadel Corporate Creative Analyst shyann.fadel@hotmail.com | Member | |
Ruben Zboncak District Integration Representative ruben_zboncak@yahoo.com | Admin | |
Ashley Quitzon Future Research Technician ashley_quitzon32@hotmail.com | Viewer | |
Connie Watsica Senior Brand Strategist connie_watsica69@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ray Lakin Central Directives Coordinator ray.lakin88@yahoo.com | Member | |
Alfreda Schmeler Dynamic Identity Designer alfreda.schmeler@yahoo.com | Admin | |
Carroll Hilpert Global Functionality Director carroll.hilpert@yahoo.com | Viewer | |
Diane Erdman Global Branding Planner diane_erdman94@hotmail.com | Admin | |
Amy Upton Regional Communications Coordinator amy.upton@hotmail.com | Viewer | |
Elton Prohaska Future Infrastructure Designer elton.prohaska93@gmail.com | Viewer | |
Katelyn Rowe Customer Usability Administrator katelyn_rowe@yahoo.com | Member | |
Karen Reichert Senior Interactions Representative karen_reichert50@hotmail.com | Member | |
Jessica West District Data Producer jessica.west35@gmail.com | Viewer | |
Kayla Baumbach Chief Communications Designer kayla.baumbach3@yahoo.com | Member | |
Ebba Schamberger Internal Assurance Director ebba_schamberger@hotmail.com | Member | |
Rachel Armstrong Direct Tactics Administrator rachel.armstrong@hotmail.com | Admin | |
Antonia O'Conner Human Functionality Officer antonia.oconner@yahoo.com | Admin | |
Wilbur Lueilwitz Dynamic Solutions Planner wilbur.lueilwitz15@yahoo.com | Admin | |
Hailey Farrell Investor Marketing Executive hailey_farrell34@hotmail.com | Admin | |
Earl Fritsch Principal Web Liaison earl_fritsch67@hotmail.com | Admin | |
Barbara Stamm Human Paradigm Executive barbara.stamm@yahoo.com | Member | |
Mia Kihn Future Implementation Liaison mia.kihn@hotmail.com | Viewer | |
Elyse Osinski Central Security Administrator elyse_osinski92@hotmail.com | Member | |
Chadd Grady Principal Infrastructure Strategist chadd.grady@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 | |
|---|---|---|---|---|
| Asa Ferry | randal.krajcik@yahoo.com | South Derrickhaven | Active | $994.11 |
| Marjory Miller | emely_west@gmail.com | Sonjafort | Active | $110.47 |
| Isabel Dare | delta.kertzmann@hotmail.com | North Beulahbury | Active | $1,192.62 |
| Leila Hickle | charley_ziemann@hotmail.com | West Gavin | Inactive | $1,093.45 |
| Joanie Kassulke | candelario.lind@hotmail.com | North Carychester | Inactive | $213.37 |
| Total | $3,604.02 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Pearl Tromp @madalyn41 | devan.maggio-schulist1@yahoo.com | Tabithastead | Active | $171.25 |
Donny Wyman @jesus92 | eddie_ortiz3@gmail.com | O'Connerland | Inactive | $421.47 |
Austin Bernhard @kristi_marquardt | chris_moore22@yahoo.com | Stokesfurt | Inactive | $1,066.24 |
Ryan Keeling @jill_casper | charles.morar73@hotmail.com | Manteca | Active | $389.78 |
Dr. Ashton Bednar PhD @christopher.haag94 | sherri_pfeffer@yahoo.com | Lake Desiree | Inactive | $1,091.36 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Adolf Sauer | ulises.schimmel@hotmail.com | West Carlboro | Active | $1,095.41 |
| Marlene Heller MD | tommy_nicolas95@hotmail.com | Round Rock | Inactive | $959.84 |
| Kane DuBuque | joe.macgyver85@gmail.com | North Kailey | Active | $560.10 |
| Terri Nicolas | maurice.rempel@yahoo.com | Lulaworth | Inactive | $958.42 |
| Ara McDermott | torey34@yahoo.com | Sipesboro | Active | $151.47 |
| Total | $3,725.24 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dortha Hoppe | laverne89@yahoo.com | New Jabaritown | Active | $745.44 |
| Mrs. Dora Rippin | dawn_fadel@gmail.com | Cheyenne | Inactive | $899.22 |
| Cletus Reichert | wilfredo3@yahoo.com | South Anissa | Inactive | $693.96 |
| Dr. Queenie Goyette | elijah.padberg@gmail.com | Boulder | Active | $968.03 |
| Wendy Kunde | samara_nitzsche@hotmail.com | Lake Ethel | Inactive | $585.46 |
| Total | $3,892.11 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dixie Leannon | mack_lemke@yahoo.com | South Crystal | Active | $1,193.57 |
| Dwayne Brakus | kim_hermann44@gmail.com | Starkside | Inactive | $762.39 |
| Miss Christine Hettinger II | mallory.rohan53@hotmail.com | New Celia | Inactive | $453.85 |
| Lionel Kling | nicole.vonrueden@gmail.com | Port Jacquelyntown | Inactive | $1,172.91 |
| Mr. Cyrus Hills | bart_schamberger@yahoo.com | New Audreanneshire | Active | $89.00 |
| Total | $3,671.72 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Nichole Yundt | mercedes12@yahoo.com | Dearborn | Active | $718.84 | |
| Ms. Theresa Durgan | bennie.steuber32@yahoo.com | Fort Ruthhaven | Inactive | $312.44 | |
| Krystal Welch | carla55@gmail.com | East Hugo | Active | $559.75 | |
| Viola Bergnaum | ford_zulauf89@hotmail.com | Milwaukee | Inactive | $288.82 | |
| Allen Lueilwitz DVM | carl1@yahoo.com | Strosinchester | Active | $994.15 | |
| Total | $2,874.00 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Dominique Murphy | javier36@hotmail.com | East Gregory | Inactive | $85.86 | |
| Kacey Donnelly | bonita_schimmel34@gmail.com | Lake Clarafort | Active | $924.67 | |
| Kathleen Bednar | hayden.bartoletti-wolff60@yahoo.com | Fort Salvadorville | Inactive | $416.19 | |
| Jettie Bogan | sally_mante@hotmail.com | North Kevinberg | Inactive | $69.46 | |
| Arturo Spencer | thelma_kutch70@hotmail.com | Lake Connor | Inactive | $468.28 | |
| Total | $1,964.46 | ||||
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 | |
|---|---|---|---|---|
| Maryjane Grimes | susan_walsh58@gmail.com | Huntersville | Inactive | $775.93 |
| Eric Stamm | marty.pagac30@hotmail.com | Deltona | Active | $499.83 |
| Jedidiah Gerlach IV | virginia.okon@yahoo.com | South Krisfurt | Inactive | $7.78 |
| Tyrel VonRueden | josiane_fay@yahoo.com | New Dawsonbury | Active | $273.46 |
| Mr. Dustin Prosacco | leticia.weimann17@hotmail.com | Kubworth | Active | $326.74 |
| Korey Williamson | kara25@hotmail.com | Port Eugene | Active | $700.12 |
| Kristy Larson | georgia49@yahoo.com | South Kendraside | Active | $628.05 |
| Michelle Denesik Jr. | mary_pfannerstill45@gmail.com | Runolfssonstad | Active | $1,102.49 |
| Jordane Monahan | kasey39@yahoo.com | West Altaville | Inactive | $181.33 |
| Timmy Ryan Jr. | ozella_sporer@hotmail.com | Kuvalisview | Inactive | $547.97 |
| Miranda Zulauf | nathanial39@gmail.com | Stehrcester | Inactive | $350.91 |
| Marcella Hauck | melany12@yahoo.com | Akron | Active | $338.45 |
| Orlo Stracke | calista53@hotmail.com | North Angie | Active | $1,080.56 |
| Gilbert Ward | barbara_lowe@gmail.com | Ashleyside | Inactive | $868.73 |
| Lois Koepp | llewellyn_rogahn60@hotmail.com | Lake Abby | Active | $412.39 |
| Total | $8,094.74 | |||
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 |



