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 | $950.34 |
| INV002 | Paid | Bank Transfer | $439.17 |
| INV003 | Paid | Bank Transfer | $446.67 |
| INV004 | Paid | Credit Card | $413.26 |
| INV005 | Pending | Bank Transfer | $696.42 |
| INV006 | Unpaid | PayPal | $397.12 |
| INV007 | Unpaid | Bank Transfer | $874.84 |
| Total | $4,217.82 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Mary Adams | Forward Branding Coordinator | mary.adams@gmail.com | Admin | |
| Patsy Schmidt | Principal Creative Orchestrator | patsy_schmidt94@gmail.com | Admin | |
| Malcolm White | Corporate Solutions Producer | malcolm.white9@yahoo.com | Viewer | |
| Elsa Hayes | Legacy Markets Designer | elsa_hayes53@gmail.com | Viewer | |
| Kennedi Kunze | Customer Operations Supervisor | kennedi.kunze@gmail.com | Admin | |
| Bradford Frami | Product Tactics Agent | bradford_frami58@hotmail.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 |
|---|---|---|
Mustafa Marvin Regional Integration Facilitator mustafa_marvin41@hotmail.com | Viewer | |
Hazel Bradtke Corporate Communications Designer hazel.bradtke35@gmail.com | Member | |
Sherman Reynolds Principal Branding Representative sherman_reynolds87@gmail.com | Viewer | |
Penny Kertzmann District Solutions Engineer penny_kertzmann@hotmail.com | Member | |
Robert Crooks Internal Markets Strategist robert.crooks7@hotmail.com | Admin | |
Elsa Welch Human Communications Executive elsa_welch@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dominic Gislason Dynamic Quality Officer dominic.gislason10@yahoo.com | Viewer | |
Santiago Mosciski Human Quality Facilitator santiago.mosciski75@hotmail.com | Viewer | |
Boris Yundt International Tactics Representative boris_yundt@gmail.com | Admin | |
Ardella Abshire Product Branding Supervisor ardella_abshire18@hotmail.com | Member | |
Lois Weimann Legacy Web Agent lois.weimann23@hotmail.com | Admin | |
Abraham Kuphal Direct Tactics Agent abraham_kuphal@yahoo.com | Viewer | |
Mary Douglas Dynamic Directives Manager mary.douglas@gmail.com | Admin | |
Dolores Haag Product Branding Analyst dolores.haag45@hotmail.com | Member | |
Melyna O'Connell Global Markets Executive melyna_oconnell@yahoo.com | Viewer | |
Bettie Torphy District Intranet Orchestrator bettie.torphy91@gmail.com | Member | |
Mathew Balistreri Chief Tactics Coordinator mathew.balistreri13@hotmail.com | Viewer | |
Sheldon Nienow Global Marketing Officer sheldon_nienow49@hotmail.com | Member | |
Thomas Gusikowski-Rau Senior Identity Manager thomas.gusikowski-rau@yahoo.com | Admin | |
Oswald Hudson Regional Functionality Executive oswald.hudson@yahoo.com | Viewer | |
Amy Wiegand Product Accounts Manager amy.wiegand@gmail.com | Admin | |
Andy Goyette-Little Chief Optimization Director andy.goyette-little@yahoo.com | Member | |
Sophie Cormier Lead Communications Assistant sophie.cormier@gmail.com | Admin | |
Else Smitham Principal Program Agent else_smitham48@gmail.com | Member | |
Dina Jakubowski Lead Security Director dina.jakubowski@hotmail.com | Member | |
Leona Ward Legacy Configuration Facilitator leona_ward@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 | |
|---|---|---|---|---|
| Jesus Hammes | joseph11@hotmail.com | Bartonfurt | Inactive | $272.14 |
| Jasen Hintz | tremayne81@gmail.com | Coral Springs | Active | $905.64 |
| Toney Dickens-Mraz | natalia64@hotmail.com | West Tad | Inactive | $475.94 |
| Veronica Watsica MD | damion42@hotmail.com | Fort Alfredo | Inactive | $356.89 |
| Garfield West | may16@yahoo.com | Runtecester | Active | $653.91 |
| Total | $2,664.52 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Liliane Bode @dianne38 | haylie_williamson@gmail.com | Fort Deanhaven | Inactive | $497.35 |
Erick Kub @dedric.rohan | edna_hilll@hotmail.com | Rickeystead | Active | $610.94 |
Simon Mante @franklin26 | thelma_murazik41@gmail.com | Fort Jamesonside | Inactive | $757.09 |
Alice Skiles DDS @alphonso59 | fatima.langworth@yahoo.com | North Dwayneboro | Inactive | $93.17 |
Desiree Sawayn @broderick18 | pietro.turcotte76@hotmail.com | Riverview | Inactive | $911.95 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Albertha Conn | harriet.crist25@yahoo.com | Wisozkboro | Active | $196.34 |
| Daphnee Becker | george.bauch@gmail.com | Jacobiton | Active | $359.46 |
| Boyd Kozey V | anita11@hotmail.com | Lee's Summit | Inactive | $1,021.20 |
| James Bode | hulda.crona@hotmail.com | Farmington Hills | Inactive | $244.37 |
| Juana Powlowski | irma.emmerich@hotmail.com | North Oscarville | Inactive | $61.68 |
| Total | $1,883.05 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Trinity Crooks | hailee.leannon@gmail.com | Westville | Active | $612.01 |
| Maria Huels | jeff11@yahoo.com | Maximilliaton | Active | $738.46 |
| Jana Koelpin | ottilie.corwin23@hotmail.com | New Huberttown | Active | $920.82 |
| Ronnie Gleason | stanley.harber4@gmail.com | Langstead | Active | $311.12 |
| Verona Lebsack | stanley26@yahoo.com | Pfefferland | Active | $361.51 |
| Total | $2,943.92 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brent Crona III | prudence2@yahoo.com | West Kristiton | Inactive | $470.04 |
| Kailyn Turcotte | flora.treutel-kuvalis@hotmail.com | Leighmouth | Inactive | $507.04 |
| Opal McCullough V | elbert_will39@hotmail.com | Port Tyreek | Active | $812.55 |
| Payton Jerde | brandi87@yahoo.com | Fort Magali | Active | $118.29 |
| Nathaniel Sipes | milton.mills@yahoo.com | Rustyborough | Active | $97.15 |
| Total | $2,005.07 | |||
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 | ||
|---|---|---|---|---|---|
| Gennaro Boehm | silvia93@gmail.com | Brandoshire | Active | $614.66 | |
| Raven DuBuque | hoyt_hermiston32@gmail.com | South Gideonburgh | Active | $938.66 | |
| Benjamin Flatley DVM | orlando_white@yahoo.com | East Gerard | Active | $1,193.72 | |
| Frankie Hessel | christian_ortiz66@yahoo.com | Westonfort | Active | $423.27 | |
| Dr. Dallas Price Sr. | gayle5@hotmail.com | Fort Nora | Inactive | $211.04 | |
| Total | $3,381.35 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Elisabeth Vandervort | brittany_heidenreich42@hotmail.com | VonRuedenberg | Inactive | $134.35 | |
| Damon Nitzsche | tasha77@gmail.com | Morgan Hill | Active | $372.67 | |
| Mr. Charity Mayert | gary.bruen74@gmail.com | West Cloydville | Active | $854.33 | |
| Edward Lynch | neil_langworth@gmail.com | Walkerborough | Inactive | $870.50 | |
| Craig Volkman | fernando_ledner@gmail.com | Morissettemouth | Active | $893.02 | |
| Total | $3,124.87 | ||||
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 | |
|---|---|---|---|---|
| Zackary Altenwerth | grady44@hotmail.com | Christyshire | Inactive | $1,041.28 |
| Herbert Erdman | bertha_skiles@yahoo.com | Fort Curtis | Active | $255.35 |
| Victor Lesch | kathy.beatty@hotmail.com | Camilleville | Active | $101.19 |
| Stone Hayes | tommy.frami@hotmail.com | Lake Mckenna | Inactive | $1,025.88 |
| Lonny O'Hara | stanley_erdman@yahoo.com | Kleinburgh | Active | $1,116.17 |
| Frieda Wyman | simeon95@gmail.com | Sioux Falls | Inactive | $403.25 |
| Josh Osinski | rolando_harber31@yahoo.com | Gilbert | Active | $641.74 |
| Emily Breitenberg | talon70@yahoo.com | Calvinside | Active | $693.08 |
| Bridgette Lemke | patricia_wilkinson32@yahoo.com | South Clarkstead | Inactive | $814.92 |
| Elsie Sipes | angelica.witting67@yahoo.com | West Randy | Active | $1,007.97 |
| Vera Predovic | chandler.kunze84@gmail.com | Ontario | Inactive | $575.87 |
| Emie Cruickshank | ralph3@yahoo.com | Port Austin | Active | $585.17 |
| Daisy Hudson | lucy_fay@gmail.com | Wymanstead | Active | $877.25 |
| Doris Lubowitz | glenda.moore30@hotmail.com | Port Issac | Active | $299.34 |
| Jedediah Zulauf | yvonne3@hotmail.com | Lynchburg | Active | $134.81 |
| Total | $9,573.27 | |||
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 |