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 | Bank Transfer | $247.47 |
| INV002 | Unpaid | Credit Card | $802.03 |
| INV003 | Paid | PayPal | $785.48 |
| INV004 | Pending | PayPal | $828.56 |
| INV005 | Paid | Credit Card | $901.39 |
| INV006 | Pending | Credit Card | $864.54 |
| INV007 | Pending | Credit Card | $940.86 |
| Total | $5,370.33 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Zoila Parker | Senior Research Executive | zoila_parker@yahoo.com | Admin | |
| Tyrese Powlowski | Principal Security Executive | tyrese_powlowski@gmail.com | Viewer | |
| Nickolas Dare | International Configuration Assistant | nickolas_dare81@gmail.com | Admin | |
| Erika Rodriguez | International Tactics Consultant | erika_rodriguez@gmail.com | Admin | |
| Agustin Fahey | Legacy Operations Executive | agustin_fahey90@hotmail.com | Admin | |
| Marta Carter | District Implementation Officer | marta.carter55@yahoo.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 |
|---|---|---|
Eileen Labadie Senior Implementation Director eileen.labadie@gmail.com | Member | |
Rhea O'Connell District Integration Liaison rhea_oconnell@yahoo.com | Admin | |
Carroll Schiller Lead Optimization Coordinator carroll.schiller76@hotmail.com | Viewer | |
Sheridan Wilderman Product Infrastructure Liaison sheridan_wilderman@yahoo.com | Viewer | |
Constance Bosco Chief Response Director constance.bosco@hotmail.com | Member | |
Hardy Kemmer National Intranet Technician hardy.kemmer45@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 |
|---|---|---|
Loy Christiansen Customer Infrastructure Representative loy.christiansen18@gmail.com | Admin | |
Shania Zboncak Human Web Technician shania_zboncak@yahoo.com | Admin | |
Abdul Smith International Data Engineer abdul.smith@hotmail.com | Admin | |
Mortimer Frami International Usability Manager mortimer_frami@yahoo.com | Member | |
Maybell Marquardt District Solutions Consultant maybell.marquardt4@gmail.com | Member | |
Gillian Ebert National Group Analyst gillian_ebert85@hotmail.com | Admin | |
Nigel Price Principal Metrics Liaison nigel_price12@gmail.com | Admin | |
Cathryn Spencer Regional Optimization Developer cathryn.spencer40@gmail.com | Viewer | |
Cade Funk Customer Security Officer cade.funk@yahoo.com | Member | |
Uriel Prosacco District Integration Executive uriel_prosacco67@gmail.com | Admin | |
Camila Schaden Legacy Implementation Designer camila_schaden67@yahoo.com | Admin | |
Aidan Vandervort Internal Assurance Orchestrator aidan.vandervort17@gmail.com | Admin | |
Pinkie Veum Regional Marketing Architect pinkie.veum@gmail.com | Admin | |
Cicero Lesch Regional Brand Strategist cicero_lesch79@hotmail.com | Viewer | |
Christelle Pfeffer Internal Optimization Analyst christelle_pfeffer@yahoo.com | Admin | |
Melissa Simonis Product Mobility Agent melissa_simonis43@gmail.com | Admin | |
Tre Rogahn Chief Mobility Manager tre.rogahn6@yahoo.com | Admin | |
Pierce Howell Direct Branding Manager pierce.howell70@hotmail.com | Viewer | |
Lance Kohler-Ortiz International Assurance Officer lance_kohler-ortiz77@gmail.com | Member | |
Enrique Daniel Future Creative Assistant enrique_daniel@yahoo.com | Member |
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 | |
|---|---|---|---|---|
| Don Schmitt | israel_russel@gmail.com | Lake Zechariah | Active | $24.82 |
| Wendy Macejkovic | duncan_bode51@hotmail.com | Allen | Inactive | $163.72 |
| Sylvia Yost | fletcher67@gmail.com | Hermistontown | Inactive | $202.34 |
| Fred Beer | ilene.strosin@yahoo.com | Wheaton | Active | $532.70 |
| Ross Bahringer | bennett65@gmail.com | North Cordelia | Inactive | $429.48 |
| Total | $1,353.06 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Leo Balistreri MD @helene86 | albin.williamson89@yahoo.com | Fort Betteton | Active | $603.55 |
Louis Stokes @alexanne69 | daphney.strosin@gmail.com | North Ophelia | Inactive | $204.95 |
Ricky Schumm @rosalind.reichel34 | katharina.stiedemann@hotmail.com | Fort Herta | Inactive | $815.36 |
Miss Jessie Adams @leann65 | kale.zemlak@hotmail.com | Overland Park | Active | $592.18 |
Dr. Lowell Bruen @gennaro59 | augustine23@hotmail.com | San Bruno | Inactive | $1,145.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marta Kemmer | gerald.boyle@yahoo.com | Rancho Santa Margarita | Active | $233.43 |
| Guy Watsica | viviane.goodwin18@yahoo.com | Jaylonview | Active | $317.39 |
| Miss Lillian Flatley IV | margot11@hotmail.com | Lake Lewhaven | Active | $804.36 |
| Jan Kiehn | carmine13@hotmail.com | Fort Andreannefield | Inactive | $1,073.80 |
| Sonya Bergnaum | monroe74@yahoo.com | Blockhaven | Active | $488.48 |
| Total | $2,917.46 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dianne Cronin | reginald_herman@gmail.com | Eddland | Inactive | $123.24 |
| Diane Hermiston | shaylee_kohler@yahoo.com | West Elaina | Inactive | $1,008.79 |
| Jeanette Upton | guadalupe_beier@gmail.com | Apple Valley | Active | $396.29 |
| Lucille Abernathy | ellsworth_schmitt@hotmail.com | Lake Lucindaberg | Inactive | $218.16 |
| Jeffery Price | ewell_jakubowski81@hotmail.com | Newellfort | Inactive | $808.72 |
| Total | $2,555.20 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Laurie Boyer | tiana.kuvalis86@gmail.com | Gregorioshire | Inactive | $834.81 |
| Roosevelt Cartwright Sr. | shawn.kuhn85@hotmail.com | North Altheaberg | Active | $231.30 |
| Minnie Schaden | arnaldo.pouros@hotmail.com | East Alva | Active | $961.37 |
| Danielle Miller | lura_wiza7@gmail.com | North Christy | Active | $572.61 |
| Ida Wuckert | katlyn_halvorson@gmail.com | Ferryhaven | Inactive | $321.09 |
| Total | $2,921.18 | |||
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 | ||
|---|---|---|---|---|---|
| Silvia Hahn DDS | roxane_haley@yahoo.com | West Isaiah | Inactive | $440.18 | |
| Nina Moore | bartholome41@yahoo.com | San Clemente | Inactive | $188.07 | |
| Ms. Vicky Haley | freeman63@yahoo.com | Carson | Active | $363.37 | |
| Cesar Heller I | derek_hodkiewicz@gmail.com | Kosston | Inactive | $1,148.03 | |
| Mr. Milton Thompson | sarah95@yahoo.com | Mazieboro | Inactive | $996.97 | |
| Total | $3,136.62 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lee Johns | clarabelle.boehm@hotmail.com | East Corinecester | Active | $63.12 | |
| Lynn West Sr. | keanu.treutel@gmail.com | Lake Ceciliachester | Active | $485.39 | |
| Lonnie Jacobs | eli.hagenes@gmail.com | Annabellburgh | Inactive | $386.64 | |
| Miss Flora Wisozk | eldridge.hackett@hotmail.com | North Izabellaton | Active | $142.29 | |
| Trevor Blanda DVM | lexie_huel@hotmail.com | Runolfssonboro | Inactive | $140.72 | |
| Total | $1,218.16 | ||||
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 | |
|---|---|---|---|---|
| Leticia Kuhlman | tabitha_kihn59@hotmail.com | Andrestead | Inactive | $1,033.69 |
| Joe Hilpert DVM | gisselle_smith@hotmail.com | Adriannaberg | Inactive | $842.26 |
| Celia Kihn | sigrid_koss5@hotmail.com | Port Weldon | Inactive | $556.91 |
| Lela Altenwerth | boyd_stanton@yahoo.com | West Omerton | Active | $851.10 |
| Muriel Stanton | jordane51@gmail.com | Coreneview | Active | $980.65 |
| Gretchen Pouros | colt.erdman@hotmail.com | Lake Meta | Inactive | $446.18 |
| Jennifer Pfeffer | lois79@yahoo.com | Briafort | Inactive | $61.19 |
| Jenny Smitham | nova_abshire@gmail.com | Parisianstead | Active | $1,002.09 |
| Bethany Hahn | shaylee.medhurst@hotmail.com | Townehaven | Active | $952.99 |
| Dr. Ray Haley | margarete.schuppe@yahoo.com | North Demetrisville | Active | $913.01 |
| Erica Collins | trever0@gmail.com | Paradise | Active | $687.31 |
| May Marks | meagan.collins35@hotmail.com | Port Zeldaton | Active | $995.06 |
| Victor McGlynn | carlo33@yahoo.com | Jerryboro | Inactive | $495.09 |
| Kendra Wolff | therese.williamson@yahoo.com | Tavaresmouth | Inactive | $484.18 |
| Maxine Ryan | ernest8@gmail.com | New Cotyland | Inactive | $21.31 |
| Total | $10,323.02 | |||
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 |