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
Usage
Basic example
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Pending | Bank Transfer | $400.53 |
| INV002 | Pending | PayPal | $678.38 |
| INV003 | Pending | Bank Transfer | $809.83 |
| INV004 | Unpaid | Credit Card | $664.19 |
| INV005 | Unpaid | Credit Card | $399.67 |
| INV006 | Pending | Credit Card | $794.24 |
| INV007 | Unpaid | Bank Transfer | $344.12 |
| Total | $4,090.96 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Vinnie Kris | Forward Data Officer | vinnie_kris57@hotmail.com | Member | |
| Amara Okuneva | Customer Security Manager | amara.okuneva@yahoo.com | Member | |
| Quinton Lang | Principal Tactics Executive | quinton_lang24@hotmail.com | Admin | |
| Isaiah Rowe | Investor Marketing Associate | isaiah.rowe@gmail.com | Member | |
| Julian Effertz | Future Branding Strategist | julian.effertz6@hotmail.com | Admin | |
| Chaya Franey | Regional Metrics Agent | chaya_franey31@hotmail.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 |
|---|---|---|
Dewayne Johns Dynamic Response Liaison dewayne_johns@hotmail.com | Viewer | |
Sonia Mayert Dynamic Metrics Analyst sonia_mayert8@hotmail.com | Member | |
Wilford Nader Forward Directives Technician wilford_nader@gmail.com | Admin | |
Hertha Farrell International Division Manager hertha.farrell3@gmail.com | Viewer | |
Judge Torphy Dynamic Infrastructure Assistant judge.torphy80@hotmail.com | Member | |
Annabel Kemmer Central Data Strategist annabel.kemmer90@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 |
|---|---|---|
Roel Yundt Dynamic Mobility Manager roel_yundt@yahoo.com | Admin | |
Barbara Moore Internal Markets Coordinator barbara_moore19@gmail.com | Viewer | |
Grady Ferry Direct Branding Coordinator grady.ferry@yahoo.com | Admin | |
Pedro Lubowitz Senior Marketing Agent pedro.lubowitz@hotmail.com | Viewer | |
Haley Kassulke Regional Creative Strategist haley_kassulke12@gmail.com | Viewer | |
Clifford Ortiz Chief Directives Consultant clifford.ortiz@gmail.com | Admin | |
Katheryn Schultz Direct Communications Planner katheryn.schultz@hotmail.com | Member | |
Chase Osinski Lead Data Representative chase_osinski57@hotmail.com | Viewer | |
Vincenza Rath Central Paradigm Developer vincenza_rath96@yahoo.com | Member | |
Deshawn Mueller Central Data Facilitator deshawn.mueller@yahoo.com | Admin | |
Lindsey Davis Investor Data Consultant lindsey.davis@yahoo.com | Admin | |
Darien Shanahan International Communications Associate darien_shanahan29@hotmail.com | Admin | |
Rosendo Hartmann-Stoltenberg Principal Markets Associate rosendo.hartmann-stoltenberg55@hotmail.com | Admin | |
Madyson Fahey Lead Functionality Designer madyson.fahey13@gmail.com | Viewer | |
Devin Dickinson National Infrastructure Manager devin.dickinson@yahoo.com | Admin | |
Raymundo Marvin Investor Data Agent raymundo_marvin@yahoo.com | Viewer | |
Mabel Stokes Lead Factors Architect mabel.stokes14@gmail.com | Member | |
Brannon Koss Global Accounts Assistant brannon_koss3@gmail.com | Admin | |
Cydney Okuneva Global Accountability Technician cydney_okuneva64@gmail.com | Member | |
Austin Metz Customer Paradigm Specialist austin_metz@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 | |
|---|---|---|---|---|
| Levi Fahey-Dach | kattie83@gmail.com | Sporerside | Active | $710.55 |
| Ivan Donnelly DDS | missouri_strosin99@yahoo.com | Lake Jessie | Inactive | $1,004.37 |
| Clint Hammes | ophelia86@hotmail.com | South Jeffrystad | Inactive | $253.52 |
| Phillip Franey III | cathy.carroll@yahoo.com | Schenectady | Active | $1,086.69 |
| Armando Becker PhD | emerald_stamm13@yahoo.com | South Vada | Inactive | $511.59 |
| Total | $3,566.72 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dale Harris @tillman9 | carole_bruen@yahoo.com | West Noemymouth | Active | $181.86 |
Dr. Randolph Zemlak @franco6 | jacklyn_weber@hotmail.com | Royal Oak | Inactive | $491.30 |
Lee Cummerata @eugenia.legros | sandy_dubuque@hotmail.com | Crooksbury | Active | $425.66 |
Brenda Rogahn @annamarie_leannon54 | bryana21@gmail.com | Dooleyside | Active | $1,065.31 |
Lisa Dickens @tiara_donnelly10 | sydnee41@gmail.com | Leesburg | Active | $704.73 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gladys Gleason | jeffery.paucek-heidenreich99@yahoo.com | Grand Junction | Active | $926.24 |
| Miriam Kuvalis | lionel_lynch@yahoo.com | Wisozkton | Inactive | $805.14 |
| Ralph Kihn | blake.bartoletti90@yahoo.com | Maddisonfield | Active | $816.10 |
| Leah Kovacek | kaden_reinger@yahoo.com | Smithamshire | Inactive | $604.39 |
| Calvin Crona | manuel_dare3@yahoo.com | Maple Grove | Inactive | $1,084.72 |
| Total | $4,236.59 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Fernando Feest | stephania_harris72@yahoo.com | Douglasville | Active | $1,030.76 |
| Marvin Rosenbaum I | earnest19@gmail.com | Remingtonberg | Inactive | $268.67 |
| Cesar O'Connell | camden88@yahoo.com | New Elenorboro | Active | $877.19 |
| Tonya Nienow | shanny_maggio27@yahoo.com | West Sunny | Active | $702.05 |
| Cathy Lowe | bartholome_macgyver76@gmail.com | North Cortezstead | Active | $1,153.18 |
| Total | $4,031.85 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Moses Blick | mateo94@yahoo.com | San Antonio | Inactive | $384.96 |
| Victor Fisher | kaleb14@hotmail.com | Port Calebport | Active | $403.00 |
| Bennie Huel | kattie.anderson17@yahoo.com | Vancouver | Active | $145.06 |
| Lynn Botsford Sr. | felicity.klein43@gmail.com | Franeyburgh | Active | $117.83 |
| Roderick Haag | arjun_feeney@yahoo.com | Littelville | Active | $560.48 |
| Total | $1,611.33 | |||
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 | ||
|---|---|---|---|---|---|
| Marian Ryan | sheridan61@yahoo.com | South Samanthaburgh | Inactive | $190.12 | |
| Terry Pouros | helen24@hotmail.com | Rodriguezshire | Active | $1,175.80 | |
| Doreen Hettinger | pearline.nader92@hotmail.com | Rueckerton | Active | $523.65 | |
| Kerry McClure | hiram.breitenberg@yahoo.com | Jaskolskiville | Inactive | $391.35 | |
| Nancy King | jeromy_ferry70@yahoo.com | Fort Gretaland | Inactive | $20.95 | |
| Total | $2,301.87 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jeanette Cronin | garret_reinger@hotmail.com | Sierra Vista | Inactive | $1,095.68 | |
| Lucille McCullough | herta_gerhold@yahoo.com | Cronafield | Active | $1,099.38 | |
| Suzanne Goldner | genoveva28@hotmail.com | Greenberg | Active | $892.79 | |
| Barbara Pacocha | nicole.haag@hotmail.com | South Vivienne | Active | $136.88 | |
| Carole Bernhard | alberta_fahey43@gmail.com | Midland | Active | $999.42 | |
| Total | $4,224.15 | ||||
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 | |
|---|---|---|---|---|
| Erick Stanton | brady.herzog7@hotmail.com | Lake Felicia | Active | $1,016.23 |
| Willie Paucek | janice_schaefer@yahoo.com | East Beaulah | Inactive | $563.40 |
| Tomas Pfeffer | mariano_howe-daugherty44@yahoo.com | Madisencester | Active | $972.65 |
| Courtney Konopelski | dena.feil@hotmail.com | Nashua | Inactive | $1,171.81 |
| Brent Kassulke | lenny.fritsch@yahoo.com | Lubowitzborough | Inactive | $458.63 |
| Roberto Mann | terence99@yahoo.com | Fort Yessenia | Active | $43.81 |
| Lewis Mante | nedra_zieme@yahoo.com | Tamarac | Active | $51.64 |
| Steven Deckow | skye_mccullough12@hotmail.com | Kesslerview | Active | $1,173.61 |
| Kay Heidenreich | fay_smith@hotmail.com | Wisozkchester | Inactive | $979.63 |
| Miss Bernadette Dibbert | laurianne98@hotmail.com | Lake Alene | Active | $531.76 |
| Dr. Emilio Watsica | georgiana.turner50@yahoo.com | Newton | Inactive | $922.40 |
| Clinton Tremblay | ebony.kassulke@gmail.com | Coraliehaven | Active | $496.63 |
| Monique Considine | savannah.fisher69@yahoo.com | Lake Ryleigh | Active | $664.63 |
| Geraldine Nader | annetta_effertz@yahoo.com | Port Matt | Inactive | $1,095.75 |
| Gloria Borer | margaret48@gmail.com | Franciscotown | Inactive | $713.90 |
| Total | $10,856.48 | |||
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 |