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 | $867.87 |
| INV002 | Paid | Bank Transfer | $105.60 |
| INV003 | Pending | Credit Card | $942.56 |
| INV004 | Pending | Credit Card | $676.55 |
| INV005 | Unpaid | Credit Card | $539.65 |
| INV006 | Pending | Bank Transfer | $680.11 |
| INV007 | Unpaid | PayPal | $151.96 |
| Total | $3,964.30 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Amy Hintz | Chief Accounts Supervisor | amy_hintz89@yahoo.com | Viewer | |
| Ronny Weissnat | Direct Web Coordinator | ronny_weissnat37@yahoo.com | Admin | |
| Aliya Effertz | Senior Program Architect | aliya_effertz9@yahoo.com | Viewer | |
| Nyasia Corwin | Senior Marketing Planner | nyasia_corwin@gmail.com | Member | |
| Marina Botsford | Human Applications Manager | marina.botsford91@yahoo.com | Viewer | |
| Jose Paucek | Senior Branding Assistant | jose_paucek@yahoo.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Peter Baumbach-Gibson Forward Group Producer peter.baumbach-gibson70@yahoo.com | Viewer | |
Raleigh Jakubowski International Metrics Coordinator raleigh.jakubowski@hotmail.com | Member | |
Maurine Weissnat Legacy Operations Officer maurine.weissnat86@hotmail.com | Member | |
Keith Kunde Direct Data Consultant keith.kunde@hotmail.com | Admin | |
Garrett Block Senior Functionality Technician garrett_block21@yahoo.com | Member | |
Adele Beahan Legacy Usability Facilitator adele.beahan@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 |
|---|---|---|
Florida Zulauf Principal Intranet Technician florida_zulauf@hotmail.com | Member | |
Rene Mayert Forward Metrics Manager rene.mayert@yahoo.com | Viewer | |
Samanta Smith Product Interactions Specialist samanta_smith77@hotmail.com | Viewer | |
Eric Schowalter District Mobility Manager eric.schowalter@gmail.com | Admin | |
Roscoe DuBuque Lead Markets Liaison roscoe.dubuque@yahoo.com | Viewer | |
Heaven Parker Investor Research Specialist heaven_parker95@gmail.com | Member | |
Laron Barton Dynamic Group Associate laron.barton@hotmail.com | Member | |
Lexus Jacobi Corporate Assurance Producer lexus.jacobi11@gmail.com | Admin | |
Emelie Pouros Future Functionality Consultant emelie_pouros@gmail.com | Viewer | |
Lia Hintz Human Group Executive lia_hintz86@gmail.com | Viewer | |
Devin Mitchell Global Division Specialist devin_mitchell69@hotmail.com | Member | |
Allen Ferry Future Applications Officer allen.ferry@gmail.com | Admin | |
Lolita Jacobson District Integration Coordinator lolita.jacobson@gmail.com | Admin | |
Ryann Walter Internal Division Strategist ryann.walter36@gmail.com | Admin | |
Reyes Goodwin National Tactics Executive reyes.goodwin@yahoo.com | Admin | |
Isac Stark Legacy Accountability Assistant isac.stark19@hotmail.com | Member | |
Danika Littel Principal Quality Architect danika_littel@hotmail.com | Member | |
Cydney Shields National Identity Technician cydney_shields94@gmail.com | Viewer | |
Christy Bahringer Internal Creative Specialist christy.bahringer72@gmail.com | Viewer | |
Janis Lockman Global Accountability Orchestrator janis.lockman@hotmail.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 | |
|---|---|---|---|---|
| Owen Kunze | gabrielle.oreilly47@hotmail.com | Port Kevonstead | Inactive | $868.57 |
| Fred Yost | margarette_davis-gottlieb7@hotmail.com | South Kellychester | Inactive | $370.45 |
| Teresa Smith | aubree.heller@yahoo.com | South Hildaberg | Inactive | $239.40 |
| Jeffery West | delfina11@yahoo.com | North Waldostad | Active | $882.49 |
| Lindsay Will | winston66@gmail.com | Cambridge | Active | $953.77 |
| Total | $3,314.68 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jasmine Balistreri @elsie.pfeffer | norma_stehr@hotmail.com | Port Courtneyshire | Active | $627.89 |
Dr. Pedro Waelchi @jerry.herman55 | ezequiel_waelchi56@hotmail.com | Palm Coast | Active | $443.95 |
Roman Bednar @randi.schimmel66 | lisa53@yahoo.com | Normal | Inactive | $699.87 |
Billy Thompson @katlyn56 | josie.spinka75@gmail.com | Schillertown | Inactive | $593.31 |
Eva Purdy @giuseppe_bednar12 | kameron.pfannerstill37@gmail.com | Huntersville | Inactive | $952.67 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Devin Lowe | darby28@yahoo.com | Fort Winnifredfurt | Inactive | $1,183.92 |
| Mrs. Wilma Lang | tamara.wilderman@hotmail.com | Fort Isabella | Active | $86.07 |
| Alice Koch | aaliyah43@gmail.com | East Sisterbury | Inactive | $181.72 |
| Christine Hauck IV | ashton.oconner87@hotmail.com | Adalineport | Active | $456.21 |
| Gwen Lehner | buster_klein37@hotmail.com | Rohanbury | Inactive | $184.78 |
| Total | $2,092.70 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jody Bahringer | dorcas_wintheiser48@yahoo.com | Lehnerstad | Inactive | $662.64 |
| Angela Legros | nona.sawayn@hotmail.com | Adellside | Active | $601.77 |
| Arthur Stoltenberg-Ryan | francisco_ledner8@gmail.com | Boca Raton | Active | $656.80 |
| Tom Stokes | magnus99@yahoo.com | North Immanuel | Active | $69.31 |
| Aaron Dare | ivy_zieme@yahoo.com | South Jaime | Inactive | $1,132.36 |
| Total | $3,122.88 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lonnie Langworth | wilhelmine77@gmail.com | Vandervorttown | Inactive | $502.65 |
| Eula Upton | fanny14@hotmail.com | Lake Dedric | Inactive | $347.10 |
| Dr. Edward Howell | felipa34@gmail.com | Fort Emeraldburgh | Active | $219.16 |
| Freda Ebert-Johns | alayna68@gmail.com | Kirlincester | Inactive | $454.36 |
| Hannah Weber | jarret.murphy45@hotmail.com | Goldentown | Inactive | $38.68 |
| Total | $1,561.95 | |||
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 | ||
|---|---|---|---|---|---|
| Brandon Sporer | alene.beier28@yahoo.com | Lehnerport | Active | $607.11 | |
| Cary Gleason | monserrat58@hotmail.com | Nicolasboro | Active | $1,158.73 | |
| Jessie Mayer | dayana_rosenbaum70@gmail.com | Andresfurt | Active | $804.91 | |
| Miss Cristina Kemmer PhD | watson.bernhard5@hotmail.com | North Danykaworth | Active | $541.40 | |
| Miss Heidi Kilback | kaleb_carroll9@hotmail.com | East Jasenfurt | Inactive | $962.70 | |
| Total | $4,074.85 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Willard Keebler | elisha_padberg11@yahoo.com | New Evangeline | Active | $593.55 | |
| Loretta Gleichner | rowland.hamill78@yahoo.com | Port Herminiamouth | Inactive | $238.09 | |
| Belinda Carter | blanca28@hotmail.com | Georgettestad | Active | $227.41 | |
| Elbert Leannon-VonRueden | murphy_ziemann1@gmail.com | Strosinchester | Inactive | $15.15 | |
| Lynne Carroll | vanessa.kerluke@gmail.com | Fort Tracefield | Inactive | $924.30 | |
| Total | $1,998.50 | ||||
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 | |
|---|---|---|---|---|
| Rafael McLaughlin | trudie.corkery@gmail.com | Port Kristian | Active | $581.55 |
| Charlene Anderson | zackery15@yahoo.com | Bayamon | Active | $72.30 |
| Noah Leuschke | orpha27@yahoo.com | Ianfort | Inactive | $1,177.90 |
| Janet Wilderman | hiram34@hotmail.com | Fond du Lac | Inactive | $1,188.61 |
| Dr. Tomas Monahan | milton_fahey46@hotmail.com | South Sage | Active | $458.63 |
| Beverly Hills | jaunita.macejkovic@hotmail.com | Hayesland | Inactive | $484.97 |
| Michelle Gleason | emmanuelle87@hotmail.com | Barnstable Town | Inactive | $755.63 |
| Lucy Buckridge IV | trey_cormier@gmail.com | Rowetown | Inactive | $1,175.34 |
| Dr. Jackie Nolan | fiona7@yahoo.com | Haroldfort | Active | $804.43 |
| Kurt Legros | randal_kautzer76@hotmail.com | Cummerataton | Inactive | $1,112.78 |
| Joel Emard | johnathan.klocko@yahoo.com | New Winfield | Inactive | $916.58 |
| Matthew Ritchie | yasmeen_jacobi18@yahoo.com | Kihnmouth | Active | $845.24 |
| Blanche Nicolas | tyrese63@hotmail.com | Shreveport | Active | $766.66 |
| Donna Stroman | dahlia.cummings@hotmail.com | Kayleecester | Inactive | $937.37 |
| Damon Weber-Cremin | oswaldo17@gmail.com | West Tiffany | Inactive | $888.49 |
| Total | $12,166.48 | |||
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 |