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 | Paid | Credit Card | $561.93 |
| INV002 | Paid | Bank Transfer | $247.65 |
| INV003 | Pending | Credit Card | $756.73 |
| INV004 | Pending | Credit Card | $138.04 |
| INV005 | Unpaid | Credit Card | $991.29 |
| INV006 | Pending | Bank Transfer | $456.56 |
| INV007 | Pending | Credit Card | $297.36 |
| Total | $3,449.56 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Patrick Cole | Future Marketing Agent | patrick.cole64@yahoo.com | Viewer | |
| Laurine Schaefer | Forward Interactions Associate | laurine_schaefer89@gmail.com | Viewer | |
| Daphnee Bernier | International Response Consultant | daphnee_bernier39@hotmail.com | Admin | |
| Joseph Gerlach | International Factors Specialist | joseph_gerlach@hotmail.com | Admin | |
| Ebony Kohler-Waters | Direct Tactics Administrator | ebony.kohler-waters72@gmail.com | Member | |
| Lindsey Hickle | Direct Creative Consultant | lindsey_hickle@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 |
|---|---|---|
Ray Herman Internal Configuration Strategist ray_herman@gmail.com | Viewer | |
Judd Cartwright National Directives Developer judd.cartwright87@yahoo.com | Admin | |
Dorris Sauer Chief Quality Representative dorris_sauer82@yahoo.com | Admin | |
Dean Moen Future Infrastructure Facilitator dean_moen@hotmail.com | Admin | |
Summer McLaughlin Dynamic Functionality Executive summer_mclaughlin@gmail.com | Member | |
Deshawn Rice Corporate Identity Analyst deshawn.rice32@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 |
|---|---|---|
Jaeden Dibbert Corporate Interactions Consultant jaeden_dibbert@yahoo.com | Member | |
Cassidy Bradtke Forward Web Liaison cassidy.bradtke98@gmail.com | Viewer | |
Reed Mayert Senior Assurance Associate reed_mayert54@gmail.com | Admin | |
Corine Upton Human Accounts Specialist corine.upton75@hotmail.com | Admin | |
Brennon Dietrich Customer Web Director brennon.dietrich@hotmail.com | Viewer | |
Justine Oberbrunner Central Markets Specialist justine.oberbrunner58@yahoo.com | Admin | |
Marcella Purdy District Solutions Liaison marcella.purdy15@gmail.com | Member | |
Braden Corwin Customer Markets Architect braden.corwin@yahoo.com | Admin | |
Phoebe Nitzsche Central Quality Analyst phoebe.nitzsche@gmail.com | Viewer | |
Walton Harvey Principal Integration Executive walton.harvey@gmail.com | Admin | |
Aniyah Runte Dynamic Implementation Producer aniyah.runte6@gmail.com | Member | |
Hildegard Spencer Human Marketing Technician hildegard.spencer13@hotmail.com | Member | |
Dion Beatty Legacy Accountability Coordinator dion.beatty@gmail.com | Member | |
Macey Williamson Corporate Quality Officer macey_williamson84@hotmail.com | Admin | |
Leann Connelly Legacy Response Executive leann_connelly99@gmail.com | Member | |
Helene Zboncak International Mobility Developer helene_zboncak@hotmail.com | Member | |
Ray Jones Forward Factors Representative ray.jones10@gmail.com | Viewer | |
Jayce Barrows International Accounts Facilitator jayce.barrows@gmail.com | Admin | |
Ottis Nicolas Human Functionality Assistant ottis.nicolas@gmail.com | Member | |
Aimee Prohaska Principal Group Analyst aimee.prohaska4@yahoo.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 | |
|---|---|---|---|---|
| Javier Reynolds | jacques.dooley@hotmail.com | Josiahworth | Inactive | $173.11 |
| Benjamin Lesch | rodger_koch-daugherty@yahoo.com | Davie | Inactive | $340.25 |
| Jesse Lang | naomi.jones71@yahoo.com | Gardena | Active | $751.74 |
| Dianna Little-Ziemann | lisandro_borer96@hotmail.com | Nicolaborough | Active | $875.13 |
| Mamie Dooley | triston_streich91@hotmail.com | Fort Willardburgh | Active | $663.77 |
| Total | $2,804.00 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Spencer Frami @tillman_hamill50 | mittie.sporer45@yahoo.com | DuBuquechester | Inactive | $942.44 |
Ethel Nienow @mariela_volkman13 | jacinthe_mosciski0@yahoo.com | Malliefort | Inactive | $743.61 |
Jordan Bosco @elda83 | ramona.padberg55@hotmail.com | Christberg | Active | $234.41 |
Sara Bernier @bethel.wintheiser | brannon_terry27@gmail.com | Pomona | Inactive | $366.73 |
Mr. Earl Steuber @felix.grimes | marguerite.greenfelder@yahoo.com | North Sandra | Inactive | $692.80 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leslie Brekke | ike.conroy82@gmail.com | New Generalstead | Active | $364.47 |
| Mr. Brent McGlynn | jazmyne39@yahoo.com | Fort Danaland | Active | $594.47 |
| Ms. Barbara Kertzmann MD | claudine_rosenbaum-fritsch@yahoo.com | Kerlukeshire | Active | $182.22 |
| Domingo Bartoletti PhD | brandon39@hotmail.com | Enterprise | Active | $194.59 |
| Anna Simonis | justen.bogisich@hotmail.com | Lake Tyreekfort | Inactive | $618.79 |
| Total | $1,954.54 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rosemarie Pfannerstill | florine.mills74@hotmail.com | Reichelchester | Active | $81.75 |
| Johnathan Simonis | monty.larkin@yahoo.com | Morarfurt | Inactive | $270.95 |
| Whitney Auer DVM | ima33@gmail.com | Lynchboro | Active | $748.65 |
| Jamie Bashirian | kyla87@yahoo.com | Lorainefurt | Active | $644.85 |
| Kim Kemmer | mariane.vonrueden3@yahoo.com | East Maia | Active | $1,111.12 |
| Total | $2,857.32 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cecil Harvey | owen_reynolds@hotmail.com | Kemmerhaven | Inactive | $961.78 |
| Aaron Strosin-Pfeffer | german.hane61@gmail.com | Mckenzieberg | Active | $1,196.83 |
| Delia Ritchie | lori.johns@hotmail.com | Raeberg | Inactive | $1,090.76 |
| Edgar Lowe | alicia_spinka@gmail.com | North Marcelinaburgh | Inactive | $49.80 |
| Earnest Koss I | kaden35@hotmail.com | Burnsville | Inactive | $101.81 |
| Total | $3,400.98 | |||
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 | ||
|---|---|---|---|---|---|
| Hannah Schuster V | maude_adams@hotmail.com | West Reyes | Inactive | $558.88 | |
| Lindsay Schoen | ariane97@hotmail.com | Bowling Green | Active | $792.60 | |
| Michele O'Conner | reece32@gmail.com | Fort Margaretta | Inactive | $976.30 | |
| Billie Dach | orion3@gmail.com | Gloverville | Inactive | $444.29 | |
| Shannon Klocko-Okuneva III | helen78@gmail.com | Alvertahaven | Active | $827.15 | |
| Total | $3,599.22 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Natasha Hammes | terrence.mcclure25@yahoo.com | St. Cloud | Active | $781.56 | |
| Johanna Zulauf | iva16@gmail.com | South Isobelberg | Inactive | $53.36 | |
| Johnny Hickle | clement_koelpin39@yahoo.com | Lake Dashawn | Inactive | $908.04 | |
| Elias Green | mallie26@hotmail.com | Bertworth | Active | $317.93 | |
| Claude Huels | clementina.gottlieb39@yahoo.com | Lake Cecileberg | Active | $245.36 | |
| Total | $2,306.25 | ||||
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 | |
|---|---|---|---|---|
| Alexander Ziemann | tate_greenfelder@gmail.com | Abbottmouth | Inactive | $230.82 |
| Kirk O'Conner Jr. | waylon14@gmail.com | Danielshire | Inactive | $727.84 |
| Cedric Lockman PhD | gerard_ryan@yahoo.com | O'Connellview | Active | $27.09 |
| Patricia Olson | lelah.walker40@hotmail.com | Lake Deonland | Inactive | $212.63 |
| Edna Durgan-Renner | aniya_price40@yahoo.com | Fontana | Active | $509.29 |
| Sabrina Wolff | eduardo46@hotmail.com | Pollichville | Active | $1,072.98 |
| Everett Jacobson | tomas.mann99@hotmail.com | New Jerodstead | Active | $305.86 |
| Kate Pouros | muriel38@yahoo.com | Port Alan | Active | $634.92 |
| Diane Kiehn | jaylon.mosciski70@yahoo.com | East Oscarfort | Active | $1,180.35 |
| Douglas Wuckert MD | jazmin13@gmail.com | Port Whitney | Active | $929.09 |
| Craig Berge | violet_rohan@yahoo.com | Jazmynland | Inactive | $1,134.82 |
| Casey Jerde | javonte.spencer85@yahoo.com | Rodriguezstead | Inactive | $438.82 |
| Donnie Konopelski-Herzog | jovan_gusikowski@gmail.com | West Wilma | Inactive | $151.30 |
| Vivian Will | missouri54@yahoo.com | Toyburgh | Inactive | $952.56 |
| Amelia Thompson | naomie.pagac@hotmail.com | Valdosta | Active | $403.01 |
| Total | $8,911.38 | |||
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 |