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 | $498.56 |
| INV002 | Paid | Bank Transfer | $889.76 |
| INV003 | Pending | PayPal | $377.45 |
| INV004 | Pending | PayPal | $390.76 |
| INV005 | Paid | PayPal | $782.55 |
| INV006 | Pending | PayPal | $948.48 |
| INV007 | Unpaid | Credit Card | $641.51 |
| Total | $4,529.07 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sienna Schamberger-Beatty | Forward Applications Technician | sienna.schamberger-beatty@yahoo.com | Viewer | |
| Gennaro Nitzsche | Legacy Markets Supervisor | gennaro.nitzsche@yahoo.com | Member | |
| Justina Larkin | Regional Interactions Agent | justina.larkin@yahoo.com | Viewer | |
| Cali Blick | Internal Markets Representative | cali_blick@yahoo.com | Member | |
| Lavina O'Conner | Global Group Architect | lavina.oconner@gmail.com | Viewer | |
| Connor Wuckert | Future Accountability Orchestrator | connor_wuckert70@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 |
|---|---|---|
Paula Beatty Chief Accounts Executive paula.beatty25@hotmail.com | Member | |
Wyatt Little Future Response Analyst wyatt_little@hotmail.com | Admin | |
Emory Kunze Regional Identity Supervisor emory_kunze@yahoo.com | Admin | |
Lucious Heathcote Product Integration Strategist lucious.heathcote@hotmail.com | Member | |
Gillian Graham Customer Tactics Coordinator gillian_graham62@hotmail.com | Viewer | |
Ashlee Kirlin Dynamic Quality Officer ashlee_kirlin@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Milan Prohaska District Functionality Manager milan_prohaska@gmail.com | Member | |
Elbert Gottlieb Product Group Liaison elbert_gottlieb@hotmail.com | Admin | |
Beth Hamill Regional Program Facilitator beth_hamill@hotmail.com | Member | |
Liliana Yundt Global Response Associate liliana_yundt91@hotmail.com | Admin | |
Laurie Abshire International Division Technician laurie_abshire@hotmail.com | Member | |
Ciara Huel Direct Configuration Producer ciara.huel40@hotmail.com | Viewer | |
Harmon Legros Customer Branding Coordinator harmon_legros87@gmail.com | Member | |
Una Yundt Customer Implementation Producer una_yundt@yahoo.com | Admin | |
Nicklaus Lockman-Koch Customer Creative Manager nicklaus.lockman-koch@yahoo.com | Admin | |
Marcus Ziemann Product Identity Officer marcus_ziemann@hotmail.com | Admin | |
Adah Goodwin International Metrics Liaison adah_goodwin@hotmail.com | Admin | |
Ludie Weissnat Lead Integration Planner ludie.weissnat@hotmail.com | Viewer | |
Isobel Stamm Global Response Liaison isobel_stamm@gmail.com | Admin | |
Rodrigo Goldner Legacy Directives Strategist rodrigo.goldner@yahoo.com | Admin | |
Pansy Quitzon Customer Identity Planner pansy_quitzon32@yahoo.com | Viewer | |
Maud Thompson Legacy Division Coordinator maud.thompson7@yahoo.com | Admin | |
Jaylan Bruen Global Accountability Analyst jaylan.bruen93@gmail.com | Member | |
Erna Considine Human Branding Director erna_considine8@gmail.com | Viewer | |
Dean Lindgren Regional Functionality Facilitator dean.lindgren27@hotmail.com | Member | |
Flossie Roob Principal Optimization Facilitator flossie.roob@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 | |
|---|---|---|---|---|
| Martha Connelly | gerson_tromp@hotmail.com | Jarenfurt | Active | $882.33 |
| Judy Kilback-Kertzmann | flavio_walker@gmail.com | Port Shayna | Inactive | $1,073.08 |
| Kent Kiehn | nikita.quitzon@yahoo.com | Clotildeborough | Inactive | $965.88 |
| Casey Hirthe | helen17@yahoo.com | Ariview | Inactive | $1,058.58 |
| Jana Pfannerstill | aimee_cartwright6@hotmail.com | Napa | Active | $607.12 |
| Total | $4,586.99 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kent Rosenbaum @freeman86 | bette.nienow11@yahoo.com | Fort Lori | Inactive | $185.79 |
Lula Pagac @yoshiko.harvey | shanelle.schoen@gmail.com | North Stefanshire | Inactive | $98.32 |
Oscar Terry @josue4 | reta18@yahoo.com | Port Alysa | Active | $433.66 |
Ms. June Carroll @quinton_carter | stacey.lubowitz@gmail.com | Warwick | Active | $916.43 |
Jimmie Senger @clara31 | berenice.hand@hotmail.com | Hermistonboro | Active | $774.39 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jaime Runolfsson | jamaal_sporer@hotmail.com | Dixieborough | Active | $1,067.99 |
| Moses Roberts | weston_hayes@hotmail.com | Leopoldport | Inactive | $337.92 |
| Andy Roberts | oral_von@hotmail.com | Maziefurt | Inactive | $414.20 |
| Olive Jaskolski-Adams | garnet_steuber12@hotmail.com | West Samsonworth | Active | $627.07 |
| Amy Hoppe | tracy98@yahoo.com | Ivahchester | Active | $240.58 |
| Total | $2,687.76 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gladys Kshlerin | mafalda.hudson@hotmail.com | South Evelynborough | Active | $333.10 |
| Wilbur Mante | jedediah.lubowitz@hotmail.com | Cliftonworth | Inactive | $425.05 |
| Nicole Bailey | natalie99@yahoo.com | Peoria | Active | $899.43 |
| Elizabeth Doyle | dorothea17@gmail.com | Seattle | Inactive | $802.09 |
| Vincent Lynch | janae_okeefe@gmail.com | Mosciskiport | Inactive | $618.76 |
| Total | $3,078.43 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leroy Bashirian | misty26@gmail.com | Trantowland | Inactive | $296.49 |
| Bonnie Crist | chanel70@gmail.com | East Kenneth | Inactive | $1,068.99 |
| Regina Dibbert | aliza68@gmail.com | Fort Rogersland | Active | $843.03 |
| Gustavo Jacobi | michaela_pfannerstill66@hotmail.com | Hettingerstad | Active | $842.91 |
| Andrew Cummings | eldred.trantow30@hotmail.com | Port Kane | Active | $412.86 |
| Total | $3,464.28 | |||
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 | ||
|---|---|---|---|---|---|
| Jason Hills Sr. | arianna.rosenbaum28@yahoo.com | Hartmanntown | Active | $846.92 | |
| Darren Bednar | fiona21@yahoo.com | North Marcellaville | Active | $50.29 | |
| Mrs. Jennie Wintheiser | liliane_mante@hotmail.com | North Mozellcester | Inactive | $650.34 | |
| Levi Strosin | rosella7@yahoo.com | Satterfieldside | Inactive | $124.84 | |
| Ignacio Pfeffer | sylvia.marquardt61@hotmail.com | Bowie | Inactive | $893.04 | |
| Total | $2,565.43 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Norman Terry | pedro.graham-rogahn21@gmail.com | Jeanstead | Inactive | $271.14 | |
| Pearl Marquardt | marques.lindgren@gmail.com | St. Clair Shores | Inactive | $1,054.13 | |
| Tomas Cronin | tiara1@gmail.com | Danville | Active | $481.68 | |
| Martha Brown | nettie91@hotmail.com | St. Petersburg | Inactive | $511.35 | |
| Eddie Goodwin | jennifer.hickle-nitzsche@gmail.com | North Lauren | Active | $487.20 | |
| Total | $2,805.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 | |
|---|---|---|---|---|
| Dr. Jimmie Goyette | claud_bashirian80@hotmail.com | Perris | Inactive | $473.40 |
| Wilbert Fahey | gisselle_schowalter75@yahoo.com | Hodkiewiczland | Active | $66.72 |
| Jackie O'Hara | eloy_toy@hotmail.com | West Kathryneside | Inactive | $225.55 |
| Richard Williamson | haven.pfannerstill76@hotmail.com | North Kayliberg | Inactive | $25.13 |
| Maureen O'Connell | josh58@yahoo.com | Boscoborough | Active | $1,034.36 |
| Tara Hessel | pierre99@hotmail.com | East Darrionchester | Active | $332.39 |
| Flora Glover DDS | denis66@hotmail.com | Kertzmannshire | Active | $1,023.06 |
| Olivia Crooks | adrianna.ledner@gmail.com | Fort Paoloworth | Inactive | $410.63 |
| Andrew Friesen | maeve_okeefe@yahoo.com | Highland | Inactive | $132.46 |
| Gertrude Gerhold | loren10@gmail.com | West Maurine | Active | $377.90 |
| Steven Ferry | elfrieda.cormier31@hotmail.com | San Clemente | Inactive | $455.12 |
| Margie Larson | oscar_bahringer@yahoo.com | New Macstad | Active | $980.89 |
| Nadine Beier | marques_deckow@gmail.com | South Ramiro | Active | $394.33 |
| Kent Schultz | arch91@yahoo.com | Collierchester | Inactive | $101.20 |
| Rochelle Torp | dorthy7@hotmail.com | Melodyboro | Active | $1,015.76 |
| Total | $7,048.90 | |||
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 |