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 | $634.95 |
| INV002 | Unpaid | PayPal | $600.06 |
| INV003 | Paid | Bank Transfer | $102.82 |
| INV004 | Unpaid | Credit Card | $192.27 |
| INV005 | Pending | Bank Transfer | $874.07 |
| INV006 | Unpaid | PayPal | $361.47 |
| INV007 | Unpaid | PayPal | $183.10 |
| Total | $2,948.74 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Marty Kling | Senior Accounts Facilitator | marty_kling@gmail.com | Viewer | |
| Lillian Mohr | Forward Paradigm Technician | lillian.mohr@hotmail.com | Viewer | |
| Clyde Harris | Dynamic Tactics Producer | clyde_harris38@gmail.com | Admin | |
| Virginia Zboncak | Customer Web Administrator | virginia_zboncak72@gmail.com | Member | |
| Reginald Blick | National Data Associate | reginald_blick@hotmail.com | Member | |
| Claire Harvey | Future Accountability Assistant | claire_harvey71@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 |
|---|---|---|
Gretchen Mills Regional Solutions Manager gretchen_mills14@gmail.com | Viewer | |
Clint Schmitt Lead Factors Coordinator clint_schmitt@hotmail.com | Viewer | |
Jacqueline Okuneva Regional Infrastructure Orchestrator jacqueline.okuneva18@yahoo.com | Viewer | |
Taurean Champlin District Data Designer taurean.champlin@hotmail.com | Viewer | |
Maggie McGlynn Central Implementation Agent maggie_mcglynn@gmail.com | Member | |
Idell Walsh Investor Division Specialist idell.walsh42@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Francisco Schneider Future Research Administrator francisco_schneider1@yahoo.com | Member | |
Miguel Douglas District Operations Representative miguel.douglas45@yahoo.com | Admin | |
Ezra Fadel Senior Web Specialist ezra_fadel97@gmail.com | Member | |
Rhianna Hermiston Chief Applications Agent rhianna.hermiston0@hotmail.com | Admin | |
Latoya Gutmann Investor Paradigm Technician latoya_gutmann93@hotmail.com | Admin | |
Marjorie Zemlak Corporate Accountability Agent marjorie.zemlak@yahoo.com | Viewer | |
Javier Rippin Central Creative Producer javier_rippin9@yahoo.com | Viewer | |
Delores Oberbrunner Regional Response Developer delores_oberbrunner@hotmail.com | Admin | |
Troy Carter-Emard Forward Research Facilitator troy.carter-emard@gmail.com | Admin | |
Armand Yundt Principal Identity Supervisor armand.yundt42@gmail.com | Admin | |
Ariane Dooley Legacy Functionality Developer ariane.dooley@gmail.com | Admin | |
Isaac Littel Investor Usability Strategist isaac.littel@yahoo.com | Admin | |
Carol Osinski Investor Interactions Assistant carol.osinski19@yahoo.com | Viewer | |
Carolina Sawayn Product Group Executive carolina.sawayn67@yahoo.com | Viewer | |
Dalton Romaguera Customer Metrics Planner dalton.romaguera@hotmail.com | Viewer | |
Madeline Hoeger Principal Markets Supervisor madeline.hoeger@hotmail.com | Viewer | |
Maude Goodwin Customer Marketing Producer maude.goodwin54@gmail.com | Viewer | |
Raymond Schmidt Future Integration Architect raymond.schmidt@hotmail.com | Viewer | |
Lloyd Botsford Principal Division Associate lloyd_botsford82@yahoo.com | Viewer | |
Rita Hammes Central Functionality Planner rita.hammes99@hotmail.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 | |
|---|---|---|---|---|
| Napoleon Hegmann | brendan.connelly40@yahoo.com | Maddisonside | Inactive | $19.30 |
| Sammie Monahan | shayne92@gmail.com | Cristalhaven | Active | $387.56 |
| Noble McCullough DVM | harvey24@hotmail.com | Camrynstead | Active | $344.03 |
| Ruth Hahn | rudolph41@yahoo.com | Fort Filomena | Inactive | $565.87 |
| Roderick Jenkins | hilda.kunde@hotmail.com | West Zachariah | Active | $1,133.99 |
| Total | $2,450.75 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Nona Sipes @adam27 | kirk95@gmail.com | Margretborough | Active | $88.87 |
Mr. Nick Hoppe @ericka.wisoky | bette.homenick95@yahoo.com | New Esthercester | Active | $541.28 |
Craig Wolf @agustina77 | alberto81@gmail.com | Vicenteland | Inactive | $950.04 |
Roxanne Green @sadie58 | kyle_bechtelar-kreiger55@hotmail.com | Los Angeles | Inactive | $193.28 |
Westley Moore @myra.ortiz-weimann87 | shelia.morissette4@yahoo.com | Hampton | Inactive | $248.43 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Benjamin Dickens | tiffany_parisian12@hotmail.com | Fort Abdullah | Active | $944.11 |
| Davonte Hand | carmela.heller89@yahoo.com | Montebello | Inactive | $1,192.48 |
| Cynthia Heaney I | doreen.ryan@hotmail.com | Thielton | Active | $568.41 |
| Laverne Conn | steven.harvey32@gmail.com | Evelynville | Active | $737.99 |
| Joey Miller | dustin_jerde28@yahoo.com | Port Margarita | Inactive | $536.67 |
| Total | $3,979.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Eric Dickens | billy.mayert8@gmail.com | Port Renee | Inactive | $100.88 |
| Oliver Maggio | donnie35@yahoo.com | Stammport | Active | $12.87 |
| Taylor O'Connell | florencio.kemmer@gmail.com | Boston | Inactive | $1,072.43 |
| Kelvin Stehr | earnest_friesen-koss@hotmail.com | Raynorside | Active | $907.38 |
| Beth Doyle | joey_bashirian76@hotmail.com | North Kristinabury | Inactive | $1,068.05 |
| Total | $3,161.61 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Salvador Graham | elias.christiansen93@yahoo.com | Lake Marcelinaberg | Active | $425.03 |
| Gladys Olson | clark64@hotmail.com | North Flavie | Inactive | $885.73 |
| Tomas Kautzer | nicolas41@hotmail.com | Dangeloshire | Active | $1,179.01 |
| Roscoe Hartmann | jimmy20@gmail.com | Port Davonte | Active | $1,159.18 |
| Edith Klocko I | keon61@gmail.com | West Naomie | Active | $980.26 |
| Total | $4,629.21 | |||
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 | ||
|---|---|---|---|---|---|
| Ray Stanton | angel.sanford66@gmail.com | St. Peters | Inactive | $312.09 | |
| Theresa Stoltenberg | quincy.olson41@yahoo.com | Schummfield | Inactive | $629.43 | |
| Daisy Lindgren-Schuppe | naomie3@yahoo.com | Marcelinoworth | Inactive | $524.87 | |
| Miss Idell Schuster | tiffany37@gmail.com | West Domenick | Inactive | $171.22 | |
| Chelsea Rosenbaum | karla_adams@hotmail.com | Tampa | Active | $609.06 | |
| Total | $2,246.67 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ross Effertz | moses11@gmail.com | Lake Heather | Active | $807.99 | |
| Columbus Sporer MD | winston99@yahoo.com | Delphinestad | Active | $807.33 | |
| Dr. Guillermo Abernathy | adriel_wyman@yahoo.com | Sterling Heights | Active | $1,186.28 | |
| Joanna Huels | adrain.sauer@gmail.com | Lake Roslyn | Inactive | $1,112.98 | |
| Johnny Stanton | vivian.greenholt63@yahoo.com | Taylorsville | Active | $443.16 | |
| Total | $4,357.74 | ||||
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 | |
|---|---|---|---|---|
| Cassidy Baumbach | geovanni91@hotmail.com | Lake Sammy | Active | $145.86 |
| Freddie Carroll | noelia_monahan95@hotmail.com | Francescocester | Active | $834.42 |
| Colin Kautzer-Monahan | celine.cassin@yahoo.com | Portsmouth | Active | $428.93 |
| Gregoria Reichert | foster10@gmail.com | Port Darion | Inactive | $543.60 |
| Christopher Cummings | kathlyn.breitenberg@gmail.com | Fort Adelle | Inactive | $432.97 |
| Manuel Okuneva | jody.quitzon@hotmail.com | Fort Reynafurt | Active | $894.60 |
| Mariah Pfannerstill PhD | scottie_gulgowski81@yahoo.com | Ralphport | Inactive | $103.95 |
| Ms. Lillie Carroll | marley44@hotmail.com | Zackarystad | Inactive | $300.42 |
| Edna Block | clair_pfeffer59@hotmail.com | Wisokychester | Active | $1,148.44 |
| River Dickens | dayna83@gmail.com | South Hayleyton | Inactive | $1,077.91 |
| Stephany Schaefer | terrence_effertz9@yahoo.com | South Gustshire | Active | $185.40 |
| Sonja Jaskolski | cora86@yahoo.com | West Whitney | Inactive | $124.56 |
| Aylin Kerluke | brent_wiegand4@yahoo.com | New Donna | Inactive | $12.96 |
| Ismael Reichel | blaze_stracke@gmail.com | North Jedidiahside | Inactive | $673.75 |
| Gilberto Wintheiser PhD | sidney51@gmail.com | West Candida | Inactive | $1,159.01 |
| Total | $8,066.78 | |||
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 |