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 | Pending | Bank Transfer | $176.09 |
| INV002 | Paid | Bank Transfer | $379.93 |
| INV003 | Unpaid | Credit Card | $760.54 |
| INV004 | Unpaid | PayPal | $163.53 |
| INV005 | Unpaid | PayPal | $655.95 |
| INV006 | Pending | Credit Card | $931.05 |
| INV007 | Unpaid | PayPal | $381.34 |
| Total | $3,448.43 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Annette Deckow | Internal Factors Architect | annette_deckow@yahoo.com | Member | |
| Buster Ryan-Kub | Direct Implementation Engineer | buster.ryan-kub@yahoo.com | Admin | |
| Kamron Pagac | Global Intranet Orchestrator | kamron_pagac@yahoo.com | Admin | |
| Israel Lehner | Senior Research Analyst | israel_lehner@yahoo.com | Admin | |
| Abigayle Schaden | Corporate Usability Consultant | abigayle.schaden@yahoo.com | Admin | |
| Maudie Walsh | Central Quality Producer | maudie_walsh@yahoo.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 |
|---|---|---|
Minerva Weimann Chief Applications Developer minerva_weimann@yahoo.com | Viewer | |
Helen Green Regional Interactions Associate helen.green87@yahoo.com | Member | |
Gideon Daniel Chief Program Officer gideon_daniel92@yahoo.com | Admin | |
Llewellyn Pagac Senior Mobility Associate llewellyn.pagac5@yahoo.com | Admin | |
Rowena Gorczany Internal Factors Assistant rowena.gorczany@hotmail.com | Admin | |
Bennett Paucek Forward Mobility Engineer bennett.paucek79@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 |
|---|---|---|
Branson Borer Regional Creative Designer branson_borer96@gmail.com | Viewer | |
Bernardo Baumbach Investor Quality Architect bernardo.baumbach@hotmail.com | Member | |
Bo Mertz Lead Paradigm Director bo_mertz71@yahoo.com | Viewer | |
Mary Hammes Principal Response Producer mary.hammes@gmail.com | Viewer | |
Nelda Anderson Global Applications Analyst nelda_anderson20@hotmail.com | Admin | |
Fleta Bailey Lead Data Supervisor fleta_bailey@gmail.com | Viewer | |
Kailyn Moen Human Brand Specialist kailyn_moen3@hotmail.com | Viewer | |
Samara Erdman Legacy Intranet Engineer samara.erdman54@gmail.com | Admin | |
April Franey Future Response Engineer april_franey@hotmail.com | Member | |
Kurt McGlynn-Rutherford Direct Identity Executive kurt.mcglynn-rutherford@gmail.com | Member | |
Jaquan Champlin International Configuration Associate jaquan.champlin@hotmail.com | Member | |
Mckayla Bosco Internal Program Officer mckayla.bosco@yahoo.com | Member | |
Jude Grimes Internal Group Consultant jude_grimes@yahoo.com | Admin | |
Joshuah Boyer Dynamic Data Executive joshuah.boyer48@hotmail.com | Admin | |
Kellen Gleason Future Accountability Orchestrator kellen_gleason@yahoo.com | Admin | |
Franz Langworth Internal Factors Technician franz.langworth99@gmail.com | Member | |
Aurelie Berge Dynamic Security Orchestrator aurelie.berge@hotmail.com | Admin | |
Lauryn Kautzer Internal Optimization Liaison lauryn_kautzer@yahoo.com | Admin | |
Theodora Emard Dynamic Configuration Liaison theodora.emard@gmail.com | Viewer | |
Ryder Oberbrunner-Kshlerin International Implementation Designer ryder_oberbrunner-kshlerin44@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 | |
|---|---|---|---|---|
| Clark Yost | dave3@yahoo.com | Huntington | Inactive | $384.32 |
| Conrad Klocko | thalia83@hotmail.com | Chattanooga | Active | $55.21 |
| Kristopher Nader | beryl1@hotmail.com | Mabelton | Active | $921.12 |
| Taylor Sanford | deion69@hotmail.com | Lake Zack | Inactive | $1,000.30 |
| Georgia Crooks | toni.crist-shields@hotmail.com | Reingerchester | Active | $860.55 |
| Total | $3,221.50 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Armando Bradtke @kip.king55 | alice38@gmail.com | West Jayworth | Inactive | $406.67 |
Nicole Bernhard @mariela92 | sven60@gmail.com | Wiegandcester | Active | $478.61 |
Tricia Pagac III @virginie5 | kathleen_witting@gmail.com | North Gladycehaven | Inactive | $274.61 |
Wayne O'Conner @nikolas85 | luther19@gmail.com | Andersonside | Inactive | $948.49 |
Louise Schoen @laury96 | bailee41@gmail.com | Fort Winfield | Inactive | $494.19 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Lee Lowe | marilyne_hahn@gmail.com | New Glenmouth | Active | $562.02 |
| Carla Botsford | constantin_waelchi@yahoo.com | Peytonport | Inactive | $297.13 |
| Lauren Russel | nayeli.paucek@gmail.com | Port Heather | Active | $583.23 |
| Virgil Williamson | dario89@yahoo.com | Kellyborough | Active | $351.00 |
| Teresa Gleichner I | burley88@yahoo.com | Ornstad | Inactive | $914.20 |
| Total | $2,707.58 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Shawn Adams | olga.kreiger59@yahoo.com | New Hunter | Inactive | $130.49 |
| Taylor Johnson | wyman.heathcote@hotmail.com | Wolffborough | Active | $1,092.45 |
| Hattie Collier | sherman_damore48@yahoo.com | East Ava | Inactive | $463.45 |
| Leona Hyatt | abigayle_stehr@yahoo.com | New Roslynville | Active | $1,151.53 |
| Mrs. Dianna Emmerich | nathen38@hotmail.com | East Rosella | Inactive | $957.21 |
| Total | $3,795.13 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dallas Hudson Jr. | jayce_dicki43@gmail.com | New Murphy | Active | $42.60 |
| Mrs. Gayle Bashirian | abbey.rogahn9@yahoo.com | Carolport | Active | $404.96 |
| Antoinette Murray | abel.vonrueden@yahoo.com | Oceanside | Active | $627.07 |
| Adrienne Stamm | delmer_gorczany@hotmail.com | North Edwardoport | Active | $765.57 |
| Alberta Mraz | candida.rodriguez3@hotmail.com | Coachella | Inactive | $194.04 |
| Total | $2,034.24 | |||
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 | ||
|---|---|---|---|---|---|
| Carl Schoen | tanya57@hotmail.com | New Tod | Inactive | $672.99 | |
| Dr. Wilson Kassulke | deontae.padberg17@gmail.com | Reneeton | Active | $887.63 | |
| Mr. Barry Bergnaum | rae84@hotmail.com | New Juana | Inactive | $220.28 | |
| Henrietta Shanahan | stanton.dicki@yahoo.com | Tristonshire | Active | $1,193.08 | |
| Cornelius Weimann | wendy.lind@yahoo.com | East Jamesontown | Inactive | $59.51 | |
| Total | $3,033.49 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Thomas Walker | flossie_rempel65@hotmail.com | Henriettefurt | Active | $254.46 | |
| Kenneth Rowe | rebekah.pacocha33@hotmail.com | West Derrick | Inactive | $67.41 | |
| Alberta Huels | jamarcus76@gmail.com | West Tressa | Active | $35.50 | |
| Eula Sawayn | ronaldo.mcdermott@hotmail.com | Hackettfort | Inactive | $1,055.72 | |
| Mrs. Antoinette Beer | johathan49@yahoo.com | Lizahaven | Inactive | $697.35 | |
| Total | $2,110.44 | ||||
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 | |
|---|---|---|---|---|
| Terence Grady MD | casey_schmeler71@hotmail.com | West Warren | Inactive | $276.26 |
| Mrs. Eva Effertz MD | jacques_bartell@hotmail.com | Jurupa Valley | Inactive | $55.60 |
| Woodrow Buckridge | clement_casper81@yahoo.com | Potomac | Inactive | $157.91 |
| Zachary Mosciski | webster_jacobson@gmail.com | North Kim | Active | $100.95 |
| Julio Monahan | pat.greenfelder52@gmail.com | New Kadeborough | Active | $1,060.29 |
| Ms. Roxanne Gleason | coty.kling@yahoo.com | Fort Sadye | Inactive | $1,182.78 |
| Eula Lang | antwan.friesen15@hotmail.com | Quigleyland | Inactive | $895.61 |
| Ted Satterfield | jarrett_osinski74@gmail.com | McCulloughfield | Active | $952.22 |
| Jennie Dickens DDS | dillan_mcdermott@gmail.com | El Paso | Active | $1,109.12 |
| Emmett Gibson | elta.stroman-hane@yahoo.com | South Rahsaanton | Active | $1,065.59 |
| Ms. Jo Shields | nolan55@gmail.com | Hutchinson | Active | $844.32 |
| Doris Langworth | morgan.orn@yahoo.com | Baileyshire | Active | $1,122.40 |
| Warren Carroll | madyson_schinner@gmail.com | Fort Rebecaborough | Active | $437.83 |
| Maureen Goldner | jules.douglas@hotmail.com | Lake Velma | Inactive | $823.46 |
| Tiffany Brown-Hettinger | arturo.lebsack77@yahoo.com | South Carachester | Inactive | $573.84 |
| Total | $10,658.18 | |||
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 |