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 | $920.96 |
| INV002 | Pending | PayPal | $154.35 |
| INV003 | Pending | PayPal | $401.63 |
| INV004 | Unpaid | Bank Transfer | $604.38 |
| INV005 | Unpaid | Bank Transfer | $471.86 |
| INV006 | Unpaid | Bank Transfer | $641.53 |
| INV007 | Paid | Bank Transfer | $879.28 |
| Total | $4,073.99 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Marta Welch | Forward Assurance Assistant | marta.welch@gmail.com | Viewer | |
| Krista Leannon | Dynamic Applications Manager | krista_leannon51@gmail.com | Viewer | |
| Jerry Schroeder | Internal Tactics Officer | jerry_schroeder@gmail.com | Admin | |
| Tasha Heaney | Human Communications Assistant | tasha_heaney@gmail.com | Admin | |
| Jasper Hodkiewicz | Corporate Program Supervisor | jasper.hodkiewicz42@hotmail.com | Member | |
| Hugh Bradtke | Principal Directives Architect | hugh_bradtke@yahoo.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 |
|---|---|---|
Javon Wolf Regional Tactics Orchestrator javon_wolf51@gmail.com | Viewer | |
Berry Boyer-Funk Legacy Web Administrator berry.boyer-funk@yahoo.com | Admin | |
Genevieve Cartwright District Accountability Planner genevieve_cartwright@yahoo.com | Admin | |
Marquis Stokes Future Security Agent marquis_stokes14@hotmail.com | Admin | |
Edmond Runte Investor Solutions Officer edmond_runte@gmail.com | Admin | |
Ricky Feest Lead Response Specialist ricky.feest61@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 |
|---|---|---|
Nigel Cummings-Mann Human Mobility Administrator nigel.cummings-mann85@gmail.com | Viewer | |
Omer Stokes Dynamic Mobility Facilitator omer.stokes@yahoo.com | Member | |
Kristin Christiansen Investor Branding Architect kristin.christiansen@yahoo.com | Viewer | |
Corey Murray Corporate Security Officer corey.murray94@gmail.com | Admin | |
Marjorie Baumbach National Group Specialist marjorie.baumbach0@hotmail.com | Admin | |
Molly Smitham Regional Directives Technician molly_smitham@gmail.com | Viewer | |
Lawrence Lehner Chief Group Facilitator lawrence.lehner17@yahoo.com | Admin | |
Marcos Crona Forward Web Director marcos.crona3@gmail.com | Member | |
Eula Schmitt Central Research Representative eula.schmitt@gmail.com | Member | |
Romaine Douglas Regional Research Designer romaine_douglas@yahoo.com | Member | |
Shawna Langosh Dynamic Markets Planner shawna.langosh10@yahoo.com | Admin | |
Rosemary Miller Chief Quality Strategist rosemary_miller@gmail.com | Viewer | |
Haley Rau Principal Research Planner haley_rau@yahoo.com | Member | |
Fredy Wilkinson Direct Optimization Strategist fredy.wilkinson@yahoo.com | Viewer | |
Isabelle Williamson Chief Marketing Producer isabelle.williamson@hotmail.com | Admin | |
Gerardo Murazik Internal Tactics Agent gerardo_murazik@gmail.com | Admin | |
Ethel Bergstrom Chief Applications Facilitator ethel_bergstrom@hotmail.com | Member | |
Selina Lockman Direct Functionality Supervisor selina.lockman92@gmail.com | Member | |
Bessie Leuschke Human Brand Agent bessie.leuschke99@hotmail.com | Member | |
Emmitt Cummings Global Communications Agent emmitt_cummings8@yahoo.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 | |
|---|---|---|---|---|
| Teagan Doyle | krista48@hotmail.com | North Calebberg | Inactive | $284.38 |
| Oran Mann | stacey.schiller9@yahoo.com | Rosellaport | Active | $700.48 |
| Grace O'Reilly | tracey.davis74@yahoo.com | Fort Lexusberg | Inactive | $932.40 |
| Stella Dooley | agnes_purdy@hotmail.com | Toyport | Active | $421.20 |
| Eda O'Conner | georgette_will54@hotmail.com | North Reedhaven | Inactive | $671.67 |
| Total | $3,010.13 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lauren Mueller @karl35 | aubrey.klocko57@yahoo.com | Fort Ford | Active | $1,103.17 |
Mr. Conrad Emmerich @billie53 | felipe26@hotmail.com | New Annestad | Inactive | $681.85 |
Sonya Bogan I @ellis_stark | yolanda96@yahoo.com | South Dinoboro | Active | $694.60 |
Russ Brakus @kristin.wehner-brakus69 | sara85@hotmail.com | Bednarstead | Inactive | $856.60 |
Miss Lori Cummerata @cesar.grimes84 | grant.vonrueden@gmail.com | Margaritacester | Inactive | $181.56 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gerald Willms | melody_nader84@hotmail.com | Kossport | Active | $707.82 |
| Rafael Stanton | cyrus.douglas28@yahoo.com | Joplin | Active | $264.89 |
| Randall Zboncak | justin.yost25@hotmail.com | Cristopherland | Active | $434.70 |
| Nick Wintheiser | janie.sanford@hotmail.com | New Salmaberg | Active | $221.73 |
| Melinda Reynolds | janick.prosacco-bechtelar84@gmail.com | Maximilianville | Inactive | $935.02 |
| Total | $2,564.16 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rhiannon Daniel | jimmy_carroll@gmail.com | Felicityton | Inactive | $1,047.45 |
| Lucia Krajcik | devon_sipes@yahoo.com | Armstrongville | Active | $1,084.10 |
| Aron Balistreri | marco_daugherty75@gmail.com | Liaboro | Active | $224.90 |
| Tracy Donnelly IV | isadore1@yahoo.com | Merlestead | Active | $309.69 |
| Pete O'Keefe | benjamin_rosenbaum@yahoo.com | Durham | Inactive | $1,191.95 |
| Total | $3,858.09 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rosemarie Zemlak | nicholas.armstrong26@hotmail.com | Fort Francis | Inactive | $282.16 |
| Jana Shanahan | freeman.mckenzie47@gmail.com | Fort Worth | Active | $656.08 |
| Fred Haley | presley.grady30@hotmail.com | Dariusfield | Active | $1,175.18 |
| Ms. Ernesto Bradtke | lowell97@gmail.com | Lake Emelieburgh | Inactive | $177.53 |
| Golda Dietrich | demetrius41@hotmail.com | Maybelleton | Inactive | $290.01 |
| Total | $2,580.96 | |||
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 | ||
|---|---|---|---|---|---|
| Louis Denesik | retha.walker82@yahoo.com | Weissnatfurt | Active | $772.45 | |
| Jamie Roob | domenica69@yahoo.com | Brookhaven | Active | $644.46 | |
| Doug McCullough | kay_braun35@gmail.com | North Aniyaburgh | Active | $309.31 | |
| Mortimer Towne PhD | toby22@gmail.com | Schulistville | Active | $160.82 | |
| Barbara Marks | erica.parker@yahoo.com | Karolannchester | Inactive | $779.72 | |
| Total | $2,666.76 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Arturo Hegmann | margie_borer47@gmail.com | Port Gennaro | Inactive | $116.77 | |
| Nathan Lindgren | wilfrid_ryan97@hotmail.com | Port Jadenland | Inactive | $1,052.00 | |
| Ervin Reynolds | lowell29@yahoo.com | Krisside | Active | $78.76 | |
| Monica Pfannerstill | mellie.hodkiewicz17@yahoo.com | Port Lawrence | Active | $1,023.51 | |
| Beatrice Johnston | ernesto.rodriguez85@hotmail.com | Burdetteshire | Active | $1,188.67 | |
| Total | $3,459.71 | ||||
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 | |
|---|---|---|---|---|
| Sam Heidenreich | inez78@gmail.com | Townestead | Active | $156.98 |
| Margaret Hettinger | deanna_bruen75@yahoo.com | Margarettberg | Active | $461.46 |
| Shaniya Feest | roman_will96@gmail.com | Imaworth | Active | $765.78 |
| Itzel Schumm | lacy_jaskolski57@yahoo.com | West Estherview | Active | $629.92 |
| Miss Darrel Stanton | monserrate29@gmail.com | Myrlview | Inactive | $64.85 |
| Raquel Senger | jeannie_becker53@hotmail.com | Citrus Heights | Inactive | $559.47 |
| Florence Kuphal | miranda.koelpin@yahoo.com | Westfield | Active | $722.12 |
| Montana Schmidt MD | efren_schimmel@yahoo.com | East Dedric | Inactive | $1,186.74 |
| Mr. Erick Lesch | deborah.dibbert32@yahoo.com | Paradise | Inactive | $235.44 |
| Melanie Kshlerin | geneva_kunze@gmail.com | Macon-Bibb County | Inactive | $815.19 |
| Miss Garett Boyle | waino.hansen@yahoo.com | Bodeton | Active | $122.35 |
| Emily Little | shelia.veum11@gmail.com | East Juston | Active | $367.35 |
| Sandra Swaniawski | randal_glover@gmail.com | Morgan Hill | Active | $371.76 |
| Tom Koch | ken.kuhic@yahoo.com | New Alvahbury | Active | $269.06 |
| Enrique Schaden | brice17@gmail.com | New Sammietown | Inactive | $444.15 |
| Total | $7,172.62 | |||
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 |