Source code
Click here 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 | Credit Card | $953.63 |
| INV002 | Pending | Credit Card | $680.37 |
| INV003 | Pending | Bank Transfer | $689.87 |
| INV004 | Unpaid | PayPal | $887.94 |
| INV005 | Paid | PayPal | $203.31 |
| INV006 | Pending | Credit Card | $948.98 |
| INV007 | Unpaid | PayPal | $447.94 |
| Total | $4,812.04 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Odessa Parker | Senior Infrastructure Manager | odessa.parker3@yahoo.com | Admin | |
| Antoinette Johnston | Lead Marketing Executive | antoinette_johnston@hotmail.com | Viewer | |
| Darrin Hegmann | Customer Integration Strategist | darrin_hegmann64@yahoo.com | Member | |
| Melody Emmerich | Direct Optimization Liaison | melody.emmerich@hotmail.com | Admin | |
| Aliya Dickinson | Investor Data Liaison | aliya.dickinson6@yahoo.com | Viewer | |
| Andrew Ankunding | Regional Mobility Developer | andrew_ankunding55@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 |
|---|---|---|
Selina Grady Direct Usability Associate selina_grady@gmail.com | Member | |
Rahsaan Jakubowski Chief Implementation Director rahsaan.jakubowski39@gmail.com | Viewer | |
Marcella Jacobson Dynamic Program Technician marcella.jacobson42@hotmail.com | Viewer | |
Jefferey Wiza Customer Configuration Designer jefferey_wiza47@gmail.com | Viewer | |
Jennifer Grimes Customer Response Manager jennifer.grimes@gmail.com | Viewer | |
Carlee Heathcote-Rodriguez Internal Factors Coordinator carlee.heathcote-rodriguez@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 |
|---|---|---|
Uriel Hilll Corporate Identity Officer uriel.hilll@hotmail.com | Member | |
Annabell Kohler Dynamic Functionality Analyst annabell_kohler27@yahoo.com | Member | |
Catalina Block Internal Research Producer catalina_block@yahoo.com | Member | |
Giovanni Bode Central Paradigm Technician giovanni.bode3@yahoo.com | Admin | |
Tyler O'Hara Product Mobility Designer tyler_ohara@yahoo.com | Admin | |
Damon Stehr Direct Optimization Supervisor damon_stehr95@yahoo.com | Viewer | |
Zack Weber International Identity Representative zack.weber@yahoo.com | Member | |
Riley Mosciski Lead Factors Analyst riley_mosciski@gmail.com | Viewer | |
Aracely Larson Future Research Analyst aracely.larson68@yahoo.com | Admin | |
Eleanore Streich Central Division Engineer eleanore.streich55@gmail.com | Admin | |
Maegan Maggio District Usability Assistant maegan_maggio54@yahoo.com | Member | |
Kelsie Jones Principal Usability Associate kelsie.jones82@gmail.com | Member | |
Domingo Ruecker Product Research Analyst domingo_ruecker@gmail.com | Member | |
Kayden Kassulke Regional Intranet Analyst kayden.kassulke0@hotmail.com | Admin | |
Lela Marvin Forward Security Director lela.marvin@gmail.com | Member | |
Justen Vandervort Human Integration Facilitator justen.vandervort@yahoo.com | Viewer | |
Augustus Mitchell Investor Marketing Officer augustus_mitchell45@hotmail.com | Admin | |
Amani Howell Regional Applications Consultant amani_howell@gmail.com | Member | |
Berniece Halvorson-Lesch Product Program Developer berniece_halvorson-lesch@yahoo.com | Viewer | |
Troy Zulauf-Crona International Solutions Orchestrator troy_zulauf-crona93@hotmail.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 | |
|---|---|---|---|---|
| Ada Konopelski MD | jacquelyn97@yahoo.com | Cletastad | Inactive | $49.59 |
| Latoya Block | orpha_ritchie@gmail.com | North Rebeca | Active | $180.89 |
| Hugo Ziemann | trent_cormier@yahoo.com | Fort Akeemborough | Inactive | $1,142.46 |
| Spencer Koelpin IV | selina.harris1@yahoo.com | Maggioboro | Inactive | $873.54 |
| Wilma Rutherford V | nels53@gmail.com | Compton | Active | $534.37 |
| Total | $2,780.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dr. Devin Anderson-Hirthe @margaretta.emard9 | euna_kuvalis@hotmail.com | South Kaitlinchester | Inactive | $431.37 |
Dr. Melba Satterfield @virgie_thiel97 | dejuan.mann@hotmail.com | Hamilton | Active | $484.69 |
Carla Towne @astrid63 | soledad_cassin@gmail.com | East Katharina | Inactive | $1,167.98 |
Kate Bayer @harrison.rosenbaum | vidal.stroman81@gmail.com | Lebsackborough | Active | $386.02 |
Doyle Schneider @nannie_schumm76 | joshuah_dickens69@yahoo.com | North Highlands | Inactive | $899.23 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jon Nienow | buford25@yahoo.com | Fort Terrance | Inactive | $729.73 |
| Randy Sanford | brown.howe70@yahoo.com | San Marcos | Active | $727.57 |
| Tomas Tillman | sonya.kuvalis@hotmail.com | Milpitas | Active | $497.57 |
| Miss Ana Crooks | clara_beier66@hotmail.com | North Brennan | Active | $880.30 |
| Hattie Fadel-Stanton | gwen84@hotmail.com | Dayton | Active | $550.79 |
| Total | $3,385.96 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Raquel Reynolds | haleigh_jast8@yahoo.com | Allen | Active | $1,174.54 |
| Curtis Rohan | kylee.schamberger@yahoo.com | North Laceyburgh | Inactive | $9.71 |
| Danielle Ankunding | anna_zieme@hotmail.com | Dearborn | Inactive | $219.76 |
| Annie Cartwright | sammie.shanahan63@yahoo.com | West Coty | Inactive | $567.49 |
| Sandy Breitenberg | providenci_langosh@gmail.com | Cincinnati | Inactive | $1,114.81 |
| Total | $3,086.31 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shannon Smitham | heber30@hotmail.com | South Hill | Inactive | $866.43 |
| Dr. Ernestine Botsford | noe32@hotmail.com | Port Zionstad | Active | $451.64 |
| Travis Schaden DVM | domenico.parisian@yahoo.com | Klockochester | Inactive | $682.79 |
| Philip Bahringer | johann5@hotmail.com | Wichita Falls | Inactive | $213.29 |
| Kristy Hettinger | brennan36@hotmail.com | El Centro | Inactive | $157.66 |
| Total | $2,371.81 | |||
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 | ||
|---|---|---|---|---|---|
| Rudy Simonis DDS | constantin_wuckert64@gmail.com | Wehnermouth | Active | $6.89 | |
| Dr. Jessie Goyette | bernard_wintheiser@hotmail.com | Mesquite | Inactive | $405.24 | |
| Willie West | amos31@yahoo.com | Busterville | Active | $1,014.01 | |
| Maryann Marvin | edwin_franey48@yahoo.com | Fort Mateo | Active | $8.29 | |
| Gilbert Donnelly | mustafa.ernser@hotmail.com | Crooksport | Inactive | $4.02 | |
| Total | $1,438.45 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Bridget Wiegand | ernie_dickens50@yahoo.com | Lafayette | Active | $871.54 | |
| Ida Hills | isac3@yahoo.com | Nashville-Davidson | Active | $903.36 | |
| Adrian Towne | davon_brekke@gmail.com | Murphyfurt | Active | $790.61 | |
| Freda Collins | lottie29@yahoo.com | Bountiful | Active | $641.89 | |
| Patrick Keebler | orrin.murray77@gmail.com | New Rubie | Inactive | $991.35 | |
| Total | $4,198.75 | ||||
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 | |
|---|---|---|---|---|
| Brendan Yost | mason.hyatt@hotmail.com | Harbershire | Inactive | $369.59 |
| Marvin Schultz | jayme.dicki@gmail.com | East Austyn | Active | $1,132.72 |
| Elizabeth Anderson | willis50@hotmail.com | Lake Candidoville | Inactive | $486.31 |
| Israel Welch | benny.mitchell67@yahoo.com | North Korbin | Active | $636.59 |
| Richard Stamm | vivien25@hotmail.com | Port Arthur | Active | $130.84 |
| Karen Mayert | holden.luettgen@hotmail.com | Kihnside | Inactive | $915.32 |
| Gerard Becker | quincy.ebert@gmail.com | Langworthton | Active | $357.82 |
| Nadine Farrell-Lehner | jovanny_damore@gmail.com | Loniefield | Inactive | $917.12 |
| Margarita Schumm-Huels | lauren10@gmail.com | Fort Sonyaville | Active | $825.58 |
| Gene Mitchell | monserrate.ryan49@yahoo.com | Sengershire | Active | $669.00 |
| Sergio Homenick Sr. | emmanuel_bode79@yahoo.com | Hermanside | Inactive | $1,088.65 |
| Ed Parisian | rosella_torphy@gmail.com | Troy | Active | $765.72 |
| Jana Cummerata | taryn.stracke@hotmail.com | Coconut Creek | Inactive | $386.69 |
| Kristen Mayer | faustino_rice@hotmail.com | Baumbachtown | Inactive | $646.85 |
| Leonard McCullough | kathryn75@yahoo.com | South Millie | Active | $997.47 |
| Total | $10,326.27 | |||
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 |