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 | $658.05 |
| INV002 | Unpaid | PayPal | $241.49 |
| INV003 | Unpaid | Credit Card | $868.72 |
| INV004 | Pending | Bank Transfer | $975.76 |
| INV005 | Paid | PayPal | $316.14 |
| INV006 | Pending | PayPal | $172.55 |
| INV007 | Paid | Credit Card | $972.55 |
| Total | $4,205.26 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Angelica Fahey-Reichert | Global Factors Technician | angelica_fahey-reichert@yahoo.com | Viewer | |
| Brannon Pollich | Internal Integration Administrator | brannon.pollich75@yahoo.com | Admin | |
| Abdiel Moore | District Security Orchestrator | abdiel.moore@yahoo.com | Admin | |
| Hayley Predovic | International Metrics Facilitator | hayley_predovic93@hotmail.com | Viewer | |
| Amie Fahey | Human Communications Specialist | amie.fahey@hotmail.com | Admin | |
| Adele Kovacek | Chief Branding Planner | adele.kovacek@hotmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Gunner Krajcik Chief Metrics Architect gunner_krajcik67@gmail.com | Member | |
Grayce Zemlak Chief Security Engineer grayce.zemlak47@hotmail.com | Viewer | |
Caterina Hermiston International Marketing Associate caterina.hermiston@yahoo.com | Viewer | |
Gabe Brown Product Accountability Representative gabe_brown8@gmail.com | Admin | |
Francesca Adams-Hirthe Corporate Infrastructure Manager francesca.adams-hirthe44@yahoo.com | Viewer | |
Jonathan Zemlak Human Mobility Coordinator jonathan.zemlak94@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 |
|---|---|---|
Ethelyn Schowalter Forward Infrastructure Planner ethelyn.schowalter60@yahoo.com | Viewer | |
Louisa Botsford Direct Web Planner louisa.botsford@hotmail.com | Viewer | |
Tyree Grant International Functionality Supervisor tyree_grant@yahoo.com | Viewer | |
Hilbert Predovic Customer Communications Orchestrator hilbert_predovic96@hotmail.com | Admin | |
Ara Kreiger Future Operations Agent ara.kreiger8@gmail.com | Member | |
Darren Abshire Human Marketing Director darren_abshire@gmail.com | Viewer | |
Citlalli Lowe Product Marketing Designer citlalli.lowe@yahoo.com | Member | |
Carolyn Barton Internal Group Producer carolyn.barton@hotmail.com | Admin | |
Branson Kessler Product Paradigm Developer branson.kessler23@yahoo.com | Member | |
Kennith Morar Central Usability Architect kennith_morar@yahoo.com | Member | |
Ross Morar Senior Implementation Orchestrator ross_morar@hotmail.com | Member | |
Allen Beier National Mobility Liaison allen.beier@gmail.com | Member | |
Rene Donnelly Global Factors Facilitator rene_donnelly@yahoo.com | Admin | |
Liana Schinner Chief Solutions Assistant liana.schinner@hotmail.com | Member | |
Kattie Beatty Senior Quality Strategist kattie.beatty@yahoo.com | Viewer | |
Billie Hessel-Murphy Human Directives Consultant billie.hessel-murphy@hotmail.com | Viewer | |
Cayla Labadie-Veum Lead Mobility Executive cayla_labadie-veum@hotmail.com | Viewer | |
Vena Mante Future Quality Coordinator vena_mante83@yahoo.com | Member | |
Sydnie Stracke National Response Supervisor sydnie.stracke81@yahoo.com | Member | |
Maverick Murazik Investor Response Executive maverick.murazik26@gmail.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 | |
|---|---|---|---|---|
| Sammy Adams | santiago_mraz@yahoo.com | Catonsville | Inactive | $117.37 |
| Dr. Jo Turner | tatum_schimmel24@gmail.com | Blacksburg | Active | $288.73 |
| Mr. Eric Kerluke | charity49@hotmail.com | Kosstown | Active | $774.98 |
| Brandi Donnelly | rachelle_satterfield-gleason@yahoo.com | Vitamouth | Inactive | $703.47 |
| Stewart O'Reilly | lyla70@yahoo.com | Port Brooks | Inactive | $1,123.14 |
| Total | $3,007.69 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Sheldon Hauck @lew83 | stacey82@hotmail.com | Fort Ianland | Active | $313.11 |
Cory Yost I @levi.kuhn86 | geo_dare-purdy57@hotmail.com | West Romacester | Inactive | $413.08 |
Ann Zieme @keshawn_labadie53 | ruthie.hamill@yahoo.com | Cedar Park | Active | $126.38 |
Dr. Joey Mohr @sister12 | ena.lubowitz@yahoo.com | Fort Mack | Inactive | $49.47 |
Mr. Edgar Cassin @deborah99 | price.treutel@yahoo.com | Sengerborough | Inactive | $152.72 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Alexis Schultz | destin94@hotmail.com | West Sashaburgh | Inactive | $520.16 |
| Kathy Krajcik I | ernest63@yahoo.com | Bentonville | Inactive | $803.09 |
| Megan Dickens Jr. | everardo27@yahoo.com | East Antoniatown | Inactive | $441.05 |
| Pearl Wiegand | jesus_fisher@gmail.com | San Leandro | Inactive | $960.96 |
| Ramiro Ernser | suzanne54@yahoo.com | Olsonstad | Inactive | $1,169.94 |
| Total | $3,895.20 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Laverne Boyle | leonardo.barrows@hotmail.com | West Kylastad | Inactive | $1,084.95 |
| Phil Rosenbaum | laura.ortiz@hotmail.com | Steuberchester | Active | $879.13 |
| Pedro Schultz | kaycee.schoen@hotmail.com | East Rowanstad | Active | $573.59 |
| Marsha Abbott | bernard_pacocha@hotmail.com | North Jewel | Active | $8.58 |
| Eugene Corwin | cindy_collier@hotmail.com | Tannerhaven | Inactive | $260.87 |
| Total | $2,807.12 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Phil Langosh | leonie_gottlieb@gmail.com | Port Serenitymouth | Inactive | $439.19 |
| Patti Ebert | rhea32@yahoo.com | Port Corenefort | Inactive | $540.97 |
| Andy Jerde | dorcas_kovacek63@hotmail.com | Violethaven | Inactive | $123.49 |
| Adrienne Volkman | susie_hand6@yahoo.com | East Cathystead | Inactive | $901.64 |
| Dr. Sammy Stark | cleora_mante@hotmail.com | South Abigailberg | Active | $386.02 |
| Total | $2,391.31 | |||
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 | ||
|---|---|---|---|---|---|
| Stewart Reichert | marilyne.cronin55@yahoo.com | Colleenbury | Active | $1,197.33 | |
| Virginia Mosciski-Hermann | jodie63@gmail.com | McClureside | Active | $507.46 | |
| Mrs. Camille Olson | clinton43@hotmail.com | North Roselynville | Inactive | $1,035.33 | |
| Charlene Mann | dean_barrows32@gmail.com | Fort Lavernacester | Inactive | $216.91 | |
| Luther Hackett | leslie.dickens@hotmail.com | Coachella | Inactive | $541.57 | |
| Total | $3,498.60 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tomas Hyatt-Huel | alec.crona@yahoo.com | South Cruz | Active | $77.03 | |
| Glen Schumm I | shawn_mcclure88@gmail.com | Buckridgeberg | Inactive | $877.53 | |
| Marcia Abernathy | wilfred23@hotmail.com | North Ikeburgh | Inactive | $719.59 | |
| William Fay | derek_okeefe@yahoo.com | Gislasonburgh | Active | $157.93 | |
| Yvonne Kshlerin | thalia.langworth@hotmail.com | Turcottefield | Inactive | $8.40 | |
| Total | $1,840.48 | ||||
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 | |
|---|---|---|---|---|
| Verna Windler | collin_lang@gmail.com | Ronnyborough | Active | $363.69 |
| Felix Lakin | leonie_kub94@gmail.com | Lake Laila | Inactive | $1,053.75 |
| Steve Mosciski DDS | uriah_daugherty@gmail.com | Kennewick | Active | $197.35 |
| Tabitha Schultz | ilene26@gmail.com | Boyerberg | Inactive | $977.83 |
| Leah Larson | elroy.huel64@gmail.com | Lake Rachelle | Active | $1,112.14 |
| Sabrina Sporer | russ74@hotmail.com | Okunevacester | Inactive | $347.56 |
| Ismael Abernathy | alysha.hettinger-reichert39@gmail.com | Bridgetside | Active | $475.39 |
| Delores Grimes DDS | virgil71@gmail.com | Janessahaven | Active | $810.52 |
| Roberto Kirlin | laury51@yahoo.com | Veldaside | Active | $674.53 |
| Sylvester McDermott | philip_klein@yahoo.com | Thielchester | Active | $597.26 |
| Dr. Eugene Beier | margie.hane95@gmail.com | East Romaine | Active | $76.94 |
| Pamela Bradtke-Koepp | delphine.keeling@gmail.com | Weymouth Town | Active | $474.27 |
| Marion Upton | kaden42@gmail.com | Camarillo | Active | $432.44 |
| Jamie Rath | kelly33@hotmail.com | North Stefan | Inactive | $1,103.79 |
| Earl Beier | emma.krajcik@yahoo.com | Romainestead | Inactive | $635.90 |
| Total | $9,333.36 | |||
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 |