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 | Bank Transfer | $777.23 |
| INV002 | Pending | Credit Card | $751.63 |
| INV003 | Pending | Bank Transfer | $687.26 |
| INV004 | Paid | Bank Transfer | $883.78 |
| INV005 | Pending | Credit Card | $839.97 |
| INV006 | Paid | PayPal | $487.06 |
| INV007 | Paid | PayPal | $526.69 |
| Total | $4,953.62 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Marie Toy | Central Functionality Engineer | marie_toy97@gmail.com | Member | |
| Gerald Howell | Product Communications Architect | gerald_howell@gmail.com | Member | |
| Eloisa Bogisich | Product Functionality Liaison | eloisa_bogisich@yahoo.com | Member | |
| Foster Kohler | District Security Liaison | foster.kohler25@gmail.com | Viewer | |
| Amara Murazik | Chief Response Producer | amara.murazik29@gmail.com | Member | |
| Franz Ernser | Corporate Usability Analyst | franz.ernser66@gmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Michale Reichel-Kassulke Product Factors Designer michale_reichel-kassulke@gmail.com | Admin | |
Emily Cummerata Future Accounts Engineer emily_cummerata@hotmail.com | Admin | |
Jeff King Global Markets Assistant jeff_king26@gmail.com | Viewer | |
Gabrielle Oberbrunner Internal Group Executive gabrielle.oberbrunner@yahoo.com | Member | |
Lawrence Renner Human Directives Director lawrence_renner@yahoo.com | Admin | |
Art Cremin Forward Optimization Assistant art.cremin22@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Evie Emard Senior Creative Supervisor evie_emard65@hotmail.com | Admin | |
Sabina Hagenes District Assurance Coordinator sabina.hagenes@yahoo.com | Viewer | |
Colten Stiedemann Investor Optimization Facilitator colten.stiedemann@gmail.com | Viewer | |
Kamryn Robel International Factors Coordinator kamryn_robel63@yahoo.com | Viewer | |
Clair Aufderhar Regional Infrastructure Agent clair.aufderhar@hotmail.com | Member | |
Elsie MacGyver Dynamic Interactions Assistant elsie_macgyver@hotmail.com | Viewer | |
Reuben Halvorson Legacy Accountability Supervisor reuben_halvorson53@gmail.com | Member | |
Lenora Cassin Internal Usability Orchestrator lenora_cassin20@yahoo.com | Viewer | |
Colby Ratke Central Group Planner colby_ratke46@yahoo.com | Viewer | |
Marietta Erdman Customer Directives Director marietta.erdman@hotmail.com | Admin | |
Helene Kertzmann International Usability Technician helene.kertzmann@hotmail.com | Admin | |
Leola Frami Forward Tactics Strategist leola_frami@yahoo.com | Member | |
Trever Hoppe Lead Mobility Associate trever.hoppe13@hotmail.com | Viewer | |
Amparo Roob International Interactions Analyst amparo.roob@hotmail.com | Member | |
Jarvis Runolfsdottir Chief Markets Liaison jarvis.runolfsdottir38@gmail.com | Admin | |
Jesus Gerhold Future Data Supervisor jesus.gerhold@hotmail.com | Member | |
Carroll Yundt Senior Division Strategist carroll_yundt15@gmail.com | Viewer | |
Amie Goyette Investor Division Manager amie.goyette65@hotmail.com | Member | |
Delaney Kohler Internal Infrastructure Producer delaney.kohler@gmail.com | Member | |
Leola Fisher Central Operations Assistant leola.fisher@yahoo.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 | |
|---|---|---|---|---|
| Lucas Lueilwitz | clemens.hand64@yahoo.com | East Jovan | Inactive | $176.54 |
| Mr. Wilbur Lebsack | hassie71@hotmail.com | Anchorage | Active | $110.03 |
| Cindy Bogan | ulises54@gmail.com | Coconut Creek | Inactive | $45.86 |
| Gretchen Hagenes | karli_steuber53@yahoo.com | Norman | Active | $153.89 |
| Rex Lind | renee33@hotmail.com | Port Johan | Inactive | $1,033.71 |
| Total | $1,520.03 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Maurice Lubowitz I @adolfo62 | martin.oconnell39@yahoo.com | Atascocita | Inactive | $236.95 |
Helen Friesen @kasandra_parker63 | alycia.schulist-monahan53@yahoo.com | Fort Kiarra | Inactive | $571.66 |
Rosemary Feeney @emilie23 | alva4@gmail.com | Baumbachfort | Inactive | $1,174.34 |
Tina Legros @wilmer49 | abbigail_schaden@yahoo.com | New Luz | Inactive | $327.61 |
Marianne Hammes @darren.flatley | margarete61@gmail.com | Durganside | Active | $428.87 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jason Crist | vella_berge@gmail.com | Orem | Inactive | $703.15 |
| Esther Metz IV | jett.brekke@yahoo.com | Ullrichville | Inactive | $270.68 |
| Craig Schoen III | ida.powlowski@hotmail.com | South Maxbury | Active | $922.58 |
| Edmund Ritchie | addie66@yahoo.com | North Carol | Inactive | $297.89 |
| Faith Weissnat | nickolas0@gmail.com | South Tiffanyburgh | Inactive | $169.07 |
| Total | $2,363.37 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Matt Koch | hillard70@hotmail.com | Bergehaven | Inactive | $765.88 |
| Delores Kertzmann | eliezer24@hotmail.com | Lexusmouth | Active | $16.19 |
| Wendell Will PhD | sage51@yahoo.com | Jacyntheburgh | Inactive | $590.02 |
| Meredith Hayes | aaron_kerluke13@hotmail.com | East Santaburgh | Inactive | $862.73 |
| Garry Harvey | leone_daugherty@hotmail.com | Seattle | Active | $178.29 |
| Total | $2,413.11 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeffery Olson | alvena95@hotmail.com | Lake Milanside | Active | $731.89 |
| Lonnie Spencer | ruben.mills38@yahoo.com | Fort Brandt | Active | $634.96 |
| Lewis Hartmann | dashawn.lubowitz83@gmail.com | Rahulborough | Active | $721.61 |
| Stacy Stark | marilie.torphy@hotmail.com | Fort Cristobal | Inactive | $292.12 |
| Kimberly Thiel | karianne50@gmail.com | Handbury | Active | $396.07 |
| Total | $2,776.65 | |||
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 | ||
|---|---|---|---|---|---|
| Geoffrey Block-Flatley | tristin37@gmail.com | South Carletonchester | Inactive | $209.43 | |
| Taylor Abbott | annetta_romaguera@hotmail.com | South Rudy | Active | $589.83 | |
| Phil Bednar | giovanni_hayes49@hotmail.com | Bernieberg | Inactive | $180.94 | |
| Lana Mosciski-Reinger I | jeffery_cremin3@hotmail.com | Lake Norene | Active | $711.24 | |
| Juanita Zemlak | percy60@gmail.com | Murazikside | Inactive | $808.87 | |
| Total | $2,500.31 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Beverly Kuvalis | garnet24@yahoo.com | Fort Gabetown | Inactive | $279.50 | |
| Teri Goodwin | dahlia67@hotmail.com | Mesa | Active | $688.18 | |
| Shelly Gulgowski | liana.padberg@gmail.com | McDermotthaven | Inactive | $431.44 | |
| David Rutherford Jr. | aiyana.von@yahoo.com | East Abbybury | Active | $122.14 | |
| Miss Rachel Goodwin | cathy.jacobson36@hotmail.com | Hartmannstead | Active | $547.22 | |
| Total | $2,068.48 | ||||
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 | |
|---|---|---|---|---|
| Violet Schulist | alexys.gutmann9@yahoo.com | South Lesly | Inactive | $537.37 |
| Mr. Dwight Kreiger I | crystal_stanton@gmail.com | Rohanton | Inactive | $739.57 |
| Moses Wiegand | mona49@yahoo.com | Schoenchester | Inactive | $31.26 |
| Constance Christiansen | berniece_schulist38@gmail.com | New Idastad | Inactive | $662.58 |
| Alma Harvey | tobin.douglas@gmail.com | Robelfort | Active | $895.34 |
| Mrs. Tonya Schmitt | destini.wiegand@hotmail.com | South Torrance | Inactive | $86.53 |
| Mr. Paul Maggio | rashad0@gmail.com | North Nina | Inactive | $868.55 |
| Angel Stanton | ferne12@hotmail.com | Myrnaburgh | Inactive | $500.47 |
| Clyde Ward | dewayne_schneider79@yahoo.com | Klinghaven | Inactive | $592.56 |
| Edwin Mraz | jorge.abbott@hotmail.com | West Blazeshire | Active | $51.01 |
| Esther Schaden | ottilie53@yahoo.com | West Santinoborough | Inactive | $213.51 |
| Dr. Cedric Gleason | isidro.cormier99@yahoo.com | Port Michalefield | Active | $447.37 |
| Rolando Bergstrom | chadd.krajcik41@gmail.com | Sauerchester | Inactive | $886.78 |
| Devin Hammes | tremayne23@yahoo.com | Fort Brookebury | Inactive | $373.81 |
| Miss Inez Heidenreich | christy_kilback6@hotmail.com | Kenyachester | Active | $1,079.45 |
| Total | $7,966.16 | |||
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 |