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 | Bank Transfer | $147.63 |
| INV002 | Pending | Credit Card | $124.33 |
| INV003 | Pending | Bank Transfer | $909.75 |
| INV004 | Unpaid | Bank Transfer | $984.91 |
| INV005 | Unpaid | PayPal | $743.26 |
| INV006 | Pending | PayPal | $589.86 |
| INV007 | Unpaid | PayPal | $515.79 |
| Total | $4,015.53 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Celestino Okuneva-Steuber | Central Configuration Administrator | celestino.okuneva-steuber21@yahoo.com | Member | |
| Adelbert Stanton | Future Web Supervisor | adelbert_stanton@hotmail.com | Member | |
| Michelle Windler | Product Response Architect | michelle_windler96@yahoo.com | Member | |
| Charles Bernier | Product Interactions Assistant | charles_bernier@yahoo.com | Member | |
| Cathryn Ondricka | Global Markets Facilitator | cathryn.ondricka59@yahoo.com | Member | |
| Helena McKenzie | Internal Division Architect | helena_mckenzie@gmail.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 |
|---|---|---|
Tiara Nienow Dynamic Group Orchestrator tiara_nienow@yahoo.com | Member | |
Reyna Kulas Chief Group Strategist reyna.kulas62@yahoo.com | Admin | |
Orville Mueller Human Integration Analyst orville.mueller@yahoo.com | Admin | |
Jaylin Strosin Future Interactions Designer jaylin.strosin@gmail.com | Member | |
Fae MacGyver Principal Infrastructure Facilitator fae.macgyver@yahoo.com | Member | |
Tyler Gusikowski Legacy Creative Specialist tyler.gusikowski20@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kitty Langosh Corporate Optimization Architect kitty_langosh96@yahoo.com | Admin | |
Ephraim Pfannerstill Legacy Configuration Analyst ephraim_pfannerstill27@gmail.com | Admin | |
Kale Reichel Lead Security Facilitator kale.reichel@hotmail.com | Viewer | |
Abby Botsford Human Implementation Architect abby.botsford59@yahoo.com | Member | |
Christa Bechtelar Forward Integration Producer christa.bechtelar35@gmail.com | Member | |
Charley Torp International Solutions Designer charley.torp@hotmail.com | Admin | |
Darrel Kshlerin Global Tactics Analyst darrel_kshlerin@hotmail.com | Member | |
Camilla Zulauf Lead Quality Director camilla_zulauf23@gmail.com | Viewer | |
Buck Flatley Global Directives Manager buck.flatley84@yahoo.com | Viewer | |
Jacquelyn Hayes Principal Tactics Administrator jacquelyn_hayes49@hotmail.com | Viewer | |
Erwin Mueller Forward Data Administrator erwin_mueller44@yahoo.com | Member | |
Elisha Gerhold Lead Program Technician elisha.gerhold17@hotmail.com | Admin | |
Alaina Crist District Operations Associate alaina_crist97@gmail.com | Viewer | |
Mylene Rippin Customer Directives Director mylene_rippin32@gmail.com | Admin | |
Dedric Treutel Global Program Facilitator dedric_treutel8@gmail.com | Admin | |
Pat Durgan Dynamic Usability Liaison pat_durgan@gmail.com | Admin | |
Gwen Walter Regional Branding Analyst gwen.walter32@gmail.com | Viewer | |
Marlon Mueller Forward Brand Liaison marlon.mueller@yahoo.com | Viewer | |
Myles Beer Global Implementation Engineer myles.beer@gmail.com | Admin | |
Felipa Reinger Legacy Brand Associate felipa_reinger@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 | |
|---|---|---|---|---|
| Edward Zulauf | tod.bode@gmail.com | Hansenworth | Active | $440.27 |
| Amanda Morissette-Olson | meghan_veum@gmail.com | Port Novellabury | Inactive | $1,159.45 |
| Ms. Christina Hoppe | rosa93@hotmail.com | South Elsaberg | Inactive | $217.26 |
| Elmer McDermott III | triston_hartmann@yahoo.com | Brycentown | Inactive | $106.42 |
| Debra Dare | candice58@gmail.com | Elodyview | Active | $789.21 |
| Total | $2,712.61 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dwight Prohaska @moses_kertzmann | darion.kuphal@gmail.com | Oraborough | Active | $33.56 |
Billy Veum @orval25 | donald.metz99@yahoo.com | Odellville | Inactive | $1,077.52 |
Mrs. Renee Greenfelder @ofelia76 | eleonore_osinski@hotmail.com | New Andresfurt | Active | $360.18 |
May Kutch PhD @anderson.pouros57 | joy_kassulke@yahoo.com | Staceytown | Active | $609.21 |
Georgia Kuhic @ross_bartell74 | thelma_hegmann23@yahoo.com | Josefinabury | Active | $1,033.03 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Rachel Heller | ernestina_mraz27@hotmail.com | Folsom | Inactive | $530.94 |
| Mr. Philip Cummerata | billie.satterfield@yahoo.com | Buddybury | Active | $1,121.54 |
| Mr. Alfonso Lowe | morgan.schulist@gmail.com | Katrinaworth | Active | $129.71 |
| Dean Harris | vaughn_ryan@hotmail.com | Eloyside | Active | $227.73 |
| Patty Walsh | christina_douglas-kris94@yahoo.com | Lake Jerrod | Inactive | $501.77 |
| Total | $2,511.69 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marta Schuster | stuart_mueller@hotmail.com | Madisynfield | Active | $35.26 |
| Travis Rodriguez | blair.brekke@yahoo.com | Jordanfurt | Inactive | $37.57 |
| Leona Schultz | mia31@hotmail.com | Allieton | Inactive | $978.28 |
| Wendy Metz | hunter_walter-dickinson82@hotmail.com | South Carloshaven | Active | $969.12 |
| Julio Grady | armani71@gmail.com | Glennaboro | Active | $660.29 |
| Total | $2,680.52 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Forrest Hirthe | obie20@hotmail.com | Danbury | Inactive | $741.35 |
| Whitney Grant | murphy39@gmail.com | Taylor | Inactive | $45.50 |
| Derek Rempel | ollie60@yahoo.com | West Camron | Active | $1,081.16 |
| Ian Balistreri DDS | franco_spinka51@yahoo.com | Shoreline | Inactive | $654.01 |
| Leroy Klein | kyle.champlin11@gmail.com | Billings | Active | $1,039.92 |
| Total | $3,561.94 | |||
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 | ||
|---|---|---|---|---|---|
| Ms. Elvira Dickens V | berniece63@yahoo.com | O'Keefeton | Active | $443.75 | |
| Percy Sauer | bobby_mckenzie85@gmail.com | South Bulah | Active | $846.40 | |
| Anita Wiegand | noble29@hotmail.com | Watsicafurt | Active | $497.67 | |
| Candice Fadel | gabriel_buckridge91@hotmail.com | Lake Mya | Inactive | $989.70 | |
| Craig Blick-Little Jr. | finn.bechtelar@hotmail.com | Port Victor | Inactive | $836.65 | |
| Total | $3,614.17 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dewey Moore | jennifer.altenwerth@hotmail.com | Kalamazoo | Inactive | $805.68 | |
| Kate Kris | fae.goldner@yahoo.com | Walterstead | Active | $421.14 | |
| Mr. Woodrow Gleichner | nico.casper53@gmail.com | Hickleworth | Inactive | $912.49 | |
| Calvin Greenholt | rowena.homenick71@yahoo.com | Tacoma | Inactive | $1,154.43 | |
| Dr. Camille Predovic | adrain30@yahoo.com | South Stephanview | Active | $683.18 | |
| Total | $3,976.92 | ||||
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 | |
|---|---|---|---|---|
| Carla Kunze | frankie.reichel@gmail.com | Rethafurt | Active | $524.32 |
| Randall Bernhard | tyrel.stamm@hotmail.com | Sheilastead | Active | $717.60 |
| Bessie Wisoky | bobbie68@yahoo.com | Langfield | Inactive | $324.71 |
| Levi Goldner | santiago.fritsch@gmail.com | Wichita | Active | $291.03 |
| Roberta Abshire DVM | emma.cummerata@yahoo.com | Wymanton | Inactive | $164.74 |
| Lorraine Friesen | abigayle_braun73@hotmail.com | Marshallport | Inactive | $196.38 |
| Catherine Schmitt-Goldner | gail41@gmail.com | Port Dell | Active | $1,087.70 |
| Amy Wilkinson | kristopher70@yahoo.com | Santa Rosa | Active | $908.23 |
| Kelvin Hettinger | lenora18@gmail.com | Pollichfield | Inactive | $360.01 |
| Neal Keebler | kian_turcotte60@hotmail.com | Ignacioton | Inactive | $1,102.67 |
| Beth Bartell | ariane24@yahoo.com | Artburgh | Active | $539.31 |
| Karen Gusikowski | sean.sporer81@gmail.com | Fritschport | Inactive | $1,114.09 |
| Derek Leannon | lorenzo86@hotmail.com | Cesarside | Inactive | $128.00 |
| Milton Langworth Jr. | ramiro80@hotmail.com | West Idaview | Inactive | $654.03 |
| Van Bogan | dion_rau61@hotmail.com | Durwardfort | Inactive | $838.30 |
| Total | $8,951.12 | |||
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 |