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 | Unpaid | PayPal | $280.88 |
| INV002 | Pending | Credit Card | $829.76 |
| INV003 | Paid | PayPal | $691.98 |
| INV004 | Pending | PayPal | $328.91 |
| INV005 | Paid | Credit Card | $808.45 |
| INV006 | Paid | Bank Transfer | $986.38 |
| INV007 | Pending | PayPal | $373.27 |
| Total | $4,299.63 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ebony Deckow | International Mobility Engineer | ebony.deckow77@yahoo.com | Viewer | |
| Ciara Blick | Internal Quality Specialist | ciara.blick@gmail.com | Admin | |
| Remington Crooks-Feeney | Direct Data Manager | remington_crooks-feeney95@hotmail.com | Viewer | |
| Gwen Murazik | National Division Developer | gwen_murazik62@yahoo.com | Viewer | |
| Katheryn Schuppe | Dynamic Identity Technician | katheryn_schuppe46@gmail.com | Member | |
| Lyle Jakubowski | Corporate Implementation Director | lyle_jakubowski@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 |
|---|---|---|
Joshua Kub Chief Assurance Manager joshua.kub@gmail.com | Admin | |
Whitney Mayer Global Applications Associate whitney.mayer@yahoo.com | Admin | |
Jerald Kessler Lead Implementation Assistant jerald_kessler@gmail.com | Viewer | |
Kelley Kemmer Human Quality Architect kelley_kemmer31@yahoo.com | Viewer | |
Brad Lang Direct Metrics Facilitator brad_lang61@hotmail.com | Admin | |
Ludwig Pfannerstill National Tactics Associate ludwig.pfannerstill@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Anabelle Wunsch Customer Communications Producer anabelle.wunsch@gmail.com | Member | |
Quinn Hills Customer Marketing Supervisor quinn.hills@gmail.com | Viewer | |
Doris Littel Regional Mobility Engineer doris_littel88@gmail.com | Admin | |
Micheal Stokes Global Communications Agent micheal_stokes76@hotmail.com | Viewer | |
Conrad Breitenberg Internal Operations Liaison conrad_breitenberg70@gmail.com | Viewer | |
Gertrude Hessel Global Paradigm Strategist gertrude_hessel33@hotmail.com | Viewer | |
Kaden Weimann Lead Marketing Designer kaden_weimann@hotmail.com | Viewer | |
Dangelo King Senior Usability Technician dangelo.king78@hotmail.com | Admin | |
Amara Weber Future Response Technician amara.weber@hotmail.com | Member | |
Jennifer Hayes Investor Directives Manager jennifer.hayes@yahoo.com | Member | |
Shane Blick District Metrics Specialist shane_blick92@hotmail.com | Viewer | |
Elza Gusikowski Investor Applications Coordinator elza.gusikowski71@yahoo.com | Admin | |
Lucille Maggio International Research Manager lucille.maggio89@yahoo.com | Viewer | |
Golden Balistreri Lead Web Engineer golden_balistreri@hotmail.com | Member | |
Dean Langworth District Branding Engineer dean_langworth0@gmail.com | Admin | |
Emma Carroll Corporate Tactics Architect emma_carroll@hotmail.com | Admin | |
Minnie Macejkovic Dynamic Applications Specialist minnie_macejkovic84@hotmail.com | Member | |
Judy O'Keefe-Marvin National Accountability Facilitator judy_okeefe-marvin@hotmail.com | Admin | |
Irma Ernser International Usability Planner irma_ernser@yahoo.com | Member | |
Osborne O'Conner-Emard Forward Data Architect osborne.oconner-emard@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 | |
|---|---|---|---|---|
| Teri Zulauf-Bernier | bryant55@yahoo.com | Framiview | Active | $818.86 |
| Norberto Larson | dominic0@hotmail.com | DeKalb | Inactive | $212.18 |
| Abbie Baumbach | urban_stroman@hotmail.com | Elyria | Active | $611.19 |
| Josephine Langosh | nella_yundt67@gmail.com | Whiteberg | Active | $642.29 |
| Maurine Harvey | myra_bradtke18@yahoo.com | Earnestborough | Inactive | $579.91 |
| Total | $2,864.43 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Monty Kunde @blanca_lowe47 | bettie47@gmail.com | Lake Jamilhaven | Active | $892.77 |
Hilda Cremin @trisha_bogan | vivian_rodriguez56@hotmail.com | Greeley | Inactive | $343.92 |
William Tremblay @billie_kerluke | roberto.emmerich@hotmail.com | Freidaborough | Active | $180.51 |
Salvador Brekke @leslie36 | sammy.bechtelar@hotmail.com | Bradfordside | Active | $1,025.62 |
Kristy Simonis @patti.pouros | ryley.reichert98@gmail.com | Elgin | Active | $1,087.17 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darren Keebler | braeden99@hotmail.com | East Ismaelfurt | Inactive | $652.52 |
| Dr. Kelly Beer I | emanuel.boyle@hotmail.com | Dunwoody | Inactive | $1,106.00 |
| Gordon Jakubowski | darren29@yahoo.com | Marcelinahaven | Active | $598.33 |
| Dr. Kay Pfannerstill | kari.altenwerth@gmail.com | North Santino | Inactive | $245.22 |
| Geoffrey Hettinger | ramona15@gmail.com | Guaynabo | Inactive | $1,151.30 |
| Total | $3,753.37 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Noah Dibbert | latoya_green@gmail.com | South Dario | Active | $1,060.25 |
| Jody Cronin | mona57@yahoo.com | Shyanneview | Active | $237.50 |
| Holly Johnson | cecilia30@gmail.com | Gorczanytown | Active | $815.39 |
| Myra Berge | pauline_von@yahoo.com | Abshirefurt | Active | $637.86 |
| Mabel Rodriguez | kim_kshlerin17@yahoo.com | Conroystad | Active | $527.27 |
| Total | $3,278.27 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Vernon Dooley | trent33@hotmail.com | Hesselbury | Inactive | $874.19 |
| Tressie Von | toni94@gmail.com | Lake Katheryn | Active | $1,083.43 |
| Pansy Bechtelar | barbara.kulas@hotmail.com | Portland | Inactive | $632.48 |
| Gregg O'Reilly | andreane87@yahoo.com | North Aniyah | Inactive | $455.40 |
| Herman Mills | rhianna.weimann@gmail.com | Tomshire | Active | $143.77 |
| Total | $3,189.27 | |||
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 | ||
|---|---|---|---|---|---|
| Mrs. Evie Sipes-Runolfsdottir | dewey.klocko@hotmail.com | Vancouver | Inactive | $715.12 | |
| Estella Reichel | preston_bailey@gmail.com | South Taurean | Active | $50.03 | |
| Estelle Kirlin | clarence58@hotmail.com | Freidamouth | Inactive | $323.00 | |
| Tim Zieme | emanuel.flatley@hotmail.com | Konopelskimouth | Active | $951.54 | |
| Reginald Kuhn | nathaniel_gorczany76@hotmail.com | Fort Borisside | Active | $1,116.09 | |
| Total | $3,155.78 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Oscar Considine | milford_rogahn@yahoo.com | Lauderhill | Inactive | $138.26 | |
| Treva Schaefer | wallace68@yahoo.com | Lake Gianni | Inactive | $495.41 | |
| Abraham Jenkins | edwin.hickle82@hotmail.com | East Bellshire | Inactive | $192.63 | |
| Donato Muller Sr. | eric_kunde96@yahoo.com | Yostworth | Active | $117.34 | |
| Ernest Wyman | bryan67@hotmail.com | South Estrellaburgh | Active | $298.27 | |
| Total | $1,241.91 | ||||
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 | |
|---|---|---|---|---|
| Evangeline Schmitt | eduardo84@yahoo.com | East Garnett | Inactive | $526.26 |
| Sheldon Schmeler | ernesto.boyle11@gmail.com | North Urban | Inactive | $150.94 |
| Dr. Micaela Leffler | adalberto.mann49@gmail.com | Elisafield | Inactive | $1,102.52 |
| Willis O'Hara | nathaniel.weissnat@gmail.com | Maximilianport | Active | $503.18 |
| Rose Waters | hudson61@yahoo.com | Jazmyneboro | Inactive | $679.37 |
| Rossie Thiel | jaqueline.kemmer@yahoo.com | Masonberg | Inactive | $418.81 |
| Hattie Stamm | monique56@gmail.com | Medhurststead | Active | $449.06 |
| John Heidenreich | don.gulgowski@gmail.com | Aufderharfort | Inactive | $16.51 |
| Katherine Grady III | chad.corkery75@hotmail.com | East Nikki | Active | $680.33 |
| Forest Ratke | lewis_zemlak15@yahoo.com | MacGyverfurt | Inactive | $827.83 |
| Neal Schneider DDS | jessy_ruecker@gmail.com | Fort Benny | Inactive | $1,024.58 |
| Spencer Grant | carolyn_kuhic@yahoo.com | Lake Lizzie | Active | $349.52 |
| Cecil Marks | claire.olson@yahoo.com | Centreville | Inactive | $906.30 |
| Emil Pfannerstill | arturo_fadel@hotmail.com | Palatine | Inactive | $384.83 |
| Fidel Fahey-Becker | rolando.parker@yahoo.com | North Brianamouth | Inactive | $613.48 |
| Total | $8,633.52 | |||
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 |