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 | PayPal | $119.12 |
| INV002 | Unpaid | Bank Transfer | $469.27 |
| INV003 | Paid | Bank Transfer | $687.97 |
| INV004 | Unpaid | Credit Card | $139.07 |
| INV005 | Unpaid | Credit Card | $325.79 |
| INV006 | Pending | Bank Transfer | $643.45 |
| INV007 | Paid | Bank Transfer | $338.14 |
| Total | $2,722.81 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Brielle Pfannerstill | Chief Interactions Developer | brielle_pfannerstill@yahoo.com | Viewer | |
| Roselyn Jones | Future Web Administrator | roselyn_jones@hotmail.com | Viewer | |
| Roscoe Rutherford | Direct Applications Consultant | roscoe.rutherford52@yahoo.com | Viewer | |
| Ophelia Goldner | District Communications Designer | ophelia.goldner@gmail.com | Viewer | |
| Maggie Flatley | Customer Intranet Manager | maggie.flatley@hotmail.com | Member | |
| Oren Cummings | Corporate Accountability Supervisor | oren_cummings@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 |
|---|---|---|
Hailie Bruen Regional Identity Specialist hailie_bruen@gmail.com | Viewer | |
Tatyana Glover Legacy Tactics Associate tatyana.glover@hotmail.com | Member | |
Rosalind Cremin Human Metrics Assistant rosalind.cremin68@gmail.com | Member | |
Marcos Simonis International Brand Designer marcos.simonis94@yahoo.com | Viewer | |
Gia Rosenbaum-Pacocha Direct Creative Officer gia_rosenbaum-pacocha73@gmail.com | Member | |
Theron Towne International Security Specialist theron_towne47@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Talia McCullough District Web Designer talia.mccullough69@yahoo.com | Admin | |
Rita Bednar Central Integration Consultant rita_bednar52@gmail.com | Viewer | |
Violet Quigley Senior Operations Strategist violet.quigley99@yahoo.com | Admin | |
Brendon Lindgren Regional Communications Agent brendon_lindgren@yahoo.com | Admin | |
Kiana Bednar-Haley Regional Implementation Executive kiana.bednar-haley93@gmail.com | Admin | |
Kaitlin Bednar Investor Program Facilitator kaitlin.bednar57@gmail.com | Member | |
Barney Beatty Investor Metrics Administrator barney.beatty@gmail.com | Member | |
Joanny Hoeger Product Metrics Orchestrator joanny.hoeger15@yahoo.com | Member | |
Herminio Armstrong Investor Directives Engineer herminio.armstrong3@hotmail.com | Member | |
Arch Homenick District Assurance Strategist arch.homenick17@gmail.com | Viewer | |
Nichole Leffler Dynamic Research Agent nichole_leffler89@hotmail.com | Admin | |
Hilario Wisozk Investor Markets Analyst hilario_wisozk@hotmail.com | Admin | |
Larue Morissette Direct Solutions Consultant larue_morissette@gmail.com | Member | |
Jake Harris Dynamic Accounts Orchestrator jake.harris23@gmail.com | Viewer | |
Isaias Price Lead Group Liaison isaias.price16@yahoo.com | Admin | |
Katrine Kuphal District Optimization Officer katrine_kuphal@yahoo.com | Member | |
Ryann Torphy Senior Solutions Specialist ryann_torphy@hotmail.com | Admin | |
Garth Miller Senior Security Engineer garth.miller91@hotmail.com | Member | |
Annabel Orn District Paradigm Executive annabel_orn64@gmail.com | Admin | |
Kara Waelchi Senior Group Analyst kara_waelchi6@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 | |
|---|---|---|---|---|
| Myrtle Block | jamison_brown@yahoo.com | Fort Baronfort | Active | $732.17 |
| Melvin Pagac MD | mina34@yahoo.com | Hodkiewiczchester | Active | $167.76 |
| Darnell Boehm | evert_aufderhar36@yahoo.com | Port Robb | Inactive | $663.60 |
| Dr. Grant Feeney DDS | ottis.hammes-bartoletti24@gmail.com | Blickburgh | Inactive | $566.15 |
| Dr. Edwin Mayert | juanita.luettgen14@yahoo.com | New Jacquelyn | Active | $581.22 |
| Total | $2,710.90 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Levi Feest PhD @shanie_brown | juston.nicolas82@yahoo.com | Florenceton | Inactive | $1,136.12 |
Miss Pauline Bogan @domenick_kessler15 | marvin64@yahoo.com | North Alexane | Active | $58.05 |
Joey Farrell @felicity57 | monique_mills@yahoo.com | Renetown | Active | $1,191.46 |
Martha Raynor @micah42 | lauren_brakus52@gmail.com | Oceanside | Active | $533.13 |
Delia Kunde-Will @benton.stehr-sauer70 | golda81@gmail.com | Titusfield | Inactive | $947.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Guillermo Yundt | vince99@gmail.com | East Daytonton | Active | $500.75 |
| Irene Daniel | hilma.koch-wilderman@hotmail.com | Howeburgh | Inactive | $1,104.22 |
| Damon Robel | caden76@yahoo.com | Kurtisville | Inactive | $803.30 |
| Mr. Mario Schneider | ubaldo.buckridge48@yahoo.com | Orinland | Active | $545.73 |
| Carl Wolff | jules_spinka@gmail.com | Palm Beach Gardens | Active | $1,172.76 |
| Total | $4,126.76 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Horace Wilderman | queen_bechtelar62@hotmail.com | Shawnafurt | Active | $403.54 |
| Leland Lesch | malcolm_smitham-kub87@hotmail.com | New Lucie | Active | $413.84 |
| Mattie Schmidt | annetta_harris60@hotmail.com | North Kathleen | Inactive | $701.27 |
| Sheldon Lind | vincenza.swift97@yahoo.com | Franzport | Inactive | $581.78 |
| Mr. Clinton Krajcik | ulices5@yahoo.com | Gloverhaven | Active | $344.91 |
| Total | $2,445.34 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lonnie Pollich | hal_watsica@yahoo.com | Osinskishire | Inactive | $170.07 |
| Dr. Eloise Cormier | kurtis_wolff9@yahoo.com | White Plains | Active | $31.41 |
| Jo Lindgren-Toy IV | marina_klocko82@yahoo.com | Kubstead | Active | $656.33 |
| Garrett Rowe | watson77@hotmail.com | Orinport | Inactive | $378.39 |
| Arturo Crona | niko_braun3@hotmail.com | Marielaville | Inactive | $466.14 |
| Total | $1,702.34 | |||
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 | ||
|---|---|---|---|---|---|
| Angelica Jacobson DVM | bert_effertz@hotmail.com | West Emory | Active | $1,105.59 | |
| Kathy Nicolas Jr. | gene89@gmail.com | New Lylastad | Active | $66.80 | |
| Katrina Bechtelar | christopher.spencer61@hotmail.com | West Bernhardstead | Active | $950.29 | |
| Mrs. Faye Wolf | domenic.reinger@hotmail.com | Welchstead | Inactive | $546.00 | |
| James Yost | dallin_lemke-osinski94@yahoo.com | West Nash | Active | $567.91 | |
| Total | $3,236.59 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Raymond Morissette | gustave.davis@gmail.com | Issacside | Active | $1,192.97 | |
| Melanie Torphy | hollis.kirlin@yahoo.com | Lake Kelley | Active | $205.07 | |
| Jay Streich I | sharon88@hotmail.com | Fort Tellymouth | Inactive | $520.15 | |
| Donna Boyle | jarod.greenholt41@gmail.com | Buckridgetown | Inactive | $44.75 | |
| Laverne Nicolas | eulah18@gmail.com | Roswell | Active | $681.15 | |
| Total | $2,644.09 | ||||
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 | |
|---|---|---|---|---|
| Esther Kuhic | rahul_gorczany@gmail.com | East Korey | Active | $1,110.34 |
| Dr. Lowell Rutherford | arianna45@yahoo.com | Lawton | Active | $941.44 |
| Aubrey Feil | omer.thompson@gmail.com | Fort Emmiefort | Inactive | $527.24 |
| Josephine Satterfield-Jacobi | darius44@gmail.com | Dovieport | Active | $259.15 |
| Marcos Koelpin | cheyenne.gibson@gmail.com | Port Abbigailtown | Inactive | $865.73 |
| Keith Marks | allen49@gmail.com | Stephanieberg | Inactive | $964.92 |
| Jeanne Harber | weston_swift@yahoo.com | Fletcherbury | Active | $192.17 |
| Ramona Reichel III | ava18@hotmail.com | West Chetland | Inactive | $283.02 |
| Mitchell Heller | kaycee_feil46@gmail.com | West Josephinestead | Active | $298.81 |
| Delores Kuvalis DDS | carmine2@yahoo.com | University | Inactive | $1,180.15 |
| Bridget Kovacek | aida.mayer73@yahoo.com | Pinellas Park | Active | $1,172.57 |
| Bobbie Welch | brisa.franecki3@hotmail.com | Kamronburgh | Active | $123.05 |
| Jodi Grant | harmon8@yahoo.com | Fredybury | Active | $444.15 |
| Iris Abernathy | kale.schmitt@yahoo.com | Fort Leanneland | Active | $1,152.91 |
| Joann Mueller | korey.farrell65@yahoo.com | Antoniaside | Active | $435.84 |
| Total | $9,951.49 | |||
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 |