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 | Paid | PayPal | $375.93 |
| INV002 | Paid | PayPal | $960.61 |
| INV003 | Pending | Credit Card | $864.32 |
| INV004 | Paid | Bank Transfer | $639.05 |
| INV005 | Unpaid | Bank Transfer | $714.36 |
| INV006 | Pending | Bank Transfer | $624.17 |
| INV007 | Paid | Bank Transfer | $421.74 |
| Total | $4,600.18 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Eleanora Flatley | National Research Planner | eleanora_flatley@hotmail.com | Member | |
| Nona Hermann-Kautzer | Human Integration Supervisor | nona.hermann-kautzer12@hotmail.com | Admin | |
| Leda Steuber | Regional Identity Executive | leda_steuber@hotmail.com | Admin | |
| Lester Cartwright | Investor Web Technician | lester_cartwright@yahoo.com | Member | |
| Zoe Herman | Senior Division Designer | zoe_herman23@gmail.com | Member | |
| Bridget Mertz | Investor Web Consultant | bridget.mertz@yahoo.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 |
|---|---|---|
Dominique Beier Legacy Operations Liaison dominique.beier@yahoo.com | Admin | |
Oleta Bergnaum Legacy Directives Architect oleta_bergnaum@hotmail.com | Viewer | |
Savanah Lakin Forward Data Designer savanah_lakin36@yahoo.com | Member | |
Frances Blick Dynamic Communications Agent frances.blick@yahoo.com | Viewer | |
Retha Mann District Solutions Executive retha_mann43@yahoo.com | Member | |
Onie Dietrich Central Communications Technician onie.dietrich@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Sabrina Rogahn Principal Infrastructure Director sabrina_rogahn40@gmail.com | Viewer | |
Jamil Dooley Regional Communications Manager jamil_dooley@hotmail.com | Viewer | |
Scot Howell Internal Research Architect scot_howell35@gmail.com | Viewer | |
Dewayne Turcotte Dynamic Research Director dewayne_turcotte34@gmail.com | Admin | |
Alexandrea Hane Future Usability Facilitator alexandrea.hane@hotmail.com | Viewer | |
Humberto MacGyver Human Division Strategist humberto_macgyver@gmail.com | Member | |
Vernie Osinski Global Marketing Officer vernie_osinski45@gmail.com | Member | |
Kirstin Bartell Internal Interactions Executive kirstin_bartell1@yahoo.com | Viewer | |
Cale Ebert Global Quality Associate cale_ebert@hotmail.com | Admin | |
Dangelo Hegmann Corporate Interactions Assistant dangelo.hegmann@yahoo.com | Admin | |
Candelario Ritchie Corporate Mobility Agent candelario.ritchie46@yahoo.com | Admin | |
Payton Dietrich Central Assurance Agent payton_dietrich@gmail.com | Viewer | |
Nathan Swift-Goodwin Product Division Specialist nathan.swift-goodwin@hotmail.com | Admin | |
Chanel Larson Future Configuration Administrator chanel.larson@yahoo.com | Viewer | |
Alta Weissnat Senior Solutions Representative alta_weissnat49@yahoo.com | Viewer | |
Tanner Lynch International Operations Strategist tanner_lynch@gmail.com | Admin | |
Kacie Deckow Direct Functionality Assistant kacie_deckow38@yahoo.com | Admin | |
Syble O'Kon-Collier Legacy Metrics Consultant syble.okon-collier62@hotmail.com | Viewer | |
Bell Ortiz District Quality Administrator bell_ortiz@yahoo.com | Member | |
Geovany Sanford National Factors Associate geovany.sanford@hotmail.com | Member |
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 | |
|---|---|---|---|---|
| Blake Leffler | tania.graham@gmail.com | Hauckton | Active | $989.51 |
| Jeanette Cartwright | isaiah.ledner@gmail.com | Niaborough | Inactive | $554.89 |
| Carroll Reinger | toni47@yahoo.com | Port Dillonchester | Active | $779.69 |
| Patsy Block | evert.ullrich@gmail.com | Fort Audiestead | Inactive | $501.55 |
| Travis Haley | maida.leannon@hotmail.com | Ortizhaven | Inactive | $45.58 |
| Total | $2,871.22 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Tamara Howe @wade_terry | priscilla_lang29@gmail.com | East Jazminchester | Inactive | $835.26 |
Kathleen Rowe @gideon27 | bo_collier59@hotmail.com | East Mortonworth | Active | $101.94 |
Ruth Reynolds @vicente.prosacco48 | vidal.bergstrom2@yahoo.com | Pasadena | Inactive | $450.50 |
Jerald Schamberger @emery.yundt73 | leora15@hotmail.com | Deckowstead | Active | $277.85 |
Mr. Erik Pfannerstill @roel57 | shawna_harber@hotmail.com | Heidenreichfurt | Inactive | $608.08 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Garry Mosciski | forest_oreilly-krajcik@gmail.com | Denesikfort | Active | $304.53 |
| Mathew Lesch | katelyn86@gmail.com | Riceport | Inactive | $1,010.79 |
| Johnnie Quitzon | lelah_wunsch94@yahoo.com | Keaganview | Active | $660.70 |
| Elaine Schiller | patricia_heaney@gmail.com | East Claudineberg | Inactive | $823.13 |
| Bessie Gislason | general.russel45@yahoo.com | Lake Mariloushire | Active | $1,193.13 |
| Total | $3,992.28 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wade Konopelski | melba81@hotmail.com | Luefort | Inactive | $246.20 |
| Kayla Doyle | joesph.gislason@hotmail.com | Jurupa Valley | Active | $955.72 |
| Blake Gottlieb | alessandro.gorczany@hotmail.com | Cletusworth | Inactive | $1,086.41 |
| Maurice Legros | jules_hintz@gmail.com | Rosemarytown | Inactive | $389.19 |
| Johnny Batz-Denesik | viola_barton75@hotmail.com | Serenityside | Active | $233.45 |
| Total | $2,910.97 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Meghan Yundt | ashlee_homenick80@gmail.com | Ashburn | Inactive | $251.69 |
| Miss Gail Lynch | tillman21@yahoo.com | Loyalfurt | Active | $8.51 |
| Leonard Lang DDS | lupe.swaniawski-veum@gmail.com | Port Gerdaborough | Inactive | $782.92 |
| Dr. Gustavo Funk | justyn.howe7@hotmail.com | Keelingfurt | Active | $1,190.28 |
| Morris Carroll | tia.parisian@gmail.com | Port Isaiport | Active | $173.66 |
| Total | $2,407.06 | |||
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 | ||
|---|---|---|---|---|---|
| Ruth Powlowski | remington_wilderman-maggio20@gmail.com | Efrainfurt | Inactive | $1,192.23 | |
| Annette Hettinger | tiffany44@gmail.com | East Vicenta | Active | $840.15 | |
| Diane Bogisich | monte64@yahoo.com | Nienowfurt | Active | $26.88 | |
| Cary Cremin | aubree87@hotmail.com | Port Cicero | Active | $230.39 | |
| Barbara Ziemann | vivian_moen@hotmail.com | Fort Anabel | Active | $666.44 | |
| Total | $2,956.09 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Spencer Dare | candida80@hotmail.com | Jadynmouth | Active | $1,172.12 | |
| Natalie Konopelski Jr. | rebecca32@gmail.com | North Axel | Active | $1,171.20 | |
| Lindsey Mann | lamar60@hotmail.com | Jacklynshire | Inactive | $442.20 | |
| Bethany Johnson | issac_schmitt@gmail.com | Crookscester | Active | $401.99 | |
| Shelly Mohr | davon_ledner@hotmail.com | Port Agnes | Active | $885.50 | |
| Total | $4,073.01 | ||||
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 | |
|---|---|---|---|---|
| Jamie Roob | ottis12@hotmail.com | Waelchiville | Inactive | $611.83 |
| Floyd Daugherty | elroy.jerde31@yahoo.com | East Filomenashire | Inactive | $146.53 |
| Sandra Champlin | alverta.harris18@hotmail.com | Lake Dario | Active | $769.74 |
| Casey Smith | ida.grimes77@yahoo.com | Kayleeport | Inactive | $501.80 |
| Herman Willms | keon23@gmail.com | Archworth | Inactive | $1,101.66 |
| Monique Wehner | ciara.wunsch@hotmail.com | South Stan | Inactive | $856.21 |
| Bobby Mohr-Pfannerstill | jordane.leannon46@yahoo.com | Borerview | Active | $386.46 |
| Ann Donnelly | sonya.macejkovic35@hotmail.com | Port Jennyfer | Active | $756.69 |
| Dr. Nicholas Kulas | yasmine41@hotmail.com | Citrus Heights | Inactive | $812.14 |
| Jonathan Shanahan | dorothy.hoppe@hotmail.com | New Felicity | Inactive | $467.19 |
| Lydia Purdy Sr. | friedrich58@yahoo.com | East Trinity | Active | $1,124.60 |
| Ms. Sophie Schaefer | eula_torp@gmail.com | West Barbarafield | Active | $635.99 |
| Dr. Chad Emard | serenity_bradtke73@gmail.com | Jeanetteland | Active | $834.30 |
| Abraham Tromp | cora.schmidt@gmail.com | Fort Olliefort | Active | $756.37 |
| Johanna Will | enrique18@hotmail.com | East Shad | Inactive | $321.42 |
| Total | $10,082.93 | |||
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 |