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 | $988.64 |
| INV002 | Paid | Credit Card | $316.58 |
| INV003 | Paid | PayPal | $537.66 |
| INV004 | Paid | Bank Transfer | $788.84 |
| INV005 | Paid | PayPal | $416.21 |
| INV006 | Unpaid | Credit Card | $368.39 |
| INV007 | Unpaid | Credit Card | $704.85 |
| Total | $4,121.17 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Florence Satterfield | International Group Supervisor | florence_satterfield@gmail.com | Viewer | |
| Lola Streich | Direct Quality Architect | lola.streich24@yahoo.com | Admin | |
| Garrett King-Johnson | Direct Solutions Associate | garrett.king-johnson90@gmail.com | Viewer | |
| Ellie Torphy | International Security Agent | ellie_torphy84@yahoo.com | Admin | |
| Johnson Kozey | Customer Creative Architect | johnson_kozey@gmail.com | Viewer | |
| Hanna Brekke-Funk | International Response Technician | hanna.brekke-funk6@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 |
|---|---|---|
Paula Gibson Principal Interactions Liaison paula_gibson@hotmail.com | Admin | |
Tyshawn Dietrich Principal Factors Administrator tyshawn.dietrich8@gmail.com | Viewer | |
Jacob Harris Future Interactions Producer jacob_harris70@hotmail.com | Member | |
Katelynn Ziemann National Communications Coordinator katelynn_ziemann87@hotmail.com | Admin | |
Juana Mueller Forward Functionality Officer juana_mueller@yahoo.com | Member | |
Letha Lowe Senior Marketing Developer letha.lowe@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 |
|---|---|---|
Taurean Orn Direct Research Agent taurean_orn@gmail.com | Member | |
Carroll Conn Regional Interactions Officer carroll.conn13@gmail.com | Admin | |
Brendan Lemke-Casper Corporate Metrics Executive brendan_lemke-casper@hotmail.com | Admin | |
Julia Graham Product Group Designer julia.graham@gmail.com | Member | |
Jeremy Wolff Future Marketing Administrator jeremy.wolff@hotmail.com | Member | |
Zakary Spencer Regional Web Designer zakary_spencer@gmail.com | Viewer | |
Katherine Goyette Future Mobility Designer katherine_goyette24@hotmail.com | Viewer | |
Elisa Treutel Corporate Accounts Coordinator elisa_treutel27@hotmail.com | Viewer | |
Luther Schimmel Senior Group Assistant luther_schimmel@yahoo.com | Member | |
Asia Auer International Functionality Technician asia_auer93@yahoo.com | Member | |
Rudolph Predovic National Assurance Manager rudolph.predovic41@yahoo.com | Member | |
Willa Corkery Dynamic Response Consultant willa_corkery@yahoo.com | Admin | |
Chloe Stracke Legacy Integration Designer chloe_stracke74@gmail.com | Viewer | |
Colin Considine Senior Functionality Producer colin.considine7@hotmail.com | Member | |
Hannah D'Amore Chief Assurance Analyst hannah.damore@gmail.com | Admin | |
Dorcas O'Conner District Factors Director dorcas.oconner82@hotmail.com | Admin | |
Larry Leffler Chief Program Director larry.leffler20@gmail.com | Viewer | |
Eliseo Terry District Accountability Liaison eliseo_terry@gmail.com | Viewer | |
Garry Jaskolski Legacy Usability Manager garry_jaskolski16@yahoo.com | Member | |
Josefa Effertz-Rohan Central Markets Associate josefa.effertz-rohan21@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 | |
|---|---|---|---|---|
| Walton Osinski | destany.russel35@hotmail.com | North Rufusstad | Inactive | $214.21 |
| Mr. Nathan Kemmer | hailee_schoen65@hotmail.com | Tamaraland | Active | $1,083.77 |
| Todd Hamill | josefa41@yahoo.com | West Stephenville | Inactive | $636.39 |
| Spencer Dietrich | carlos.champlin42@gmail.com | Juniorfield | Inactive | $848.00 |
| Jorge Rogahn | marisol.waelchi@gmail.com | Marcborough | Inactive | $702.09 |
| Total | $3,484.46 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Merritt Orn @libbie79 | orville.kuhlman@gmail.com | Augustton | Inactive | $458.24 |
Catherine Cassin @milton_schmeler60 | marie_damore35@hotmail.com | East Gregory | Active | $1,006.38 |
Eloise Ullrich @susie_hickle18 | annie_farrell99@yahoo.com | New Dominique | Inactive | $831.03 |
Derrick Beier-Ryan MD @damion64 | daryl_dietrich30@yahoo.com | Austinstead | Active | $859.15 |
Patsy Ferry @sigmund21 | annamarie_schaden@gmail.com | South Rita | Active | $683.60 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tom Klocko V | felix96@yahoo.com | Port Brodyburgh | Active | $87.91 |
| Mona Hane | daniel.beatty@hotmail.com | New Ellisberg | Inactive | $378.30 |
| Cecelia Nienow | loretta.zboncak-franecki@yahoo.com | Keeblerside | Active | $1,054.12 |
| Malachi Daniel DDS | cydney88@yahoo.com | Waelchi-Kautzermouth | Active | $594.17 |
| Devon Jast | hershel97@yahoo.com | West Kathryn | Active | $132.94 |
| Total | $2,247.44 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lynette VonRueden | dexter_hoeger21@hotmail.com | North Camron | Active | $810.73 |
| Benny Cremin | adell55@gmail.com | Hegmannside | Inactive | $648.11 |
| Letha Windler | flavio.prohaska49@yahoo.com | Hauckmouth | Active | $1,177.82 |
| Roxanne O'Connell | kelli_kertzmann@gmail.com | Erdmancester | Inactive | $588.45 |
| Charlotte Olson | juana0@yahoo.com | Gradyland | Active | $378.18 |
| Total | $3,603.29 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Shayna Reichert DVM | irene.terry87@yahoo.com | New Katie | Inactive | $1,188.34 |
| Lionel Koch | hailee.beier11@yahoo.com | Port Elmer | Active | $884.72 |
| Margarete Dooley | corey_schulist@yahoo.com | New Kristinastead | Active | $631.46 |
| Bertha Metz | morris51@gmail.com | Schusterborough | Active | $738.60 |
| Dr. Jeremy Zulauf-Waters | juston.mosciski@gmail.com | Collierberg | Inactive | $111.02 |
| Total | $3,554.14 | |||
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 | ||
|---|---|---|---|---|---|
| Moriah Barton | mario.trantow30@gmail.com | Lake Doris | Active | $1,054.11 | |
| Ms. May Pouros | alma18@gmail.com | Lake Norbertborough | Inactive | $73.21 | |
| Roland Heaney | tiffany69@yahoo.com | Port Iva | Active | $920.88 | |
| Patrick Beahan | mack71@gmail.com | Haleighland | Active | $1,071.97 | |
| Dr. Maria McGlynn | muriel.mccullough67@gmail.com | Dickinsoncester | Inactive | $729.20 | |
| Total | $3,849.37 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Felicia Zieme | jerome84@yahoo.com | Brakusshire | Inactive | $507.84 | |
| Ryder Hammes III | jayden59@hotmail.com | Fionafield | Active | $418.73 | |
| Letitia Lesch | princess57@gmail.com | Lake Stuartfort | Inactive | $366.44 | |
| Mr. Preston Wolf | domenic99@gmail.com | East Maryannville | Active | $762.83 | |
| Michelle Hudson | dandre.kuhic34@yahoo.com | Beatricestad | Inactive | $651.12 | |
| Total | $2,706.96 | ||||
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 | |
|---|---|---|---|---|
| Sylvester Keebler | jaquan_cartwright-murazik78@hotmail.com | New Verona | Inactive | $46.31 |
| Luke Feest-Yost | joesph_kozey@yahoo.com | Guaynabo | Inactive | $331.00 |
| Mose Bode | nina.cartwright@hotmail.com | Saulview | Active | $600.46 |
| Austin Metz | tabitha_wehner-littel@yahoo.com | New Tyrellcester | Active | $928.58 |
| Broderick Conn | bill87@gmail.com | East Kristinafield | Inactive | $946.17 |
| Mrs. Lyda Prosacco | beverly_hintz13@hotmail.com | South Jordan | Inactive | $63.78 |
| Terence Schuppe PhD | martha_reichel15@gmail.com | Russelfield | Active | $371.75 |
| Margarita Hane | amelia_schaefer@hotmail.com | Schulistside | Inactive | $1,001.57 |
| Stella Cassin | vickie27@yahoo.com | Fort Mafaldastead | Inactive | $631.52 |
| Harold Buckridge | martin.waelchi0@hotmail.com | Manuelamouth | Active | $309.89 |
| Jacquelyn Kuhn | camille46@hotmail.com | Zemlakview | Inactive | $1,030.22 |
| Silvia Boehm | brett38@yahoo.com | Blakestead | Inactive | $100.82 |
| Charlene Murray | joseph.will@yahoo.com | Cyrustown | Inactive | $1,085.02 |
| Xander Wilkinson | thelma.purdy54@gmail.com | Daniellecester | Active | $307.89 |
| Marcus Marquardt | braxton.mitchell@hotmail.com | Rosiefield | Inactive | $156.73 |
| Total | $7,911.71 | |||
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 |