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 | $597.35 |
| INV002 | Pending | PayPal | $334.24 |
| INV003 | Paid | PayPal | $239.89 |
| INV004 | Unpaid | Bank Transfer | $204.95 |
| INV005 | Pending | Credit Card | $162.30 |
| INV006 | Unpaid | Credit Card | $227.24 |
| INV007 | Unpaid | Credit Card | $397.48 |
| Total | $2,163.45 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Shaun Mayer | Human Accountability Supervisor | shaun.mayer@hotmail.com | Member | |
| Juana Romaguera | Central Configuration Designer | juana_romaguera39@gmail.com | Member | |
| Garfield Renner-Funk | Legacy Markets Supervisor | garfield.renner-funk@yahoo.com | Admin | |
| Emmitt Parisian | Customer Assurance Liaison | emmitt.parisian75@gmail.com | Member | |
| Roy Hand | Principal Applications Manager | roy.hand@yahoo.com | Admin | |
| Michael Ratke | Regional Response Strategist | michael_ratke55@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 |
|---|---|---|
Ricardo Mosciski Central Paradigm Strategist ricardo.mosciski59@hotmail.com | Member | |
Stewart Senger Dynamic Implementation Architect stewart.senger@gmail.com | Member | |
Roxanne Krajcik Chief Research Executive roxanne_krajcik65@hotmail.com | Viewer | |
Harley Murazik Product Applications Specialist harley_murazik@gmail.com | Member | |
Orin Batz Senior Division Agent orin_batz@yahoo.com | Viewer | |
Doug Farrell Principal Operations Director doug_farrell@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 |
|---|---|---|
Cathryn Muller Corporate Applications Designer cathryn_muller58@yahoo.com | Viewer | |
Evalyn Mueller Central Identity Analyst evalyn_mueller93@yahoo.com | Viewer | |
Kelley Powlowski Human Interactions Technician kelley.powlowski@hotmail.com | Member | |
Chasity Mraz Direct Web Architect chasity_mraz@yahoo.com | Admin | |
Stefan Reinger Senior Tactics Architect stefan.reinger@yahoo.com | Admin | |
Amelia Fisher Customer Marketing Director amelia_fisher@hotmail.com | Viewer | |
Zachary Lemke Customer Division Orchestrator zachary.lemke28@yahoo.com | Member | |
Alexis Ziemann Lead Factors Planner alexis_ziemann95@yahoo.com | Viewer | |
Fiona White Forward Program Officer fiona_white3@gmail.com | Admin | |
Angus Mraz Principal Creative Developer angus_mraz@gmail.com | Member | |
Coby Bauch Lead Markets Developer coby_bauch@gmail.com | Viewer | |
Betsy Stark District Directives Liaison betsy_stark35@gmail.com | Member | |
Kent Marvin Product Configuration Architect kent_marvin@hotmail.com | Admin | |
Gennaro Legros Senior Accountability Assistant gennaro_legros@gmail.com | Viewer | |
Leone Windler Principal Intranet Agent leone.windler77@yahoo.com | Member | |
Ann Kunze National Data Specialist ann.kunze81@hotmail.com | Member | |
Michele Strosin Legacy Research Engineer michele_strosin@gmail.com | Viewer | |
Jeanne McLaughlin Lead Response Facilitator jeanne_mclaughlin91@hotmail.com | Viewer | |
Cory Stoltenberg Lead Web Strategist cory.stoltenberg43@hotmail.com | Member | |
Rosie Nikolaus Legacy Creative Designer rosie.nikolaus59@yahoo.com | Member |
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 | |
|---|---|---|---|---|
| Lucia Waelchi | tyler.bernier46@yahoo.com | Hesselville | Inactive | $370.71 |
| Marcel Rodriguez | jaunita.ondricka29@gmail.com | Port Johnbury | Inactive | $15.11 |
| Roberto Upton | eula25@gmail.com | West Melanie | Inactive | $615.88 |
| Enola Nitzsche MD | rickey_hettinger79@hotmail.com | East Martaburgh | Active | $24.27 |
| Caroline Cole | webster.larkin@gmail.com | Lake Davonstead | Active | $939.56 |
| Total | $1,965.53 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Robbie Koelpin PhD @danyka.auer | rafaela.zieme@hotmail.com | Margaritaworth | Inactive | $1,012.16 |
Gustave Nienow @mercedes_bernhard | mafalda_white35@hotmail.com | Fort April | Inactive | $58.32 |
Patti Hauck @francisca9 | maureen10@yahoo.com | Tucson | Active | $424.93 |
Jackson Gusikowski @tonya.corkery71 | reyes_lang7@hotmail.com | Port Gregstad | Active | $259.98 |
Eulalia Morissette @adah81 | iris.lueilwitz31@gmail.com | Tedmouth | Active | $132.24 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Amie Harris | amelie_schneider@gmail.com | Greggton | Inactive | $1,071.80 |
| Myles Reynolds | celia.leffler50@yahoo.com | Arnulfoworth | Inactive | $949.14 |
| Emmett Waelchi | cathrine51@yahoo.com | Collinsboro | Active | $858.76 |
| Stanley Larson Sr. | kirsten_gerhold@gmail.com | Fort Geoffreyberg | Active | $868.33 |
| Maci Green V | kameron_oberbrunner@gmail.com | Corkerystead | Inactive | $476.68 |
| Total | $4,224.71 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Abel Wilderman | jarod1@hotmail.com | The Hammocks | Active | $699.25 |
| Moriah Jerde | rogelio68@gmail.com | Damienboro | Inactive | $77.62 |
| Madeline Hickle | carlo24@yahoo.com | McGlynnshire | Inactive | $91.37 |
| Mandy Kertzmann MD | steve_ziemann69@hotmail.com | Wuckertfort | Active | $1,086.76 |
| Paula Dach | christy_dietrich@hotmail.com | Jackson | Inactive | $254.58 |
| Total | $2,209.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Raven Beahan-Greenfelder Sr. | alvera30@gmail.com | O'Keefeborough | Inactive | $717.33 |
| Lillian Jerde | santino.jenkins20@yahoo.com | Surprise | Active | $541.10 |
| Tabitha Friesen | geneva85@gmail.com | Mobile | Active | $875.50 |
| Roel Bernhard | ryder.krajcik15@gmail.com | Enid | Inactive | $1,180.07 |
| Erika Olson | leonor_kub31@hotmail.com | Tuckahoe | Active | $295.88 |
| Total | $3,609.88 | |||
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. Jordan Kautzer | katarina_hyatt55@hotmail.com | New Estafurt | Active | $362.62 | |
| Angelo Ankunding | alton10@hotmail.com | North Katemouth | Active | $558.50 | |
| Dorthy Gorczany | cheryl_parisian53@hotmail.com | Port Waldo | Active | $370.26 | |
| Matilde Boehm | delta29@gmail.com | Fort Corneliuschester | Inactive | $101.07 | |
| Ethan Moore | eileen.pagac@hotmail.com | Paradise | Active | $766.97 | |
| Total | $2,159.42 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Amina DuBuque | melba18@hotmail.com | East Tonya | Active | $620.20 | |
| Katie Cartwright Jr. | maureen65@yahoo.com | East Elza | Inactive | $886.45 | |
| Tyler Bailey | octavia31@yahoo.com | Jacobitown | Active | $1,190.31 | |
| Marlon Bauch | adam_stark@gmail.com | Fort Juanitachester | Active | $366.16 | |
| Drew Bradtke | shaniya_becker@gmail.com | Hymanmouth | Inactive | $730.34 | |
| Total | $3,793.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 | |
|---|---|---|---|---|
| Mozell Langworth | gene26@gmail.com | Breanneborough | Active | $1,009.09 |
| Kellen Harris | randy_wehner@hotmail.com | Edithburgh | Inactive | $1,002.13 |
| Miss Toni Reichert | dangelo_zulauf32@yahoo.com | Camryncester | Active | $691.99 |
| Marie McLaughlin | erica.gleason-johns@yahoo.com | Bossier City | Active | $411.87 |
| Mr. Elijah Langosh | retha.mraz76@hotmail.com | Carson | Active | $334.13 |
| Sammie Kovacek | tanya.ullrich76@yahoo.com | Rapid City | Active | $380.70 |
| Betsy Crona Jr. | irvin50@hotmail.com | Jamesview | Inactive | $342.04 |
| Dawson Tillman | ashton.mcdermott@hotmail.com | Lake Erma | Active | $892.97 |
| Belle Bogisich IV | ophelia_heathcote14@yahoo.com | Antoniohaven | Inactive | $468.75 |
| Frankie Wiegand | seth_reynolds72@yahoo.com | Port Santina | Active | $647.85 |
| Denise Raynor | kamren31@gmail.com | West Jana | Inactive | $300.09 |
| Samanta Schaefer | mackenzie71@hotmail.com | South Alisonview | Inactive | $267.44 |
| Dr. Preston Nikolaus | brandi_dibbert95@yahoo.com | Weymouth Town | Inactive | $409.89 |
| Joana Koch | ryan26@gmail.com | Buckeye | Inactive | $924.55 |
| Sven Larkin | valentina.nienow@hotmail.com | Friesenside | Inactive | $144.54 |
| Total | $8,228.03 | |||
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 |