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 | Pending | Credit Card | $526.97 |
| INV002 | Unpaid | Bank Transfer | $703.16 |
| INV003 | Pending | Credit Card | $124.74 |
| INV004 | Pending | Credit Card | $542.22 |
| INV005 | Unpaid | Credit Card | $207.70 |
| INV006 | Pending | Credit Card | $983.79 |
| INV007 | Paid | PayPal | $716.44 |
| Total | $3,805.02 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Hilda Kunze | Central Assurance Strategist | hilda.kunze@hotmail.com | Member | |
| Melany Larson | Customer Marketing Associate | melany.larson@hotmail.com | Member | |
| Candida Huels | Future Configuration Administrator | candida.huels32@hotmail.com | Admin | |
| Camille Goldner | Investor Integration Representative | camille.goldner55@yahoo.com | Viewer | |
| Rashawn Carter | Future Applications Director | rashawn_carter21@hotmail.com | Viewer | |
| Ransom Bauch | Dynamic Usability Supervisor | ransom.bauch36@gmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Billy Berge Principal Implementation Representative billy_berge43@hotmail.com | Viewer | |
Favian Hilpert Product Security Director favian.hilpert@gmail.com | Member | |
Frederique Ondricka Senior Applications Associate frederique.ondricka16@gmail.com | Admin | |
River Rohan Customer Data Officer river_rohan@hotmail.com | Viewer | |
Georgette Ziemann Investor Directives Director georgette_ziemann81@yahoo.com | Admin | |
Vanessa Lockman International Markets Coordinator vanessa_lockman45@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 |
|---|---|---|
Abdul Grimes Dynamic Interactions Executive abdul.grimes@hotmail.com | Member | |
Colten King Future Markets Officer colten.king15@hotmail.com | Member | |
Xavier McGlynn Customer Response Representative xavier.mcglynn45@hotmail.com | Member | |
Mallie Waelchi National Usability Administrator mallie.waelchi18@yahoo.com | Viewer | |
Hellen Raynor Lead Branding Engineer hellen.raynor@yahoo.com | Admin | |
Spencer O'Kon Product Group Strategist spencer_okon71@gmail.com | Admin | |
Orland Green Corporate Configuration Producer orland_green9@gmail.com | Member | |
Judah Hodkiewicz Human Markets Developer judah_hodkiewicz@yahoo.com | Viewer | |
Odie Williamson Legacy Quality Coordinator odie_williamson@gmail.com | Member | |
Josiah Barton Customer Web Developer josiah_barton27@gmail.com | Member | |
Barry Greenholt Product Directives Planner barry_greenholt94@gmail.com | Member | |
Aron Bayer Corporate Identity Liaison aron.bayer14@hotmail.com | Member | |
Gisselle Carroll Legacy Assurance Specialist gisselle.carroll24@gmail.com | Admin | |
Melany McDermott Senior Interactions Developer melany.mcdermott@yahoo.com | Admin | |
Kathlyn Cole Lead Marketing Representative kathlyn_cole@gmail.com | Viewer | |
Pete Botsford Chief Markets Engineer pete_botsford@hotmail.com | Member | |
Tracy Lemke Product Applications Engineer tracy.lemke65@gmail.com | Member | |
Darian Morar Global Creative Facilitator darian_morar92@yahoo.com | Member | |
Carey Frami Human Optimization Coordinator carey.frami@yahoo.com | Member | |
Berneice Runolfsson Dynamic Interactions Analyst berneice_runolfsson@hotmail.com | Admin |
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 | |
|---|---|---|---|---|
| Traci Emmerich | felicita_stracke@gmail.com | Jadacester | Inactive | $159.61 |
| Rodney Champlin I | edgar26@yahoo.com | Faheybury | Active | $996.06 |
| Jared Johnston I | cruz82@gmail.com | Ondrickafurt | Active | $841.42 |
| Candace Schaefer | art13@hotmail.com | Lake Quinton | Active | $1,085.08 |
| Drew Powlowski | marilou17@hotmail.com | Mayfort | Inactive | $338.82 |
| Total | $3,420.99 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lamar Gerhold @america_jacobs | carlie52@yahoo.com | Austin | Inactive | $689.86 |
Charles Reynolds @elwin11 | trevion42@yahoo.com | Lake Bonitaville | Inactive | $603.35 |
Billie Bergnaum @jeremy_kshlerin | terence_kiehn@yahoo.com | Bradtkeville | Inactive | $384.73 |
Angelica Dicki @kiera1 | breanne49@hotmail.com | Lake Heath | Active | $98.64 |
Stuart Gerlach @elian90 | ebba51@gmail.com | Huldaboro | Inactive | $123.49 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Thelma Watsica | mervin80@yahoo.com | Robertsshire | Inactive | $1,159.51 |
| Darnell Rodriguez | napoleon91@yahoo.com | Linnietown | Inactive | $788.40 |
| Violet Stark | robert_beatty57@hotmail.com | Kshlerinshire | Active | $994.75 |
| Kristy Wisozk | schuyler31@yahoo.com | Weissnatstead | Active | $515.83 |
| Christie Carter | trace.reynolds82@yahoo.com | Montebello | Active | $136.54 |
| Total | $3,595.03 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mack Feest | nicholas_crooks@hotmail.com | East Angelicafort | Active | $838.33 |
| Leigh Nitzsche I | conor36@yahoo.com | South Hopechester | Active | $1,005.83 |
| Mrs. Christine Barton | kitty.pagac53@gmail.com | Josianefield | Inactive | $271.40 |
| Randolph Lynch | ida.kunze@hotmail.com | Deliabury | Inactive | $271.99 |
| Mr. Raul O'Conner | elias_hayes56@hotmail.com | North Imanitown | Inactive | $328.16 |
| Total | $2,715.71 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Charlie Romaguera-Kirlin | kaia_dicki@hotmail.com | Aliso Viejo | Active | $501.36 |
| Harold Becker-Reichert | ezekiel.dubuque@gmail.com | Levittown | Active | $251.13 |
| Lindsay Ruecker | wilfrid39@gmail.com | West Foster | Inactive | $295.47 |
| Roland Towne | wilma.wolf56@hotmail.com | Wernerport | Inactive | $413.51 |
| Dennis Casper | greg_rau23@gmail.com | South Amaya | Inactive | $1,080.78 |
| Total | $2,542.25 | |||
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 | ||
|---|---|---|---|---|---|
| Daisy Runolfsson-O'Connell | joseph0@gmail.com | Bogisichton | Inactive | $1,071.10 | |
| Bobby Hackett DVM | cristian.upton@hotmail.com | Ophelialand | Inactive | $590.55 | |
| Marion Hammes | brock83@yahoo.com | Kuhnfurt | Active | $1,021.07 | |
| Calvin Okuneva | estevan42@hotmail.com | East Hoyt | Inactive | $99.86 | |
| Jerome Kessler | lincoln62@yahoo.com | West Palm Beach | Inactive | $414.56 | |
| Total | $3,197.14 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dianne Turner | samir88@yahoo.com | Ricardofield | Inactive | $832.65 | |
| Stella Heidenreich | lucious.goyette80@hotmail.com | Lake Cornelius | Active | $963.53 | |
| Heather Green | sylvester16@yahoo.com | Gardena | Active | $562.66 | |
| Marion Cormier | dina23@hotmail.com | Quitzonfort | Active | $1,150.62 | |
| Derrick Schultz | kieran_witting0@yahoo.com | Port Una | Active | $685.90 | |
| Total | $4,195.36 | ||||
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. Alex Waters | naomi.pfannerstill64@hotmail.com | North Charleston | Inactive | $1,085.00 |
| Dexter Brakus | taryn86@yahoo.com | Harveyworth | Inactive | $556.09 |
| Hugo Hettinger Sr. | libbie_simonis66@yahoo.com | West Flo | Inactive | $836.91 |
| Tracy Stroman | garret_erdman24@yahoo.com | South Leoniechester | Inactive | $2.92 |
| Ms. Connie Koelpin | ashtyn51@yahoo.com | Enid | Inactive | $204.96 |
| Gregory Von | hellen_welch60@hotmail.com | Lavernshire | Inactive | $1,097.52 |
| Bobbie Zulauf | lavada.hermiston@yahoo.com | Pine Bluff | Active | $755.74 |
| Austin Kihn | gordon_purdy@yahoo.com | North Addisonland | Inactive | $166.56 |
| Nadine Runolfsson | jordi.haley@hotmail.com | North Angelinachester | Active | $7.18 |
| Theodore Will | jailyn_mohr@yahoo.com | Jacobiberg | Inactive | $1,090.44 |
| Pablo Nienow | dejon47@hotmail.com | Moore | Inactive | $356.15 |
| Elbert Balistreri V | alisha27@hotmail.com | Spring Valley | Active | $5.83 |
| Jeremiah Thompson Jr. | katrina65@gmail.com | West Keira | Inactive | $1,186.12 |
| Brett Reichert | ayla.koss@hotmail.com | Fort Colthaven | Inactive | $849.57 |
| Yvonne Swift-Effertz Sr. | joel_oconner@yahoo.com | West Hailee | Active | $845.51 |
| Total | $9,046.50 | |||
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 |


