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 | Paid | PayPal | $471.66 |
| INV002 | Unpaid | Credit Card | $850.71 |
| INV003 | Pending | Credit Card | $235.15 |
| INV004 | Pending | Bank Transfer | $174.30 |
| INV005 | Unpaid | PayPal | $492.97 |
| INV006 | Pending | Credit Card | $580.61 |
| INV007 | Pending | Bank Transfer | $520.45 |
| Total | $3,325.85 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Brendan Jerde-Reilly | International Optimization Engineer | brendan.jerde-reilly@hotmail.com | Member | |
| Linwood Bogan | Legacy Accountability Agent | linwood.bogan@yahoo.com | Member | |
| Rita Grady | Direct Mobility Producer | rita_grady@gmail.com | Member | |
| Wade Nolan | Human Research Representative | wade_nolan36@yahoo.com | Admin | |
| Gregoria Hyatt | Product Communications Supervisor | gregoria_hyatt66@hotmail.com | Member | |
| Valentine Russel | Product Research Coordinator | valentine_russel@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 |
|---|---|---|
Mossie Mueller Regional Identity Consultant mossie.mueller@yahoo.com | Admin | |
Rebeca Hilpert International Security Assistant rebeca.hilpert@yahoo.com | Member | |
Kelly McLaughlin Chief Infrastructure Assistant kelly.mclaughlin@hotmail.com | Member | |
London Rowe District Infrastructure Engineer london.rowe@yahoo.com | Admin | |
Arvid Dickinson Legacy Data Executive arvid.dickinson@yahoo.com | Admin | |
Timmy Farrell Senior Identity Coordinator timmy_farrell@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 |
|---|---|---|
Lorenzo Heller-Walter Global Infrastructure Developer lorenzo_heller-walter51@gmail.com | Admin | |
Sophie Reilly Chief Quality Designer sophie.reilly88@hotmail.com | Member | |
Karianne Orn Principal Accountability Agent karianne.orn@yahoo.com | Member | |
Sebastian Hickle Human Identity Orchestrator sebastian.hickle78@hotmail.com | Member | |
Alisha Harvey Legacy Directives Strategist alisha.harvey28@yahoo.com | Admin | |
Brian Harris Lead Usability Officer brian_harris35@yahoo.com | Viewer | |
Kristin Kirlin National Directives Engineer kristin_kirlin20@hotmail.com | Member | |
Emmanuel Fahey Lead Program Executive emmanuel_fahey87@yahoo.com | Viewer | |
Glenna Hegmann Legacy Response Analyst glenna.hegmann@yahoo.com | Member | |
Enoch Dietrich Customer Accounts Coordinator enoch_dietrich16@hotmail.com | Admin | |
Florence Weissnat Corporate Solutions Consultant florence.weissnat@hotmail.com | Member | |
Sammy Veum Direct Tactics Liaison sammy.veum@yahoo.com | Admin | |
Chanelle Bogisich Internal Interactions Assistant chanelle_bogisich98@hotmail.com | Viewer | |
Quentin Simonis Principal Brand Administrator quentin_simonis@gmail.com | Member | |
Elian Okuneva Internal Communications Planner elian_okuneva27@hotmail.com | Viewer | |
Maya Bechtelar Direct Accounts Facilitator maya.bechtelar93@hotmail.com | Viewer | |
Vesta Mayer-Haley Principal Security Engineer vesta_mayer-haley23@gmail.com | Member | |
Anahi Smith Lead Factors Administrator anahi_smith12@gmail.com | Viewer | |
Dane Dooley Investor Accounts Officer dane.dooley@hotmail.com | Member | |
Reagan O'Hara Chief Metrics Coordinator reagan.ohara@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 | |
|---|---|---|---|---|
| Patricia Gleichner | maya_hamill70@hotmail.com | East Davion | Active | $402.33 |
| Flora Schimmel-Rempel | roberta_hills@hotmail.com | Port Ernestina | Inactive | $795.16 |
| Harold Terry DDS | carolyn17@hotmail.com | Laguna Niguel | Inactive | $841.67 |
| Mona Feeney | damien_hahn@hotmail.com | Lake Bernice | Active | $42.33 |
| Dwayne O'Keefe V | roselyn_hahn@gmail.com | Lake Scarlettfurt | Active | $1,029.63 |
| Total | $3,111.12 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lamar Runolfsson @alisa_torp33 | devante_doyle36@gmail.com | North Darien | Active | $179.58 |
Eunice Altenwerth @kara_anderson86 | dora.kuhlman87@hotmail.com | Rogersborough | Active | $129.94 |
Richard Torphy-Metz Sr. @oliver.marquardt | sadie_rolfson71@yahoo.com | Beerstad | Active | $1,144.51 |
Lowell Hudson @garfield_strosin | meta12@yahoo.com | Claudcester | Inactive | $657.71 |
Ramiro Lubowitz @aurelie8 | jalen.pfeffer68@hotmail.com | Cuyahoga Falls | Inactive | $327.25 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Sadie Quitzon-Gutkowski | wanda.schultz30@yahoo.com | Jefferson City | Inactive | $694.99 |
| Joseph Rutherford | autumn.weissnat2@gmail.com | Lake Declanview | Inactive | $275.29 |
| Terry Mills | june39@yahoo.com | South Madalineton | Inactive | $999.76 |
| Jay Lowe | dominique.hagenes@yahoo.com | Troy | Inactive | $934.70 |
| Laurence Pagac | devin85@yahoo.com | Laronstad | Inactive | $126.34 |
| Total | $3,031.08 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ryan Shanahan | cora31@hotmail.com | Lubowitzview | Inactive | $613.50 |
| Elvira Johnson | aurore2@yahoo.com | Kittyworth | Inactive | $521.21 |
| Joe Prohaska | flossie.stamm@gmail.com | Kshlerinfort | Inactive | $522.99 |
| Harriet Fisher | jabari.osinski99@hotmail.com | Williamsonstad | Inactive | $924.16 |
| Courtney Reichel | jaiden68@gmail.com | Keeblerville | Inactive | $266.48 |
| Total | $2,848.34 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dewey Krajcik | gina_kemmer@yahoo.com | Fort Bethstead | Active | $845.57 |
| Mr. Terrence Mann | lizzie_ziemann@gmail.com | Fisherbury | Inactive | $1,033.87 |
| Eleanor Prohaska | marcella.wolff13@hotmail.com | Port Roscoeland | Active | $436.32 |
| Pamela Schamberger | geoffrey.carter90@gmail.com | Kaitlyntown | Inactive | $108.76 |
| James Boehm | pauline_watsica-ortiz95@gmail.com | Morgan Hill | Active | $1,085.30 |
| Total | $3,509.82 | |||
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 | ||
|---|---|---|---|---|---|
| Ann Breitenberg | judge_heaney13@hotmail.com | North Rolandohaven | Active | $29.29 | |
| Alicia Hermann | rocky37@gmail.com | East Modesta | Inactive | $480.04 | |
| Patty Jones | llewellyn_herzog@hotmail.com | East Honolulu | Inactive | $831.93 | |
| Erik Schmidt | jace_satterfield82@yahoo.com | New Aricfurt | Inactive | $472.04 | |
| Mr. Marco Dickens | beulah14@gmail.com | Jaysonshire | Active | $1,159.67 | |
| Total | $2,972.97 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Marc Thompson | adolphus_kling@gmail.com | North Elveraton | Inactive | $616.67 | |
| Stuart Simonis-Langworth | makenna58@gmail.com | New Marisolton | Active | $18.06 | |
| Maxine Pouros | rashad.frami69@hotmail.com | New Terrence | Active | $551.13 | |
| Lee Grimes | zena_mclaughlin@hotmail.com | New Jamel | Active | $682.18 | |
| Colleen Bernhard | sigurd.erdman77@gmail.com | National City | Inactive | $267.43 | |
| Total | $2,135.47 | ||||
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 | |
|---|---|---|---|---|
| Danielle Olson | brice_white@hotmail.com | Abechester | Inactive | $967.94 |
| Ernesto Boehm | howard.ziemann67@yahoo.com | Effertzfort | Active | $697.07 |
| Ignacio Deckow | sigrid.donnelly90@hotmail.com | Courtneystad | Active | $859.46 |
| Lela Kuhic | linnea_brakus@yahoo.com | Ardithbury | Active | $3.01 |
| Mamie Crona | arianna.stoltenberg@yahoo.com | Haleybury | Inactive | $610.18 |
| Ronnie Renner | florencio50@gmail.com | Clovis | Active | $459.24 |
| Evelyn Purdy V | clara.braun-lynch@gmail.com | Lake Orpha | Active | $480.18 |
| Bridget Lesch | myrtis_dickens@yahoo.com | Pensacola | Active | $230.71 |
| Paul Kuhn IV | eleazar23@gmail.com | Redding | Active | $308.85 |
| Margaret Gibson | rosella_gusikowski39@gmail.com | North Trentport | Inactive | $1,118.17 |
| Doris Paucek | gerson_ortiz@yahoo.com | Huntersville | Inactive | $951.69 |
| Kathy Walter | providenci.kling@yahoo.com | West Benton | Inactive | $593.81 |
| Kristen Bruen IV | clementina_harris85@hotmail.com | Lake Gunnerview | Inactive | $1,002.73 |
| Molly Wisoky | bryon36@hotmail.com | Millerboro | Inactive | $801.73 |
| Blake Harvey | stephen.ernser7@yahoo.com | Crystelhaven | Active | $903.68 |
| Total | $9,988.45 | |||
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 |