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 | Credit Card | $697.40 |
| INV002 | Pending | PayPal | $246.63 |
| INV003 | Unpaid | Credit Card | $369.51 |
| INV004 | Unpaid | Credit Card | $428.34 |
| INV005 | Unpaid | PayPal | $555.42 |
| INV006 | Paid | Bank Transfer | $933.98 |
| INV007 | Pending | PayPal | $227.63 |
| Total | $3,458.91 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Shyanne Collier | International Group Supervisor | shyanne_collier@hotmail.com | Admin | |
| Carroll Blanda | Chief Markets Associate | carroll.blanda30@gmail.com | Member | |
| Guadalupe Hand | Corporate Marketing Manager | guadalupe_hand26@gmail.com | Viewer | |
| Jimmy Corwin | Customer Quality Representative | jimmy.corwin26@yahoo.com | Admin | |
| Hope Conn | Chief Factors Facilitator | hope.conn@gmail.com | Member | |
| Henriette Harris | Internal Accountability Technician | henriette.harris39@gmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Yvonne Mohr Central Operations Director yvonne.mohr85@hotmail.com | Admin | |
Arnold Murphy Lead Program Strategist arnold.murphy@hotmail.com | Admin | |
Leonard Cummings Principal Identity Facilitator leonard_cummings99@hotmail.com | Viewer | |
Karla Frami Future Applications Director karla.frami17@hotmail.com | Viewer | |
Ladarius Kling-Boyer Regional Division Consultant ladarius.kling-boyer10@yahoo.com | Viewer | |
Bud Boyer Forward Factors Associate bud_boyer@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 |
|---|---|---|
Brad Feil National Group Administrator brad.feil@yahoo.com | Member | |
Violet Willms Human Applications Producer violet.willms30@gmail.com | Member | |
Pierce Veum Investor Program Coordinator pierce_veum83@hotmail.com | Viewer | |
Rick Buckridge Lead Intranet Director rick.buckridge80@hotmail.com | Member | |
Geneva Howe Dynamic Group Technician geneva.howe@gmail.com | Admin | |
Roy Funk National Group Supervisor roy_funk66@gmail.com | Member | |
Garrison Oberbrunner Central Assurance Architect garrison.oberbrunner5@yahoo.com | Admin | |
Ozella Hand-Brown Direct Communications Developer ozella.hand-brown@yahoo.com | Viewer | |
Darwin Vandervort Principal Usability Orchestrator darwin.vandervort28@hotmail.com | Member | |
Benjamin McClure Internal Functionality Engineer benjamin.mcclure65@hotmail.com | Member | |
Antonia Rohan Investor Quality Agent antonia.rohan71@yahoo.com | Viewer | |
Wilfred Predovic Principal Data Coordinator wilfred_predovic@hotmail.com | Admin | |
Keeley Yundt Human Creative Orchestrator keeley.yundt51@gmail.com | Viewer | |
Adelle Johnston Principal Functionality Specialist adelle_johnston@yahoo.com | Admin | |
Robb Graham Legacy Web Developer robb_graham43@hotmail.com | Viewer | |
Van Aufderhar Central Web Director van_aufderhar86@hotmail.com | Viewer | |
Amir Smitham Central Assurance Technician amir_smitham@gmail.com | Viewer | |
Lloyd Mann Central Metrics Coordinator lloyd_mann@gmail.com | Admin | |
Nancy Corwin Future Interactions Representative nancy.corwin@yahoo.com | Member | |
Levi Bosco Senior Implementation Consultant levi_bosco@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 | |
|---|---|---|---|---|
| Dale Macejkovic | cornell_schmidt95@yahoo.com | Lacey | Inactive | $72.67 |
| Mr. Bradly Ondricka | bernice_quigley@gmail.com | Padbergport | Inactive | $946.15 |
| Shelley Bins | mandy_hahn@hotmail.com | Goldenview | Active | $106.63 |
| Omari Strosin | melany65@yahoo.com | Danielfield | Active | $305.47 |
| Dana Boehm | frances51@hotmail.com | Miahaven | Active | $428.05 |
| Total | $1,858.97 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ramona Olson @tony.crist | blaze13@yahoo.com | Kohlerland | Active | $139.21 |
Alma White @wendell.okuneva44 | lorenzo_parisian@hotmail.com | Cleveland Heights | Active | $924.36 |
Moriah Kuhn @nathan_medhurst53 | freeman.barrows@hotmail.com | North Austin | Inactive | $476.34 |
Gwen Wintheiser @bernice49 | sandy.kris@hotmail.com | West Graham | Active | $1,145.56 |
Wallace Sipes @andrea_jacobi | jessie_kshlerin@yahoo.com | New Jovanyshire | Inactive | $979.18 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Joseph Tromp | laurie_gleichner@gmail.com | Garden Grove | Active | $768.88 |
| Kira Collins | camila0@yahoo.com | Torphyside | Active | $1,170.74 |
| Mr. Efren Hermiston | kaia85@hotmail.com | Brionnaville | Inactive | $115.28 |
| Miss Malcolm Kilback | salvador29@hotmail.com | North Olin | Active | $848.01 |
| Ruth Ryan | agnes.bins@yahoo.com | New Alyciaport | Inactive | $1,141.50 |
| Total | $4,044.41 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kelli McGlynn | alberto_trantow@yahoo.com | Port Bernardo | Inactive | $351.82 |
| Gladys Russel | raul_nitzsche3@yahoo.com | Lake Bartonbury | Inactive | $360.75 |
| Leland Abernathy | cyrus.bartell@yahoo.com | Lehigh Acres | Inactive | $652.28 |
| Eulah Stracke | florence_ullrich@yahoo.com | South Libby | Active | $149.74 |
| Ollie Bednar | geraldine.botsford@hotmail.com | Salina | Inactive | $1,080.36 |
| Total | $2,594.95 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeremy Jaskolski Jr. | rodrigo82@hotmail.com | East Agustinland | Active | $305.36 |
| Miss Miguel Crooks | sandra.braun@hotmail.com | South Anthony | Inactive | $1,105.15 |
| Joel Schimmel | barry.bergnaum22@hotmail.com | North Yadiraport | Active | $1,079.87 |
| Eddie Cronin | ted22@gmail.com | Midwest City | Inactive | $679.43 |
| Joann Kutch DVM | jason.block38@gmail.com | East Ariel | Inactive | $651.18 |
| Total | $3,820.99 | |||
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 | ||
|---|---|---|---|---|---|
| Davion Pfannerstill | anastasia_stokes@yahoo.com | Lake Alysonstead | Active | $720.44 | |
| Willis Weimann | leslie43@hotmail.com | Milpitas | Active | $391.81 | |
| Ray Parker | elizabeth.keebler@gmail.com | Priceburgh | Active | $1,173.70 | |
| Francis Abshire | geoffrey_lynch94@hotmail.com | Joneschester | Active | $955.24 | |
| Chanel Nienow | howard_bauch@yahoo.com | Gorczanyport | Active | $438.90 | |
| Total | $3,680.09 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Justin Ankunding DDS | spencer.greenfelder82@gmail.com | Kearny | Active | $39.21 | |
| Julio Pfannerstill | maxime41@gmail.com | Citrus Heights | Active | $886.55 | |
| Elvis Huels | shane_roob73@gmail.com | Amieside | Inactive | $995.82 | |
| Elta Gulgowski | brennan.botsford@hotmail.com | Hildaboro | Active | $981.29 | |
| Devon Abernathy | miguel_klocko95@yahoo.com | Evertville | Inactive | $625.32 | |
| Total | $3,528.19 | ||||
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 | |
|---|---|---|---|---|
| Archibald Barton | kara22@yahoo.com | West Shawn | Inactive | $516.98 |
| Mr. Douglas Thiel | duane.corkery20@yahoo.com | Walshboro | Inactive | $435.71 |
| Sidney Rau | dana_dubuque84@yahoo.com | New Rashawn | Active | $563.00 |
| Hector Mitchell | augustine38@gmail.com | East Taylorville | Active | $48.20 |
| Byron Ruecker DVM | aaron_roberts-reilly49@yahoo.com | Aubreymouth | Inactive | $784.88 |
| Eloise Barton | billy_mills@yahoo.com | Russelview | Inactive | $978.43 |
| Ashlynn Hagenes | lesley.glover@hotmail.com | Commerce City | Inactive | $647.73 |
| Kurt Steuber | alfonzo_brakus@yahoo.com | Elkhart | Inactive | $927.96 |
| Amber Christiansen | grace_donnelly@hotmail.com | South Laurelhaven | Inactive | $1,158.51 |
| Cecilia Russel | zack24@hotmail.com | Jevontown | Inactive | $1,079.89 |
| Shanna Von | sophia.mayert27@yahoo.com | Enterprise | Active | $44.80 |
| Brooke Balistreri | clay_walter@hotmail.com | Rempelhaven | Inactive | $837.16 |
| Francis Reinger | amos41@gmail.com | Lake Adriannahaven | Inactive | $580.20 |
| Bernie Hilll | bradly75@gmail.com | Romagueratown | Active | $915.83 |
| Janice Homenick DVM | randal40@gmail.com | Folsom | Active | $768.23 |
| Total | $10,287.51 | |||
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 |