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 | $286.99 |
| INV002 | Unpaid | Credit Card | $860.99 |
| INV003 | Paid | PayPal | $492.15 |
| INV004 | Pending | Credit Card | $561.68 |
| INV005 | Unpaid | Bank Transfer | $903.78 |
| INV006 | Unpaid | Credit Card | $996.04 |
| INV007 | Pending | PayPal | $947.77 |
| Total | $5,049.40 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sheri Smith | International Metrics Technician | sheri.smith60@hotmail.com | Member | |
| Dedric Rosenbaum-Paucek | Lead Mobility Assistant | dedric_rosenbaum-paucek88@hotmail.com | Admin | |
| Eldridge Gottlieb | Dynamic Usability Engineer | eldridge_gottlieb@yahoo.com | Member | |
| Eda Larkin | Product Usability Assistant | eda.larkin69@gmail.com | Member | |
| Brice Olson | Principal Infrastructure Representative | brice_olson67@hotmail.com | Member | |
| Reanna Abernathy | Customer Applications Specialist | reanna.abernathy70@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 |
|---|---|---|
Marta Larson Internal Directives Assistant marta_larson2@hotmail.com | Admin | |
Gwen Mann Central Operations Producer gwen.mann46@yahoo.com | Admin | |
Wesley Harber Legacy Creative Agent wesley.harber32@yahoo.com | Admin | |
Reese Kreiger Dynamic Accountability Specialist reese.kreiger93@yahoo.com | Viewer | |
Era Tromp Legacy Research Supervisor era_tromp@hotmail.com | Member | |
Kristine Huels Product Accounts Assistant kristine.huels@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 |
|---|---|---|
Hugh Williamson Global Implementation Strategist hugh_williamson84@yahoo.com | Viewer | |
Rebecca Macejkovic District Operations Coordinator rebecca.macejkovic@yahoo.com | Viewer | |
Evelyn Jerde Human Security Executive evelyn_jerde@hotmail.com | Viewer | |
Antoinette Toy Forward Creative Representative antoinette.toy5@yahoo.com | Admin | |
Julian Krajcik International Quality Representative julian_krajcik@gmail.com | Viewer | |
Paige Shields Regional Interactions Representative paige_shields@gmail.com | Admin | |
Dora Dare Internal Operations Liaison dora_dare75@hotmail.com | Member | |
Marguerite Frami Central Tactics Assistant marguerite_frami@gmail.com | Member | |
Faye O'Conner Internal Data Manager faye_oconner21@gmail.com | Viewer | |
Theresa Rolfson Customer Interactions Coordinator theresa.rolfson@yahoo.com | Member | |
Kristie Altenwerth Central Group Assistant kristie_altenwerth93@yahoo.com | Member | |
Andrea Okuneva Global Accounts Associate andrea_okuneva@gmail.com | Viewer | |
Judith Ondricka International Configuration Specialist judith_ondricka@yahoo.com | Viewer | |
Bud Russel Legacy Division Producer bud.russel@gmail.com | Viewer | |
Dale Wolff Future Markets Analyst dale_wolff39@yahoo.com | Viewer | |
Julian Considine Central Integration Planner julian_considine@hotmail.com | Admin | |
Oscar Wuckert Senior Infrastructure Consultant oscar.wuckert@gmail.com | Viewer | |
Deon Wilderman Corporate Solutions Engineer deon.wilderman18@yahoo.com | Viewer | |
Alessia Prosacco Dynamic Creative Producer alessia_prosacco@yahoo.com | Admin | |
Zaria Tremblay Customer Brand Manager zaria_tremblay52@gmail.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 | |
|---|---|---|---|---|
| Charlene Dicki | talon41@yahoo.com | Alpharetta | Active | $1,171.31 |
| Madisyn Homenick | tomas16@gmail.com | West Ahmad | Active | $219.72 |
| Jamel Rice | magnolia7@gmail.com | Murraybury | Inactive | $1,122.20 |
| Annie Bruen | belinda85@yahoo.com | West Annabelleboro | Active | $890.10 |
| Hailey Wiza | brook.mills57@gmail.com | Lake Johnny | Inactive | $925.55 |
| Total | $4,328.88 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Carolyne Mosciski @sadye30 | ian.white28@hotmail.com | Leuschke-Ritchiehaven | Active | $618.15 |
Melanie Swift @rahul.armstrong18 | alejandro_klocko38@gmail.com | Farrellchester | Inactive | $1,009.28 |
Keith Abbott MD @mark35 | juwan_cruickshank@hotmail.com | Veumchester | Inactive | $108.66 |
Marianne Harris @nelson_greenholt89 | beatrice17@gmail.com | Southfield | Inactive | $7.73 |
Geoffrey Rodriguez @robert75 | lora.prohaska@hotmail.com | Lutherport | Active | $98.67 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tremaine Heaney | paula.goldner90@gmail.com | Mattieberg | Active | $730.07 |
| Yvette Erdman | pat58@hotmail.com | Wymancester | Active | $943.81 |
| Mr. Keshaun Bogan | hellen.brakus@hotmail.com | Pinellas Park | Active | $129.40 |
| Burdette Ziemann | brice_hyatt@hotmail.com | Freeport | Inactive | $718.58 |
| Mr. Caterina Conn | maddison39@yahoo.com | Stokesshire | Inactive | $836.31 |
| Total | $3,358.17 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roman Strosin | frederic21@yahoo.com | Cathrineshire | Inactive | $469.61 |
| Ethel McDermott | myrtis.tremblay@gmail.com | Lake Sashabury | Inactive | $703.47 |
| Adrienne Stroman Sr. | nigel44@hotmail.com | Port Cindy | Active | $333.69 |
| Casey Hane V | annabell.miller86@hotmail.com | Olgahaven | Inactive | $574.64 |
| Beulah Mueller | gonzalo52@gmail.com | Lake Randolph | Inactive | $469.79 |
| Total | $2,551.20 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Adriel Lockman II | nathan.weber-schuster36@gmail.com | East Ross | Active | $697.08 |
| Manuel Heidenreich DVM | marion.hilll4@yahoo.com | Gutmannchester | Inactive | $617.45 |
| Edna Considine | sean17@yahoo.com | Hoppeshire | Active | $80.07 |
| Lindsey Ratke | benny_rippin@yahoo.com | Marjorieburgh | Inactive | $643.36 |
| Scottie Thiel | kristi26@yahoo.com | Port Cloyd | Active | $894.11 |
| Total | $2,932.07 | |||
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 | ||
|---|---|---|---|---|---|
| Moses Ward | milo65@gmail.com | Daytona Beach | Active | $1,069.44 | |
| Marian Wilkinson III | billy_balistreri@hotmail.com | Brookline | Active | $201.23 | |
| Tina Grant | paulette_cummings75@yahoo.com | North Stephenburgh | Active | $434.79 | |
| Randal Kilback III | anthony67@hotmail.com | West Myra | Inactive | $223.98 | |
| Eileen Jast | christine.vonrueden37@yahoo.com | South Madalineshire | Inactive | $1,084.48 | |
| Total | $3,013.92 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Adell Hyatt | brittany.gottlieb@gmail.com | Lake Lynneworth | Inactive | $19.18 | |
| Jammie Wintheiser | clyde64@gmail.com | East Christineshire | Active | $49.76 | |
| Dr. Vera Jenkins | lily9@gmail.com | Port Jon | Inactive | $653.24 | |
| Percy Hermann | sadie93@yahoo.com | Jamesfurt | Active | $1,187.73 | |
| Jorge Kub | kevin11@gmail.com | Harrisburg | Inactive | $1,128.42 | |
| Total | $3,038.33 | ||||
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 | |
|---|---|---|---|---|
| Jack Senger | lamar.bradtke33@yahoo.com | Lednerborough | Inactive | $203.29 |
| Mr. Serena Greenfelder | leroy86@gmail.com | Bountiful | Active | $634.73 |
| Kurtis McClure | louise_hoppe47@yahoo.com | Lake Pearline | Active | $338.86 |
| Harriet Haley | tommie_friesen@yahoo.com | Bozeman | Active | $369.28 |
| Halie Rogahn | tabitha71@gmail.com | Port Velmastead | Active | $920.38 |
| Cathy O'Conner | nathanael26@hotmail.com | Port Maud | Inactive | $732.49 |
| Mrs. Sharon Schaefer | katrina_smitham54@hotmail.com | Country Club | Active | $658.73 |
| Geraldine Rodriguez | brooks_bergstrom@hotmail.com | New Bryant | Inactive | $344.13 |
| Karson Weissnat-Barton | paul0@gmail.com | Kaylahboro | Inactive | $496.85 |
| Frederik Littel | norbert92@gmail.com | Lake Tyroneport | Active | $717.94 |
| Erick Jacobs | pedro_hills78@gmail.com | Ratketon | Inactive | $1,161.49 |
| Miss Darlene Schulist | luz_rosenbaum-schiller83@gmail.com | Reichelfort | Inactive | $661.19 |
| Coleman Dietrich III | loyal.oconnell@yahoo.com | Kariport | Active | $769.61 |
| Darryl Conroy | maddison_wuckert9@yahoo.com | Pomona | Inactive | $571.17 |
| Nathan Reilly V | yvette_kovacek@hotmail.com | Ankeny | Inactive | $422.87 |
| Total | $9,003.01 | |||
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 |