Table
A responsive table component.
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 | Unpaid | Credit Card | $248.44 |
| INV002 | Unpaid | Credit Card | $574.10 |
| INV003 | Unpaid | PayPal | $670.21 |
| INV004 | Unpaid | PayPal | $212.97 |
| INV005 | Pending | PayPal | $587.32 |
| INV006 | Pending | Bank Transfer | $356.65 |
| INV007 | Unpaid | Credit Card | $371.36 |
| Total | $3,021.05 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Hope Conn | Lead Factors Director | hope_conn11@yahoo.com | Admin | |
| Cali Stoltenberg | Human Accounts Facilitator | cali_stoltenberg@gmail.com | Viewer | |
| Brett Goldner | Human Integration Supervisor | brett_goldner@yahoo.com | Member | |
| Millie Hettinger | Chief Web Manager | millie_hettinger@gmail.com | Member | |
| Norris MacGyver | Global Operations Specialist | norris_macgyver13@hotmail.com | Admin | |
| Lou Mraz | Future Markets Facilitator | lou_mraz94@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 |
|---|---|---|
Carmela Larkin National Tactics Officer carmela.larkin61@yahoo.com | Viewer | |
Erling O'Connell International Markets Liaison erling_oconnell@hotmail.com | Admin | |
Norwood Kub District Tactics Technician norwood_kub@hotmail.com | Viewer | |
Katlynn Streich Customer Brand Representative katlynn.streich@hotmail.com | Admin | |
Kianna Lowe Direct Response Coordinator kianna_lowe66@gmail.com | Viewer | |
Rhea Haley National Accounts Producer rhea_haley5@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Moises Hettinger Corporate Response Consultant moises_hettinger30@hotmail.com | Viewer | |
Dennis Denesik Regional Response Associate dennis_denesik@hotmail.com | Viewer | |
Rafaela Watsica International Accounts Consultant rafaela_watsica25@gmail.com | Viewer | |
Meaghan Nitzsche Legacy Directives Orchestrator meaghan.nitzsche@hotmail.com | Member | |
Jayden Larkin Internal Paradigm Representative jayden_larkin@hotmail.com | Viewer | |
Jessyca Greenfelder International Integration Engineer jessyca_greenfelder@yahoo.com | Admin | |
Waino Davis Lead Metrics Strategist waino_davis85@yahoo.com | Member | |
Jenifer Moen Human Optimization Developer jenifer.moen@yahoo.com | Admin | |
Ethyl Gislason National Accounts Engineer ethyl_gislason52@hotmail.com | Viewer | |
Lorenza Huel Customer Response Director lorenza.huel@yahoo.com | Viewer | |
Erling Durgan Direct Response Developer erling_durgan@yahoo.com | Viewer | |
Matteo Skiles Corporate Identity Administrator matteo.skiles@gmail.com | Member | |
Raina Thiel Global Configuration Technician raina.thiel25@yahoo.com | Admin | |
Stephen Heidenreich-Heaney Product Usability Consultant stephen_heidenreich-heaney64@gmail.com | Member | |
Elenora Lindgren Future Solutions Orchestrator elenora_lindgren98@yahoo.com | Member | |
Marianne Toy Corporate Program Developer marianne_toy15@gmail.com | Admin | |
Germaine Rohan International Assurance Director germaine.rohan@yahoo.com | Viewer | |
Zelma Haag Human Mobility Planner zelma.haag15@yahoo.com | Member | |
Hanna Hills National Marketing Associate hanna_hills53@gmail.com | Admin | |
Natasha White Future Usability Liaison natasha.white@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 | |
|---|---|---|---|---|
| Evan Terry | jadyn10@yahoo.com | West Jammieburgh | Active | $1,184.30 |
| Ms. Lynne Senger | jackeline_leffler18@gmail.com | West Verna | Inactive | $1,153.05 |
| Alexander Connelly | jabari.rau@hotmail.com | Port Garthfort | Active | $118.27 |
| Dr. Antoinette Marquardt | demetrius.russel@yahoo.com | Port Jovan | Inactive | $607.75 |
| Geoffrey Anderson | milo3@gmail.com | Roelborough | Inactive | $240.95 |
| Total | $3,304.32 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Karla Hartmann @percy.hoeger | elinore.crooks@hotmail.com | Fort Chase | Inactive | $579.14 |
Andres Pouros @ignatius.runolfsson67 | christelle83@gmail.com | Uriahland | Inactive | $517.84 |
Colin Keeling-Torp @horacio.pacocha | lewis.schimmel@hotmail.com | Greenholtfield | Inactive | $1,005.15 |
Mrs. Laurie Quitzon @keyshawn.quitzon | janae_heller@yahoo.com | Ellaworth | Active | $793.77 |
Marilyn Schmeler @travis_lueilwitz | kristofer.senger@yahoo.com | Port Wava | Active | $398.02 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alejandro Parker | boyd_wisoky@gmail.com | Redmond | Active | $539.92 |
| Shawna Kuhn I | howard41@hotmail.com | Redondo Beach | Inactive | $814.70 |
| Gerald Hoppe | alfonzo.lind@yahoo.com | Bend | Active | $142.10 |
| Ms. Sophie Weimann | maryse.lind47@yahoo.com | Padbergton | Inactive | $48.94 |
| Amanda Greenholt | andy.oreilly@yahoo.com | West Saul | Active | $591.11 |
| Total | $2,136.77 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wendy Ledner | zakary61@hotmail.com | North Estell | Active | $148.87 |
| Jake Weber | timmy_homenick@hotmail.com | North Las Vegas | Inactive | $1,105.39 |
| Ted Hermann | hillard.macejkovic52@hotmail.com | North Dee | Active | $990.13 |
| Patrick Mertz | mac.waters@hotmail.com | North Zaria | Inactive | $412.84 |
| Darrin O'Conner | collin23@yahoo.com | Rock Hill | Inactive | $944.39 |
| Total | $3,601.62 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Kristin Goldner | garth_stroman@gmail.com | New Beatriceview | Active | $1,097.98 |
| Leticia Runolfsdottir | deon_abernathy83@gmail.com | Glovermouth | Inactive | $441.37 |
| Steve Lubowitz | andrew69@yahoo.com | Whitefield | Active | $655.81 |
| Daisy Wisoky | julien_marvin@gmail.com | Lehnerhaven | Inactive | $67.35 |
| Jerome Boehm | arjun_williamson92@gmail.com | North Zackary | Inactive | $6.02 |
| Total | $2,268.53 | |||
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 | ||
|---|---|---|---|---|---|
| May Upton | fredrick.willms86@yahoo.com | Port Wainostad | Active | $1,085.86 | |
| Mr. Alfredo Mosciski | camylle.bahringer@gmail.com | Yostside | Active | $613.25 | |
| Drew Medhurst | marilou_kassulke-stanton@yahoo.com | East Angelitastead | Active | $189.81 | |
| Arthur Borer | khalil.spinka@yahoo.com | Lake Robbstad | Inactive | $403.39 | |
| Mr. Amos Koss | kianna19@yahoo.com | North Marilouport | Inactive | $318.97 | |
| Total | $2,611.28 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Antoinette Schuster | elvie_rolfson-hirthe@hotmail.com | Fort Rahsaanburgh | Inactive | $792.89 | |
| Yvette Ebert | vella51@yahoo.com | Lake Florencio | Active | $9.17 | |
| Agnes Denesik | jarret51@gmail.com | New Zachary | Inactive | $345.10 | |
| Leslie Gottlieb | frederique58@hotmail.com | Atlanta | Active | $38.93 | |
| Miss Lola Harber | macy_jerde@gmail.com | Rutherfordhaven | Inactive | $99.43 | |
| Total | $1,285.52 | ||||
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 | |
|---|---|---|---|---|
| Gene Volkman | valentine14@yahoo.com | West Moriahport | Inactive | $1,046.32 |
| Joanne Wilkinson | raphaelle_nolan@hotmail.com | Brainshire | Active | $429.20 |
| Dr. Charlie Bergnaum | rita_leffler91@yahoo.com | Napa | Inactive | $18.10 |
| Maryann Kuhlman | sonya_luettgen25@hotmail.com | West Delmerside | Inactive | $1,128.53 |
| Andy Koelpin | eduardo.williamson@gmail.com | Mariahfort | Inactive | $676.66 |
| Virginia Ferry | mara.padberg41@hotmail.com | Norwalk | Active | $527.63 |
| Miss Miriam Cormier | tiana9@gmail.com | New Laurenceberg | Active | $10.85 |
| Amos Kling | tyra.boehm62@yahoo.com | Carsonshire | Inactive | $1,005.45 |
| Doris Ondricka | loraine90@yahoo.com | Selenaville | Active | $431.85 |
| Tina O'Connell | ethel3@yahoo.com | Port Edmundfurt | Inactive | $166.18 |
| Lee D'Amore V | cindy_hermann77@yahoo.com | Lake Tyra | Inactive | $232.60 |
| Stewart Wilderman | alyson.oreilly86@yahoo.com | Mylescester | Active | $1,037.85 |
| Dr. Oscar Purdy | chanel_mckenzie11@yahoo.com | West Keshauncester | Active | $604.57 |
| Angel Kling | kayleigh.vonrueden99@yahoo.com | Portland | Inactive | $225.99 |
| Betsy Leuschke | serena_stoltenberg@hotmail.com | Buffalo | Inactive | $595.23 |
| Total | $8,137.01 | |||
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 |