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 | Bank Transfer | $601.17 |
| INV002 | Paid | Credit Card | $220.08 |
| INV003 | Pending | PayPal | $288.18 |
| INV004 | Paid | Credit Card | $253.69 |
| INV005 | Pending | Credit Card | $353.26 |
| INV006 | Paid | Credit Card | $129.92 |
| INV007 | Pending | Credit Card | $129.68 |
| Total | $1,975.98 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Trent McLaughlin | District Marketing Developer | trent_mclaughlin@gmail.com | Admin | |
| Rosetta Murray | Regional Quality Liaison | rosetta_murray@yahoo.com | Admin | |
| Brycen Heidenreich | Customer Web Specialist | brycen_heidenreich12@yahoo.com | Viewer | |
| Benjamin Satterfield | Regional Program Representative | benjamin.satterfield@yahoo.com | Admin | |
| Patty Ankunding | Chief Infrastructure Executive | patty_ankunding5@hotmail.com | Admin | |
| Pedro Bednar | Forward Web Manager | pedro.bednar@hotmail.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 |
|---|---|---|
Carolyn Jaskolski District Response Producer carolyn.jaskolski@hotmail.com | Member | |
Julius Rodriguez Central Optimization Associate julius.rodriguez11@gmail.com | Admin | |
Danial Wehner Future Marketing Technician danial.wehner7@hotmail.com | Admin | |
Jermaine Schumm Principal Infrastructure Consultant jermaine_schumm@gmail.com | Member | |
Maribel Roob Corporate Infrastructure Manager maribel.roob@hotmail.com | Member | |
Susie Gleason National Integration Designer susie_gleason@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mathew Hyatt Product Mobility Facilitator mathew_hyatt@hotmail.com | Member | |
Mario Kovacek District Quality Analyst mario.kovacek75@hotmail.com | Member | |
Gennaro Morissette District Operations Administrator gennaro.morissette98@hotmail.com | Admin | |
Rhonda Stracke Human Data Consultant rhonda.stracke62@yahoo.com | Viewer | |
Clay Gleason Forward Marketing Designer clay_gleason@gmail.com | Member | |
Cecilia Cremin Dynamic Paradigm Executive cecilia_cremin44@gmail.com | Viewer | |
Katie Sporer Corporate Division Specialist katie.sporer1@yahoo.com | Viewer | |
Genevieve Graham Product Tactics Executive genevieve_graham71@yahoo.com | Admin | |
Eric Kshlerin Global Directives Director eric_kshlerin@gmail.com | Admin | |
Charity Bosco Legacy Brand Manager charity_bosco@gmail.com | Member | |
Lavonne Ferry Senior Communications Planner lavonne.ferry@gmail.com | Admin | |
Curtis Rogahn National Accountability Director curtis_rogahn@yahoo.com | Admin | |
Antonina Turner Global Infrastructure Facilitator antonina_turner71@gmail.com | Member | |
Leticia Corkery Chief Factors Specialist leticia.corkery40@yahoo.com | Viewer | |
Troy Toy Chief Brand Planner troy_toy38@yahoo.com | Admin | |
Minerva Veum District Infrastructure Architect minerva_veum@yahoo.com | Admin | |
Alek Sipes Senior Directives Executive alek.sipes2@gmail.com | Member | |
Luke Schimmel Corporate Division Technician luke.schimmel56@yahoo.com | Member | |
Nicholas Cummerata Central Marketing Executive nicholas.cummerata58@hotmail.com | Member | |
Kenneth Donnelly Corporate Metrics Assistant kenneth_donnelly@gmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Alfonso Feest V | mariana39@yahoo.com | New Coy | Active | $778.90 |
| Fred Kautzer | carley.connelly12@gmail.com | Lake Edmondstad | Inactive | $698.63 |
| Christopher Streich DDS | clyde_dickens73@gmail.com | Aliyaburgh | Inactive | $1,186.98 |
| Vera Dickens | gavin_cummerata-swaniawski@gmail.com | North Brycen | Inactive | $169.26 |
| Ethyl Powlowski | archie.runte@gmail.com | Creminboro | Inactive | $608.33 |
| Total | $3,442.10 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Stephen Koepp @shanel60 | sharon.anderson@yahoo.com | Justenchester | Active | $134.67 |
Tate Tillman Sr. @salvatore65 | joe.witting@yahoo.com | Johnsview | Inactive | $769.61 |
Maria Hoppe DDS @byron74 | olivia_stehr71@gmail.com | Bothell | Inactive | $601.98 |
Jamie Bayer @melody.mayert | audrey37@yahoo.com | Kirkland | Active | $711.87 |
Jonas Bartell @loma.brown98 | earnest.rohan@hotmail.com | Brownbury | Inactive | $1,079.49 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Baby Bosco | percival60@gmail.com | Arlofort | Active | $1,102.60 |
| Lauren Hermann | roberto.gislason@gmail.com | Ritchieville | Active | $230.80 |
| Filiberto Wuckert | laurence.bode60@yahoo.com | North Sienna | Inactive | $40.68 |
| Miss Alma Mayer | ruthe_farrell22@gmail.com | Alfonsofurt | Active | $148.32 |
| Lucy Franecki | iris.smitham@yahoo.com | New Elainestead | Inactive | $655.39 |
| Total | $2,177.79 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jarvis Shanahan | oscar.shanahan56@yahoo.com | North Gladysmouth | Inactive | $399.76 |
| Rodolfo Pfannerstill | joseph_walker18@hotmail.com | Harveyland | Active | $1,166.48 |
| Connie Parker | hubert.barrows19@gmail.com | Melvinacester | Inactive | $783.53 |
| Charlie Nitzsche | vernon9@yahoo.com | West Ariellestead | Active | $487.76 |
| Drew Schaefer | spencer.raynor69@gmail.com | Danielfield | Active | $1,003.39 |
| Total | $3,840.92 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dianne Bednar V | coy90@hotmail.com | Florencebury | Inactive | $1,116.96 |
| Marjorie Gerhold DVM | ignacio79@yahoo.com | Camryncester | Inactive | $328.29 |
| Ms. Patricia Rowe DVM | cristal.yost18@yahoo.com | Mamiehaven | Active | $525.58 |
| Carolina Rau | wayne.kuvalis52@gmail.com | Fort Trinityborough | Active | $722.24 |
| Mr. Sunny Wilderman | yvette.bayer40@gmail.com | Luettgenstad | Active | $680.89 |
| Total | $3,373.96 | |||
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 | ||
|---|---|---|---|---|---|
| Todd Kuhn | joanna_graham78@gmail.com | Windlerborough | Inactive | $428.33 | |
| Jonathan Powlowski | carlos_franey@hotmail.com | East Franklin | Inactive | $457.11 | |
| Harry Koss | tyrique_lang37@hotmail.com | Martyburgh | Inactive | $868.96 | |
| Harriet Reynolds | alton_dibbert65@gmail.com | Poway | Active | $84.85 | |
| Twila Kuhn | garett10@yahoo.com | Elk Grove | Inactive | $636.65 | |
| Total | $2,475.90 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jordan Miller | bridget_collins@yahoo.com | North Vernberg | Active | $236.47 | |
| Morris Volkman | ernesto.boyle@gmail.com | Lake Nakia | Active | $503.33 | |
| Mr. Vergie Ziemann | vicente.swaniawski@yahoo.com | Schadenhaven | Active | $24.50 | |
| Darryl Roob | emma_blick@yahoo.com | Duluth | Active | $585.50 | |
| Hazle Dibbert | natasha.altenwerth-muller@yahoo.com | Stuartstad | Inactive | $646.61 | |
| Total | $1,996.41 | ||||
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 | |
|---|---|---|---|---|
| Justine Morar | herman.white56@yahoo.com | Johnsonshire | Active | $140.93 |
| Shanny Morar | xzavier99@yahoo.com | Rochester Hills | Active | $249.72 |
| Gladys Gutmann | oliver.reichel@gmail.com | Edwardside | Active | $895.35 |
| Belinda Mills | roland_breitenberg@yahoo.com | Fort Kristyboro | Inactive | $718.64 |
| Emilie Heidenreich | august.marks26@yahoo.com | Reichertfield | Inactive | $115.10 |
| Damon Kub | josh96@yahoo.com | Hagenesborough | Inactive | $994.66 |
| Anthony Kohler | arnold65@hotmail.com | Schoenchester | Inactive | $446.42 |
| Mr. Carmine Baumbach | margarita_spencer@yahoo.com | Metzville | Active | $605.69 |
| Casper Hermiston | thelma.bode@gmail.com | McKenzieville | Inactive | $626.81 |
| Charlie Hudson | wendell51@yahoo.com | Leannonfurt | Active | $465.17 |
| Tamia Smitham | ivy.kub43@hotmail.com | Jackieville | Active | $341.27 |
| Gertrude Reinger | jaron.anderson@hotmail.com | Fort Toby | Inactive | $446.96 |
| Liliane Mertz | myles84@yahoo.com | Lake Laneyview | Active | $104.63 |
| Leonard O'Hara | ali_fritsch75@yahoo.com | Port Bertmouth | Active | $409.24 |
| Tim O'Keefe | michelle.breitenberg@yahoo.com | North Luz | Active | $731.74 |
| Total | $7,292.33 | |||
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 |