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 | Bank Transfer | $692.71 |
| INV002 | Pending | Credit Card | $286.36 |
| INV003 | Pending | PayPal | $892.34 |
| INV004 | Paid | PayPal | $153.16 |
| INV005 | Pending | PayPal | $476.71 |
| INV006 | Pending | Bank Transfer | $868.39 |
| INV007 | Unpaid | PayPal | $346.65 |
| Total | $3,716.32 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ben Gislason | Chief Applications Producer | ben.gislason@yahoo.com | Admin | |
| Brando Harris | Direct Mobility Supervisor | brando.harris@hotmail.com | Member | |
| Fernando Goodwin-Purdy | Customer Accountability Liaison | fernando.goodwin-purdy1@gmail.com | Viewer | |
| Anna Schneider | District Group Designer | anna.schneider@hotmail.com | Viewer | |
| Katrina Morar | District Group Manager | katrina_morar@gmail.com | Member | |
| Kyler Flatley | Senior Data Administrator | kyler_flatley@gmail.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 |
|---|---|---|
Tiffany Douglas Central Security Associate tiffany.douglas@gmail.com | Member | |
Torrance Langworth Future Security Orchestrator torrance.langworth67@gmail.com | Member | |
Kennith Von International Creative Officer kennith.von86@gmail.com | Member | |
Gerry Haley Product Branding Architect gerry.haley@yahoo.com | Member | |
Angie Lubowitz Forward Intranet Liaison angie.lubowitz@yahoo.com | Admin | |
Judge Herman Direct Metrics Producer judge_herman82@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kellen Klein District Configuration Agent kellen_klein@yahoo.com | Viewer | |
Buford Franey Investor Branding Executive buford_franey@yahoo.com | Member | |
Orville Trantow Corporate Optimization Assistant orville_trantow@gmail.com | Admin | |
Meghan Nitzsche Forward Infrastructure Technician meghan.nitzsche@gmail.com | Member | |
Rita Rice International Implementation Analyst rita_rice22@gmail.com | Viewer | |
Audrey Schmidt Global Marketing Officer audrey_schmidt@hotmail.com | Admin | |
Harrison Kling Direct Marketing Representative harrison_kling64@yahoo.com | Viewer | |
Grady Pouros Corporate Marketing Agent grady.pouros@hotmail.com | Admin | |
Xzavier Bashirian Global Security Strategist xzavier.bashirian58@hotmail.com | Admin | |
Gage Bode International Identity Manager gage_bode53@hotmail.com | Admin | |
Andrea Labadie Product Paradigm Director andrea.labadie@gmail.com | Viewer | |
Marianna Boyle-Gerlach Senior Accounts Developer marianna_boyle-gerlach@yahoo.com | Member | |
Jeanne Becker Senior Mobility Representative jeanne_becker22@yahoo.com | Viewer | |
Mallory Thompson Dynamic Division Analyst mallory_thompson@yahoo.com | Viewer | |
Dudley Barrows Forward Quality Planner dudley.barrows77@yahoo.com | Admin | |
Lavina Homenick Global Division Orchestrator lavina.homenick52@yahoo.com | Viewer | |
Quincy Beatty Future Brand Coordinator quincy_beatty18@gmail.com | Viewer | |
Ivan Zboncak Global Identity Representative ivan.zboncak76@yahoo.com | Admin | |
Leonor Morissette Senior Intranet Orchestrator leonor.morissette@hotmail.com | Member | |
Verona Heaney Human Intranet Facilitator verona_heaney@hotmail.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 | |
|---|---|---|---|---|
| Sally Reynolds | shana.wisoky@hotmail.com | Breitenbergborough | Inactive | $204.14 |
| Dr. Johnny Medhurst | alanna_crist33@yahoo.com | Hartford | Active | $157.02 |
| Laverne Jacobi | krystal_torp@hotmail.com | Fort Leticia | Inactive | $80.44 |
| Casimer Shields | dayna24@yahoo.com | North Henryfort | Active | $19.83 |
| Dr. Roman Welch | orie.bailey@yahoo.com | Marietta | Inactive | $679.44 |
| Total | $1,140.87 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Andre Howell @mario_hagenes84 | josh.prosacco24@gmail.com | Dudleyburgh | Active | $755.56 |
Elvira Roob-Casper @antonia.olson | mario_white88@hotmail.com | West Rhianna | Inactive | $877.88 |
Scott Schaefer Sr. @rene_walsh4 | walter_collier93@gmail.com | Port Reginaldstad | Active | $397.97 |
Sibyl Smitham @dwight_franey91 | delia.brakus@gmail.com | Oak Park | Active | $167.06 |
Rosalinda Friesen @billy_jacobi | fred.sawayn@gmail.com | Bettyeland | Inactive | $448.59 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mathew Weissnat | marlon84@gmail.com | Clareville | Inactive | $235.65 |
| Abby Pfannerstill | damon38@yahoo.com | Millston | Active | $680.02 |
| Nettie Connelly | reagan0@hotmail.com | Bryanaport | Inactive | $593.07 |
| Philip Kutch | ed61@yahoo.com | Fort Inesmouth | Active | $714.36 |
| Billie Hermiston | jayden64@gmail.com | North Rex | Active | $815.65 |
| Total | $3,038.75 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sarah Wiza | kip_roob57@hotmail.com | Logan | Active | $458.29 |
| Gayle O'Reilly | travis99@yahoo.com | New Eulamouth | Inactive | $318.06 |
| Mrs. Eva Dickens | sonya78@gmail.com | Colehaven | Active | $227.34 |
| Marcos Medhurst | muriel.hintz18@gmail.com | Hermistonstad | Active | $160.97 |
| Elisha Douglas | else.dare@hotmail.com | Deckowberg | Inactive | $80.01 |
| Total | $1,244.67 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Myron Von | bertha_cormier@hotmail.com | Bechtelarfort | Active | $75.30 |
| Olivia Roob | grace.monahan2@hotmail.com | Kingfort | Inactive | $626.02 |
| Miss Rhianna Rutherford | rachel.pagac85@hotmail.com | Terrencefield | Active | $918.62 |
| Wesley Bins | francis.lindgren@gmail.com | Breanaburgh | Inactive | $28.69 |
| Mae Roberts | aaron_denesik@hotmail.com | Traceyville | Inactive | $81.38 |
| Total | $1,730.01 | |||
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 | ||
|---|---|---|---|---|---|
| Luz Brown | wesley.sipes97@hotmail.com | Fort Roman | Inactive | $562.55 | |
| Darren Ernser-Strosin | justice.ledner@hotmail.com | Yuma | Active | $465.33 | |
| Grover Beier | kara_kohler@hotmail.com | Chesapeake | Inactive | $27.03 | |
| Darnell Schmidt-McDermott | bruce_nienow62@hotmail.com | Nampa | Inactive | $657.74 | |
| Dusty Dach III | jonathan_kuhn@gmail.com | East Lansing | Active | $468.78 | |
| Total | $2,181.43 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Eloise Hermiston | brent.willms@gmail.com | South Feltonville | Active | $560.27 | |
| Arthur Schaefer | floyd.fritsch72@hotmail.com | Bogisichchester | Active | $39.69 | |
| Mr. Taylor Jerde | dovie42@hotmail.com | Rosiebury | Active | $756.26 | |
| Ricardo Bashirian | jamel.runolfsdottir46@hotmail.com | Collinsbury | Active | $842.38 | |
| Estel Douglas MD | ewald_hilpert@gmail.com | Lourdesberg | Inactive | $95.80 | |
| Total | $2,294.40 | ||||
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 | |
|---|---|---|---|---|
| Irvin Will | brian.roob@yahoo.com | North Kasandra | Inactive | $70.08 |
| Sigurd Keebler | darren.wyman9@yahoo.com | Jesusfurt | Inactive | $634.54 |
| Doyle Glover | kristen.frami25@hotmail.com | South Elyssahaven | Active | $255.06 |
| Allen Bayer | debra_brown94@gmail.com | Marietta | Active | $70.19 |
| Charlie Rosenbaum | elsie_satterfield30@hotmail.com | East Arturochester | Inactive | $88.81 |
| Roberto Ondricka Jr. | kate.bergstrom76@yahoo.com | Marietta | Inactive | $315.60 |
| Kameron Senger | ginger34@gmail.com | South Gregg | Inactive | $27.19 |
| Darla Upton-Bergstrom | oliver25@gmail.com | Great Falls | Active | $361.05 |
| Joel Bartell | salma17@hotmail.com | Antelope | Active | $843.67 |
| Byron Boyer | griffin.kreiger@hotmail.com | New Lynne | Active | $1,164.43 |
| Troy Kovacek | belinda.schroeder39@yahoo.com | Bergstromton | Inactive | $108.20 |
| Breana Larkin III | rex_hettinger@hotmail.com | East Aubreycester | Active | $980.79 |
| Darrel Maggio | liam_mitchell94@yahoo.com | West Theodore | Inactive | $335.89 |
| Tavares Rolfson | lulu_feil@gmail.com | Minnetonka | Inactive | $568.11 |
| Steven Dach | bell8@hotmail.com | Victoriatown | Active | $945.92 |
| Total | $6,769.53 | |||
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 |