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 | Credit Card | $124.31 |
| INV002 | Unpaid | PayPal | $264.74 |
| INV003 | Paid | PayPal | $907.19 |
| INV004 | Paid | Credit Card | $734.26 |
| INV005 | Pending | Credit Card | $542.88 |
| INV006 | Unpaid | PayPal | $298.06 |
| INV007 | Unpaid | PayPal | $596.53 |
| Total | $3,467.97 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ford Ortiz | Customer Intranet Designer | ford.ortiz@hotmail.com | Admin | |
| Hattie Braun | Regional Functionality Manager | hattie.braun@hotmail.com | Member | |
| Rosendo Batz | District Creative Planner | rosendo_batz55@gmail.com | Member | |
| Lilyan King | Lead Intranet Agent | lilyan.king@yahoo.com | Admin | |
| Mabel Lemke-McKenzie | National Factors Agent | mabel_lemke-mckenzie@gmail.com | Admin | |
| Nia O'Reilly | Future Branding Architect | nia.oreilly@hotmail.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 |
|---|---|---|
Samir Shields Investor Identity Producer samir.shields54@yahoo.com | Member | |
Vince Torphy Dynamic Security Coordinator vince.torphy@gmail.com | Viewer | |
Jaida Von District Integration Designer jaida.von@hotmail.com | Viewer | |
Tyler Mann International Data Representative tyler.mann@yahoo.com | Member | |
Maudie O'Conner Senior Security Engineer maudie_oconner51@gmail.com | Viewer | |
Retha Rohan Lead Assurance Supervisor retha_rohan@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 |
|---|---|---|
Lionel Considine Global Division Planner lionel_considine@hotmail.com | Admin | |
Augustus Nolan Product Configuration Director augustus_nolan3@gmail.com | Admin | |
Sophia Cremin Direct Usability Manager sophia.cremin@hotmail.com | Viewer | |
Lisa Kiehn Direct Response Representative lisa.kiehn@yahoo.com | Viewer | |
Carey Mitchell Internal Applications Officer carey.mitchell@gmail.com | Member | |
Eliane Schoen Future Brand Agent eliane_schoen@gmail.com | Viewer | |
Ebba Brown Legacy Assurance Consultant ebba.brown89@gmail.com | Member | |
Everardo Rogahn District Functionality Liaison everardo_rogahn6@hotmail.com | Viewer | |
Connie Olson Direct Usability Agent connie_olson47@yahoo.com | Member | |
Colin O'Hara Global Marketing Supervisor colin_ohara@hotmail.com | Viewer | |
Vernon Romaguera National Functionality Consultant vernon.romaguera12@yahoo.com | Admin | |
Britney Feil Forward Markets Representative britney_feil98@gmail.com | Admin | |
Jennie Stokes Regional Communications Developer jennie.stokes24@hotmail.com | Admin | |
Wayne Hansen National Implementation Liaison wayne_hansen3@gmail.com | Admin | |
Watson Dickinson-Ernser Global Mobility Manager watson.dickinson-ernser@yahoo.com | Member | |
Ewald Fadel Senior Operations Supervisor ewald_fadel@hotmail.com | Admin | |
Lesley Ullrich Forward Usability Representative lesley.ullrich97@hotmail.com | Member | |
Augustus Jenkins Regional Implementation Producer augustus.jenkins@gmail.com | Admin | |
Grayce Stamm Forward Response Agent grayce.stamm70@gmail.com | Member | |
Valerie Ryan Product Tactics Technician valerie_ryan0@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 | |
|---|---|---|---|---|
| Tonya Nitzsche | stephania.johnson75@yahoo.com | Jovantown | Active | $75.24 |
| Delores D'Amore-Gutkowski | breana_heller49@yahoo.com | Bartonview | Active | $474.41 |
| Randall Pfeffer | junior_will@yahoo.com | Taunton | Inactive | $222.37 |
| Dr. Marcos Rowe | mark_bauch@hotmail.com | West Camrenchester | Active | $387.90 |
| Ms. Lydia Paucek | clint14@hotmail.com | New Candidostad | Active | $943.36 |
| Total | $2,103.28 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Donnie Deckow @joana_rolfson | abner98@yahoo.com | Casa Grande | Inactive | $208.48 |
Lynn Schmeler DVM @martina.steuber | monique96@hotmail.com | Kearaland | Inactive | $373.45 |
Rufus Batz Sr. @greyson.sipes | forrest_schaden1@gmail.com | Layton | Inactive | $973.85 |
Charlene Farrell @jairo96 | felton.armstrong93@hotmail.com | New Myaville | Active | $23.16 |
Douglas Huel @nakia_pfannerstill14 | imelda.kerluke@hotmail.com | East Selenahaven | Inactive | $1,139.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sidney Jaskolski | reagan_romaguera@hotmail.com | Birdietown | Active | $432.17 |
| Shaun Rath | iva.wuckert63@yahoo.com | Lake Elza | Inactive | $1,102.08 |
| Benny Hand | gordon.moen@gmail.com | Hampton | Active | $244.86 |
| Bonnie Beer | marietta.moen@yahoo.com | South Kelsi | Inactive | $957.78 |
| Inez Ryan | jaylon_gibson-wisoky37@yahoo.com | Port Kristian | Active | $894.41 |
| Total | $3,631.30 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lewis Stracke DDS | isom59@yahoo.com | South Brody | Inactive | $184.16 |
| Cathy Brakus | ivory_mosciski94@yahoo.com | San Bruno | Active | $672.49 |
| Gerard Hamill | eulalia_okon@hotmail.com | Fort Baylee | Inactive | $709.99 |
| Sadie Towne Jr. | joanne_kunze47@yahoo.com | Erynworth | Active | $1,182.62 |
| Nettie Bogan-Stokes | domenico_marquardt29@yahoo.com | Port Caitlyn | Inactive | $336.90 |
| Total | $3,086.16 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Chad Reinger | horace.kemmer81@yahoo.com | North Benedict | Inactive | $975.26 |
| Tina Marvin | claudie65@yahoo.com | East Misaelport | Inactive | $230.40 |
| Dr. Israel Feil-Crona | elsa_miller45@gmail.com | Port Violetteboro | Active | $1,189.50 |
| Angel Lemke | jeramie_klocko67@hotmail.com | South Jackie | Inactive | $287.94 |
| Janis Mohr-Nicolas | sabina.connelly75@gmail.com | Cassandrehaven | Inactive | $27.32 |
| Total | $2,710.42 | |||
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 | ||
|---|---|---|---|---|---|
| Whitney Schamberger | ryley.sipes@hotmail.com | Port Demondview | Inactive | $1,182.30 | |
| Derek Padberg | reva.cassin@yahoo.com | Haltom City | Inactive | $1,140.19 | |
| Hector Bode | enrique49@gmail.com | New Michelboro | Active | $521.46 | |
| Amber Gleichner PhD | jennifer50@gmail.com | East Horaciohaven | Inactive | $362.43 | |
| Nicolas Hegmann | meggie_walter-schmitt51@gmail.com | Brianastead | Active | $423.70 | |
| Total | $3,630.08 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tracy Homenick | jackeline_howell@gmail.com | San Leandro | Inactive | $1,176.75 | |
| Randal Murray | boyd_pagac94@gmail.com | North Telly | Active | $154.08 | |
| Enrique Conn | moses_toy@hotmail.com | North Ruby | Active | $116.06 | |
| Loren Marks | stewart.herzog@yahoo.com | Inglewood | Inactive | $127.59 | |
| Dr. Emanuel Walsh | emmitt_raynor22@yahoo.com | Lake Rudolph | Inactive | $1,014.21 | |
| Total | $2,588.69 | ||||
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 | |
|---|---|---|---|---|
| Cornelius Farrell | delores66@hotmail.com | Jackson | Inactive | $552.17 |
| Nellie Fahey | erika_torp0@gmail.com | Rennerboro | Active | $1,185.83 |
| Deanna Orn V | cindy_aufderhar49@gmail.com | Hyattcester | Inactive | $75.88 |
| Linda Zboncak | myrna_quigley83@gmail.com | Blickside | Active | $547.99 |
| Randall Huel-Brown | javier14@hotmail.com | Port Julesstad | Inactive | $275.02 |
| Sabrina Considine | maia78@yahoo.com | Adityatown | Active | $475.12 |
| Caroline Wiegand Jr. | felicity16@gmail.com | Broomfield | Inactive | $721.88 |
| Lyle Grant | aimee69@yahoo.com | Lake Winnifred | Inactive | $231.04 |
| Mr. Noel Grant MD | maximilian26@gmail.com | Port Dawson | Inactive | $969.61 |
| Eloise Frami | franco.bosco-rau@gmail.com | Florence-Graham | Inactive | $828.90 |
| Betsy Morissette V | godfrey_nicolas@gmail.com | Lemkeshire | Inactive | $822.74 |
| Dr. Damon Dicki | dedrick98@gmail.com | Fort Dakotafort | Active | $388.02 |
| Isabel Waelchi | glennie13@gmail.com | Coon Rapids | Inactive | $159.39 |
| Angela Mosciski | sophie_pollich@gmail.com | Rutherfordside | Active | $630.65 |
| Teresa Cummerata Jr. | percival_kris@yahoo.com | Tulare | Inactive | $475.18 |
| Total | $8,339.42 | |||
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 |