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 | $351.87 |
| INV002 | Unpaid | Credit Card | $292.71 |
| INV003 | Unpaid | PayPal | $693.24 |
| INV004 | Paid | PayPal | $731.72 |
| INV005 | Paid | Bank Transfer | $875.63 |
| INV006 | Paid | PayPal | $256.09 |
| INV007 | Paid | Credit Card | $484.17 |
| Total | $3,685.43 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Carolina Ortiz | International Accountability Manager | carolina_ortiz69@hotmail.com | Admin | |
| Vincenza Nader | Lead Solutions Analyst | vincenza.nader85@gmail.com | Viewer | |
| Nathaniel Pouros | Forward Solutions Officer | nathaniel_pouros55@yahoo.com | Viewer | |
| Jacey Ryan | Product Group Associate | jacey.ryan@yahoo.com | Member | |
| Tommie Tremblay | Customer Directives Manager | tommie_tremblay94@yahoo.com | Admin | |
| Hazle Lowe | Senior Metrics Facilitator | hazle_lowe98@gmail.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 |
|---|---|---|
Moises Considine Lead Communications Assistant moises.considine@hotmail.com | Member | |
Laron O'Conner Senior Mobility Strategist laron.oconner@hotmail.com | Viewer | |
Daisha Thompson Human Creative Engineer daisha_thompson71@gmail.com | Admin | |
Wilma Kassulke Central Integration Manager wilma_kassulke63@hotmail.com | Admin | |
Keith Goodwin International Mobility Strategist keith.goodwin@yahoo.com | Member | |
Emil Runte Internal Applications Agent emil.runte67@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ottilie Hand Product Program Strategist ottilie_hand@hotmail.com | Viewer | |
Tavares Schaden District Mobility Developer tavares.schaden7@hotmail.com | Admin | |
Saul Toy Forward Tactics Engineer saul_toy@yahoo.com | Viewer | |
Crawford Sporer Principal Tactics Officer crawford_sporer3@yahoo.com | Viewer | |
Ayla Olson Future Branding Producer ayla_olson43@hotmail.com | Admin | |
Mario Roob Lead Metrics Developer mario_roob@yahoo.com | Admin | |
Hollis Auer Dynamic Marketing Manager hollis.auer23@hotmail.com | Admin | |
Ethel Bechtelar Dynamic Branding Producer ethel.bechtelar98@hotmail.com | Member | |
Franco Zieme Direct Data Consultant franco.zieme@gmail.com | Admin | |
Janiya Flatley Corporate Optimization Executive janiya.flatley@gmail.com | Viewer | |
Skylar Heidenreich Direct Solutions Assistant skylar_heidenreich21@gmail.com | Admin | |
Stanford Aufderhar Principal Factors Technician stanford.aufderhar64@gmail.com | Member | |
Sage Walter-Murazik Forward Tactics Producer sage.walter-murazik@yahoo.com | Member | |
Winston McLaughlin National Paradigm Administrator winston.mclaughlin@yahoo.com | Member | |
Tia Hackett Senior Mobility Manager tia.hackett@gmail.com | Member | |
Pearl Kunde Senior Research Supervisor pearl.kunde87@gmail.com | Admin | |
Anahi Nitzsche Direct Division Supervisor anahi.nitzsche@gmail.com | Admin | |
Zella Koepp Forward Configuration Planner zella_koepp@hotmail.com | Admin | |
Dustin Ullrich Human Accounts Architect dustin.ullrich10@gmail.com | Admin | |
Laura Nienow Product Identity Supervisor laura_nienow@yahoo.com | Viewer |
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 | |
|---|---|---|---|---|
| Mark Hane | kelton.rodriguez@gmail.com | Kolbymouth | Active | $1,177.83 |
| Alan Ortiz DDS | deshawn25@hotmail.com | New Terrance | Inactive | $1,075.78 |
| Guy Legros | camden4@gmail.com | North Garth | Inactive | $534.32 |
| Domingo Crona | dovie24@hotmail.com | Wichita Falls | Inactive | $940.22 |
| Dolores Terry | jena_roberts19@yahoo.com | Kuhlmanberg | Active | $742.31 |
| Total | $4,470.46 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bryant Langworth @kristofer_bednar81 | heaven.legros-padberg@yahoo.com | Philadelphia | Inactive | $143.37 |
Connie Brakus @michel_dicki86 | enoch_pouros50@yahoo.com | East Meaganmouth | Inactive | $985.41 |
Dr. Heather Kuhic @darrell.robel1 | olen.steuber62@hotmail.com | Mireillefurt | Inactive | $860.80 |
Marlene Spencer @dorthy74 | lukas46@gmail.com | Waltham | Inactive | $1,066.91 |
Dr. Micheal Schoen @kiera73 | alvera29@gmail.com | Port Elda | Inactive | $48.86 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Constance Kuhn | ebba.farrell2@gmail.com | Georgetteport | Active | $1,176.35 |
| Darrel Fahey Sr. | sheldon66@yahoo.com | Lynchberg | Active | $171.84 |
| Cameron Konopelski-Altenwerth Jr. | laila13@hotmail.com | North Esteban | Active | $749.73 |
| Mrs. Lois Hahn | edwina.botsford22@hotmail.com | North Jerroldshire | Inactive | $444.19 |
| Ronald Adams | helena_little@hotmail.com | Franeckichester | Active | $187.49 |
| Total | $2,729.60 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Winston Moore | dejuan80@hotmail.com | Barneyton | Active | $892.06 |
| Felipe Boyle-Zboncak IV | amira.shields62@hotmail.com | South Lyricworth | Inactive | $1,121.40 |
| Ms. Theresa Yost | justyn_daniel7@hotmail.com | New Felixville | Active | $66.47 |
| Luther Graham | shanie73@yahoo.com | Ogden | Active | $206.53 |
| Danny Mueller | skyla61@yahoo.com | Bulahworth | Active | $1,103.59 |
| Total | $3,390.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Neal Abernathy | kody.paucek85@yahoo.com | Fort Tobinstad | Inactive | $1,016.31 |
| Willard Keeling | marilie.blanda@yahoo.com | West Leeland | Inactive | $1,195.03 |
| Kristen Williamson | ephraim.mosciski86@yahoo.com | Lake Marcelo | Active | $958.60 |
| Ray Auer | seth.cummerata@gmail.com | Fort Destiny | Active | $1,086.71 |
| Ronald Hilpert | nicholas21@hotmail.com | Matteobury | Active | $1,167.53 |
| Total | $5,424.18 | |||
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 | ||
|---|---|---|---|---|---|
| Fannie Greenholt | chauncey_carroll-towne34@gmail.com | South Juniusside | Active | $1,009.30 | |
| Roy Becker | delta.schamberger@yahoo.com | New Nigelstad | Inactive | $2.02 | |
| Guy Graham | golden60@gmail.com | Altheacester | Active | $296.01 | |
| Dr. Delores Gorczany PhD | jevon_jast@hotmail.com | Fort Pierce | Inactive | $104.12 | |
| Norman Von II | myriam43@gmail.com | South Candicefurt | Active | $308.75 | |
| Total | $1,720.20 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Stephanie Steuber IV | ressie_bergstrom10@gmail.com | Chaimworth | Inactive | $756.51 | |
| Jonathon Koelpin | meaghan69@yahoo.com | North Katarina | Active | $680.88 | |
| Terence Ankunding II | geoffrey27@hotmail.com | Silver Spring | Active | $262.15 | |
| Lindsey Legros | natalie.nienow@hotmail.com | West Kyler | Active | $85.42 | |
| Kathy Spinka | shanon.gislason-kreiger@gmail.com | West Thea | Active | $828.48 | |
| Total | $2,613.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 | |
|---|---|---|---|---|
| Raymond Gutkowski | amira83@gmail.com | Lebsacktown | Inactive | $78.19 |
| Walter Schroeder | dalton_nolan@hotmail.com | New Bryana | Inactive | $1,055.58 |
| Charlotte Leannon | jaunita.pacocha@hotmail.com | Clifton | Active | $1,023.74 |
| Alberta Jacobi | michel18@yahoo.com | Findlay | Inactive | $1,021.42 |
| Taylor Wyman | chloe_pfannerstill18@hotmail.com | Cicero | Inactive | $427.20 |
| Ms. Essie Wyman II | rod88@hotmail.com | Port Mariahcester | Active | $201.80 |
| Isaac Hills | adalberto.medhurst97@yahoo.com | Leannonhaven | Inactive | $133.09 |
| Beatrice Hayes | melissa_langworth46@gmail.com | Darehaven | Inactive | $775.69 |
| Mr. Garrett Hyatt | buster.rolfson@gmail.com | Feeneyfurt | Inactive | $349.92 |
| Robin Hayes DVM | thalia_hoeger@hotmail.com | Harlingen | Active | $553.40 |
| Yvette Harber | jany_cummerata-rolfson10@yahoo.com | East Ernestinafield | Inactive | $228.00 |
| Raymond Pfannerstill | leila.cummings32@yahoo.com | New Andrewton | Active | $1,099.02 |
| Angelica Berge I | isadore_heidenreich5@yahoo.com | Lake Amelieworth | Active | $71.93 |
| Jermaine Rolfson | nikko_beahan97@yahoo.com | North Erahaven | Active | $756.09 |
| Ruben McKenzie | garrison_orn@yahoo.com | Rodrickview | Inactive | $550.25 |
| Total | $8,325.32 | |||
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 |