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 | Paid | Credit Card | $465.56 |
| INV002 | Unpaid | PayPal | $762.70 |
| INV003 | Pending | Credit Card | $846.06 |
| INV004 | Unpaid | PayPal | $973.76 |
| INV005 | Pending | Credit Card | $197.77 |
| INV006 | Unpaid | Credit Card | $545.13 |
| INV007 | Unpaid | Bank Transfer | $342.11 |
| Total | $4,133.09 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nellie Williamson | Customer Assurance Coordinator | nellie_williamson75@gmail.com | Admin | |
| Dock Feil | Corporate Factors Coordinator | dock.feil@yahoo.com | Viewer | |
| Trevion Dickinson | Dynamic Branding Technician | trevion_dickinson@gmail.com | Admin | |
| Ollie Moen | Regional Solutions Executive | ollie_moen34@gmail.com | Member | |
| Jan Ankunding | Investor Response Officer | jan.ankunding52@gmail.com | Member | |
| Layla McLaughlin | Future Communications Administrator | layla_mclaughlin6@yahoo.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Gayle Vandervort Central Data Architect gayle_vandervort51@hotmail.com | Admin | |
Vicenta McClure Future Marketing Architect vicenta_mcclure@gmail.com | Viewer | |
Pasquale Hermann International Accounts Specialist pasquale.hermann@hotmail.com | Member | |
Kelli Roberts Future Accountability Agent kelli.roberts11@gmail.com | Member | |
Stefan Wiza Senior Branding Facilitator stefan.wiza43@yahoo.com | Admin | |
Gladyce McDermott Central Security Designer gladyce.mcdermott90@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Cheyenne Dickinson Senior Security Coordinator cheyenne_dickinson@hotmail.com | Member | |
Vivian Harris Dynamic Tactics Technician vivian_harris70@yahoo.com | Admin | |
Clemens Dietrich Future Accountability Executive clemens.dietrich69@hotmail.com | Viewer | |
Simeon Connelly National Directives Technician simeon.connelly@hotmail.com | Viewer | |
Cornelius Turner Forward Brand Executive cornelius.turner@yahoo.com | Admin | |
Patrick Buckridge Legacy Division Facilitator patrick.buckridge98@hotmail.com | Admin | |
Patience Ullrich Regional Metrics Administrator patience_ullrich@hotmail.com | Member | |
Buford Hills Direct Infrastructure Strategist buford_hills@gmail.com | Viewer | |
Royal Oberbrunner Internal Markets Agent royal_oberbrunner@yahoo.com | Viewer | |
Esta Douglas Chief Research Executive esta.douglas1@hotmail.com | Member | |
Muhammad Walter Forward Brand Director muhammad_walter@yahoo.com | Member | |
Houston Tremblay Principal Factors Specialist houston.tremblay11@gmail.com | Viewer | |
Marcos Johnson Human Infrastructure Producer marcos_johnson@yahoo.com | Viewer | |
Meda Pfeffer Legacy Operations Supervisor meda_pfeffer@yahoo.com | Admin | |
Flavio Thiel Lead Paradigm Executive flavio.thiel@yahoo.com | Admin | |
Berneice Smith National Usability Administrator berneice_smith@yahoo.com | Member | |
Maud Koss-Kreiger Customer Usability Assistant maud.koss-kreiger97@gmail.com | Admin | |
Maegan Metz Chief Quality Manager maegan.metz@yahoo.com | Viewer | |
Russell Spencer International Assurance Representative russell_spencer@gmail.com | Member | |
Shannon Volkman Internal Branding Technician shannon_volkman73@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 | |
|---|---|---|---|---|
| Chad Donnelly | art.mayer18@gmail.com | Fort Lesley | Active | $746.75 |
| Archie Hoeger | hal86@hotmail.com | Cummingsport | Inactive | $559.39 |
| Lora Watsica | hortense17@gmail.com | Raemouth | Active | $594.52 |
| Jackie Hahn | evan51@gmail.com | Donnellystead | Inactive | $1,010.28 |
| Tim Rodriguez-Torp | gillian.reichert@gmail.com | Agustinaport | Inactive | $495.49 |
| Total | $3,406.43 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Delores Langworth @theresia.terry | jovany44@gmail.com | Cincinnati | Inactive | $721.63 |
Winifred Feest @adalberto.weissnat42 | marcelle31@gmail.com | South Iva | Inactive | $9.95 |
Raymond Leffler @reyna26 | angelo.flatley25@gmail.com | Wolffville | Active | $516.62 |
Karla Senger @dudley_lang86 | casimer_okeefe@hotmail.com | Dublin | Inactive | $503.34 |
Amos Baumbach @hortense.aufderhar | theodore.smith82@gmail.com | Wainochester | Inactive | $477.48 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Max Hane | thalia95@yahoo.com | Rueckerside | Active | $480.74 |
| Vickie Casper Jr. | jaren_jacobson39@gmail.com | Terrychester | Active | $151.55 |
| Curtis Jacobs | ada.ledner2@hotmail.com | Skylarstad | Active | $852.97 |
| Shelly Berge | ava.shields29@gmail.com | Fargo | Active | $1,166.52 |
| Randy Waters | christian42@hotmail.com | Lake Emilianotown | Active | $419.69 |
| Total | $3,071.47 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elijah Hudson | marguerite27@yahoo.com | North Zoey | Inactive | $906.78 |
| Claire Schulist | columbus_lynch54@gmail.com | Koelpinfurt | Inactive | $128.16 |
| Ernestine Weissnat | afton10@hotmail.com | North Richmondmouth | Inactive | $1,002.71 |
| Kristen Powlowski | rosario.hills21@gmail.com | West Alphonsoborough | Inactive | $1,148.86 |
| Misty Kutch | lavina_moen@gmail.com | Jurupa Valley | Inactive | $708.68 |
| Total | $3,895.19 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Nichole Hammes | benedict_bogan@hotmail.com | Fort Danteborough | Inactive | $507.76 |
| Carrie Willms MD | harry.wyman53@hotmail.com | Andersonboro | Active | $1,108.06 |
| Guillermo Hane | lenny.homenick@yahoo.com | Tomasaville | Active | $669.75 |
| Rosalie Oberbrunner | asha.baumbach@hotmail.com | Norastad | Active | $431.23 |
| Mr. Wilson Casper | shane.trantow-abernathy@hotmail.com | Pontiac | Active | $470.24 |
| Total | $3,187.04 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Ross Altenwerth | lillian27@yahoo.com | Paradise | Inactive | $82.04 | |
| Stanley Purdy | tristian20@gmail.com | Lake Stanleychester | Inactive | $22.43 | |
| Johnnie Durgan PhD | cullen_kris@gmail.com | Wyoming | Active | $1,067.11 | |
| Cecil Kemmer | melvin_corwin71@hotmail.com | Doyleshire | Inactive | $846.76 | |
| Nicolas Ebert | mathew_ledner@hotmail.com | East Curtisview | Active | $167.63 | |
| Total | $2,185.97 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ida Schaden | alek.ward53@yahoo.com | Harveyburgh | Active | $366.64 | |
| Jean Thompson II | rosalyn_sipes@hotmail.com | Homenicktown | Active | $929.17 | |
| Wilma Durgan | cloyd40@gmail.com | New Jordifield | Active | $140.42 | |
| Faye Cremin | cristopher.cummerata34@hotmail.com | North Mara | Active | $1,108.30 | |
| Dr. Ted Schiller | ahmed89@yahoo.com | Kundeburgh | Inactive | $794.46 | |
| Total | $3,338.99 | ||||
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 | |
|---|---|---|---|---|
| Antonia Cassin | devyn_jacobs48@yahoo.com | New Lora | Active | $760.73 |
| Alejandro Lowe | wanda9@hotmail.com | South Yasminside | Active | $796.24 |
| Lucas Borer | pietro.kiehn77@yahoo.com | Richmond | Active | $649.50 |
| Clay Johns | marty_leuschke@yahoo.com | Georgetown | Inactive | $742.10 |
| Antoinette Grady | haven_turner99@gmail.com | Blairbury | Inactive | $246.56 |
| Jim Nicolas DVM | andrew_bernhard@hotmail.com | Enricoworth | Active | $824.26 |
| Ron Rohan | samir44@gmail.com | South Skyla | Active | $539.61 |
| Beverly Rodriguez | richmond.hand@yahoo.com | North Davionside | Active | $540.07 |
| Margie Welch | russel29@hotmail.com | Raphaelburgh | Inactive | $470.04 |
| Kim Gottlieb | arely53@gmail.com | East Dawsonbury | Active | $618.85 |
| Erma Powlowski | ramiro97@hotmail.com | Denafort | Active | $124.44 |
| Bert Gerlach | stanley_dietrich@yahoo.com | Port Houstonborough | Active | $366.69 |
| Lillian Beer | eliseo.lakin32@hotmail.com | Victoria | Active | $753.85 |
| Bernice Cassin | hollis_sporer@yahoo.com | Shaniaberg | Active | $1,161.24 |
| Nelson Dach | jaylan.wyman@hotmail.com | Toyland | Active | $80.91 |
| Total | $8,675.09 | |||
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 |