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 | Paid | PayPal | $442.29 |
| INV002 | Paid | PayPal | $828.96 |
| INV003 | Unpaid | Credit Card | $508.19 |
| INV004 | Unpaid | Credit Card | $872.94 |
| INV005 | Unpaid | Bank Transfer | $395.06 |
| INV006 | Paid | Bank Transfer | $650.45 |
| INV007 | Unpaid | Bank Transfer | $668.55 |
| Total | $4,366.44 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Chaz Fadel-Armstrong | Corporate Paradigm Representative | chaz_fadel-armstrong82@hotmail.com | Member | |
| Ella Runolfsson | Principal Accounts Technician | ella_runolfsson44@gmail.com | Admin | |
| Sarina Sanford | Legacy Factors Associate | sarina.sanford@gmail.com | Member | |
| Jerrell Gerhold | International Communications Associate | jerrell_gerhold@gmail.com | Member | |
| Elsie Rohan | Human Brand Manager | elsie.rohan42@yahoo.com | Admin | |
| Kobe Rohan | Future Applications Coordinator | kobe_rohan60@yahoo.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ilene Kirlin National Response Designer ilene_kirlin@yahoo.com | Member | |
Rachel Schultz District Paradigm Analyst rachel.schultz27@yahoo.com | Member | |
Gabe Kuhn Global Infrastructure Facilitator gabe_kuhn8@yahoo.com | Admin | |
Theo Douglas Central Solutions Planner theo.douglas@hotmail.com | Viewer | |
Arely Legros-Streich Internal Configuration Analyst arely.legros-streich@yahoo.com | Admin | |
Jennie Bailey National Usability Coordinator jennie.bailey@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Roma Bode-Zemlak Human Communications Architect roma.bode-zemlak@yahoo.com | Viewer | |
Elenora Powlowski Regional Configuration Specialist elenora_powlowski@gmail.com | Viewer | |
Haylie Gulgowski Regional Interactions Coordinator haylie.gulgowski62@gmail.com | Member | |
Elisha Leuschke-Dibbert Future Group Specialist elisha.leuschke-dibbert11@yahoo.com | Viewer | |
Edmund Moore Human Tactics Representative edmund_moore@hotmail.com | Member | |
Roberto Hansen Chief Tactics Analyst roberto.hansen@gmail.com | Member | |
Alberta Stokes-Mueller Customer Research Specialist alberta_stokes-mueller@gmail.com | Member | |
Godfrey Dickens Dynamic Configuration Orchestrator godfrey_dickens@hotmail.com | Member | |
Delta Kohler International Applications Producer delta_kohler@yahoo.com | Viewer | |
Moriah Mitchell Corporate Accountability Liaison moriah_mitchell76@hotmail.com | Member | |
Velva Quigley Internal Research Supervisor velva.quigley57@yahoo.com | Admin | |
Elenora Dickens Human Metrics Architect elenora_dickens@gmail.com | Member | |
Katherine Braun Corporate Infrastructure Planner katherine_braun45@yahoo.com | Admin | |
Darby Paucek National Identity Architect darby.paucek49@gmail.com | Admin | |
Icie Runte Lead Research Associate icie.runte82@hotmail.com | Admin | |
Ignatius Ward District Integration Administrator ignatius_ward6@hotmail.com | Admin | |
Lorenz Parker National Infrastructure Agent lorenz.parker@hotmail.com | Member | |
Kennedi Langworth Internal Communications Architect kennedi.langworth@hotmail.com | Admin | |
Turner Ernser Future Accountability Associate turner.ernser79@hotmail.com | Viewer | |
Jordon Torphy Regional Branding Manager jordon_torphy40@yahoo.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 | |
|---|---|---|---|---|
| Danny Batz | rodrigo.pollich@hotmail.com | West Darrin | Inactive | $771.43 |
| Joanne Blick | maude_kilback@hotmail.com | West Vicenta | Active | $718.91 |
| Ms. Andrea Kling | emile35@hotmail.com | Ebertport | Active | $217.99 |
| Latoya Hand I | gwen.orn@hotmail.com | Elgin | Active | $870.72 |
| Pete Balistreri | tessie_grady36@hotmail.com | Baileyboro | Active | $361.40 |
| Total | $2,940.45 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Fernando Klocko @ophelia.kautzer | rahul5@yahoo.com | Port Kobefurt | Inactive | $211.75 |
Wilbert Stroman @ismael_reichert87 | bennie_mraz@gmail.com | North Keithhaven | Active | $1,119.15 |
Kathy Roob PhD @liza_jerde16 | betty.daugherty@yahoo.com | Fanniehaven | Inactive | $1,058.63 |
Erica Beer Jr. @neoma.mcdermott-treutel12 | arnulfo86@gmail.com | West Hannaberg | Inactive | $1,175.56 |
Stacey Veum @graciela26 | daniela12@hotmail.com | West Gerson | Inactive | $951.40 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Terrance King | vena.moore83@yahoo.com | Kiehnchester | Inactive | $292.46 |
| Bobby Marks | rasheed_thiel@hotmail.com | Lake Sasha | Inactive | $1,103.47 |
| Debbie Pagac | ericka18@gmail.com | Eudorastad | Inactive | $20.58 |
| Marco Lakin | juliana.abbott98@gmail.com | Hesperia | Inactive | $98.33 |
| Carlton Stiedemann | santiago.west75@gmail.com | Levittown | Inactive | $90.40 |
| Total | $1,605.24 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johnnie Brown | winnifred.hills@hotmail.com | Lake Domingofort | Inactive | $1,081.47 |
| Stephen Paucek PhD | shaina_boyer38@yahoo.com | Annefurt | Inactive | $986.37 |
| Estelle Howe MD | gia_rohan@gmail.com | Huelschester | Active | $416.02 |
| Jerald Schuppe | lamont.abernathy@gmail.com | Fort Myers | Inactive | $1,084.04 |
| Mrs. Kristina Fisher | horace85@gmail.com | Anderson | Inactive | $107.38 |
| Total | $3,675.28 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Erica Nader | destany.emmerich91@hotmail.com | Port Augustachester | Inactive | $999.96 |
| Lora Gerlach-Hoeger | quinten_hansen30@gmail.com | Coconut Creek | Inactive | $1,187.46 |
| Oscar Wehner | erica.romaguera@hotmail.com | Chula Vista | Inactive | $561.92 |
| Johnny Bins | fredrick.upton74@yahoo.com | South Katelinton | Inactive | $847.25 |
| Ginger Mayert | keegan35@gmail.com | Tremblaystead | Active | $896.96 |
| Total | $4,493.55 | |||
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 | ||
|---|---|---|---|---|---|
| Daniel Robel | consuelo_emmerich@gmail.com | Arielport | Active | $1,116.47 | |
| Jonathan Weissnat | eden_kerluke@gmail.com | Lake Tessieton | Active | $1.45 | |
| Ora Rodriguez PhD | sanford_gorczany@yahoo.com | Theaport | Active | $828.16 | |
| Mildred Weissnat | ebony71@gmail.com | Canton | Inactive | $46.62 | |
| Jan Botsford | jefferey.olson65@hotmail.com | Generalfield | Active | $371.20 | |
| Total | $2,363.90 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Richard Denesik MD | adriana73@yahoo.com | Bernardside | Active | $815.46 | |
| Genevieve Strosin | isaias90@gmail.com | Lake Clemmie | Inactive | $730.64 | |
| Theodore Koch | alvina.volkman10@gmail.com | Lennyboro | Active | $152.20 | |
| Nichole Greenholt | jodie95@yahoo.com | Bell Gardens | Inactive | $735.17 | |
| Beverly Sawayn | prudence11@yahoo.com | North Dejon | Active | $573.01 | |
| Total | $3,006.48 | ||||
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. Jan Ortiz MD | meredith78@yahoo.com | Hillsboro | Active | $401.69 |
| Mrs. Karen Veum | celia27@hotmail.com | Cameronmouth | Active | $924.39 |
| Lance Orn | angus.koelpin@hotmail.com | Lake Berry | Inactive | $1,102.63 |
| Kenneth Collier-Cronin | betty.pfannerstill@yahoo.com | Tillmanstad | Inactive | $1,197.34 |
| Terence Williamson | retta63@yahoo.com | North Johnnieburgh | Inactive | $871.57 |
| William Price | shyann58@hotmail.com | Parisianstead | Inactive | $287.91 |
| Toby Christiansen | althea.leffler17@yahoo.com | Wesley Chapel | Inactive | $597.56 |
| Nadine Parisian | carson50@yahoo.com | New Austenstad | Active | $1,017.90 |
| Juanita Parisian | delphia15@gmail.com | Emeraldfield | Active | $106.79 |
| Regina Kuhic | howard.hudson53@gmail.com | South Dulce | Inactive | $989.30 |
| Rebecca Lehner | ella.von84@hotmail.com | Pagacfurt | Inactive | $1,100.43 |
| Francisco Prosacco | elyssa1@hotmail.com | New Abigale | Inactive | $697.27 |
| Katrina Morar | lance_zulauf@hotmail.com | Lehnerchester | Inactive | $1,057.81 |
| Dustin Doyle | ada.armstrong@gmail.com | North Kaci | Active | $121.85 |
| Jane Runolfsdottir | deanna_okon90@hotmail.com | Wilfordmouth | Active | $557.88 |
| Total | $11,032.32 | |||
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 |