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 | Credit Card | $989.64 |
| INV002 | Paid | Bank Transfer | $373.64 |
| INV003 | Unpaid | Credit Card | $235.73 |
| INV004 | Paid | Credit Card | $477.13 |
| INV005 | Paid | PayPal | $109.09 |
| INV006 | Pending | Bank Transfer | $781.03 |
| INV007 | Pending | Credit Card | $522.25 |
| Total | $3,488.51 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Blaze Weimann-Altenwerth | Regional Division Facilitator | blaze_weimann-altenwerth23@gmail.com | Admin | |
| Annamae Dach | Direct Identity Developer | annamae.dach11@hotmail.com | Viewer | |
| Narciso Bradtke | Investor Communications Administrator | narciso.bradtke71@hotmail.com | Viewer | |
| Laisha Lubowitz | Regional Program Engineer | laisha.lubowitz@hotmail.com | Member | |
| Heaven Turner | Forward Security Agent | heaven_turner14@gmail.com | Viewer | |
| Howell Hegmann-Dickinson | Global Paradigm Assistant | howell_hegmann-dickinson43@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 |
|---|---|---|
Ryder Hessel Chief Intranet Executive ryder_hessel26@yahoo.com | Member | |
Krystina Rosenbaum District Web Analyst krystina.rosenbaum24@yahoo.com | Admin | |
Bella Prohaska Forward Creative Liaison bella.prohaska@yahoo.com | Member | |
Kathlyn Koepp Lead Research Manager kathlyn.koepp@hotmail.com | Viewer | |
Derick DuBuque Internal Solutions Liaison derick_dubuque@gmail.com | Admin | |
Brice Cormier Corporate Research Representative brice.cormier@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 |
|---|---|---|
Odessa Kihn Chief Directives Strategist odessa_kihn36@yahoo.com | Member | |
Jaylen Kozey Direct Applications Specialist jaylen.kozey@hotmail.com | Member | |
Aryanna Connelly Investor Metrics Assistant aryanna.connelly@gmail.com | Viewer | |
Gwen Corkery Product Group Analyst gwen_corkery@yahoo.com | Admin | |
Quentin Heidenreich Global Metrics Analyst quentin_heidenreich82@yahoo.com | Viewer | |
Woodrow Mayer National Accountability Engineer woodrow_mayer38@yahoo.com | Admin | |
Desiree Deckow Central Group Technician desiree.deckow@hotmail.com | Member | |
Jacey Leffler Future Functionality Technician jacey.leffler60@gmail.com | Admin | |
Maude McCullough Internal Usability Agent maude.mccullough12@hotmail.com | Viewer | |
Gloria Pfannerstill International Paradigm Assistant gloria.pfannerstill@gmail.com | Member | |
Eleazar Jakubowski Lead Program Agent eleazar.jakubowski75@yahoo.com | Admin | |
Jace Walker Global Directives Designer jace_walker36@yahoo.com | Viewer | |
Mayra Wiza Dynamic Security Developer mayra_wiza@gmail.com | Admin | |
Carolanne Hammes Senior Program Assistant carolanne_hammes@gmail.com | Member | |
Ezra Becker Lead Intranet Developer ezra.becker2@hotmail.com | Admin | |
Hipolito Anderson Internal Operations Planner hipolito_anderson@yahoo.com | Viewer | |
Pauline Pacocha-Hills Corporate Operations Specialist pauline_pacocha-hills@yahoo.com | Member | |
Garrett Wuckert Direct Factors Agent garrett.wuckert@gmail.com | Viewer | |
Jairo Mante International Integration Architect jairo_mante@gmail.com | Admin | |
America Ferry District Web Specialist america.ferry@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 | |
|---|---|---|---|---|
| Courtney Leuschke | jacques19@hotmail.com | Fridafort | Inactive | $605.31 |
| Blake Carter | aileen_heathcote91@hotmail.com | New Bennettshire | Inactive | $661.65 |
| Charles Wisoky | candelario13@gmail.com | Hermanworth | Active | $98.95 |
| Andy Wisoky | winston.mohr@gmail.com | Fort Verlaworth | Active | $638.09 |
| Eunice Boyle | madaline93@gmail.com | Pfeffershire | Inactive | $1,031.17 |
| Total | $3,035.17 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lorraine Lubowitz @anahi.zulauf | orion_rodriguez99@yahoo.com | East Stefanchester | Active | $1,015.65 |
Everett Walker @tate_hegmann | wendell_mraz@yahoo.com | North Fayberg | Inactive | $593.85 |
Dallas Cruickshank @theodora97 | caterina7@hotmail.com | Lake Anaiston | Inactive | $657.97 |
Dr. Dwayne Schroeder @kyra.kuvalis | verdie.terry62@yahoo.com | New Breana | Active | $631.82 |
Mr. Cary Luettgen @nestor_gusikowski55 | fannie61@hotmail.com | Burke | Active | $214.90 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Edgar Hickle | virginie97@hotmail.com | Kassulkechester | Active | $564.50 |
| Sharon Maggio | delbert_rath23@hotmail.com | Warren | Inactive | $1,005.28 |
| Mrs. Stacy Hand-Spinka | casandra.smith23@gmail.com | West Christinehaven | Active | $927.25 |
| Jonathan Okuneva | laury_gorczany26@hotmail.com | South Caitlynstead | Inactive | $717.76 |
| Hubert Schumm | marlin_rice@yahoo.com | Port Shannaborough | Inactive | $283.10 |
| Total | $3,497.89 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Josh Walter | carmella_mills90@yahoo.com | Romafort | Inactive | $1,130.32 |
| Martin Mohr | noah17@yahoo.com | Wilmington | Inactive | $632.80 |
| Dolores Herman V | trisha12@yahoo.com | Amarillo | Active | $1,067.22 |
| Mrs. Terri Wilkinson | gail_bogan@gmail.com | New Tracey | Active | $11.05 |
| Kristy Carroll | jaquelin.toy@hotmail.com | Funkside | Active | $306.47 |
| Total | $3,147.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Lowell Bednar | jessica_oberbrunner3@yahoo.com | Brantton | Inactive | $1,020.12 |
| Ruby Treutel | nina24@gmail.com | Lake Estell | Active | $303.63 |
| Miguel Rath-Paucek | lyla23@yahoo.com | West Rickfurt | Inactive | $30.32 |
| Ms. Deanna Shanahan | john47@gmail.com | East Leestad | Active | $319.61 |
| Terence Brekke | braxton.fay8@yahoo.com | Lake Tomasa | Active | $63.56 |
| Total | $1,737.24 | |||
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 | ||
|---|---|---|---|---|---|
| Owen Sanford | duane.armstrong@hotmail.com | Port Celine | Inactive | $848.42 | |
| Suzanne Schroeder Jr. | maybell.waelchi48@gmail.com | New Mekhiburgh | Inactive | $471.62 | |
| Pam Kessler-Marvin II | moriah30@hotmail.com | Lake Brandyn | Active | $390.33 | |
| Mr. Oscar Swaniawski | mustafa_oconnell@gmail.com | Howellburgh | Active | $341.81 | |
| Jaime Abernathy | dangelo92@hotmail.com | Fort Roger | Active | $413.61 | |
| Total | $2,465.79 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lila Veum | loyal_emmerich0@hotmail.com | New Haven | Inactive | $246.78 | |
| Dr. Darren Rippin | dewayne47@gmail.com | New Sheridanborough | Inactive | $610.68 | |
| Anita Douglas | rocio.schaefer@gmail.com | Port Gideonburgh | Inactive | $727.38 | |
| Lucas Jacobson | marc8@yahoo.com | Duanefurt | Active | $857.47 | |
| Rosemarie Effertz | penelope_doyle@gmail.com | Gibsonfield | Active | $964.13 | |
| Total | $3,406.44 | ||||
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 | |
|---|---|---|---|---|
| Grace McDermott | carmine.borer@gmail.com | Port Toney | Active | $17.86 |
| Kelvin Sipes | keon.grady@hotmail.com | Port Anitastad | Inactive | $515.50 |
| Christopher Cronin | earnest39@hotmail.com | Lake Bonniestead | Active | $1,075.62 |
| Tricia Morissette | jabari_corkery22@yahoo.com | Streichstad | Active | $89.84 |
| Glen Hintz | dale_funk@yahoo.com | Rockville | Inactive | $933.68 |
| Mr. Vincent McKenzie | leonardo.schmitt77@gmail.com | Strosinfurt | Inactive | $524.73 |
| Emanuel Stehr | jackson_heidenreich89@gmail.com | Ocala | Inactive | $1,021.30 |
| Taylor Huels | timmy81@gmail.com | Dejahfurt | Active | $770.93 |
| Mike Gorczany-Koch | camylle99@hotmail.com | East Malloryview | Inactive | $874.01 |
| Joanne Boyer Jr. | gregory77@hotmail.com | Pawtucket | Active | $1,168.76 |
| Janet Jenkins | alan_hills82@gmail.com | Mckaylamouth | Active | $647.46 |
| Mr. Alvin Stark | elena_boehm@yahoo.com | North Albastead | Inactive | $310.36 |
| Chad Watsica | flossie_reynolds31@yahoo.com | Fort Lindsaystead | Active | $1,032.35 |
| Ms. Yvonne Bogisich | stanton_zboncak56@hotmail.com | New Eugenefort | Active | $563.23 |
| Dennis Ernser Jr. | fidel.hartmann@hotmail.com | North Brent | Active | $304.91 |
| Total | $9,850.54 | |||
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 |