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 | Pending | Credit Card | $496.92 |
| INV002 | Unpaid | Bank Transfer | $185.60 |
| INV003 | Unpaid | Bank Transfer | $403.09 |
| INV004 | Unpaid | Bank Transfer | $749.01 |
| INV005 | Unpaid | Credit Card | $220.74 |
| INV006 | Paid | PayPal | $481.07 |
| INV007 | Pending | Bank Transfer | $422.73 |
| Total | $2,959.16 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Tianna Johnson | Internal Operations Associate | tianna.johnson@yahoo.com | Admin | |
| Hyman Kuhlman | Senior Functionality Manager | hyman.kuhlman@hotmail.com | Member | |
| Graham Fadel-Windler | Direct Security Representative | graham_fadel-windler3@gmail.com | Member | |
| Daisha Cormier | Central Operations Designer | daisha_cormier@hotmail.com | Member | |
| Michael Witting | District Solutions Manager | michael.witting18@gmail.com | Member | |
| Abbie Wilkinson | District Quality Supervisor | abbie.wilkinson@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 |
|---|---|---|
Eleanore Stehr Customer Usability Director eleanore.stehr@yahoo.com | Member | |
Carolanne Lowe Human Accountability Architect carolanne_lowe@gmail.com | Admin | |
Juliana Wisoky Corporate Intranet Manager juliana.wisoky51@yahoo.com | Admin | |
Wilber Renner Human Implementation Supervisor wilber_renner29@yahoo.com | Admin | |
Anita Howell Chief Data Technician anita_howell@hotmail.com | Admin | |
Brent Donnelly Direct Intranet Architect brent.donnelly4@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Carlo Howe-Schimmel Internal Infrastructure Manager carlo_howe-schimmel@gmail.com | Admin | |
Maximillian Lehner Forward Operations Executive maximillian.lehner@yahoo.com | Admin | |
Jarret McDermott District Accounts Executive jarret_mcdermott66@hotmail.com | Member | |
Florence O'Reilly Human Data Administrator florence.oreilly57@hotmail.com | Member | |
Dion Koelpin Direct Accounts Consultant dion.koelpin@gmail.com | Member | |
Mireille Gutkowski District Markets Strategist mireille_gutkowski@gmail.com | Viewer | |
Blanche Franecki National Division Designer blanche_franecki@gmail.com | Viewer | |
Houston Willms Future Research Executive houston.willms@gmail.com | Admin | |
Tamia Williamson Senior Marketing Coordinator tamia.williamson@gmail.com | Viewer | |
Meredith Cole Forward Research Producer meredith_cole55@yahoo.com | Member | |
Haylie Krajcik Dynamic Factors Supervisor haylie.krajcik@yahoo.com | Admin | |
Easter Rice Forward Group Engineer easter.rice@yahoo.com | Member | |
Evalyn Herzog Direct Data Director evalyn_herzog46@yahoo.com | Member | |
Nicklaus Stracke Forward Implementation Technician nicklaus.stracke@gmail.com | Admin | |
Adan Yundt Senior Web Supervisor adan.yundt93@gmail.com | Admin | |
Maeve Welch Senior Branding Specialist maeve.welch84@yahoo.com | Member | |
Marilie Kuphal Customer Infrastructure Assistant marilie_kuphal@hotmail.com | Viewer | |
Emmet Kreiger Central Web Administrator emmet_kreiger3@gmail.com | Viewer | |
Chaz Olson-Bode Senior Interactions Specialist chaz_olson-bode@gmail.com | Admin | |
Larry Kemmer Central Communications Orchestrator larry_kemmer85@gmail.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 | |
|---|---|---|---|---|
| George Bechtelar | shaun99@hotmail.com | Fayborough | Active | $30.25 |
| Everett Konopelski | robyn6@gmail.com | Fort Krystelport | Active | $525.83 |
| Duane Wehner | janelle3@gmail.com | Rialto | Inactive | $118.64 |
| Domingo Bailey | evelyn_bradtke@yahoo.com | Lake Erickview | Inactive | $733.05 |
| Ben Hayes | deangelo53@hotmail.com | Lake Lula | Inactive | $928.26 |
| Total | $2,336.03 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Janie Mraz @dee.medhurst97 | freda_konopelski82@gmail.com | Kalamazoo | Inactive | $713.49 |
Mercedes Dibbert Jr. @antone.feeney25 | foster_stamm-mosciski@gmail.com | North Richland Hills | Inactive | $461.48 |
Arlene Wintheiser @kevin64 | shany11@gmail.com | Huntsville | Inactive | $460.39 |
Bryan Smitham @katelyn25 | carmine.hackett@hotmail.com | Considinecester | Active | $1,179.30 |
Katrina Mayer @kirk_kassulke38 | cathryn_reynolds49@yahoo.com | Norwoodstead | Inactive | $808.32 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Justin Fisher | waylon.conn@gmail.com | South Verner | Active | $188.67 |
| Lance Pacocha | randall45@hotmail.com | Yasmeenland | Active | $1,058.86 |
| Kim Shanahan | dallin.hamill88@yahoo.com | Gottliebworth | Inactive | $53.49 |
| Natalie Will | winston.luettgen17@hotmail.com | North Tabithaview | Active | $390.43 |
| Cody Cassin | shayna.hermann83@hotmail.com | East Audra | Inactive | $775.93 |
| Total | $2,467.38 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Bert Jaskolski | laurel39@gmail.com | Fort Kaelaboro | Inactive | $215.65 |
| Melba Huels-Torp | aiyana.johns88@gmail.com | South Freda | Active | $496.78 |
| Jodi O'Conner | orville_koch@gmail.com | Augustusmouth | Active | $595.38 |
| Roosevelt Hilll | annabelle88@hotmail.com | Brettstad | Inactive | $936.12 |
| Claude Bednar | demetris41@hotmail.com | Yazminchester | Inactive | $735.41 |
| Total | $2,979.34 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Debra Ruecker | sylvan.nienow84@hotmail.com | West Zulacester | Active | $31.20 |
| Robin Sauer-Ernser | megane.schinner@yahoo.com | Fort Elfrieda | Inactive | $350.80 |
| Clyde Bernier | trevion.williamson@yahoo.com | Marinaworth | Active | $168.52 |
| Myron Morar | victor35@yahoo.com | West Mattie | Active | $427.61 |
| Cary Labadie | nicole_pacocha@hotmail.com | Kerlukeside | Inactive | $824.54 |
| Total | $1,802.67 | |||
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 | ||
|---|---|---|---|---|---|
| Tyler Spencer | wilbert_kautzer@yahoo.com | Fort Bridgetcester | Active | $141.80 | |
| Donna Rosenbaum | asia_bechtelar77@yahoo.com | Lake Giuseppe | Active | $293.64 | |
| Dr. Katrina Gleichner | katlyn.heathcote@hotmail.com | West Maudeton | Inactive | $687.96 | |
| Tami Waters | lemuel_altenwerth67@yahoo.com | South Bradley | Inactive | $1,169.24 | |
| Dixie Russel | gerald_zboncak38@yahoo.com | Danielside | Inactive | $1,081.91 | |
| Total | $3,374.55 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Charlie Nicolas | dawn.connelly@gmail.com | Hartmannstad | Inactive | $981.50 | |
| Alexandra Lehner | vinnie93@hotmail.com | Lake Maryport | Inactive | $235.08 | |
| Terence O'Conner Sr. | elvera.hilll@yahoo.com | Armaniville | Inactive | $962.66 | |
| Abel Waelchi | fabiola_cummings@yahoo.com | South Tinacester | Inactive | $574.52 | |
| Mr. Stanley Powlowski II | jacinthe_boyer16@gmail.com | Bothell | Active | $778.76 | |
| Total | $3,532.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 | |
|---|---|---|---|---|
| Lawrence Ritchie | annette_yost44@hotmail.com | New Khalidboro | Active | $212.27 |
| Derrick Kilback | frida_jacobs@hotmail.com | Norfolk | Inactive | $302.27 |
| Ms. Rosa Tremblay | connor.orn50@hotmail.com | New Hailiehaven | Inactive | $61.44 |
| Eduardo Dach II | florine_balistreri-reichert46@yahoo.com | Hegmannboro | Inactive | $194.89 |
| Katie Trantow | keanu6@yahoo.com | Bettyburgh | Inactive | $47.64 |
| Jim Mayert | candace.hartmann-wilkinson@gmail.com | Osinskiville | Active | $390.22 |
| Annie Kling | anderson.gislason@yahoo.com | Camillestead | Active | $991.73 |
| Laura Botsford-Predovic | aida.harris@gmail.com | North Leopoldo | Active | $553.12 |
| Leslie Hudson | johan_lindgren17@hotmail.com | Newton | Inactive | $1,008.07 |
| James Altenwerth | june.emard-sawayn@hotmail.com | Paradise | Inactive | $96.06 |
| Janie Ruecker | amaya_johns@yahoo.com | Pourosworth | Active | $870.09 |
| Wilson Von | oliver_mosciski35@yahoo.com | Salt Lake City | Active | $107.88 |
| Mr. Maurice Effertz | austin69@gmail.com | Miami | Active | $863.16 |
| Dr. Sheri Hammes | alexandre85@yahoo.com | Fadelbury | Active | $128.29 |
| Carl Rempel | claud_kozey@hotmail.com | Apex | Active | $958.96 |
| Total | $6,786.09 | |||
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 |