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 | Unpaid | Bank Transfer | $482.83 |
| INV002 | Unpaid | Credit Card | $803.13 |
| INV003 | Unpaid | Credit Card | $836.72 |
| INV004 | Pending | Credit Card | $232.09 |
| INV005 | Unpaid | Credit Card | $672.33 |
| INV006 | Pending | Credit Card | $616.17 |
| INV007 | Paid | PayPal | $797.90 |
| Total | $4,441.17 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Rosina Balistreri | Future Quality Representative | rosina_balistreri48@yahoo.com | Admin | |
| Terry Little | Central Directives Architect | terry.little@gmail.com | Admin | |
| Ethel Hyatt | International Group Consultant | ethel.hyatt93@gmail.com | Viewer | |
| Carmen Batz | Central Division Designer | carmen.batz83@hotmail.com | Admin | |
| Doug Schowalter | Legacy Paradigm Analyst | doug_schowalter64@hotmail.com | Admin | |
| Earnest Wunsch | Principal Optimization Manager | earnest_wunsch@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 |
|---|---|---|
Bill West Forward Identity Director bill.west0@hotmail.com | Admin | |
Cody Muller Senior Implementation Representative cody_muller50@gmail.com | Viewer | |
Shany Koepp Future Metrics Manager shany.koepp87@hotmail.com | Member | |
Alejandro Goldner Forward Paradigm Executive alejandro.goldner@hotmail.com | Member | |
Kelly Mayert Chief Assurance Technician kelly.mayert@hotmail.com | Admin | |
Jeremiah Weissnat Chief Optimization Orchestrator jeremiah_weissnat7@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 |
|---|---|---|
Winston Bogisich Regional Solutions Liaison winston_bogisich37@yahoo.com | Viewer | |
Roberto Tremblay Corporate Web Manager roberto_tremblay78@hotmail.com | Viewer | |
Robyn Johnson Human Paradigm Liaison robyn_johnson74@hotmail.com | Admin | |
Pat Brown Customer Tactics Coordinator pat_brown91@hotmail.com | Member | |
Latoya Carter Customer Tactics Agent latoya_carter@gmail.com | Admin | |
Burley Orn Principal Integration Assistant burley.orn@yahoo.com | Admin | |
Elizabeth Kihn-Spinka Senior Interactions Manager elizabeth.kihn-spinka@hotmail.com | Viewer | |
Ruby Koepp Product Usability Analyst ruby.koepp@yahoo.com | Member | |
Jan Runolfsson Future Division Designer jan_runolfsson@yahoo.com | Viewer | |
Harry Swift District Intranet Engineer harry_swift42@hotmail.com | Admin | |
Jimmie Lockman International Interactions Planner jimmie_lockman37@gmail.com | Member | |
Carolyn Grimes National Mobility Architect carolyn_grimes@hotmail.com | Viewer | |
Berta Green Forward Interactions Producer berta.green@yahoo.com | Member | |
Herbert Marquardt Central Interactions Technician herbert.marquardt@gmail.com | Member | |
Fannie Pfeffer-Lang International Mobility Specialist fannie.pfeffer-lang@hotmail.com | Viewer | |
Miriam Howell Legacy Branding Planner miriam.howell@hotmail.com | Member | |
Luis Kertzmann Investor Integration Technician luis_kertzmann89@hotmail.com | Viewer | |
Leslie Christiansen Corporate Paradigm Representative leslie_christiansen@yahoo.com | Admin | |
Mariah Botsford Future Identity Analyst mariah.botsford@yahoo.com | Viewer | |
Wilson Lueilwitz-Olson Direct Identity Officer wilson_lueilwitz-olson73@yahoo.com | Member |
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 | |
|---|---|---|---|---|
| Amber Bednar | stephanie_wolf10@hotmail.com | Loraborough | Active | $649.65 |
| Torrance Borer MD | lila_hickle@hotmail.com | Antonettachester | Inactive | $609.42 |
| Dominic Schroeder | cayla_hartmann83@hotmail.com | Tampa | Inactive | $189.41 |
| Emelia Kreiger-Cassin | clyde.friesen@gmail.com | Janesville | Inactive | $937.05 |
| Shirley Hirthe | sophia12@yahoo.com | Lake Greentown | Active | $373.63 |
| Total | $2,759.16 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Maxine Wehner @rick78 | marina_lesch24@gmail.com | Eastvale | Active | $360.46 |
Mireya Wiza-Denesik @emerson.auer74 | caleb_swaniawski@gmail.com | San Angelo | Active | $897.51 |
Margie D'Amore @lionel26 | naomi69@yahoo.com | Port Audracester | Active | $269.69 |
Antwan Douglas PhD @isabel78 | zander73@gmail.com | Fort Halle | Inactive | $972.84 |
Ms. Melanie Denesik-Collier @clair_bradtke | bernice.lebsack@gmail.com | O'Konville | Active | $757.06 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darrel Raynor | nadia.goyette@hotmail.com | Gibsonboro | Active | $989.53 |
| Otilia Reilly | rosemary_oreilly@yahoo.com | Port Hardy | Active | $435.03 |
| Ignatius Stokes | dana54@hotmail.com | South Laurine | Active | $399.21 |
| Angel Leffler | ron45@yahoo.com | South Christelle | Inactive | $208.23 |
| Ruben Bogisich | shelly_toy-thiel@yahoo.com | Hudsonport | Active | $115.60 |
| Total | $2,147.60 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Sienna Pouros | abby62@gmail.com | Lake Mariah | Active | $32.74 |
| Daisy Adams | stephen1@yahoo.com | Leilastad | Active | $590.30 |
| Beatrice Wehner | lindsay_nienow56@hotmail.com | New Shadburgh | Inactive | $367.52 |
| Dora Mueller | irma47@gmail.com | Abelton | Active | $564.69 |
| Mrs. Angela Murray | rick77@gmail.com | Braunside | Active | $183.36 |
| Total | $1,738.61 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Russell Brakus | dudley21@gmail.com | DeSoto | Inactive | $944.82 |
| Reba O'Hara | della.haley@gmail.com | Waylonfort | Inactive | $844.71 |
| Jaylan Hilll-Runte | kirstin_reichert@yahoo.com | East Sabryna | Active | $741.95 |
| Lisa Oberbrunner | jessika40@hotmail.com | West Koleport | Active | $39.39 |
| Mikayla Moen | alexandra.conroy@yahoo.com | Lake Maynard | Inactive | $489.32 |
| Total | $3,060.19 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Lauriane Pfeffer I | leah81@yahoo.com | Paulinefield | Active | $217.72 | |
| Clementina Padberg Jr. | kathy_gibson@hotmail.com | Candidafurt | Inactive | $236.17 | |
| Joel Prosacco | marcos70@hotmail.com | Olathe | Active | $1,121.55 | |
| Joey Crooks | percy13@gmail.com | Rossboro | Active | $487.63 | |
| Mittie Rosenbaum | rashawn_feeney7@hotmail.com | Bettychester | Active | $172.88 | |
| Total | $2,235.95 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Diane Kuvalis | rebekah.oconner-lehner@yahoo.com | Ann Arbor | Inactive | $172.44 | |
| Candelario Schaefer | camille.parisian@yahoo.com | Burleson | Inactive | $950.36 | |
| Bridget Nikolaus | sven_hettinger94@gmail.com | West Mabelshire | Inactive | $524.67 | |
| Eldon Bergstrom | bryant42@hotmail.com | West Shanny | Active | $1,068.13 | |
| Alexis Dickens PhD | colin_wiegand@yahoo.com | Haleytown | Active | $1,189.86 | |
| Total | $3,905.46 | ||||
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 | |
|---|---|---|---|---|
| Rosalie Schowalter | eric69@hotmail.com | Fort Sammie | Inactive | $352.43 |
| Brandon Heaney | della47@yahoo.com | Hartmannstad | Inactive | $868.81 |
| Hester Emmerich I | sophie.altenwerth@yahoo.com | Wehnertown | Active | $517.71 |
| Eleazar Rogahn | keyshawn.leannon@hotmail.com | Goldaside | Active | $403.32 |
| Alonzo Gislason | otha21@yahoo.com | Borerchester | Inactive | $343.78 |
| Doyle Harvey | cedric_lockman87@yahoo.com | Schulistmouth | Inactive | $819.50 |
| Stephen O'Kon | tre48@yahoo.com | Hermanworth | Inactive | $605.99 |
| Naomi Raynor | donald_lynch89@gmail.com | Ankundingview | Active | $322.94 |
| Jermaine Turcotte | cleveland43@yahoo.com | North Sydnieborough | Active | $105.92 |
| Trever Marks-Runolfsdottir | gretchen33@yahoo.com | Burnsville | Inactive | $625.43 |
| Misty Terry Sr. | kallie.spencer56@yahoo.com | Jadachester | Active | $347.95 |
| Lawrence Okuneva | jessie_ratke70@hotmail.com | Port Tevin | Active | $1,073.89 |
| Alfredo Lakin | paul.heidenreich@yahoo.com | East Tobinstad | Inactive | $857.87 |
| James Mitchell | skylar_ortiz@yahoo.com | Auerchester | Active | $423.78 |
| Mercedes Paucek | merritt_satterfield68@yahoo.com | Reillyville | Inactive | $409.90 |
| Total | $8,079.22 | |||
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 |