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 | PayPal | $860.43 |
| INV002 | Paid | Bank Transfer | $988.74 |
| INV003 | Paid | PayPal | $355.96 |
| INV004 | Pending | Credit Card | $790.64 |
| INV005 | Paid | PayPal | $907.01 |
| INV006 | Pending | PayPal | $887.40 |
| INV007 | Paid | PayPal | $443.23 |
| Total | $5,233.41 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lyle Dicki | Senior Metrics Facilitator | lyle_dicki@yahoo.com | Admin | |
| Wayne Nolan-Rice | Direct Factors Strategist | wayne_nolan-rice@gmail.com | Member | |
| Lorene Hammes | Internal Security Administrator | lorene.hammes22@gmail.com | Member | |
| Johan Schneider | Customer Usability Administrator | johan_schneider97@hotmail.com | Admin | |
| Phoebe Auer | International Applications Director | phoebe.auer54@gmail.com | Viewer | |
| Brandi Williamson | Direct Tactics Strategist | brandi_williamson@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 |
|---|---|---|
Clinton Kihn Dynamic Usability Supervisor clinton_kihn76@yahoo.com | Viewer | |
Lilla Spencer-Robel Internal Solutions Planner lilla_spencer-robel35@hotmail.com | Viewer | |
Raphaelle Schamberger-Bechtelar Central Communications Producer raphaelle_schamberger-bechtelar69@gmail.com | Member | |
Gretchen Rempel International Research Liaison gretchen.rempel87@yahoo.com | Admin | |
Jennings Roberts Global Division Executive jennings.roberts@gmail.com | Viewer | |
Rodney Kohler Central Group Strategist rodney.kohler@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 |
|---|---|---|
Devyn Mayer Investor Infrastructure Representative devyn_mayer@yahoo.com | Admin | |
Chyna Beer International Accounts Orchestrator chyna_beer@yahoo.com | Member | |
Janice Kutch International Interactions Designer janice_kutch95@yahoo.com | Admin | |
Giles Ebert Global Directives Director giles_ebert@hotmail.com | Member | |
Elta Weissnat Corporate Identity Designer elta_weissnat57@hotmail.com | Member | |
Adam Harvey Senior Interactions Representative adam_harvey15@hotmail.com | Member | |
Jonas Barton-Grimes Investor Creative Technician jonas_barton-grimes@yahoo.com | Member | |
Bernhard Hansen Customer Quality Designer bernhard_hansen5@gmail.com | Viewer | |
Kathleen Doyle Internal Intranet Technician kathleen.doyle@gmail.com | Admin | |
Mervin Bartell Central Creative Strategist mervin.bartell78@yahoo.com | Viewer | |
Nicole Reynolds Product Brand Agent nicole.reynolds14@hotmail.com | Viewer | |
Jenny Johnston Principal Response Supervisor jenny.johnston@gmail.com | Viewer | |
Irene Dickens Customer Brand Strategist irene.dickens14@yahoo.com | Member | |
Isabell Bashirian Dynamic Directives Architect isabell.bashirian@yahoo.com | Member | |
Haylee Fay Future Research Liaison haylee_fay93@yahoo.com | Member | |
Anita Pfannerstill Principal Solutions Administrator anita_pfannerstill20@gmail.com | Viewer | |
Mayra Kautzer Lead Response Facilitator mayra.kautzer@gmail.com | Member | |
Edward Rogahn National Web Manager edward.rogahn@hotmail.com | Admin | |
Marilyn Larson National Response Supervisor marilyn.larson@gmail.com | Viewer | |
Amara Miller Dynamic Tactics Associate amara_miller@yahoo.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 | |
|---|---|---|---|---|
| Brent Brown | adrienne14@hotmail.com | Sonjastad | Active | $130.41 |
| Bradford Sipes-Brown | maddison72@hotmail.com | North Sabina | Inactive | $814.96 |
| Jodi White V | brendan.trantow@gmail.com | Largo | Inactive | $150.02 |
| Quinten Thiel | josefina_crist24@gmail.com | Ankundingcester | Inactive | $63.46 |
| Faye Roob | emory.hegmann@hotmail.com | Rohanstad | Active | $458.12 |
| Total | $1,616.97 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Oliver Schiller @gordon46 | isabell26@yahoo.com | Rancho Cucamonga | Active | $403.00 |
Joey Ebert @lindsay45 | irma.okon@yahoo.com | West Bill | Inactive | $1,146.60 |
Mr. Lyric Kuvalis @monty.damore74 | rosalia2@yahoo.com | East Meghanshire | Inactive | $970.63 |
Anthony Pfannerstill @amber3 | andrea52@yahoo.com | Lauderhill | Inactive | $1,020.20 |
Quinten Schimmel @ernest46 | tamia25@hotmail.com | Sunrise Manor | Active | $1,109.67 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Natalie Grimes | ruben.kutch@gmail.com | Bossier City | Active | $849.52 |
| Ansley Goldner | christopher_fisher@yahoo.com | Lake Jaroncester | Active | $427.20 |
| Kyle Beahan | erma_hartmann6@yahoo.com | Swaniawskichester | Inactive | $1,172.18 |
| Estell Rohan | bonnie5@hotmail.com | West Wesley | Active | $759.00 |
| Lela Howe | maybell25@gmail.com | West Horace | Active | $780.47 |
| Total | $3,988.37 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darrel Stroman Sr. | tom46@yahoo.com | Eden Prairie | Inactive | $541.37 |
| Yolanda Collier | lonnie18@gmail.com | Wisokychester | Active | $166.80 |
| Rosemarie Crona | beverly_block20@yahoo.com | Kerlukefurt | Active | $553.08 |
| Clarence Balistreri | fannie47@yahoo.com | New Willtown | Active | $127.78 |
| Jarod Conroy | samuel93@hotmail.com | East Cecilia | Active | $566.93 |
| Total | $1,955.96 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Garry Douglas | hillard.kerluke@hotmail.com | La Mesa | Active | $1,155.55 |
| Lavon Murazik MD | ruth_smith80@gmail.com | Taylor | Active | $237.57 |
| Macey Blanda Jr. | carol.jenkins47@gmail.com | Tonyaburgh | Inactive | $534.37 |
| Christina Pfeffer | prudence.runte75@yahoo.com | North Don | Inactive | $322.31 |
| Stella Heidenreich V | camryn_jacobson57@yahoo.com | Queeniehaven | Inactive | $509.72 |
| Total | $2,759.52 | |||
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 | ||
|---|---|---|---|---|---|
| Ernestine Nader | woodrow_schulist@gmail.com | Isidrofort | Inactive | $339.61 | |
| Khalil Murazik | erin.walsh28@yahoo.com | Satterfieldberg | Inactive | $430.04 | |
| Krystel Balistreri | damaris13@gmail.com | New Reyna | Inactive | $732.78 | |
| Jordane Casper DDS | luz78@hotmail.com | Saigecester | Active | $683.70 | |
| Josefina Pfannerstill | carole96@hotmail.com | Tyronefurt | Active | $1,113.82 | |
| Total | $3,299.95 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Cody Grant | katie_collier@gmail.com | North Janiestad | Inactive | $944.12 | |
| John Bartell | estevan_franey3@gmail.com | Tempe | Active | $954.31 | |
| Bonita Muller | conrad88@hotmail.com | Smithland | Active | $231.29 | |
| Marshall Jakubowski | jada_abernathy@yahoo.com | North Desmond | Inactive | $1,099.78 | |
| Brook Bergnaum | joshua_medhurst@gmail.com | Greenholtmouth | Inactive | $695.54 | |
| Total | $3,925.04 | ||||
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 | |
|---|---|---|---|---|
| Francisco Buckridge | dannie.wiegand@hotmail.com | Breitenbergview | Inactive | $231.22 |
| America Rath DVM | maude_wilderman-bernier63@hotmail.com | West Maye | Active | $982.14 |
| Mrs. Valerie Balistreri | max_schiller@gmail.com | Tuscaloosa | Active | $345.33 |
| Dillon Auer | marianne.thompson19@hotmail.com | North Maggie | Inactive | $295.94 |
| Jeffrey Strosin | cole_cronin@yahoo.com | West Briana | Inactive | $138.12 |
| Bernice Senger | myrtice46@yahoo.com | New Maiaburgh | Inactive | $789.21 |
| Constance Mills | justus_kihn81@gmail.com | Wilberstead | Inactive | $28.48 |
| Cedric Padberg | wilton34@yahoo.com | Fort Sheryl | Inactive | $612.95 |
| Columbus Towne | ramiro.daugherty@hotmail.com | Ivanstad | Inactive | $650.75 |
| Greyson Lind | rhoda80@yahoo.com | Yostburgh | Active | $1,098.88 |
| Arnoldo Quitzon | jack2@hotmail.com | Fort Nigelberg | Active | $760.16 |
| Mrs. Rodrick Considine | lowell_aufderhar95@yahoo.com | West Milan | Inactive | $884.86 |
| Javon Hills | remington.feil-frami2@gmail.com | Tulsa | Inactive | $314.98 |
| Silvia Sawayn | sidney28@yahoo.com | New Mallie | Active | $847.73 |
| Dr. Patti Schuster | clayton86@hotmail.com | North Phillip | Inactive | $829.49 |
| Total | $8,810.24 | |||
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 |