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 | Credit Card | $138.47 |
| INV002 | Pending | PayPal | $425.22 |
| INV003 | Unpaid | Bank Transfer | $189.65 |
| INV004 | Paid | Bank Transfer | $339.90 |
| INV005 | Paid | PayPal | $306.03 |
| INV006 | Paid | Credit Card | $664.56 |
| INV007 | Paid | Credit Card | $175.29 |
| Total | $2,239.12 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rollin Pouros | International Usability Designer | rollin.pouros@gmail.com | Viewer | |
| Jayson Johnson | Human Factors Representative | jayson_johnson@gmail.com | Member | |
| Shanelle Dicki | Human Optimization Orchestrator | shanelle_dicki4@hotmail.com | Admin | |
| Virginie Heller | Human Paradigm Agent | virginie_heller68@hotmail.com | Member | |
| Elvie Bartell | Regional Integration Manager | elvie_bartell@hotmail.com | Viewer | |
| Suzanne Balistreri | Global Division Planner | suzanne_balistreri@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 |
|---|---|---|
Eldon Cole Human Intranet Strategist eldon.cole23@hotmail.com | Viewer | |
Marcella Stracke Human Operations Facilitator marcella_stracke@hotmail.com | Member | |
Brice Torp Central Usability Director brice.torp@gmail.com | Member | |
Magdalena Kiehn National Brand Engineer magdalena_kiehn68@gmail.com | Viewer | |
Garett Nienow Chief Research Liaison garett_nienow@hotmail.com | Member | |
Antone Wuckert Future Response Producer antone_wuckert69@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 |
|---|---|---|
Maud Hintz Product Branding Engineer maud_hintz@yahoo.com | Viewer | |
Armando Blick Customer Optimization Administrator armando.blick24@yahoo.com | Admin | |
Raina Wolf Chief Branding Administrator raina.wolf94@yahoo.com | Admin | |
Abraham Abernathy Customer Communications Specialist abraham.abernathy@yahoo.com | Viewer | |
Alfredo Veum Future Division Technician alfredo_veum@hotmail.com | Admin | |
Helene Hyatt Principal Optimization Assistant helene_hyatt44@gmail.com | Viewer | |
Norval Corkery Human Integration Representative norval.corkery@hotmail.com | Viewer | |
Chanelle Schinner Internal Metrics Planner chanelle_schinner@hotmail.com | Viewer | |
Lempi McLaughlin Global Research Administrator lempi.mclaughlin72@yahoo.com | Admin | |
Grace Kovacek Future Usability Engineer grace_kovacek62@hotmail.com | Viewer | |
Ruben Marvin Corporate Program Executive ruben.marvin19@yahoo.com | Viewer | |
Brandon Mosciski Future Operations Strategist brandon_mosciski61@gmail.com | Viewer | |
Harmon Nolan National Accountability Producer harmon.nolan@gmail.com | Admin | |
Johnny Blanda International Creative Orchestrator johnny.blanda55@hotmail.com | Viewer | |
Lavonne Flatley Human Accountability Designer lavonne.flatley57@hotmail.com | Member | |
Iva Gusikowski Internal Communications Administrator iva_gusikowski30@hotmail.com | Member | |
Chance Hammes Global Accountability Representative chance.hammes11@gmail.com | Viewer | |
Dayna Lockman Regional Communications Coordinator dayna_lockman12@gmail.com | Admin | |
Colten Bergnaum Principal Usability Orchestrator colten_bergnaum@hotmail.com | Member | |
Lue Lemke International Web Planner lue.lemke3@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 | |
|---|---|---|---|---|
| Randal Kertzmann | rosamond.stark@yahoo.com | Miramar | Active | $3.95 |
| Maggie Zemlak | wilford49@gmail.com | North Mavis | Inactive | $452.24 |
| Jake Turner | johnny35@hotmail.com | Vancouver | Active | $255.26 |
| Dr. Maryann Braun | grady91@gmail.com | Lakeville | Inactive | $535.09 |
| Dr. Louis Hegmann | devyn_nolan-oberbrunner@hotmail.com | Wyoming | Inactive | $936.31 |
| Total | $2,182.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tom Ritchie I @francisco84 | isabell56@gmail.com | Leonstad | Inactive | $258.46 |
Antoinette Bernier @blake90 | kaitlin.mcglynn50@yahoo.com | Lake Elody | Inactive | $191.56 |
Michelle Runolfsson @moshe_kris50 | maximillian_klocko@yahoo.com | Springfield | Inactive | $1,113.13 |
Joey Hintz @brennan64 | amanda_christiansen11@gmail.com | Walkerberg | Active | $196.93 |
Mr. Julius Harber PhD @nash_skiles | omari_wiza34@gmail.com | West Jaleelfurt | Inactive | $713.81 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Tommie Macejkovic | pinkie50@yahoo.com | Klockoport | Inactive | $67.58 |
| Ms. Sheila Abshire | mortimer.okeefe@gmail.com | Alecstad | Active | $947.22 |
| Mitchell Cruickshank | keara.fadel-gerlach45@hotmail.com | Port Isobel | Inactive | $1,010.33 |
| Dr. Clinton Price | meghan_hettinger@gmail.com | Auerstead | Inactive | $164.42 |
| Tara Dicki | shania.kuhlman98@yahoo.com | Jasonport | Inactive | $113.81 |
| Total | $2,303.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keith Price-Flatley | curtis49@yahoo.com | Kelleymouth | Active | $1,064.53 |
| Miss Felicia Moore | dariana.roberts77@hotmail.com | Scranton | Active | $240.13 |
| Elijah Rice-Ruecker | bethany64@gmail.com | Glenview | Active | $1,187.10 |
| Candace Heller | bertrand36@hotmail.com | New Arnoldoborough | Active | $485.26 |
| Ruby Murphy | jerry64@yahoo.com | Jacobiboro | Active | $449.56 |
| Total | $3,426.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erin Mills | nia_predovic@hotmail.com | Mission | Inactive | $130.60 |
| Hilda Swift | charity.casper91@hotmail.com | Beaverton | Active | $901.05 |
| Darin Ankunding | elza28@gmail.com | Norrishaven | Active | $143.90 |
| Patsy Herman-Breitenberg | calista_hermann97@hotmail.com | Wardfield | Active | $649.82 |
| Ms. Nancy Waters | nia_wiegand@hotmail.com | Arvada | Active | $292.73 |
| Total | $2,118.10 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. John Borer | federico.mccullough@gmail.com | North Hailey | Active | $890.44 | |
| Julie Bechtelar | gideon.kerluke@hotmail.com | Appleton | Active | $1,066.52 | |
| Janet Glover | neha80@gmail.com | Gradyton | Active | $1,172.03 | |
| Matthew Beier | hobart_tromp@hotmail.com | Mayaguez | Inactive | $1,134.44 | |
| Boyd Leffler | guido_torphy@yahoo.com | Jaleelside | Inactive | $296.02 | |
| Total | $4,559.45 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Jan Parisian | leif75@hotmail.com | Huelsville | Inactive | $1,073.66 | |
| Ms. Kristin Rolfson-McClure | janis.gulgowski92@hotmail.com | Lake Johathan | Inactive | $483.22 | |
| Eleanor Hettinger | polly_vandervort@hotmail.com | Framiton | Active | $310.37 | |
| Herman Bechtelar | madalyn_kuhic@gmail.com | Konopelskihaven | Active | $815.42 | |
| Francis Huels | sincere_streich@yahoo.com | Waipahu | Active | $147.15 | |
| Total | $2,829.82 | ||||
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 | |
|---|---|---|---|---|
| Fred Lueilwitz | clair47@yahoo.com | Avondale | Inactive | $854.80 |
| Dr. Isabel Bernier | yolanda.walter56@gmail.com | East Ardellacester | Active | $6.13 |
| Kristopher Daniel | arjun.mueller@yahoo.com | South Meggieboro | Active | $583.93 |
| Nicole Hammes | keith.connelly@yahoo.com | Tonibury | Active | $26.97 |
| Lorene Parker | diana.nienow39@hotmail.com | Berwyn | Inactive | $1,000.17 |
| Alyssa Kessler | otha.lakin5@yahoo.com | North Odell | Active | $569.42 |
| Terrence Wolf | angus_mertz61@hotmail.com | Brauntown | Inactive | $1,195.13 |
| Ernesto Jacobs | henriette.swaniawski@hotmail.com | Lawton | Inactive | $270.28 |
| Wesley Kuhic | vicente74@gmail.com | Arachester | Inactive | $606.12 |
| Lillie Legros | myrtis_ankunding@gmail.com | Dangelofurt | Inactive | $745.68 |
| Tanya Kessler Sr. | hazel13@gmail.com | East Lonnie | Inactive | $260.77 |
| Nicolas Raynor | fabiola87@yahoo.com | Edmond | Inactive | $381.18 |
| Mrs. Olga Simonis | kayden.kutch74@gmail.com | West Ona | Active | $403.57 |
| Hugh Hayes | erick_baumbach@yahoo.com | Battle Creek | Active | $387.10 |
| Jackie Considine | haskell96@gmail.com | South Maxboro | Inactive | $166.96 |
| Total | $7,458.21 | |||
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 |


