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 | $530.96 |
| INV002 | Unpaid | Credit Card | $270.60 |
| INV003 | Paid | PayPal | $973.24 |
| INV004 | Pending | Credit Card | $139.01 |
| INV005 | Unpaid | Credit Card | $839.62 |
| INV006 | Pending | Bank Transfer | $452.44 |
| INV007 | Unpaid | Credit Card | $371.69 |
| Total | $3,577.56 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Wanda Shields | Senior Program Supervisor | wanda_shields@yahoo.com | Member | |
| Russel Erdman | Global Group Facilitator | russel_erdman@gmail.com | Member | |
| Asa Shanahan | Lead Communications Specialist | asa.shanahan29@yahoo.com | Admin | |
| Retha Maggio | Chief Tactics Associate | retha_maggio76@hotmail.com | Member | |
| Jamel Cruickshank | Product Operations Consultant | jamel_cruickshank@hotmail.com | Viewer | |
| Vergie Grant | Principal Marketing Administrator | vergie.grant70@hotmail.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 |
|---|---|---|
Jalen Cormier District Paradigm Consultant jalen_cormier44@yahoo.com | Member | |
Mariane Morar Investor Data Coordinator mariane_morar@gmail.com | Admin | |
Robbie Abshire Forward Operations Architect robbie.abshire@hotmail.com | Viewer | |
Hester Treutel Central Group Producer hester_treutel@hotmail.com | Member | |
Candido Gutmann Principal Accounts Officer candido.gutmann@gmail.com | Member | |
Melissa Konopelski Direct Web Executive melissa_konopelski@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jevon Emard National Research Coordinator jevon.emard82@gmail.com | Admin | |
Caroline Blick Principal Research Administrator caroline.blick12@hotmail.com | Viewer | |
Kendra Hudson Human Branding Orchestrator kendra_hudson11@yahoo.com | Viewer | |
Kobe Balistreri Customer Program Executive kobe.balistreri25@hotmail.com | Viewer | |
Maxie Hettinger Chief Research Coordinator maxie_hettinger@gmail.com | Admin | |
Margie Kuhic Internal Assurance Director margie.kuhic@hotmail.com | Viewer | |
Jackson Crooks Investor Metrics Agent jackson.crooks@gmail.com | Viewer | |
Trystan McKenzie International Accounts Manager trystan.mckenzie@gmail.com | Admin | |
Maximus Murazik National Implementation Developer maximus.murazik77@yahoo.com | Viewer | |
Joanie Ebert Internal Factors Coordinator joanie.ebert3@yahoo.com | Admin | |
Nels Ankunding Dynamic Usability Orchestrator nels.ankunding2@hotmail.com | Admin | |
Hugh Wintheiser Internal Optimization Executive hugh.wintheiser@hotmail.com | Admin | |
Sadye Cruickshank Customer Tactics Executive sadye_cruickshank75@yahoo.com | Member | |
Vivianne O'Keefe Future Tactics Producer vivianne.okeefe@gmail.com | Admin | |
Duane Runte Corporate Operations Administrator duane_runte13@gmail.com | Member | |
Liam Paucek Dynamic Functionality Specialist liam_paucek77@yahoo.com | Viewer | |
Orpha Borer Future Implementation Consultant orpha_borer@yahoo.com | Member | |
Domenica Bosco Chief Security Specialist domenica.bosco@yahoo.com | Member | |
Alycia Predovic Regional Identity Representative alycia_predovic72@hotmail.com | Admin | |
Edd Erdman Future Accountability Coordinator edd.erdman83@hotmail.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 | |
|---|---|---|---|---|
| Cassandra Abbott | hobart_nienow59@hotmail.com | Daijafield | Active | $763.15 |
| Doreen Braun | carter.leannon56@hotmail.com | Noblesville | Inactive | $1,077.64 |
| Dr. Jerald Waters III | grover.nikolaus@yahoo.com | Cary | Inactive | $470.12 |
| Dana Adams | adolfo_durgan@hotmail.com | Tampa | Active | $490.16 |
| Jake Boyer | edna40@gmail.com | Manuelachester | Active | $114.26 |
| Total | $2,915.33 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Gene Schultz DVM @leda.morar | scottie.quigley@hotmail.com | Stamford | Active | $398.30 |
Sandy Grady @nico.labadie59 | karley.bins8@gmail.com | Jacobsworth | Inactive | $146.07 |
Freda Murphy @dewayne31 | violette_waelchi@yahoo.com | Goyetteport | Active | $370.95 |
Iris Stanton @alisa.schumm | kyra7@gmail.com | North Matilda | Inactive | $321.53 |
Willard Murphy-Nitzsche @trenton_roob6 | ezekiel.wuckert21@gmail.com | Bettyport | Active | $250.27 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lionel Leannon | miracle.littel35@hotmail.com | New Tamarafield | Inactive | $393.95 |
| Sadie Satterfield | eric.kerluke@yahoo.com | East Rubye | Active | $1,087.56 |
| Edna Boehm | america_beier@gmail.com | New Chandlerchester | Active | $1,074.90 |
| Ron Lakin | clement_johnston@gmail.com | Alessandrofort | Inactive | $538.12 |
| Marie Donnelly | piper12@hotmail.com | Fort Fernando | Active | $275.59 |
| Total | $3,370.12 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Diane Schuppe IV | marianna_okeefe@gmail.com | Veldaborough | Active | $172.02 |
| Jasmine Raynor | rosalind6@hotmail.com | State College | Inactive | $420.18 |
| Dr. Frederick Olson | marley.larkin82@gmail.com | East Kolby | Active | $135.56 |
| Kent Buckridge | rasheed_mccullough97@hotmail.com | West Deion | Inactive | $366.27 |
| Misty Brown | carroll_mueller@gmail.com | Lake Linnea | Active | $844.82 |
| Total | $1,938.85 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Michelle Schuster-Simonis | baron.stiedemann@gmail.com | Orenton | Active | $273.94 |
| Maureen O'Conner | winnifred34@gmail.com | Tromptown | Active | $1,170.76 |
| Florence Spencer | elinore.stamm97@hotmail.com | North Gardner | Active | $60.02 |
| Flora Baumbach DVM | muriel.nicolas28@gmail.com | Nolaboro | Inactive | $980.82 |
| Miss Wanda Gislason | shyanne_marquardt55@hotmail.com | Lucianoworth | Inactive | $294.53 |
| Total | $2,780.07 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Corey Tremblay | axel_wisoky@hotmail.com | Brittanyside | Active | $193.75 | |
| Joanne Daugherty | myrtis41@yahoo.com | Oberbrunnerstead | Inactive | $389.19 | |
| Jose Keebler DDS | damien_emard@hotmail.com | Kirstenville | Inactive | $478.39 | |
| Brian Ryan | riley_strosin24@gmail.com | Fort Nyasia | Active | $758.71 | |
| Dr. Fred Mann | adell_leffler-little56@hotmail.com | Santa Barbara | Active | $355.53 | |
| Total | $2,175.57 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Marta Wehner | lilliana76@yahoo.com | Lombard | Inactive | $994.70 | |
| Emilio Christiansen | easter52@hotmail.com | Heaneybury | Active | $1,101.86 | |
| Raymond McClure | ophelia_osinski@yahoo.com | Whittier | Active | $458.13 | |
| Jeff Schinner IV | june_kshlerin@gmail.com | Ann Arbor | Inactive | $535.21 | |
| Cody Ferry | matilde.jacobi33@gmail.com | Eau Claire | Active | $12.12 | |
| Total | $3,102.02 | ||||
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 | |
|---|---|---|---|---|
| Betty O'Hara | luciano22@hotmail.com | Port Ryan | Active | $593.10 |
| Louise Will | margot79@yahoo.com | Curtisside | Active | $417.59 |
| Ora Bailey | russel0@gmail.com | Fort Angelafort | Active | $642.22 |
| Loretta Gusikowski | dewayne62@hotmail.com | Mayerfort | Inactive | $158.17 |
| Rhonda Mohr DDS | nathanael14@yahoo.com | Fort Olliebury | Active | $798.15 |
| Claudia Howell | bailey.marvin62@yahoo.com | New Clevefield | Active | $323.20 |
| Ray Kihn | melvina_schmidt@hotmail.com | Lucyland | Inactive | $318.48 |
| Kristina Larson | keyon67@hotmail.com | Florin | Inactive | $1,176.10 |
| Charlie Marvin | domingo.huel@yahoo.com | Leonieville | Active | $1,116.93 |
| Russell Effertz | madison.schoen91@gmail.com | Vidaberg | Active | $317.82 |
| Boyd Haag | maeve.rempel@hotmail.com | Grapevine | Inactive | $1,180.61 |
| Henrietta Franecki | raquel_lehner@yahoo.com | O'Harahaven | Inactive | $949.49 |
| Wade King | lafayette30@hotmail.com | New Americostad | Inactive | $62.25 |
| Alison Ondricka II | savannah78@hotmail.com | Darestead | Active | $656.14 |
| Sean Hayes | emil_moen43@gmail.com | West Eveline | Inactive | $455.58 |
| Total | $9,165.83 | |||
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 |