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 | Credit Card | $886.01 |
| INV002 | Paid | Credit Card | $658.90 |
| INV003 | Unpaid | Bank Transfer | $423.70 |
| INV004 | Paid | PayPal | $627.02 |
| INV005 | Paid | Credit Card | $969.54 |
| INV006 | Pending | PayPal | $688.82 |
| INV007 | Pending | PayPal | $871.41 |
| Total | $5,125.40 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Penelope Reynolds | Dynamic Accountability Liaison | penelope.reynolds30@yahoo.com | Viewer | |
| Johnnie Kling | Internal Creative Manager | johnnie.kling41@gmail.com | Member | |
| Kaleb Schmidt | Direct Markets Orchestrator | kaleb_schmidt86@gmail.com | Member | |
| Alysa Rippin | Corporate Assurance Designer | alysa_rippin25@hotmail.com | Admin | |
| Olga Stroman | Regional Creative Officer | olga_stroman@hotmail.com | Member | |
| Franco Stanton | Central Communications Director | franco_stanton47@yahoo.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 |
|---|---|---|
Alexandro Zieme Forward Branding Strategist alexandro.zieme46@hotmail.com | Admin | |
Shemar Deckow Product Directives Planner shemar_deckow@hotmail.com | Admin | |
Cornelius O'Reilly Regional Accountability Supervisor cornelius.oreilly85@yahoo.com | Admin | |
Jerrold Collier Central Implementation Planner jerrold.collier39@yahoo.com | Admin | |
Susie Treutel International Usability Executive susie_treutel86@yahoo.com | Member | |
Camila Treutel Product Response Manager camila.treutel@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 |
|---|---|---|
Maynard McCullough Product Security Specialist maynard.mccullough11@hotmail.com | Viewer | |
Mckayla Wunsch International Web Architect mckayla_wunsch1@yahoo.com | Member | |
Cecilia Paucek International Group Analyst cecilia.paucek61@hotmail.com | Member | |
Darian Volkman-Yundt Product Solutions Assistant darian.volkman-yundt@yahoo.com | Viewer | |
Carson Volkman Lead Infrastructure Engineer carson.volkman11@yahoo.com | Admin | |
Johann Crona Senior Optimization Director johann.crona@hotmail.com | Viewer | |
Solon Bednar Principal Interactions Facilitator solon_bednar@hotmail.com | Admin | |
Dangelo Mills Global Marketing Associate dangelo_mills4@hotmail.com | Viewer | |
Clement Fahey Human Division Strategist clement.fahey64@yahoo.com | Member | |
Caroline Maggio Investor Quality Technician caroline_maggio95@hotmail.com | Viewer | |
Abel Hamill Dynamic Tactics Consultant abel.hamill28@hotmail.com | Admin | |
Jamey Kub Principal Security Assistant jamey_kub@yahoo.com | Admin | |
Casandra O'Reilly Legacy Applications Developer casandra_oreilly@hotmail.com | Viewer | |
Florian Windler Future Identity Coordinator florian_windler84@gmail.com | Member | |
Robb Bruen Direct Integration Planner robb.bruen@gmail.com | Member | |
Daniella Braun Legacy Accounts Architect daniella_braun1@yahoo.com | Member | |
Richard Greenfelder Product Web Developer richard.greenfelder85@yahoo.com | Admin | |
Enrique Bauch Customer Branding Assistant enrique.bauch98@yahoo.com | Member | |
Theo Weber Corporate Intranet Analyst theo_weber92@gmail.com | Admin | |
Rickie Quigley-Purdy Regional Identity Consultant rickie.quigley-purdy59@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 | |
|---|---|---|---|---|
| Roberta O'Conner | oran_king81@hotmail.com | Feilfield | Inactive | $385.68 |
| Edd Senger | desmond_boehm@yahoo.com | Emileside | Inactive | $8.94 |
| Hayley Greenfelder | adaline.conroy-ledner@gmail.com | Ankundingfort | Active | $42.35 |
| Evans Metz | clemmie.okeefe@gmail.com | O'Connerstead | Inactive | $888.15 |
| Jake McLaughlin | mavis50@yahoo.com | West Joanview | Active | $844.19 |
| Total | $2,169.31 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kade Nader @reyes19 | nancy.fahey92@gmail.com | West Myriam | Active | $365.87 |
Brant Shields II @carley82 | emmett16@hotmail.com | Margaretview | Active | $338.55 |
Jan Walter @freddie47 | maria52@gmail.com | Alisoncester | Active | $809.84 |
Shawna Gutkowski II @marcella73 | golda.luettgen@gmail.com | Nestorfort | Active | $976.16 |
Gennaro Beier @birdie89 | garth.hansen77@yahoo.com | Lake Vivaborough | Active | $1,011.49 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gilda Daugherty III | brennan_trantow@yahoo.com | Palm Springs | Active | $573.98 |
| Mr. William Leannon | quinton_kuhlman74@hotmail.com | East Scottycester | Inactive | $434.60 |
| Tricia Dooley | dayne_rowe-heidenreich@yahoo.com | North Pearlie | Active | $461.09 |
| Trent Feeney | jacqueline69@yahoo.com | Koeppfort | Inactive | $562.06 |
| Sue Casper IV | hassie_wisoky52@yahoo.com | Columbia | Active | $24.19 |
| Total | $2,055.92 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Kennedi Yost | amya_brekke@hotmail.com | Port Julestown | Inactive | $330.97 |
| Denise Hudson | bill2@gmail.com | Stokesview | Inactive | $891.59 |
| Tara Prosacco | sam.block@hotmail.com | North Jacky | Inactive | $653.66 |
| Adell Hermiston Sr. | domenica.bernier44@hotmail.com | North Jayton | Active | $410.00 |
| Bessie Simonis | arnulfo97@yahoo.com | Zoilatown | Active | $814.62 |
| Total | $3,100.84 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Furman Ernser | lea.olson@yahoo.com | Sueview | Inactive | $989.63 |
| Maxie Buckridge | jacky61@yahoo.com | Jefferson City | Inactive | $1,027.98 |
| Vicente Mayer | garfield37@yahoo.com | Trentville | Inactive | $1,083.27 |
| Rosie Zulauf | deja77@yahoo.com | West Abdullahville | Active | $689.58 |
| Vida Welch | lane_welch@yahoo.com | East Isai | Active | $197.85 |
| Total | $3,988.31 | |||
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. Nils Steuber Jr. | alexis.oberbrunner-west19@hotmail.com | Caguas | Active | $79.64 | |
| Adalberto Haag | myrl.king36@yahoo.com | Wilfridstead | Inactive | $130.83 | |
| Arvid Collins MD | dejon85@yahoo.com | Lake Asa | Inactive | $82.09 | |
| Lucio Watsica | oma78@yahoo.com | Victorville | Inactive | $710.39 | |
| Deontae McLaughlin | flavio_windler6@yahoo.com | Allenburgh | Inactive | $1,124.23 | |
| Total | $2,127.18 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Christa Jaskolski | margot_kerluke8@yahoo.com | Newport News | Inactive | $1,189.08 | |
| Aniya Gleason | estel_heidenreich64@gmail.com | South Audrey | Inactive | $1,116.64 | |
| Ms. Joyce Welch | german_kling@gmail.com | Palm Desert | Inactive | $568.47 | |
| Evert Emard | deangelo.veum55@yahoo.com | North Freeman | Active | $26.68 | |
| Ernesto Rohan | dagmar_gusikowski70@yahoo.com | North Wade | Active | $809.55 | |
| Total | $3,710.42 | ||||
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 | |
|---|---|---|---|---|
| Raymundo Abbott | adonis.bergnaum@gmail.com | North Dessie | Inactive | $8.65 |
| Jacquelyn Hessel Sr. | ricardo_stoltenberg@hotmail.com | Andreastad | Inactive | $702.49 |
| Murphy Terry | winfield_hudson58@gmail.com | Tiaberg | Inactive | $646.37 |
| Dr. Natasha McLaughlin | fay.bahringer67@yahoo.com | New Winifredcester | Inactive | $125.19 |
| Eldridge Howe Jr. | emil_heidenreich6@hotmail.com | Malcolmview | Active | $1,064.27 |
| Rahsaan Pfeffer | constance27@yahoo.com | McLean | Inactive | $726.50 |
| Freeda Braun | taurean58@gmail.com | New Magali | Inactive | $401.55 |
| Mortimer Kreiger | vernice.reichel88@gmail.com | Colliermouth | Active | $1,012.34 |
| Orpha Denesik | tyson.hamill62@yahoo.com | Krystelfort | Active | $164.33 |
| Abdullah Price | howard_watsica96@yahoo.com | Gainesville | Active | $1,052.90 |
| Vera Rath | iliana66@gmail.com | Pacochaland | Active | $1,078.46 |
| Mrs. Amy Casper | fiona.hettinger@gmail.com | O'Keefebury | Active | $798.68 |
| Brody Murphy | aiden_turner18@hotmail.com | West Jules | Inactive | $1,152.17 |
| Kellen Terry | marcellus.gerlach40@hotmail.com | Port Karianne | Inactive | $952.83 |
| Ezekiel Moore | sanford.orn18@yahoo.com | North Ladarius | Active | $19.37 |
| Total | $9,906.10 | |||
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 |