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 | Pending | Bank Transfer | $544.25 |
| INV002 | Paid | PayPal | $311.65 |
| INV003 | Paid | Bank Transfer | $682.45 |
| INV004 | Paid | PayPal | $508.84 |
| INV005 | Paid | PayPal | $843.95 |
| INV006 | Paid | Credit Card | $863.45 |
| INV007 | Paid | Bank Transfer | $619.33 |
| Total | $4,373.92 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Lavina Mante | Forward Identity Executive | lavina.mante@gmail.com | Member | |
| Diego Robel | Forward Markets Assistant | diego.robel@hotmail.com | Admin | |
| Kyle Kuphal | Corporate Optimization Consultant | kyle_kuphal@hotmail.com | Admin | |
| Alisha Mayer | Legacy Optimization Designer | alisha.mayer@yahoo.com | Admin | |
| Collin Padberg | Forward Solutions Engineer | collin_padberg85@gmail.com | Admin | |
| Eddie Cremin | Direct Branding Agent | eddie.cremin@gmail.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 |
|---|---|---|
Doug Hane Senior Response Engineer doug.hane49@hotmail.com | Viewer | |
Luisa Walsh Investor Brand Coordinator luisa.walsh12@yahoo.com | Viewer | |
Cloyd Boyer Investor Functionality Architect cloyd_boyer80@gmail.com | Member | |
Susanna Stark Corporate Operations Officer susanna.stark@hotmail.com | Member | |
Grace Mertz District Response Consultant grace_mertz@yahoo.com | Admin | |
Destany Stanton Senior Infrastructure Executive destany.stanton@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 |
|---|---|---|
Etha Parker-Trantow Human Tactics Coordinator etha_parker-trantow85@gmail.com | Viewer | |
Lenora Cartwright Dynamic Integration Administrator lenora.cartwright@yahoo.com | Member | |
Cory Cummings Human Markets Facilitator cory_cummings49@yahoo.com | Admin | |
Darion Hammes International Response Director darion.hammes74@gmail.com | Member | |
Linwood Pollich Principal Interactions Analyst linwood.pollich@gmail.com | Member | |
Jess Terry Investor Factors Liaison jess_terry60@yahoo.com | Viewer | |
Rosella Pollich Central Mobility Specialist rosella.pollich98@yahoo.com | Admin | |
Deshaun Roob Customer Infrastructure Manager deshaun_roob@hotmail.com | Viewer | |
Santa Kutch Internal Quality Administrator santa_kutch@gmail.com | Viewer | |
Monroe Lesch Investor Division Orchestrator monroe.lesch@hotmail.com | Admin | |
Emmalee McGlynn Product Mobility Specialist emmalee_mcglynn@hotmail.com | Viewer | |
Scot Crona Product Data Designer scot_crona39@yahoo.com | Admin | |
Curt Bernier Investor Mobility Agent curt.bernier74@yahoo.com | Member | |
Herman Morissette Senior Division Developer herman_morissette29@gmail.com | Admin | |
Zoila Kutch Principal Division Supervisor zoila.kutch2@gmail.com | Viewer | |
Joyce Gleason Internal Program Executive joyce.gleason@gmail.com | Admin | |
Art Waters Central Marketing Facilitator art.waters@yahoo.com | Admin | |
Carrie Kshlerin-Harber Internal Factors Manager carrie.kshlerin-harber3@gmail.com | Viewer | |
Hilbert Turcotte Forward Optimization Agent hilbert_turcotte@yahoo.com | Admin | |
Carey Ward Future Creative Facilitator carey.ward@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 | |
|---|---|---|---|---|
| Wendell Padberg | nicole.rolfson55@gmail.com | Pamelamouth | Inactive | $529.06 |
| Camille Reichel | sidney.buckridge27@yahoo.com | Michelleport | Active | $24.17 |
| Crystal Breitenberg | mortimer.skiles@yahoo.com | East Andreanne | Inactive | $461.14 |
| Marcus Walsh | zetta98@hotmail.com | Jeremyshire | Inactive | $731.51 |
| Dr. Orville Wiegand DVM | ross_quigley49@gmail.com | Rayhaven | Active | $312.97 |
| Total | $2,058.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tiffany Feil V @johathan88 | brionna.jerde@yahoo.com | New Candido | Active | $62.33 |
Delia Braun @johnny59 | jillian4@yahoo.com | Rueckerburgh | Inactive | $701.19 |
Erica Funk @kory.abernathy | kennedy_haley44@yahoo.com | Goodyear | Inactive | $1,149.57 |
Alejandro Romaguera @graciela_lynch | cleve_herzog@gmail.com | Centennial | Active | $661.47 |
Dr. Alfredo Considine-Kris @athena_metz44 | dolly_shanahan@yahoo.com | Quintenhaven | Active | $1,000.19 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Omar Kreiger | wava_romaguera0@hotmail.com | Schillerside | Inactive | $203.17 |
| Silvia Hodkiewicz | alda_oconner@gmail.com | Wardtown | Inactive | $1,027.61 |
| Jerry Raynor | holly_lubowitz@yahoo.com | Ewellbury | Inactive | $576.50 |
| Felix Turcotte | tatyana83@gmail.com | East Hiram | Active | $631.60 |
| Robyn Rath | everett.upton3@gmail.com | Lake Maritzafurt | Active | $145.72 |
| Total | $2,584.60 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yvonne Sawayn PhD | breana_nader26@hotmail.com | Anissashire | Inactive | $211.79 |
| Andres Graham | lillie.lakin8@yahoo.com | Boulder | Active | $449.25 |
| Sarah Toy | camylle_beahan-strosin@hotmail.com | East Terry | Inactive | $802.82 |
| Thomas Sawayn | hillary.lynch3@yahoo.com | Port Deemouth | Inactive | $1,194.91 |
| Glenn Buckridge DDS | dangelo.dubuque81@hotmail.com | Fort Alden | Active | $757.65 |
| Total | $3,416.42 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ryan Smith | ardith60@yahoo.com | Jeanetteview | Active | $441.41 |
| Kara McDermott-McClure | autumn.nolan7@gmail.com | Port Myra | Inactive | $112.96 |
| Mr. Irving Tremblay | hardy_rath@hotmail.com | Kristophershire | Inactive | $746.64 |
| Caroline Spencer | lera.roob52@hotmail.com | Modesto | Active | $670.26 |
| Mrs. Carla Wuckert | jevon_mills@yahoo.com | South Brooklynmouth | Inactive | $146.41 |
| Total | $2,117.68 | |||
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 | ||
|---|---|---|---|---|---|
| Patsy Greenholt | percy91@gmail.com | Victorcester | Active | $1,036.07 | |
| Bobbie Parisian | addie58@yahoo.com | Ankeny | Inactive | $791.57 | |
| Francis Berge | humberto77@yahoo.com | Rempelhaven | Active | $140.86 | |
| Brian Leuschke | sheridan.mayer25@yahoo.com | Hermistonborough | Inactive | $530.93 | |
| Leticia Gerlach | louvenia_boyer50@yahoo.com | Loweshire | Inactive | $371.79 | |
| Total | $2,871.22 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Gregory Sipes | euna.greenholt@gmail.com | Jordanberg | Inactive | $754.24 | |
| Donald Pouros | ena_spinka-reichert@yahoo.com | Geovannichester | Active | $1,169.84 | |
| Sean Spinka | clyde.langosh48@hotmail.com | Port Aniya | Active | $1,041.28 | |
| Josephine Bosco | stone97@yahoo.com | Salem | Inactive | $1,047.22 | |
| Sandy Armstrong-Green | lavern.wehner25@hotmail.com | College Station | Active | $628.09 | |
| Total | $4,640.67 | ||||
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 | |
|---|---|---|---|---|
| Kerry Murphy | clara62@hotmail.com | Evanston | Inactive | $643.33 |
| Harriet Goyette I | yoshiko_ohara@gmail.com | Hammesshire | Active | $582.16 |
| Frances Nolan | kyleigh66@hotmail.com | New Emeraldfort | Active | $598.73 |
| Darlene Raynor DVM | hertha_hermann@yahoo.com | Dundalk | Inactive | $446.97 |
| Miss Ruth Kub | korey.parisian@hotmail.com | Stiedemanntown | Inactive | $243.81 |
| Johnnie Schroeder | otilia.turcotte19@hotmail.com | Kuhnboro | Inactive | $139.89 |
| Mrs. Gretchen Ziemann PhD | gavin_schroeder@hotmail.com | Efrainmouth | Active | $901.24 |
| Gustavo Parisian | wyman.smith@yahoo.com | New Harley | Inactive | $824.02 |
| Marco White | annamae94@hotmail.com | Adriennehaven | Inactive | $888.09 |
| Kellie Tillman | zula.mante@gmail.com | Nienowberg | Active | $575.33 |
| Terrance Lang | makayla26@yahoo.com | Apopka | Active | $1,128.49 |
| Miss Robyn Fay Sr. | mabelle.durgan42@hotmail.com | Fort Collins | Inactive | $1,100.50 |
| Kelley Harber-Schinner | howell.moen@hotmail.com | East Rebeccaworth | Inactive | $442.09 |
| Carla Skiles | jackeline_bednar26@yahoo.com | White Plains | Inactive | $797.75 |
| Kim Satterfield | rex_jerde83@gmail.com | North Ariel | Active | $454.99 |
| Total | $9,767.39 | |||
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 |