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 | Bank Transfer | $869.32 |
| INV002 | Unpaid | PayPal | $355.36 |
| INV003 | Paid | PayPal | $351.09 |
| INV004 | Paid | PayPal | $563.71 |
| INV005 | Paid | Bank Transfer | $678.54 |
| INV006 | Paid | PayPal | $415.45 |
| INV007 | Paid | PayPal | $870.56 |
| Total | $4,104.03 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Gianni Davis | Central Optimization Consultant | gianni_davis68@yahoo.com | Member | |
| Grady Klocko | Product Branding Associate | grady_klocko@hotmail.com | Member | |
| Narciso Baumbach | Senior Optimization Orchestrator | narciso.baumbach@yahoo.com | Member | |
| Alana Luettgen | Internal Directives Orchestrator | alana_luettgen30@yahoo.com | Viewer | |
| Elvis Haley | Product Functionality Liaison | elvis.haley@yahoo.com | Admin | |
| Zella Klocko | Lead Program Executive | zella_klocko@yahoo.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 |
|---|---|---|
Okey Gusikowski Customer Security Representative okey_gusikowski86@hotmail.com | Viewer | |
Ubaldo Padberg Forward Assurance Consultant ubaldo_padberg46@gmail.com | Member | |
Kiara Bergnaum Senior Research Consultant kiara.bergnaum19@gmail.com | Admin | |
Eva Greenfelder Chief Applications Technician eva.greenfelder@hotmail.com | Member | |
Wade Walsh-Brakus Forward Identity Architect wade.walsh-brakus@yahoo.com | Admin | |
Elliott Rice Senior Web Manager elliott.rice23@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 |
|---|---|---|
Bria Schoen Lead Communications Engineer bria_schoen28@gmail.com | Admin | |
Hanna Hessel Principal Applications Supervisor hanna.hessel@hotmail.com | Viewer | |
Dayne Murazik Investor Brand Director dayne_murazik@yahoo.com | Admin | |
Christine Glover International Response Consultant christine.glover5@hotmail.com | Admin | |
Franz Yundt Central Configuration Facilitator franz_yundt28@gmail.com | Member | |
Noe Spinka Regional Functionality Assistant noe.spinka@gmail.com | Member | |
Audreanne Wolff Product Integration Technician audreanne.wolff18@gmail.com | Member | |
Kiley Keebler Customer Optimization Director kiley_keebler0@yahoo.com | Admin | |
Kirstin Littel Senior Markets Analyst kirstin_littel@hotmail.com | Member | |
Caterina Armstrong Principal Program Developer caterina_armstrong57@yahoo.com | Viewer | |
Geovanny Rodriguez Legacy Brand Facilitator geovanny.rodriguez@gmail.com | Member | |
Brooklyn McCullough Global Solutions Architect brooklyn.mccullough@gmail.com | Viewer | |
Lavina Hills Direct Functionality Consultant lavina_hills81@hotmail.com | Admin | |
Barbara Conroy Dynamic Marketing Specialist barbara.conroy67@yahoo.com | Viewer | |
Vickie Waelchi Dynamic Program Liaison vickie.waelchi@gmail.com | Admin | |
Aileen Stamm Central Markets Orchestrator aileen_stamm3@yahoo.com | Member | |
Mozelle Kunze Chief Web Analyst mozelle.kunze@yahoo.com | Admin | |
Kristoffer Schuppe Principal Infrastructure Analyst kristoffer_schuppe78@hotmail.com | Member | |
Hyman Rempel Central Communications Strategist hyman_rempel12@yahoo.com | Admin | |
Enrique Sawayn Product Infrastructure Associate enrique.sawayn45@hotmail.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 | |
|---|---|---|---|---|
| Lionel Klein | lorena36@yahoo.com | Janisstead | Inactive | $865.26 |
| Gwen Nitzsche | harley.lockman-mayer@yahoo.com | Ankundingtown | Active | $972.61 |
| Ronnie Yundt | giovanna.ferry@yahoo.com | Stratford | Active | $504.80 |
| Ian Dooley | glenna_olson72@hotmail.com | Fort Tyson | Active | $901.73 |
| Russell Fisher | susie.conn82@hotmail.com | Armandstead | Active | $839.99 |
| Total | $4,084.39 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Freddie Blanda-Breitenberg @audreanne.prohaska39 | santa_koss20@gmail.com | Lake Shannyton | Inactive | $609.27 |
Ivan Hartmann @titus48 | percival.buckridge@hotmail.com | Lake Ronnyport | Active | $196.76 |
Ms. Marguerite Satterfield @paris8 | amely_rice44@gmail.com | Marcellaborough | Active | $121.27 |
Maggie Braun @ivory_wuckert22 | delpha_bogan@hotmail.com | Port Ivy | Active | $981.93 |
Dr. Domingo Borer @braden55 | kieran_jakubowski3@hotmail.com | Baumbachshire | Inactive | $419.08 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Frankie Kshlerin | murl_mante80@yahoo.com | Jacintoside | Active | $383.16 |
| Kenny VonRueden | garfield15@hotmail.com | Dearborn | Active | $158.91 |
| Kristen Walter | otilia_greenholt@yahoo.com | Crookscester | Active | $851.19 |
| Alicia Funk | general40@hotmail.com | Rosaleeshire | Inactive | $59.60 |
| Claudia Hodkiewicz | veda.davis@hotmail.com | Krystalberg | Active | $350.22 |
| Total | $1,803.08 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cora Rempel | clementina33@gmail.com | Deckowberg | Active | $558.97 |
| Nettie Murphy | lysanne42@yahoo.com | Milfordberg | Inactive | $1,138.86 |
| Kelly Jacobson | retta.rutherford39@yahoo.com | Hillsboro | Active | $256.75 |
| Alfonso Parker | kenyatta_konopelski@yahoo.com | Lake Adoniston | Active | $352.75 |
| Eleanor Stamm DDS | helga_abbott@gmail.com | Danykastad | Inactive | $955.27 |
| Total | $3,262.60 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Elisa Lang-Quitzon | parker_mante-fahey42@gmail.com | New Khalid | Inactive | $925.93 |
| Fredrick Rice | estrella_wiegand6@gmail.com | Kuhnfurt | Inactive | $582.47 |
| May Ullrich | vivienne79@gmail.com | Keaganchester | Inactive | $1,124.53 |
| Rhonda Tremblay | price_murazik88@gmail.com | New Heavenburgh | Inactive | $752.16 |
| Miranda Braun | arthur25@hotmail.com | New Johnathanside | Active | $472.27 |
| Total | $3,857.36 | |||
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 | ||
|---|---|---|---|---|---|
| Tomas Carroll | brando8@yahoo.com | Halvorsonfort | Inactive | $1,016.34 | |
| Ms. Lorene Parisian | bernice.durgan@yahoo.com | Port Brice | Active | $534.16 | |
| Kent Hoeger | reggie_hilll85@gmail.com | Fort Estevan | Inactive | $1,137.72 | |
| Lionel Bailey | thurman28@gmail.com | East Mina | Inactive | $593.31 | |
| Dr. Georgia Medhurst | amari_howell54@yahoo.com | Streichcester | Inactive | $472.23 | |
| Total | $3,753.76 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jermaine Huel | ambrose83@yahoo.com | Omerfurt | Active | $705.92 | |
| Noah Schmeler | nola_abshire8@hotmail.com | Schoenfield | Inactive | $959.62 | |
| Geneva Bosco | harrison.carroll10@hotmail.com | New Betty | Inactive | $1,162.41 | |
| Jerald Hauck | ronaldo.kohler1@hotmail.com | North Juston | Inactive | $974.74 | |
| Melanie Farrell | betty_ziemann-jenkins73@hotmail.com | Fort Bridgetteberg | Active | $776.01 | |
| Total | $4,578.70 | ||||
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 | |
|---|---|---|---|---|
| Kathleen Grady | cristian.koss-dach@gmail.com | Mertzchester | Active | $744.66 |
| Julian Macejkovic DDS | violet57@hotmail.com | Fort Aleen | Active | $450.85 |
| Stanley Predovic | orie.prosacco26@yahoo.com | West Ceasarfort | Active | $64.75 |
| Clyde Nicolas | earline.jenkins@hotmail.com | Cypress | Active | $89.39 |
| Leonard Buckridge | grayce.walter@hotmail.com | Coral Gables | Inactive | $617.05 |
| Samuel Marquardt | lavern.miller51@yahoo.com | Cerritos | Active | $1,112.46 |
| Joyce Sanford | tomasa_wyman55@hotmail.com | Kubfort | Active | $1,095.77 |
| Stewart Hermiston DDS | bo_conroy@hotmail.com | Elmorestad | Inactive | $368.13 |
| Bessie Lang | briana.pfeffer21@hotmail.com | New Penelope | Inactive | $49.79 |
| Pete McClure | kamryn.sawayn@yahoo.com | New Rhoda | Active | $796.87 |
| Miss Shari Bauch | kyra.marquardt@yahoo.com | Akron | Inactive | $620.33 |
| Katie Runolfsson | margot27@yahoo.com | Port Bellaborough | Active | $396.50 |
| Barry Murray MD | lorenza62@gmail.com | Helgaburgh | Active | $615.86 |
| Gary Waters DVM | geovany59@gmail.com | North Sibylside | Inactive | $1,151.82 |
| Alexis Rodriguez | brannon58@hotmail.com | Fort Dedrick | Active | $1,065.43 |
| Total | $9,239.66 | |||
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 |