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 | Credit Card | $422.48 |
| INV002 | Unpaid | PayPal | $188.39 |
| INV003 | Unpaid | Bank Transfer | $648.13 |
| INV004 | Paid | Credit Card | $661.62 |
| INV005 | Pending | Bank Transfer | $761.08 |
| INV006 | Pending | Bank Transfer | $305.04 |
| INV007 | Pending | Bank Transfer | $995.19 |
| Total | $3,981.93 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sandy Crooks | Investor Intranet Agent | sandy_crooks@hotmail.com | Viewer | |
| Adah Lowe | Internal Branding Producer | adah.lowe@yahoo.com | Admin | |
| Sister Prosacco | International Creative Developer | sister_prosacco88@yahoo.com | Member | |
| Dewitt Lind | Investor Markets Developer | dewitt_lind1@hotmail.com | Admin | |
| Connor Kshlerin | Forward Interactions Analyst | connor.kshlerin9@gmail.com | Member | |
| Asia Witting | Corporate Factors Facilitator | asia.witting@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 |
|---|---|---|
Federico Deckow Principal Paradigm Orchestrator federico.deckow45@hotmail.com | Admin | |
Jacklyn Ritchie International Data Producer jacklyn_ritchie@gmail.com | Viewer | |
Broderick Daugherty Legacy Accounts Associate broderick_daugherty@gmail.com | Admin | |
Jacinthe Wiegand Future Group Developer jacinthe_wiegand36@gmail.com | Member | |
Jaqueline Little Future Interactions Planner jaqueline_little65@yahoo.com | Admin | |
Danyka Fahey Product Usability Representative danyka_fahey@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Betty Bruen International Research Assistant betty.bruen@yahoo.com | Admin | |
Omer Ortiz Senior Web Specialist omer_ortiz78@hotmail.com | Member | |
Joan Sipes Future Infrastructure Engineer joan_sipes28@gmail.com | Admin | |
Bailee Will Forward Group Facilitator bailee.will80@gmail.com | Admin | |
Lenora Predovic Central Security Designer lenora_predovic44@hotmail.com | Admin | |
Annabelle Kuphal Global Applications Associate annabelle_kuphal@hotmail.com | Admin | |
Bart Ernser Chief Directives Agent bart.ernser@hotmail.com | Member | |
Dedric Bailey International Response Assistant dedric.bailey@gmail.com | Viewer | |
Conner Donnelly District Response Designer conner.donnelly33@hotmail.com | Admin | |
Jamir Lebsack Internal Mobility Coordinator jamir_lebsack@gmail.com | Admin | |
Rudy Emmerich-Turner Human Mobility Administrator rudy.emmerich-turner@yahoo.com | Viewer | |
Antonio Willms Legacy Branding Representative antonio_willms17@yahoo.com | Member | |
Myrna McKenzie National Infrastructure Facilitator myrna.mckenzie@hotmail.com | Member | |
Millie Bailey Principal Communications Representative millie_bailey70@yahoo.com | Member | |
Gladyce Ratke Legacy Infrastructure Designer gladyce_ratke59@gmail.com | Admin | |
Jannie Doyle National Brand Supervisor jannie_doyle64@hotmail.com | Viewer | |
Giovanna Brakus Legacy Factors Engineer giovanna.brakus85@hotmail.com | Admin | |
Tyrel Torp Investor Applications Engineer tyrel.torp@hotmail.com | Member | |
Margaretta Kling International Functionality Facilitator margaretta_kling74@gmail.com | Admin | |
Annalise Kemmer Forward Mobility Facilitator annalise.kemmer@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 | |
|---|---|---|---|---|
| Nichole Gibson | neal_stokes10@gmail.com | Covina | Active | $938.95 |
| Thomas Stark-Fahey | pat85@gmail.com | Brownsville | Active | $295.03 |
| Evelyn Hamill | tatum_balistreri94@gmail.com | North Odell | Active | $294.44 |
| Dean Bashirian MD | virgie_weber36@yahoo.com | Vonberg | Inactive | $460.25 |
| Kristen Brakus | justyn57@gmail.com | Treverstad | Active | $765.60 |
| Total | $2,754.27 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kim Prohaska MD @mona.satterfield | augusta.leffler@gmail.com | Pascaleland | Inactive | $1,163.10 |
Dr. Joel Ondricka @clifford_hirthe40 | millie.kirlin76@hotmail.com | Raquelfort | Inactive | $843.52 |
Bradley Stiedemann @marta.walsh64 | trinity_rodriguez9@gmail.com | Batzstad | Inactive | $704.01 |
Dan Heidenreich @tamia_roob9 | telly_langosh74@hotmail.com | North Cedrickview | Active | $114.54 |
Joey Blanda @colby.windler | kristin43@gmail.com | Nicolasstead | Inactive | $548.10 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Javier Denesik-Mante | patricia.monahan61@gmail.com | Napa | Inactive | $838.64 |
| Preston Kassulke | emerald.stokes78@yahoo.com | Fort Alan | Inactive | $1,178.62 |
| Clark Becker | paige.schaefer@hotmail.com | Wittingport | Inactive | $1,168.21 |
| Dr. Mack Schmidt | forest.renner25@yahoo.com | Strongsville | Inactive | $19.45 |
| Angelina Abernathy | maxie.littel-macgyver84@yahoo.com | South Wilbertstead | Active | $1,113.24 |
| Total | $4,318.16 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dexter Smitham | arvilla77@hotmail.com | Spring Hill | Inactive | $798.02 |
| Doris Wyman | adell.mosciski91@yahoo.com | Wilmerstad | Active | $23.34 |
| Arnold Shanahan | valentina65@gmail.com | South Delpha | Inactive | $345.84 |
| Naomi Kuphal | deondre_kemmer@gmail.com | Sporerton | Active | $92.36 |
| Francis Monahan | veda.langworth@yahoo.com | Findlay | Inactive | $1,188.75 |
| Total | $2,448.31 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Raquel Heller | shanny.daugherty23@yahoo.com | Binsfield | Inactive | $816.77 |
| Hubert Bosco PhD | grayson.bailey86@yahoo.com | Scranton | Inactive | $889.65 |
| Spencer Tromp | rafael.muller82@gmail.com | Angelastad | Inactive | $976.15 |
| Francis Runolfsdottir | martina.ferry-kunze51@gmail.com | South Tess | Inactive | $809.30 |
| Alice Barrows | alvina.frami@gmail.com | South Demarcoview | Inactive | $509.04 |
| Total | $4,000.91 | |||
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 | ||
|---|---|---|---|---|---|
| Blanca Klein | betty20@hotmail.com | Westfield | Inactive | $819.82 | |
| Doyle Jacobi | clark.stoltenberg62@yahoo.com | McClureport | Inactive | $544.73 | |
| Marcia Rolfson | irwin.bergnaum81@yahoo.com | Petaluma | Inactive | $807.07 | |
| Angela Barrows III | melyssa_shanahan@gmail.com | West Thomascester | Active | $1,109.31 | |
| Clarence Lindgren | webster.cassin33@hotmail.com | Novi | Inactive | $521.45 | |
| Total | $3,802.38 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ed Tillman | jovanny.barrows-hagenes@gmail.com | Fort Claude | Active | $809.57 | |
| Albert Gulgowski | shana_rippin@gmail.com | Kittyberg | Inactive | $962.54 | |
| Angelo Wilderman | lillian55@hotmail.com | West Ariannatown | Inactive | $553.32 | |
| May Wuckert | antone.okuneva@gmail.com | Janiceshire | Inactive | $737.93 | |
| Rhonda Hintz-Zboncak | angel88@hotmail.com | Lake Theresiaburgh | Active | $941.82 | |
| Total | $4,005.18 | ||||
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 | |
|---|---|---|---|---|
| Loretta Balistreri | eryn_lakin21@gmail.com | Des Plaines | Inactive | $894.22 |
| Edmond Greenholt | jolie.mosciski48@yahoo.com | Rochester Hills | Active | $498.91 |
| Cody Romaguera | orville5@hotmail.com | Bergnaumfort | Inactive | $963.81 |
| Richard Ward | marcelle.kiehn22@yahoo.com | Mertzmouth | Active | $223.67 |
| Gwen Olson-Breitenberg | doris72@yahoo.com | Courtneyfurt | Inactive | $616.81 |
| Lionel Schmitt | roosevelt.bins83@gmail.com | East Darrin | Active | $1,025.44 |
| Rickey Zieme | reagan6@hotmail.com | University | Active | $423.17 |
| Ms. Jodi Rice | wilhelm_russel22@hotmail.com | New Elmer | Inactive | $900.99 |
| Darla Hansen | gerry.hills48@gmail.com | Abshireboro | Active | $621.69 |
| Marguerite Pacocha | brigitte_labadie1@hotmail.com | Reichelfield | Active | $884.74 |
| Jan Pollich-Haag | jose.mohr@yahoo.com | Humbertoshire | Active | $926.50 |
| April Stanton | daniella.hilll@gmail.com | Boscofurt | Inactive | $1,026.25 |
| Marvin Glover MD | arvel_hermiston12@hotmail.com | Bentonville | Active | $458.53 |
| Lillie Treutel | davonte.romaguera11@gmail.com | East Elsieville | Active | $311.35 |
| Hannah Pacocha-VonRueden Sr. | kellen16@yahoo.com | Cuyahoga Falls | Inactive | $145.70 |
| Total | $9,921.78 | |||
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 |