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 | $615.10 |
| INV002 | Paid | Bank Transfer | $538.61 |
| INV003 | Pending | PayPal | $686.42 |
| INV004 | Unpaid | Bank Transfer | $913.98 |
| INV005 | Paid | PayPal | $533.73 |
| INV006 | Paid | PayPal | $901.42 |
| INV007 | Paid | PayPal | $945.81 |
| Total | $5,135.07 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Carlee Kuvalis | Legacy Research Designer | carlee.kuvalis@yahoo.com | Member | |
| Matt Berge | Legacy Applications Director | matt_berge59@gmail.com | Member | |
| Alexandra Tremblay | International Research Designer | alexandra_tremblay82@gmail.com | Viewer | |
| Estevan Rohan | Global Identity Assistant | estevan_rohan38@yahoo.com | Viewer | |
| Wayne Kohler | Product Branding Assistant | wayne.kohler@yahoo.com | Member | |
| Jude Hermiston | Senior Brand Manager | jude_hermiston77@yahoo.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 |
|---|---|---|
Jamel Green Global Assurance Administrator jamel_green@hotmail.com | Admin | |
Lew Powlowski Regional Marketing Developer lew_powlowski54@gmail.com | Member | |
Elinor Wuckert Lead Factors Executive elinor.wuckert26@yahoo.com | Viewer | |
Diana Thompson International Integration Assistant diana.thompson87@yahoo.com | Viewer | |
Pearline Flatley Human Brand Designer pearline_flatley50@hotmail.com | Member | |
Edna Jakubowski Direct Creative Coordinator edna.jakubowski70@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Deanna Bogan-Ernser Internal Identity Liaison deanna.bogan-ernser@hotmail.com | Admin | |
Reagan Lynch District Creative Administrator reagan.lynch@gmail.com | Admin | |
Arnold Murazik-Raynor Forward Metrics Strategist arnold.murazik-raynor@hotmail.com | Viewer | |
Ivah Senger International Infrastructure Consultant ivah_senger2@gmail.com | Admin | |
Rex Runolfsson Senior Accounts Representative rex_runolfsson@yahoo.com | Admin | |
Guido Breitenberg Legacy Solutions Analyst guido.breitenberg4@gmail.com | Admin | |
Nettie Leffler Lead Paradigm Orchestrator nettie_leffler45@yahoo.com | Admin | |
Pamela Lehner Human Quality Specialist pamela.lehner38@gmail.com | Member | |
Kali Klocko Dynamic Data Strategist kali_klocko@hotmail.com | Member | |
Jabari Kilback Corporate Identity Designer jabari_kilback15@gmail.com | Admin | |
Gussie Mann Senior Operations Architect gussie.mann4@yahoo.com | Viewer | |
Clark Glover Product Paradigm Architect clark_glover@hotmail.com | Admin | |
Emmett Daugherty Internal Accountability Liaison emmett_daugherty88@hotmail.com | Admin | |
Gabriel Hagenes District Security Consultant gabriel_hagenes16@yahoo.com | Admin | |
Alejandro Stoltenberg Senior Usability Analyst alejandro_stoltenberg@gmail.com | Viewer | |
Joel Wolf District Solutions Analyst joel_wolf@yahoo.com | Member | |
Joy Monahan Global Data Consultant joy_monahan73@hotmail.com | Admin | |
Zack Schoen International Mobility Director zack_schoen97@gmail.com | Viewer | |
Felicia Mayert Investor Group Consultant felicia_mayert26@yahoo.com | Viewer | |
Hugo Kuhic International Implementation Designer hugo.kuhic@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 | |
|---|---|---|---|---|
| Johnathan Mueller | doreen.howell@hotmail.com | Hansfort | Inactive | $908.13 |
| Raquel Kunde | irma_breitenberg@gmail.com | Cathedral City | Active | $77.04 |
| Adolph Quigley | lindsey.renner47@hotmail.com | Saraboro | Inactive | $969.04 |
| Lorenz Koch | santiago_stroman@hotmail.com | Rebeccachester | Inactive | $525.23 |
| Don McLaughlin | darwin_corkery78@yahoo.com | East Hartford | Active | $935.61 |
| Total | $3,415.05 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Blanca Bauch-Johnston @marco77 | hadley88@gmail.com | Windlerland | Inactive | $772.14 |
Annabel Schmeler MD @xander_okuneva41 | steve.jerde@gmail.com | Janesville | Active | $465.37 |
Grady Weber @wanda77 | alexander.littel2@gmail.com | Phyllisborough | Active | $284.45 |
Ashley Franey @irwin57 | julianne.kulas@hotmail.com | New Clarence | Active | $698.30 |
Yvette Champlin @daisy50 | jeannette.brown80@yahoo.com | Westland | Inactive | $214.64 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Audrey Mosciski | tomasa.dare47@hotmail.com | South Cali | Inactive | $1,082.06 |
| Kara Blanda | vicki.white-raynor@gmail.com | East Fredrickside | Inactive | $61.95 |
| Prudence Gislason | sigurd.runolfsson33@hotmail.com | Pflugerville | Active | $749.84 |
| Davon O'Kon MD | gustavo.goodwin69@gmail.com | New Warrenburgh | Inactive | $402.42 |
| Katherine Yundt | alison25@gmail.com | West Rowlandmouth | Inactive | $723.51 |
| Total | $3,019.78 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Betty Ernser | myrtle.bruen@hotmail.com | South Leonardcester | Inactive | $1,043.64 |
| Terri Lynch | roy_mccullough33@yahoo.com | New Jessefort | Active | $77.65 |
| Keely Kautzer | selmer65@gmail.com | Beattyhaven | Active | $192.98 |
| Cory Wisozk | ricardo_weissnat15@gmail.com | Joshuaville | Active | $1,160.89 |
| Marianne Bruen | roger.zboncak@yahoo.com | Reingerport | Active | $194.82 |
| Total | $2,669.98 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Otis Reichel | christine.jaskolski0@gmail.com | Minnetonka | Active | $1,157.19 |
| Katherine VonRueden | orlando.kris@yahoo.com | Natashaville | Active | $664.72 |
| Dominic Satterfield | hillary15@hotmail.com | Fort Franklin | Active | $175.61 |
| Willard Zboncak | kaleb.cassin@gmail.com | Ursulaworth | Inactive | $399.49 |
| Eric Emard | reva84@yahoo.com | Port Dorcas | Inactive | $919.01 |
| Total | $3,316.02 | |||
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 | ||
|---|---|---|---|---|---|
| Ethelyn Stehr | benny3@yahoo.com | Scottstad | Active | $44.03 | |
| Ms. Reilly Ferry | isaiah.prohaska69@hotmail.com | Brettshire | Inactive | $144.43 | |
| Blake Paucek | mike_macgyver@yahoo.com | Great Falls | Active | $709.68 | |
| Jadon Kiehn-Romaguera | ana_okeefe@hotmail.com | Alekshire | Active | $569.87 | |
| Annette Kunde | minnie_prosacco@yahoo.com | New Ferminborough | Active | $116.92 | |
| Total | $1,584.93 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Grover Hayes | austyn_schowalter@yahoo.com | Gilbert | Inactive | $633.53 | |
| Jean Wiza | beatrice.marvin30@gmail.com | Kuhicstad | Active | $779.63 | |
| Calista Wyman | hannah.hessel@yahoo.com | West Nicholastown | Active | $1,112.68 | |
| Dr. Miguel Mueller | jasmine.hackett15@gmail.com | Tatyanafort | Active | $719.22 | |
| Franklin Bruen | tony.casper@yahoo.com | Hesselstead | Inactive | $812.87 | |
| Total | $4,057.93 | ||||
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 | |
|---|---|---|---|---|
| Candida Kshlerin-Schowalter | brenda31@yahoo.com | Langworthcester | Inactive | $1,110.32 |
| Rudolph Fay DVM | kelvin.yost87@gmail.com | Redding | Active | $918.11 |
| Miss Daren Bruen | emerald_runolfsson@gmail.com | Fort Loretta | Active | $452.03 |
| Cindy Stanton | dan_rath@gmail.com | Jenkinsview | Inactive | $899.10 |
| Elvira Howell | jan.dooley2@yahoo.com | Willmshaven | Inactive | $876.89 |
| Flora O'Reilly | lora_stracke@yahoo.com | North Vinniefield | Inactive | $811.15 |
| Abdul O'Kon | ginger_simonis42@yahoo.com | Jacobiborough | Active | $849.34 |
| Frederic Ferry Jr. | isac.brown34@hotmail.com | Zemlakchester | Inactive | $1,150.17 |
| Freddie Weber | june45@gmail.com | Weimanntown | Active | $816.52 |
| Miss Tammy Aufderhar | christian.nader25@yahoo.com | Coral Springs | Active | $33.41 |
| Alonzo Koelpin | jon_kuhn@gmail.com | South Israelworth | Inactive | $21.25 |
| Mellie Beer | aylin_roob76@hotmail.com | Alekshire | Active | $723.32 |
| Itzel Reynolds | makayla.huel19@gmail.com | South Janaeburgh | Active | $1,158.67 |
| Patti Stamm DDS | crawford26@hotmail.com | Laishaburgh | Active | $354.06 |
| Dakota Welch | vivienne_shanahan@yahoo.com | Velvahaven | Inactive | $150.65 |
| Total | $10,324.99 | |||
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 |