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 | $569.27 |
| INV002 | Paid | PayPal | $728.08 |
| INV003 | Unpaid | Bank Transfer | $592.40 |
| INV004 | Paid | PayPal | $560.43 |
| INV005 | Pending | Bank Transfer | $762.17 |
| INV006 | Paid | Credit Card | $625.79 |
| INV007 | Paid | Credit Card | $173.97 |
| Total | $4,012.11 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Stephany Ward | Forward Tactics Architect | stephany_ward16@yahoo.com | Viewer | |
| Jayme Collins | Investor Usability Specialist | jayme_collins30@gmail.com | Member | |
| Lelah Mraz | Corporate Security Agent | lelah_mraz60@hotmail.com | Viewer | |
| Bette Pacocha | Corporate Program Representative | bette.pacocha69@gmail.com | Admin | |
| Marley Johnston | Central Identity Facilitator | marley.johnston90@hotmail.com | Admin | |
| Rex Reynolds | Forward Factors Designer | rex.reynolds@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 |
|---|---|---|
Robyn Cole Senior Configuration Facilitator robyn.cole@yahoo.com | Member | |
Pierre Lueilwitz Direct Program Coordinator pierre_lueilwitz@yahoo.com | Admin | |
Jean Jakubowski Customer Communications Specialist jean_jakubowski@yahoo.com | Viewer | |
Virginia Kilback Human Integration Coordinator virginia.kilback15@gmail.com | Viewer | |
Meda Grant Human Markets Producer meda_grant@yahoo.com | Admin | |
Vicenta Kulas District Solutions Planner vicenta.kulas@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 |
|---|---|---|
Armani Kassulke-Skiles District Branding Officer armani_kassulke-skiles@yahoo.com | Admin | |
Jordyn Tremblay Global Program Specialist jordyn_tremblay@gmail.com | Admin | |
Jarrod Hilpert Human Infrastructure Consultant jarrod.hilpert20@gmail.com | Viewer | |
Jeff Murazik Future Directives Coordinator jeff.murazik51@yahoo.com | Viewer | |
Gregory Kris Dynamic Branding Supervisor gregory_kris@yahoo.com | Admin | |
Neha Davis Internal Integration Executive neha_davis@hotmail.com | Admin | |
Dereck Borer Global Security Manager dereck_borer20@hotmail.com | Member | |
Tavares Herzog Global Intranet Executive tavares_herzog51@gmail.com | Member | |
Devonte Greenholt District Solutions Specialist devonte.greenholt69@yahoo.com | Viewer | |
Dariana Yost Global Optimization Assistant dariana.yost52@yahoo.com | Viewer | |
Meagan Williamson District Markets Specialist meagan_williamson@hotmail.com | Member | |
Rudolph Lowe International Mobility Assistant rudolph_lowe54@hotmail.com | Admin | |
Cleta Pollich Corporate Configuration Facilitator cleta_pollich51@gmail.com | Member | |
Lina Schaefer Legacy Response Agent lina.schaefer53@gmail.com | Member | |
Alysa Schumm Direct Branding Coordinator alysa.schumm@gmail.com | Member | |
Kamren Rohan Principal Mobility Executive kamren_rohan3@gmail.com | Viewer | |
Adolfo Wintheiser-Adams Customer Division Assistant adolfo_wintheiser-adams@gmail.com | Viewer | |
Emmy Bashirian Central Program Manager emmy_bashirian69@hotmail.com | Member | |
Connie Lebsack Direct Applications Producer connie_lebsack59@yahoo.com | Viewer | |
Ashleigh Fahey Corporate Marketing Coordinator ashleigh.fahey86@gmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Forrest Schultz V | orion_abernathy@yahoo.com | Lake Charles | Inactive | $473.29 |
| Bernadette Wehner PhD | patricia.franey@hotmail.com | West Ned | Active | $861.60 |
| Benny Satterfield | georgiana27@hotmail.com | South Maria | Inactive | $794.84 |
| Elsie Luettgen | nyah.olson88@hotmail.com | Lake Arch | Active | $418.01 |
| Bessie Kautzer | rhiannon40@gmail.com | Sporerport | Inactive | $557.23 |
| Total | $3,104.97 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Monica MacGyver @harry46 | jett_huel@yahoo.com | Hamilton | Inactive | $857.61 |
Jodi Trantow-Harris @treva_sanford15 | malika8@hotmail.com | West Lafayette | Active | $89.78 |
Omar Marquardt @mikayla.spinka12 | brigitte_bailey@gmail.com | West Hassan | Active | $1,130.87 |
Debbie Robel MD @suzanne58 | adelbert.ritchie48@gmail.com | Moniqueview | Inactive | $222.98 |
Marcus Stracke @elinore_larkin | ashley_hoeger54@hotmail.com | Port Trystanstad | Active | $69.97 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Ginger O'Reilly | willow.romaguera@gmail.com | Vancouver | Inactive | $68.94 |
| Beth Hyatt | fannie.bartell@yahoo.com | New Paxton | Inactive | $256.43 |
| Maryann Cartwright I | audie_kassulke81@gmail.com | Fresno | Active | $1,179.86 |
| Frances Dach | jamil.schoen66@gmail.com | Altenwerthton | Active | $635.96 |
| Mr. Chad Spencer | jayson63@hotmail.com | South Thadchester | Active | $143.51 |
| Total | $2,284.70 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Ruby Pagac | justice.hagenes66@gmail.com | St. Charles | Active | $580.72 |
| Seth Hansen | jamir.streich75@gmail.com | West Angelo | Inactive | $376.95 |
| Todd Schuster | juvenal_wiegand17@hotmail.com | Mesa | Inactive | $459.88 |
| Andres Bergstrom | wilfrid35@gmail.com | Murrayborough | Active | $227.62 |
| Jeanette Murray | elvie.schaden@hotmail.com | Bernierbury | Active | $1,176.85 |
| Total | $2,822.02 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brendan Waters-Powlowski | tania.braun@gmail.com | Trishaland | Active | $1,088.88 |
| Miss Sabrina Dietrich | earnest.wiegand@gmail.com | Fort Lennaworth | Active | $905.57 |
| Miss Nicole Nader | carlie_johns8@hotmail.com | Treutelberg | Inactive | $822.55 |
| Melba Sipes | abraham.mante@gmail.com | South Karsonport | Inactive | $127.58 |
| Felipe Quitzon | ferne25@yahoo.com | Savannah | Inactive | $963.28 |
| Total | $3,907.86 | |||
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 | ||
|---|---|---|---|---|---|
| Wm Smith | alexandro.anderson81@yahoo.com | Ziemannstad | Inactive | $72.22 | |
| Dwight Hyatt | eli.mertz@yahoo.com | New Jerrod | Active | $449.80 | |
| Cristina Pagac | donato.stoltenberg13@yahoo.com | Decatur | Active | $1,005.68 | |
| Hattie Kirlin | felipe.armstrong@gmail.com | MacGyvertown | Inactive | $726.66 | |
| Abraham Wiegand | madge15@yahoo.com | Allyburgh | Active | $1,073.08 | |
| Total | $3,327.44 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Sylvia Hand-McGlynn | joel_kautzer55@hotmail.com | Taylorsville | Inactive | $341.67 | |
| Margaret Shields | jordane28@hotmail.com | Lake Courtney | Active | $1,009.80 | |
| Austin Becker | isabel.thompson64@gmail.com | East Noe | Active | $387.52 | |
| Faye Rowe | ludwig_kiehn@gmail.com | Emeraldside | Inactive | $1,082.30 | |
| Eddie Williamson | daisy16@hotmail.com | Franeyshire | Inactive | $475.66 | |
| Total | $3,296.95 | ||||
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 | |
|---|---|---|---|---|
| Dewey Denesik | markus_mcglynn70@hotmail.com | Grapevine | Inactive | $542.29 |
| Dennis Hermiston | bud.jacobson@yahoo.com | East Price | Active | $898.10 |
| Juan Gleichner | heidi.klein@gmail.com | Henderson | Inactive | $133.23 |
| Alma Little | sheldon_dickinson@gmail.com | Nikolaushaven | Inactive | $721.27 |
| Jody Kovacek-Monahan | jennyfer_heathcote21@yahoo.com | Watsonville | Active | $679.39 |
| Miss Laura Homenick | devan_abshire@gmail.com | Jodyhaven | Active | $600.15 |
| Mamie Jakubowski | ariane_wyman@gmail.com | East Beverly | Inactive | $213.11 |
| Gene Schaefer MD | lenora_greenfelder@hotmail.com | Palm Beach Gardens | Active | $172.90 |
| Mr. Sidney Wisozk | ada_weber@gmail.com | South Annalise | Active | $1,042.11 |
| Russell O'Keefe | june.morissette21@yahoo.com | West Caraview | Active | $1,010.05 |
| Mr. Nathaniel Ondricka | nyah_dickens11@hotmail.com | Margate | Inactive | $215.04 |
| Roy MacGyver | cecilia.armstrong@hotmail.com | Turnertown | Active | $196.62 |
| Constance Wiegand-Kris | victoria.swift@yahoo.com | Albinafield | Active | $899.79 |
| Janie Williamson | art46@hotmail.com | Jacobiburgh | Inactive | $9.46 |
| Frank Schumm | columbus.boehm@gmail.com | Adeliaboro | Active | $874.70 |
| Total | $8,208.21 | |||
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 |