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 | Paid | Bank Transfer | $297.80 |
| INV002 | Pending | PayPal | $932.03 |
| INV003 | Pending | PayPal | $545.16 |
| INV004 | Paid | Bank Transfer | $994.49 |
| INV005 | Unpaid | PayPal | $346.51 |
| INV006 | Unpaid | Credit Card | $480.54 |
| INV007 | Pending | PayPal | $233.12 |
| Total | $3,829.65 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Roy Stoltenberg | Principal Marketing Coordinator | roy.stoltenberg@yahoo.com | Member | |
| Ronnie Kiehn | Direct Communications Planner | ronnie.kiehn43@yahoo.com | Admin | |
| Dovie Runte | Internal Solutions Engineer | dovie.runte67@gmail.com | Member | |
| Jacquelyn Boyer | Human Integration Designer | jacquelyn_boyer34@yahoo.com | Admin | |
| Chester Connelly | Product Quality Planner | chester.connelly17@hotmail.com | Viewer | |
| Carmine Williamson | Customer Intranet Administrator | carmine.williamson@hotmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dayne Shields Product Interactions Associate dayne.shields14@hotmail.com | Admin | |
Thomas Turner Regional Factors Strategist thomas.turner@yahoo.com | Admin | |
Gwendolyn Ritchie Regional Research Orchestrator gwendolyn.ritchie65@gmail.com | Viewer | |
Molly Flatley Future Branding Technician molly.flatley@hotmail.com | Viewer | |
Marie Robel Dynamic Communications Designer marie.robel88@gmail.com | Viewer | |
Marguerite McGlynn Regional Implementation Analyst marguerite.mcglynn@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 |
|---|---|---|
Billy Boehm Direct Mobility Officer billy_boehm42@yahoo.com | Admin | |
Ryann Russel Regional Interactions Manager ryann_russel@gmail.com | Member | |
Rodolfo Maggio National Assurance Officer rodolfo.maggio@gmail.com | Viewer | |
Susan Leuschke Human Security Planner susan.leuschke@gmail.com | Member | |
Alexander Reinger Corporate Program Planner alexander.reinger@yahoo.com | Admin | |
Reina Crona Global Intranet Technician reina_crona11@yahoo.com | Viewer | |
Charles Emmerich Lead Web Strategist charles_emmerich@hotmail.com | Admin | |
Peter Fay Internal Security Facilitator peter_fay@gmail.com | Viewer | |
Maritza Rath Forward Marketing Architect maritza.rath4@hotmail.com | Viewer | |
Jarrell DuBuque Senior Identity Producer jarrell_dubuque85@hotmail.com | Member | |
Lilly Erdman Corporate Directives Producer lilly.erdman9@yahoo.com | Member | |
Celestino White National Directives Designer celestino_white@yahoo.com | Viewer | |
Hudson Schiller National Response Coordinator hudson_schiller@yahoo.com | Member | |
Giovanni Stoltenberg Human Accountability Supervisor giovanni_stoltenberg72@yahoo.com | Viewer | |
Rafaela Schulist Principal Tactics Producer rafaela.schulist45@yahoo.com | Viewer | |
Derek Hudson Forward Assurance Specialist derek.hudson@yahoo.com | Viewer | |
Karl Satterfield International Security Supervisor karl_satterfield9@hotmail.com | Viewer | |
Jailyn Marvin Dynamic Optimization Specialist jailyn.marvin23@hotmail.com | Viewer | |
Maria Crooks Central Factors Strategist maria.crooks@hotmail.com | Viewer | |
Brisa Hegmann Internal Metrics Supervisor brisa_hegmann13@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 | |
|---|---|---|---|---|
| Mr. Fred Block | judge_morissette44@hotmail.com | Hilpertstead | Inactive | $1,048.34 |
| Lucy Schuster | irvin_lesch@yahoo.com | East Allie | Active | $102.15 |
| Marcelino Schaden | nicola_reichert@yahoo.com | Port Mariannechester | Inactive | $166.90 |
| Mr. Lester Hyatt III | julio1@yahoo.com | Port Rosalieton | Inactive | $800.27 |
| Alden Terry-Waelchi | virgil9@gmail.com | Lake Lucyborough | Inactive | $993.59 |
| Total | $3,111.25 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Morris Lind @favian.mayer27 | domenico_schmidt@yahoo.com | West Lanabury | Active | $552.91 |
Hollie Veum @golda80 | harmony.keebler92@hotmail.com | Brentwood | Inactive | $383.28 |
Haley Walker @debbie7 | vena_harris@yahoo.com | Matthewport | Inactive | $903.29 |
Jeannette Blick @trent.schaden | cleve.haag12@gmail.com | Lake Carolfort | Active | $925.71 |
Imogene Rosenbaum Sr. @erin48 | mathilde23@gmail.com | North Barry | Inactive | $567.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ora Dibbert | laron.lebsack36@yahoo.com | Yundtfield | Inactive | $132.35 |
| Renee Keeling | hiram.hand92@hotmail.com | West Ann | Inactive | $850.33 |
| Aletha Olson | frankie77@hotmail.com | West Juniusville | Active | $929.61 |
| Danielle Collins | clare.von@gmail.com | Rhettfurt | Inactive | $438.81 |
| Rodolfo Lang | ruby35@yahoo.com | Port Edmondworth | Inactive | $1,104.51 |
| Total | $3,455.61 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Andres Larson II | selina56@yahoo.com | South Kaseyshire | Active | $444.83 |
| Dakota Wolf | glen.reichel16@gmail.com | Baileyton | Active | $400.46 |
| Anthony Weissnat | ross.robel@hotmail.com | North Nicklausborough | Inactive | $284.55 |
| Narciso Davis | brant71@yahoo.com | South Nickolascester | Active | $429.20 |
| Darin Purdy | bernita_ratke@gmail.com | West Edgardo | Active | $1,086.07 |
| Total | $2,645.11 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roman McClure | derek60@gmail.com | Denesikstad | Inactive | $574.23 |
| Moises Cole | geo_daniel@yahoo.com | Hanestead | Inactive | $373.16 |
| Miguel Hilll | miranda78@gmail.com | Homenickshire | Active | $274.91 |
| Annamae Kunze II | eugene_jones@yahoo.com | Bergstromstead | Active | $962.96 |
| Erin Christiansen | jaylon_oreilly62@yahoo.com | North Ninacester | Inactive | $972.81 |
| Total | $3,158.07 | |||
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 | ||
|---|---|---|---|---|---|
| Vickie Hermann | krista.jaskolski73@yahoo.com | Harberburgh | Active | $1,062.82 | |
| Whitney Stark | ora_aufderhar46@yahoo.com | East Gordonton | Inactive | $129.70 | |
| Phil Schamberger | kaylee63@yahoo.com | East Laurenfort | Active | $1,167.54 | |
| Traci Ziemann | rogelio.hilll33@hotmail.com | Hettingerborough | Inactive | $867.62 | |
| Lori Dach | austin79@gmail.com | Lyleside | Inactive | $238.54 | |
| Total | $3,466.22 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Clayton Fritsch | lorenz_kutch4@yahoo.com | Kristabury | Inactive | $500.70 | |
| Rebecca Prosacco-Predovic | claire_daniel95@yahoo.com | West Bernardside | Active | $1,177.93 | |
| Orval Beahan | floyd.casper40@hotmail.com | North Irvin | Active | $311.03 | |
| Camila Kautzer V | wilfredo.hammes52@gmail.com | Bradleybury | Inactive | $315.57 | |
| Diego Bailey | edward.roberts@hotmail.com | Mohammadland | Active | $775.52 | |
| Total | $3,080.75 | ||||
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 | |
|---|---|---|---|---|
| Angelica Goodwin-Bahringer | bell_stamm@gmail.com | Fort Petraworth | Inactive | $160.55 |
| Clay Turcotte Sr. | hester_keebler29@yahoo.com | Alfonsoland | Inactive | $549.46 |
| Elias Hilll | korey1@yahoo.com | Keeblerton | Inactive | $1,073.12 |
| Dexter Heller | curt_lemke39@hotmail.com | East Orin | Active | $946.25 |
| Mr. Uriel Pfeffer | jon.wehner@hotmail.com | Norman | Active | $634.45 |
| Dwight Keeling II | terrell.jacobi97@gmail.com | Pharr | Active | $609.95 |
| Luisa Renner | sherry_denesik@hotmail.com | West Vernonport | Inactive | $311.00 |
| Brando Effertz | stacy_prohaska82@yahoo.com | Baton Rouge | Inactive | $471.27 |
| Mildred Kris | missouri.carroll@hotmail.com | Bogisichton | Inactive | $339.44 |
| Phoebe Will | rosemary_damore@gmail.com | Erinmouth | Active | $1,197.16 |
| Adam Beahan | jesus.miller87@yahoo.com | North Cesar | Active | $1,080.85 |
| Mack Kerluke | scott_leannon16@yahoo.com | Kaylahcester | Active | $1,128.65 |
| Jonathan Abshire | joe.nolan83@hotmail.com | Florashire | Inactive | $609.05 |
| Douglas Green | matt82@yahoo.com | Glendaland | Inactive | $1,000.41 |
| Forrest Kshlerin-Langworth | lillian_rath60@hotmail.com | Pabloland | Inactive | $61.61 |
| Total | $10,173.22 | |||
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 |