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
npx ui-thing@latest add table
Usage
Basic example
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Unpaid | PayPal | $710.08 |
| INV002 | Paid | PayPal | $975.04 |
| INV003 | Paid | PayPal | $244.87 |
| INV004 | Pending | Bank Transfer | $650.71 |
| INV005 | Paid | PayPal | $586.08 |
| INV006 | Pending | PayPal | $970.03 |
| INV007 | Unpaid | Credit Card | $558.59 |
| Total | $4,695.40 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Roger Klocko | Human Usability Technician | roger.klocko71@hotmail.com | Admin | |
| Mable Green | Corporate Quality Manager | mable_green57@gmail.com | Member | |
| Kobe Hammes | Future Creative Engineer | kobe.hammes93@gmail.com | Admin | |
| Hester Johnson | Senior Division Designer | hester.johnson@yahoo.com | Viewer | |
| Rubie Rolfson | Legacy Tactics Analyst | rubie.rolfson73@yahoo.com | Member | |
| Javonte Baumbach | International Program Designer | javonte_baumbach@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 |
|---|---|---|
Tierra Funk Central Security Agent tierra_funk62@hotmail.com | Admin | |
Rhianna Moen Principal Markets Facilitator rhianna_moen36@yahoo.com | Admin | |
Patsy Kris Investor Identity Assistant patsy_kris76@yahoo.com | Viewer | |
Christelle Yundt Product Operations Officer christelle_yundt99@hotmail.com | Member | |
Alene Waters-Kuphal Regional Communications Director alene_waters-kuphal21@yahoo.com | Member | |
Brayan Homenick Investor Accountability Engineer brayan.homenick21@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 |
|---|---|---|
Carter Goldner Central Branding Technician carter_goldner29@yahoo.com | Member | |
Reynold Stamm Forward Accountability Architect reynold_stamm@hotmail.com | Member | |
Abbey Kuhlman Central Response Coordinator abbey.kuhlman@gmail.com | Viewer | |
Marge Hamill Legacy Creative Associate marge_hamill@hotmail.com | Member | |
Athena Wuckert Regional Identity Technician athena.wuckert@gmail.com | Admin | |
April Gulgowski Global Security Director april.gulgowski@yahoo.com | Member | |
Immanuel Schaden Legacy Usability Representative immanuel.schaden5@yahoo.com | Member | |
Torey Haley Future Metrics Liaison torey_haley@hotmail.com | Admin | |
Lacey Schaefer Corporate Web Strategist lacey.schaefer@hotmail.com | Admin | |
Adelbert Terry Corporate Mobility Designer adelbert.terry31@hotmail.com | Admin | |
Theodore Lemke National Accountability Consultant theodore.lemke37@hotmail.com | Viewer | |
Brooklyn Schowalter Internal Applications Assistant brooklyn.schowalter40@hotmail.com | Member | |
Daron Pfeffer Regional Markets Engineer daron.pfeffer34@gmail.com | Viewer | |
Roman Beahan Internal Factors Supervisor roman_beahan30@yahoo.com | Member | |
Shawna Mitchell Dynamic Functionality Orchestrator shawna_mitchell@gmail.com | Member | |
Axel Marks-Jenkins Central Accountability Designer axel.marks-jenkins@gmail.com | Viewer | |
Brook Kuphal-Rohan Lead Applications Strategist brook_kuphal-rohan26@yahoo.com | Member | |
Susie Hickle Product Factors Technician susie.hickle@yahoo.com | Admin | |
Mason Kling Regional Marketing Agent mason_kling@hotmail.com | Admin | |
Timothy Bruen Global Factors Supervisor timothy_bruen@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 | |
|---|---|---|---|---|
| Dr. Ben Hayes | bella_kiehn@hotmail.com | Port Ida | Active | $706.24 |
| Freda Lubowitz | rebekah.wehner28@hotmail.com | Pawtucket | Inactive | $614.01 |
| Cedric Kerluke | olga.gislason@hotmail.com | North Brigitte | Active | $1,104.11 |
| Dawn Goyette | agnes_breitenberg@hotmail.com | Kaciefort | Inactive | $433.18 |
| Donald Schultz | matilda.jaskolski79@hotmail.com | Arden-Arcade | Active | $1,166.87 |
| Total | $4,024.41 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lora Kassulke MD @domenic.nicolas41 | eloisa_emmerich@yahoo.com | Volkmanboro | Inactive | $256.73 |
Rosa Howe @angelita_mohr83 | bonita.mitchell@yahoo.com | Fort Estellaside | Inactive | $665.10 |
Ashley Bruen @trace_kuvalis87 | ursula34@gmail.com | Lake Dejahview | Inactive | $415.47 |
Hazel Maggio @luz10 | stevie63@yahoo.com | Alpharetta | Inactive | $391.07 |
Wilma Heaney-Russel @moriah_mayert58 | mylene23@gmail.com | Ziemannport | Inactive | $985.75 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gloria Green | emely36@gmail.com | Independence | Active | $39.96 |
| Stanley Little | reuben76@hotmail.com | Riceton | Active | $16.83 |
| Deanna Bosco | easton2@yahoo.com | West Garnettfield | Active | $410.01 |
| Sherri Carter | kylie.kohler33@gmail.com | Boganboro | Active | $679.88 |
| Ivan Ritchie | reina32@yahoo.com | Renestad | Inactive | $302.52 |
| Total | $1,449.20 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bridget Cruickshank | derrick.dare@gmail.com | West Tomasbury | Inactive | $665.87 |
| Elena Goodwin | elmore93@yahoo.com | Felicityport | Inactive | $571.01 |
| Frederick McGlynn | loyce.hyatt37@hotmail.com | South Ewald | Inactive | $1,161.16 |
| Jacquelyn Paucek | ida.senger92@gmail.com | Kameroncester | Inactive | $1,000.61 |
| Mr. Jacob Rolfson DVM | amani_little27@gmail.com | Corkerystead | Inactive | $217.32 |
| Total | $3,615.97 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Chelsea Rohan | clint_ortiz39@yahoo.com | Port Adelbertton | Inactive | $756.03 |
| Earnest Hoeger | destin.willms@hotmail.com | Augusta-Richmond County | Inactive | $680.39 |
| Sophie Hammes | owen.beatty98@hotmail.com | Jordimouth | Inactive | $160.83 |
| Alan Wolff | orlo.farrell@hotmail.com | West Santinoshire | Inactive | $437.95 |
| Marianne Kertzmann | lela_mueller-wolff11@gmail.com | Port Greg | Active | $494.68 |
| Total | $2,529.88 | |||
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 | ||
|---|---|---|---|---|---|
| Dora Lindgren | percival_von19@hotmail.com | Victorville | Active | $779.28 | |
| Jacqueline Jacobs | henry39@yahoo.com | La Mesa | Inactive | $501.07 | |
| Erin Kautzer | donnell68@yahoo.com | Topeka | Active | $160.61 | |
| Pearl Langosh | denis.reichel74@yahoo.com | Caraton | Inactive | $736.30 | |
| Hope Huel | minerva.kautzer@yahoo.com | Pocatello | Inactive | $409.17 | |
| Total | $2,586.43 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Emily Hills | wendell_crona@gmail.com | West Bria | Active | $235.60 | |
| Mr. Ramon West | christiana_hickle@gmail.com | Brianshire | Active | $1,028.12 | |
| Rudy Ernser | rafaela.abernathy@hotmail.com | Cicero | Inactive | $216.38 | |
| Miguel Wolf | assunta_krajcik@yahoo.com | Boscomouth | Inactive | $922.04 | |
| Kristine Zboncak | jaylan_schaden12@gmail.com | VonRuedencester | Active | $973.64 | |
| Total | $3,375.78 | ||||
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. Tommie Ziemann III | enola21@hotmail.com | Lake Barry | Active | $502.48 |
| Miss Georgia Schmidt | katelynn_fisher@yahoo.com | Thompsonfurt | Active | $1,155.53 |
| Terry Ebert IV | aletha.lubowitz85@hotmail.com | Pouroschester | Active | $873.61 |
| Suzanne Waters I | lela.bashirian@hotmail.com | Palo Alto | Inactive | $114.26 |
| Jackie Boehm I | callie27@hotmail.com | New Destiniburgh | Inactive | $270.52 |
| Nancy Jaskolski Jr. | shaun28@yahoo.com | New Xavierville | Inactive | $898.71 |
| Bert McLaughlin | bernadette58@yahoo.com | Annabellport | Active | $379.55 |
| Emily VonRueden | michaela_stark62@yahoo.com | Fort Guyfurt | Inactive | $187.74 |
| Miss Eva Tremblay | terrance38@yahoo.com | Daphneystead | Active | $305.29 |
| Richard Schulist | sophia21@hotmail.com | Palatine | Active | $742.68 |
| Mr. Clinton Gorczany | jerrell.bayer23@hotmail.com | Bell Gardens | Inactive | $91.70 |
| Earnest Steuber | onie34@yahoo.com | Lake Rossieboro | Inactive | $1,028.49 |
| Mrs. Candice McGlynn | abdiel.goldner40@hotmail.com | Huntington Beach | Active | $147.79 |
| Anthony Leannon | chadrick.medhurst45@yahoo.com | Rubyebury | Inactive | $515.19 |
| Ervin Spencer | esteban_kautzer@hotmail.com | New Rubyeton | Active | $44.00 |
| Total | $7,257.54 | |||
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 |