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 | PayPal | $170.63 |
| INV002 | Pending | Credit Card | $797.43 |
| INV003 | Pending | Bank Transfer | $832.45 |
| INV004 | Paid | Bank Transfer | $798.14 |
| INV005 | Unpaid | Bank Transfer | $105.12 |
| INV006 | Paid | Credit Card | $797.68 |
| INV007 | Paid | PayPal | $412.82 |
| Total | $3,914.27 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jaylin Rowe | Chief Operations Facilitator | jaylin_rowe@hotmail.com | Viewer | |
| Laurine Zieme | Customer Security Representative | laurine.zieme67@yahoo.com | Member | |
| Glenda Schumm | National Security Planner | glenda_schumm19@gmail.com | Member | |
| Ben Johns-Dicki | Global Mobility Orchestrator | ben_johns-dicki@hotmail.com | Member | |
| Ole Ondricka | Direct Usability Coordinator | ole.ondricka11@gmail.com | Member | |
| Brennon Carroll | Corporate Branding Technician | brennon.carroll78@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 |
|---|---|---|
Pansy Lindgren District Division Coordinator pansy_lindgren87@hotmail.com | Member | |
Leonard Hodkiewicz-Kovacek International Functionality Orchestrator leonard.hodkiewicz-kovacek2@yahoo.com | Member | |
Vernon Denesik Central Assurance Manager vernon.denesik@yahoo.com | Viewer | |
Linnie Funk Direct Web Officer linnie_funk57@gmail.com | Member | |
Amari Spinka Lead Interactions Representative amari_spinka94@hotmail.com | Member | |
Genesis Hammes Regional Implementation Engineer genesis.hammes22@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Brandyn Barton Investor Data Planner brandyn.barton14@gmail.com | Admin | |
Hellen Cartwright Human Mobility Facilitator hellen_cartwright@yahoo.com | Member | |
Jeffery Auer Corporate Program Engineer jeffery.auer86@hotmail.com | Admin | |
Zita DuBuque Legacy Identity Designer zita.dubuque50@gmail.com | Viewer | |
Casey Lubowitz Global Data Technician casey_lubowitz85@yahoo.com | Admin | |
Davon Lueilwitz Senior Brand Specialist davon.lueilwitz@hotmail.com | Admin | |
Fabiola Moen Global Optimization Assistant fabiola_moen60@gmail.com | Admin | |
Mark Hickle Senior Solutions Engineer mark.hickle@gmail.com | Viewer | |
Layla Little Central Mobility Developer layla.little46@gmail.com | Viewer | |
Jasper Treutel Future Creative Officer jasper_treutel44@gmail.com | Viewer | |
Ed Trantow Customer Operations Administrator ed.trantow@yahoo.com | Admin | |
Felix Koepp Regional Interactions Technician felix_koepp@gmail.com | Member | |
Tracy Jacobi Future Tactics Orchestrator tracy.jacobi35@yahoo.com | Member | |
Chase Kling Direct Communications Associate chase_kling18@hotmail.com | Admin | |
Adah Dare Regional Solutions Associate adah.dare97@gmail.com | Admin | |
Sarah Harris Regional Configuration Orchestrator sarah_harris27@hotmail.com | Member | |
Esmeralda Cummings Central Functionality Administrator esmeralda_cummings@gmail.com | Admin | |
Elwin Glover Chief Security Agent elwin.glover60@gmail.com | Member | |
Warren Windler District Quality Officer warren_windler@hotmail.com | Member | |
Tatyana Rice National Security Designer tatyana.rice@gmail.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 | |
|---|---|---|---|---|
| Doreen Larson | soledad62@yahoo.com | Taunton | Active | $98.01 |
| Darrel Hamill | forrest_hegmann86@gmail.com | Lake Amayaport | Active | $1,093.56 |
| Phillip Ritchie-Ward I | toney_stracke@hotmail.com | Quigleyshire | Active | $306.16 |
| George Fay | cristobal_ebert-barrows52@yahoo.com | VonRuedenfort | Active | $597.17 |
| Edna Wolff | maeve.rutherford@gmail.com | Mertzfield | Inactive | $954.50 |
| Total | $3,049.40 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jeannie Mann IV @golden_gutmann0 | tyler.waters29@yahoo.com | Cormierside | Active | $1,002.01 |
Robert Kohler @emmitt_hirthe12 | agnes_weber76@hotmail.com | Toledo | Active | $702.46 |
Tony Welch-Terry @kaylee10 | rylee.johnson@hotmail.com | Gerlachview | Inactive | $684.20 |
Tommie Mills @ena42 | hulda_lebsack85@yahoo.com | Xzavierbury | Active | $630.35 |
Geneva Schulist PhD @alexander.will25 | xander_mills@yahoo.com | Lake Harrison | Active | $864.63 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| April Bailey | betsy.boyer31@gmail.com | Westfield | Inactive | $801.42 |
| Rhonda Leannon | lydia.bosco53@hotmail.com | Parkerstead | Active | $50.79 |
| Louise Kub | clotilde_schmeler99@hotmail.com | Lake Rosina | Active | $935.17 |
| Brandy Kuvalis | elena_bechtelar1@yahoo.com | Passaic | Inactive | $31.61 |
| Gene Lehner | krista26@gmail.com | East Fermin | Inactive | $743.97 |
| Total | $2,562.96 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johanna Marks | moses.buckridge@yahoo.com | Timmothyfield | Inactive | $533.17 |
| Sylvia Dicki | eleanora20@gmail.com | Verdaside | Inactive | $503.44 |
| Velma Deckow | kelly88@hotmail.com | South Gabriellefurt | Active | $614.51 |
| Tabitha Parisian-Shanahan | richie32@yahoo.com | Port Virgie | Active | $420.36 |
| Mary Spencer | domenick60@yahoo.com | North Adell | Active | $549.66 |
| Total | $2,621.14 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeff Wisoky | dangelo_ferry@gmail.com | West Damionbury | Active | $3.44 |
| Dexter Bergstrom | novella_steuber10@yahoo.com | Washington | Inactive | $780.87 |
| Tracy Pouros | davon26@yahoo.com | Mannfort | Active | $620.47 |
| Sandra Goodwin | melyssa38@yahoo.com | New Ramirofort | Active | $253.69 |
| Erma Rogahn-Klein | hortense.oconnell@gmail.com | Fort Frederik | Inactive | $1,155.98 |
| Total | $2,814.45 | |||
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 | ||
|---|---|---|---|---|---|
| Loretta Abshire | gaston77@yahoo.com | Botsfordstead | Inactive | $842.50 | |
| Faye Mante | johnathon70@gmail.com | West Brenda | Active | $151.90 | |
| Ignacio Nader II | aileen_huel@yahoo.com | South Donnellbury | Active | $331.40 | |
| Benjamin Ward | micah.pfeffer@gmail.com | Dejonshire | Active | $37.55 | |
| Susie McDermott | alexandre.krajcik@hotmail.com | Gracestead | Active | $736.67 | |
| Total | $2,100.02 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dolores Harris | grady_prosacco8@gmail.com | Pompano Beach | Active | $291.76 | |
| Max Mante | lenore.nienow@hotmail.com | West Nickolaston | Active | $612.98 | |
| Mr. Randy Ritchie | riley.hackett@gmail.com | Kamillebury | Inactive | $486.72 | |
| Nettie Gleason | lilly_goyette-lehner@hotmail.com | Zaneside | Inactive | $883.70 | |
| Willard Schneider | roselyn.krajcik@hotmail.com | Meriden | Active | $776.93 | |
| Total | $3,052.09 | ||||
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 | |
|---|---|---|---|---|
| Christine Keeling | jerad28@hotmail.com | Rancho Cordova | Inactive | $583.47 |
| Stephen Buckridge | mallie.mcglynn94@yahoo.com | Faustoborough | Active | $437.07 |
| Daryl Toy | garrick.kiehn@gmail.com | Jodycester | Active | $313.79 |
| Nichole Volkman MD | hailey36@yahoo.com | Medhurstcester | Active | $84.81 |
| Clarence Bosco | kade.roob60@gmail.com | Lake Madisynton | Active | $1,088.50 |
| Abel Ryan Sr. | gaston.gutkowski@gmail.com | Fort Leonelmouth | Inactive | $295.84 |
| Bethany Terry | eliza.buckridge58@hotmail.com | Bradenton | Inactive | $1,078.28 |
| Miss Billie Mohr | wendell.nicolas25@gmail.com | San Bernardino | Active | $488.84 |
| April Gulgowski MD | trey.pacocha@hotmail.com | Fordstad | Inactive | $64.41 |
| Nicolas Heidenreich | dudley85@hotmail.com | Port Chayatown | Inactive | $454.00 |
| Geraldine Langosh | koby29@yahoo.com | North Helen | Inactive | $420.50 |
| Jody Purdy | shemar99@yahoo.com | New Donavonstead | Inactive | $1,132.47 |
| Phyllis Wintheiser | kallie25@hotmail.com | West Alfonzo | Active | $789.33 |
| Dr. Terrence Ruecker | torrey16@yahoo.com | East Madelyn | Active | $690.19 |
| Bridget Connelly | annalise.wolff@hotmail.com | Pine Hills | Inactive | $1,179.94 |
| Total | $9,101.44 | |||
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 |