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 | $998.16 |
| INV002 | Pending | PayPal | $364.86 |
| INV003 | Unpaid | Bank Transfer | $242.09 |
| INV004 | Paid | PayPal | $147.00 |
| INV005 | Pending | Bank Transfer | $620.37 |
| INV006 | Pending | Credit Card | $618.73 |
| INV007 | Pending | Credit Card | $731.55 |
| Total | $3,722.76 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Elisabeth Renner | International Paradigm Analyst | elisabeth_renner28@hotmail.com | Member | |
| Earnest Gottlieb | Corporate Operations Technician | earnest.gottlieb@hotmail.com | Viewer | |
| Owen Kub | Dynamic Group Assistant | owen_kub81@yahoo.com | Member | |
| Sheryl Ullrich | Direct Metrics Developer | sheryl_ullrich@hotmail.com | Member | |
| Wilber Runolfsdottir | District Security Technician | wilber.runolfsdottir@yahoo.com | Member | |
| Fred Jaskolski | Central Security Facilitator | fred.jaskolski@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 |
|---|---|---|
Josh Gleason Legacy Group Consultant josh.gleason80@gmail.com | Viewer | |
Stacy Hilll Customer Program Developer stacy_hilll@yahoo.com | Member | |
Athena Turner Future Integration Officer athena.turner@gmail.com | Admin | |
Dennis Morissette Lead Brand Manager dennis.morissette11@hotmail.com | Admin | |
Emmie Prohaska Human Integration Consultant emmie_prohaska75@yahoo.com | Member | |
Shirley Gislason Dynamic Implementation Consultant shirley.gislason23@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 |
|---|---|---|
Preston Wisozk Senior Operations Architect preston.wisozk@hotmail.com | Admin | |
Makenna Champlin Global Security Executive makenna.champlin@hotmail.com | Admin | |
Flora Botsford National Implementation Strategist flora_botsford60@yahoo.com | Member | |
Brandy Prosacco Dynamic Marketing Executive brandy_prosacco@hotmail.com | Viewer | |
Natalie Sporer Dynamic Integration Orchestrator natalie_sporer50@yahoo.com | Viewer | |
Lucas Koss Dynamic Paradigm Assistant lucas.koss@gmail.com | Viewer | |
Leona Schulist International Applications Agent leona_schulist36@yahoo.com | Viewer | |
Max Medhurst Forward Implementation Producer max_medhurst@gmail.com | Viewer | |
Bernie Mante Regional Infrastructure Liaison bernie_mante@yahoo.com | Admin | |
Brent Padberg Dynamic Operations Specialist brent_padberg38@hotmail.com | Admin | |
Emanuel Casper Legacy Operations Assistant emanuel.casper81@yahoo.com | Member | |
Andrew Schinner Investor Paradigm Director andrew_schinner@hotmail.com | Admin | |
Delta Stehr Corporate Web Developer delta_stehr@hotmail.com | Admin | |
Susie Bruen Direct Paradigm Representative susie_bruen@gmail.com | Member | |
Lance Wuckert International Data Specialist lance.wuckert@hotmail.com | Member | |
Deshaun Wyman Internal Markets Administrator deshaun.wyman13@yahoo.com | Admin | |
Clinton Wunsch Future Marketing Supervisor clinton_wunsch84@hotmail.com | Admin | |
Easter O'Conner Central Division Specialist easter_oconner54@hotmail.com | Admin | |
Flo Kiehn Forward Directives Facilitator flo.kiehn3@gmail.com | Admin | |
Dianne Wuckert District Quality Executive dianne.wuckert@hotmail.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 | |
|---|---|---|---|---|
| Shemar Bayer | damon_homenick51@yahoo.com | New Mitchell | Inactive | $306.22 |
| Lula West | deven4@hotmail.com | South Guidofield | Active | $818.03 |
| Cathy Luettgen | rodney95@yahoo.com | East Bobbie | Active | $274.90 |
| Jesus Koelpin | myrna_adams7@hotmail.com | West Waylonburgh | Active | $69.26 |
| Marc Auer | claire.hirthe44@gmail.com | Round Rock | Inactive | $93.79 |
| Total | $1,562.20 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mrs. Jane Goldner @ardella_hermann0 | lorenza.hane77@yahoo.com | Alainabury | Inactive | $329.75 |
Eunice Vandervort @isai.wiza68 | kelvin.windler40@gmail.com | Oceanemouth | Inactive | $830.50 |
Shaniya Schultz @latoya_kuphal | kevin.reilly82@gmail.com | Glen Burnie | Active | $1,156.86 |
Saul Bechtelar @fanny22 | niko.larson@gmail.com | New Orleans | Inactive | $988.57 |
Ella Haag @joel64 | alfred.jaskolski58@yahoo.com | Greenholtborough | Inactive | $173.94 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kelley McKenzie | carlos_casper34@gmail.com | Gradyfort | Active | $305.54 |
| Vera Roberts | alysa32@yahoo.com | Marvinshire | Inactive | $1,053.96 |
| Junius Ward | edna31@gmail.com | Bartholomeland | Active | $33.85 |
| Mr. Tevin Beahan | brooke_mitchell@yahoo.com | Danbury | Inactive | $50.47 |
| Ian Mueller | edgar_purdy5@gmail.com | Vergieburgh | Active | $156.35 |
| Total | $1,600.17 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Donald Feeney | michele64@gmail.com | Bothell | Inactive | $122.12 |
| Irene Lesch | jakayla_schowalter43@gmail.com | Port Trystan | Active | $25.16 |
| Jeannette Moore | sally60@hotmail.com | Davis | Active | $446.15 |
| Vivian Stark | nettie.bailey@yahoo.com | Wisokyton | Active | $334.78 |
| Lee Gulgowski | veronica91@gmail.com | Mabelstad | Inactive | $298.39 |
| Total | $1,226.60 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Geovanny Auer | gonzalo_stiedemann-gutmann@yahoo.com | Stehrstead | Active | $696.55 |
| Julie Padberg | gail_kunde97@hotmail.com | Hermanshire | Inactive | $825.47 |
| Jonathon Roberts III | lamar_schmeler89@hotmail.com | Paucekfurt | Active | $372.29 |
| Geneva Schuppe | jaleel.kutch82@gmail.com | Gregside | Inactive | $975.95 |
| Katelin Lebsack Sr. | rebekah93@hotmail.com | Rochester Hills | Active | $828.13 |
| Total | $3,698.39 | |||
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 | ||
|---|---|---|---|---|---|
| Andre Johnston | diana_gulgowski@gmail.com | Port Sydnicester | Inactive | $1,178.73 | |
| Maritza Jacobson | emmett_schaden91@yahoo.com | Cloydfield | Active | $1,058.36 | |
| Carrie Ratke | theresa_steuber@gmail.com | Leonardoworth | Active | $591.28 | |
| Judith Hane | raquel_tromp47@hotmail.com | East Hartford | Active | $559.53 | |
| Henrietta Mertz | henry63@yahoo.com | Emardville | Active | $635.34 | |
| Total | $4,023.24 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Faye Fahey | carole_mohr51@yahoo.com | Twin Falls | Active | $879.02 | |
| Green Klocko | conrad_barton@gmail.com | New Tom | Inactive | $524.84 | |
| Juanita Kuhic | floy23@hotmail.com | North Dina | Active | $758.79 | |
| Krystal Kshlerin | catherine94@hotmail.com | Markscester | Active | $916.12 | |
| Mr. Nicholas Klein | arnold_simonis-champlin@gmail.com | Fort Xanderport | Inactive | $1,010.50 | |
| Total | $4,089.27 | ||||
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 | |
|---|---|---|---|---|
| Clinton Kulas-Altenwerth | leslie.davis41@hotmail.com | Caldwell | Active | $673.64 |
| Mr. Wilbur Wilderman | rex73@yahoo.com | New Arlie | Active | $53.78 |
| Darrell Bahringer | francis11@gmail.com | Port Angelina | Inactive | $481.73 |
| Guadalupe Turner | bruce5@yahoo.com | North Helenaboro | Active | $285.92 |
| Desiree Gusikowski | stella_weber41@gmail.com | East Antonettaville | Active | $342.02 |
| Calvin Mayer | winifred68@hotmail.com | West Auroreboro | Active | $878.45 |
| Kay Olson | josh_simonis@gmail.com | West Eddstead | Active | $127.98 |
| Beulah Bergstrom I | erin82@gmail.com | New Skye | Active | $22.52 |
| Earline Tillman | zaria72@gmail.com | Wylie | Active | $949.88 |
| Janis Schmeler | linnie.dare@hotmail.com | Devinland | Inactive | $1,075.98 |
| Sheila Mayert | adrain10@hotmail.com | New Alfred | Active | $404.42 |
| Bridget Boyer | hillard9@hotmail.com | Weberland | Inactive | $33.38 |
| Ross Turner | grayce.wisozk30@hotmail.com | Port Orange | Active | $45.77 |
| Ken Hegmann | marlene_hettinger67@hotmail.com | South Krystal | Active | $47.72 |
| Sage Davis | alejandro73@yahoo.com | Orieboro | Active | $478.44 |
| Total | $5,901.63 | |||
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 |