Table
A responsive table component.
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 | Unpaid | Credit Card | $631.76 |
| INV002 | Unpaid | Bank Transfer | $967.75 |
| INV003 | Paid | Credit Card | $611.05 |
| INV004 | Unpaid | Credit Card | $688.17 |
| INV005 | Paid | Credit Card | $230.67 |
| INV006 | Pending | Credit Card | $251.06 |
| INV007 | Unpaid | Credit Card | $340.66 |
| Total | $3,721.12 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Hans Kessler | Lead Marketing Architect | hans.kessler@yahoo.com | Admin | |
| Gaston Kunze | Future Factors Agent | gaston_kunze@hotmail.com | Viewer | |
| Edyth Dare | District Identity Representative | edyth.dare25@gmail.com | Admin | |
| Wallace Cruickshank | Future Mobility Administrator | wallace_cruickshank19@hotmail.com | Member | |
| Gregory Barton | Investor Integration Representative | gregory.barton@hotmail.com | Viewer | |
| Tod Conn | Customer Applications Consultant | tod.conn34@hotmail.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 |
|---|---|---|
Citlalli Schaefer Direct Identity Liaison citlalli.schaefer@gmail.com | Member | |
Earline Harvey-Metz Forward Research Technician earline_harvey-metz48@hotmail.com | Member | |
Helene Smith Product Mobility Orchestrator helene.smith@hotmail.com | Admin | |
Rowland Greenholt Corporate Quality Agent rowland.greenholt45@gmail.com | Admin | |
Nicklaus Predovic Direct Web Technician nicklaus_predovic@yahoo.com | Admin | |
Jordi Trantow Forward Quality Coordinator jordi.trantow@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Marielle Ryan District Web Coordinator marielle_ryan15@gmail.com | Member | |
Rowan Feeney Regional Web Developer rowan.feeney@yahoo.com | Admin | |
Mikayla Little Senior Applications Liaison mikayla.little39@yahoo.com | Member | |
Ricky Parisian Corporate Intranet Facilitator ricky.parisian39@yahoo.com | Admin | |
Karelle Frami Forward Factors Analyst karelle_frami19@yahoo.com | Viewer | |
Lilla Wilkinson Global Data Administrator lilla_wilkinson@hotmail.com | Viewer | |
Brent Fritsch Internal Research Director brent.fritsch7@yahoo.com | Admin | |
Donavon Skiles Customer Configuration Supervisor donavon.skiles99@hotmail.com | Viewer | |
Kayli Rogahn Investor Communications Director kayli.rogahn54@gmail.com | Member | |
Van Lakin-Cassin Central Directives Developer van.lakin-cassin14@gmail.com | Admin | |
Bertrand Greenholt Lead Program Specialist bertrand_greenholt74@hotmail.com | Member | |
Randal Quigley Investor Interactions Strategist randal.quigley19@gmail.com | Member | |
Mabel Klein Internal Mobility Representative mabel_klein@yahoo.com | Member | |
Kathlyn McCullough Lead Intranet Associate kathlyn.mccullough@hotmail.com | Viewer | |
Walker Kessler Customer Operations Specialist walker.kessler@hotmail.com | Member | |
Pablo McDermott Forward Interactions Supervisor pablo_mcdermott@yahoo.com | Viewer | |
Anabel Deckow Direct Optimization Director anabel.deckow@yahoo.com | Member | |
Hoyt Kling Legacy Infrastructure Technician hoyt_kling@hotmail.com | Viewer | |
Christ Wilderman Senior Configuration Specialist christ.wilderman94@gmail.com | Member | |
Kurtis Sporer Dynamic Security Engineer kurtis.sporer71@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 | |
|---|---|---|---|---|
| Mr. Theodore Padberg | maci_boyer@gmail.com | Hermistontown | Active | $68.17 |
| Dr. Charles Larkin | serena.bogan@hotmail.com | East Eloyview | Inactive | $1,053.60 |
| Mr. Kurt O'Conner | hardy.herman27@yahoo.com | North Porter | Active | $140.21 |
| Ramon Powlowski | issac_kuphal@yahoo.com | Salina | Inactive | $379.51 |
| Miss Cassandra Towne | maximilian_grimes@hotmail.com | New Edmundfield | Active | $728.46 |
| Total | $2,369.95 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Paul Swaniawski @fae.runolfsdottir28 | graham82@gmail.com | East Lolafield | Inactive | $654.67 |
Alfred Casper @mozelle64 | vernon76@hotmail.com | Hayliefield | Inactive | $782.97 |
Rudy Ankunding II @alize.gutmann54 | napoleon.upton@yahoo.com | West Ryderburgh | Inactive | $632.02 |
Lena Sipes @cristopher55 | avery_nitzsche@hotmail.com | Fort Ervinland | Active | $1,163.51 |
Jonathan Gusikowski @lisa.mitchell | marquise_rutherford@gmail.com | South Kattie | Active | $1,162.68 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Myra Braun | aiden_hermiston@hotmail.com | Fort Antoniettaberg | Active | $101.19 |
| Devin Walter | federico.osinski53@yahoo.com | Joseton | Active | $268.96 |
| Beatrice Jenkins | zetta15@yahoo.com | New Neha | Inactive | $1,046.16 |
| Anthony Funk | victor_lockman@yahoo.com | Levittown | Inactive | $685.49 |
| Deanna Wilderman III | gus.kunze@hotmail.com | Allanhaven | Inactive | $1,193.56 |
| Total | $3,295.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Evan Runte | christop.nader@gmail.com | Damariscester | Inactive | $1,044.49 |
| Alton Rutherford | sabryna_vandervort91@hotmail.com | Josiahstad | Inactive | $106.26 |
| David Larson | corene.labadie@yahoo.com | Audraville | Inactive | $279.48 |
| Sheri Kutch | kariane3@hotmail.com | South Alphonso | Active | $268.15 |
| Annette Dickinson | jeffry.weber76@yahoo.com | Memphis | Active | $219.47 |
| Total | $1,917.85 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Blake Braun | micah.schaden34@hotmail.com | New Wava | Inactive | $1,163.63 |
| Wilma Schowalter | zander.jacobson31@yahoo.com | Bauchton | Active | $858.23 |
| Tara Koch | johathan75@yahoo.com | Maryberg | Inactive | $42.63 |
| Dr. Lucia Hackett | sasha.buckridge@hotmail.com | Tuscaloosa | Active | $229.78 |
| Essie Considine | garland_reilly@yahoo.com | Port Claratown | Inactive | $1,039.84 |
| Total | $3,334.11 | |||
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 | ||
|---|---|---|---|---|---|
| Terry Wolff | raphaelle64@yahoo.com | New Marianne | Inactive | $88.08 | |
| Lindsay Welch | santos_wunsch@yahoo.com | Fort Nealfurt | Active | $695.70 | |
| Willis Mohr | brant.jast-pagac66@hotmail.com | Santee | Active | $1,037.80 | |
| Guadalupe Crona | virgil36@hotmail.com | Bethelfurt | Inactive | $94.29 | |
| Colin Sipes | lavon_schaden@hotmail.com | Lake Rylanfort | Inactive | $939.25 | |
| Total | $2,855.12 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jennifer Hettinger | brandt2@yahoo.com | Wichita | Active | $428.76 | |
| Gilberto Torphy | elbert.wilkinson@hotmail.com | Bergnaumburgh | Active | $1,147.05 | |
| Monique Schultz | emilie24@yahoo.com | South Evastead | Active | $963.42 | |
| Paula Farrell | antwan92@hotmail.com | West Elenora | Active | $123.75 | |
| Keith Brekke | breanne.hills50@yahoo.com | Natburgh | Active | $226.48 | |
| Total | $2,889.46 | ||||
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 | |
|---|---|---|---|---|
| Ian Zemlak | ruben.goyette1@hotmail.com | Feeneychester | Inactive | $143.87 |
| Mr. Cody Funk | claude48@yahoo.com | Lucyville | Inactive | $992.10 |
| Alan Jerde | porter_crooks67@hotmail.com | North Patrick | Active | $909.42 |
| Maxine Lowe | kendrick_beatty@gmail.com | Nitzscheton | Active | $114.21 |
| Sheri Weimann | salvador.brown@yahoo.com | Boston | Inactive | $507.45 |
| Sophia Hayes | marguerite_kirlin@yahoo.com | West Lonny | Active | $1,066.26 |
| Theodore Hansen | lavina_schmeler98@hotmail.com | Reno | Inactive | $765.09 |
| Dr. Ken Schuster | rosalinda21@yahoo.com | Schuppemouth | Inactive | $851.80 |
| Kyle Bailey | arno58@gmail.com | Pagaccester | Inactive | $160.78 |
| Bridget Schmeler | chesley.trantow39@yahoo.com | Danview | Active | $583.15 |
| Mindy Hartmann | kieran_shanahan54@hotmail.com | Burnsville | Active | $72.05 |
| Antonia Cormier-Boehm | madyson.dicki@hotmail.com | Fort Nadiastead | Active | $811.55 |
| Flora VonRueden | glennie.rodriguez20@hotmail.com | Krystelmouth | Active | $662.42 |
| Malcolm Balistreri | walker90@hotmail.com | Casperhaven | Inactive | $180.93 |
| Sean Miller-Prosacco | vernon73@hotmail.com | Noemitown | Inactive | $474.66 |
| Total | $8,295.74 | |||
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 |