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 | PayPal | $982.94 |
| INV002 | Pending | PayPal | $352.34 |
| INV003 | Unpaid | Bank Transfer | $897.77 |
| INV004 | Unpaid | Bank Transfer | $485.30 |
| INV005 | Pending | PayPal | $843.66 |
| INV006 | Paid | PayPal | $132.88 |
| INV007 | Unpaid | Credit Card | $540.74 |
| Total | $4,235.63 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Cali Carroll | Customer Communications Liaison | cali_carroll71@hotmail.com | Viewer | |
| Cale Sanford | Legacy Markets Assistant | cale.sanford90@hotmail.com | Member | |
| Maryjane Tromp | Future Web Associate | maryjane_tromp@yahoo.com | Admin | |
| Gerson Hoppe | Customer Paradigm Orchestrator | gerson_hoppe98@yahoo.com | Admin | |
| Noemie Dickinson | Legacy Division Director | noemie_dickinson33@hotmail.com | Admin | |
| Adriana Heller | Customer Usability Coordinator | adriana_heller@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 |
|---|---|---|
Theo Botsford District Group Planner theo.botsford@yahoo.com | Admin | |
Annamae Marquardt Principal Assurance Planner annamae_marquardt@yahoo.com | Admin | |
Elizabeth Kuphal District Configuration Analyst elizabeth_kuphal44@gmail.com | Viewer | |
Nick Collier Investor Marketing Orchestrator nick.collier@gmail.com | Admin | |
Eugene Oberbrunner National Accountability Planner eugene_oberbrunner26@yahoo.com | Member | |
Manuel Senger Regional Branding Assistant manuel_senger@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Alvah Cole Senior Metrics Associate alvah_cole@gmail.com | Viewer | |
Merlin Stark Chief Solutions Analyst merlin_stark73@gmail.com | Admin | |
Dwight Hane Corporate Quality Associate dwight.hane55@hotmail.com | Member | |
Darrion Heaney Corporate Response Representative darrion.heaney@yahoo.com | Viewer | |
Russ Klocko Direct Group Designer russ.klocko@gmail.com | Admin | |
Mable Schmidt Future Configuration Officer mable.schmidt78@hotmail.com | Member | |
Alisha Koepp Principal Integration Strategist alisha_koepp2@yahoo.com | Admin | |
Eulah Wolf Regional Creative Specialist eulah.wolf@hotmail.com | Viewer | |
Rowland Schmitt Senior Applications Orchestrator rowland_schmitt@hotmail.com | Admin | |
Pierce Littel Lead Functionality Technician pierce_littel@hotmail.com | Admin | |
Desiree Williamson Forward Creative Facilitator desiree_williamson@yahoo.com | Admin | |
Dedrick Moore Central Web Executive dedrick_moore@hotmail.com | Member | |
Daisha King Regional Group Manager daisha.king67@hotmail.com | Admin | |
Darrel Kutch Future Functionality Analyst darrel_kutch16@hotmail.com | Member | |
Sidney Beahan Senior Solutions Supervisor sidney_beahan@yahoo.com | Admin | |
Meghan Balistreri Senior Tactics Producer meghan.balistreri25@hotmail.com | Viewer | |
Thelma Hickle Senior Operations Associate thelma.hickle39@hotmail.com | Member | |
Laurence Hickle Human Web Manager laurence_hickle89@gmail.com | Viewer | |
Irwin Mills Lead Communications Supervisor irwin.mills4@hotmail.com | Admin | |
Dayana Pouros Future Creative Manager dayana.pouros@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 | |
|---|---|---|---|---|
| Judy Fritsch | felipe_sauer83@hotmail.com | Betsyworth | Inactive | $685.26 |
| Catherine Hintz | viola_boyer66@gmail.com | Ziemeton | Active | $613.93 |
| Alma Schuster | carlo_cormier51@gmail.com | Lavontown | Active | $178.17 |
| Bill Funk | jesus_metz@hotmail.com | North Otiliachester | Inactive | $1,141.93 |
| Kay Barrows | lorine_boyer@hotmail.com | Hicksville | Inactive | $390.22 |
| Total | $3,009.51 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dr. Joan Sawayn @gus_stark-mcclure93 | barbara23@yahoo.com | South Jamisoncester | Active | $201.05 |
Dwight Harvey-Reinger @glenna_pfannerstill-homenick | eldon.zemlak61@hotmail.com | North Alysson | Inactive | $23.66 |
Maggie Schultz @leslie_hodkiewicz | daija57@yahoo.com | North Stephanie | Active | $721.30 |
Leland Beer PhD @ole.quitzon | fatima.schneider@hotmail.com | East Abbieview | Active | $691.97 |
Cody Shanahan @joel_conroy6 | maida51@yahoo.com | North Margotview | Inactive | $1,003.91 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mathew Yundt | roberta_mcdermott64@yahoo.com | Moseshaven | Inactive | $1,148.01 |
| Jeremiah Littel | ed_robel20@hotmail.com | Wizaberg | Active | $6.62 |
| Clara Schowalter | ollie65@gmail.com | Fort Madisenstad | Inactive | $299.29 |
| Jared Adams | dejah90@gmail.com | Rockyberg | Active | $356.84 |
| Natasha Marks | tessie_oconner@gmail.com | Robertshaven | Active | $817.07 |
| Total | $2,627.83 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leo Wuckert MD | aron.wiegand96@gmail.com | Darbyside | Active | $1,100.76 |
| Blanche Beatty | vern10@hotmail.com | Jerdeburgh | Active | $1,027.52 |
| Mrs. Sarah Krajcik | agustina73@yahoo.com | Brentmouth | Inactive | $275.06 |
| Randal Ritchie | brandyn.bergnaum6@yahoo.com | Nicholausworth | Active | $3.97 |
| Ray Mayer-Lynch | krystel.kris@hotmail.com | Orvaltown | Active | $651.32 |
| Total | $3,058.63 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Antoinette Heathcote | melba.hodkiewicz@yahoo.com | Adahton | Inactive | $307.54 |
| Mr. Luke Klein I | jovan_kuvalis@yahoo.com | New Vernerville | Active | $868.81 |
| Jose Marquardt | flo.hackett@gmail.com | Sammamish | Inactive | $594.11 |
| Jesse McDermott | ophelia16@gmail.com | Lake Jewell | Inactive | $190.72 |
| Frances Lind | savanna68@gmail.com | Lunafurt | Active | $316.95 |
| Total | $2,278.13 | |||
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 | ||
|---|---|---|---|---|---|
| Lonnie Grimes | destany5@hotmail.com | Roobport | Inactive | $708.71 | |
| Ramon Gusikowski | hayley.brekke76@hotmail.com | Reichelside | Active | $820.78 | |
| Wilbur Ortiz | zelda_mraz@gmail.com | North Nat | Active | $612.86 | |
| Delores Flatley | austen_luettgen53@yahoo.com | Yostland | Active | $174.27 | |
| Ora Smitham | kayley_nader0@yahoo.com | Fort Darien | Inactive | $983.00 | |
| Total | $3,299.62 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Beverly Fritsch | nelda45@hotmail.com | Treutelberg | Inactive | $781.38 | |
| Kevin Beier | audreanne.sawayn84@yahoo.com | Walkershire | Inactive | $1,026.79 | |
| Shannon Lynch | amparo58@gmail.com | Hobartshire | Inactive | $774.18 | |
| Myra Dietrich III | arch92@gmail.com | South Valley | Active | $462.51 | |
| Peggy Koch | roberta0@gmail.com | Sparks | Active | $808.27 | |
| Total | $3,853.13 | ||||
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 | |
|---|---|---|---|---|
| Ms. Lucia Rolfson | geovany_effertz48@yahoo.com | Santa Clara | Active | $1,034.87 |
| Mr. Merle Abshire | oswaldo_braun18@hotmail.com | Fort Rubieworth | Inactive | $367.83 |
| Brooke Jaskolski | marianne71@gmail.com | East Cora | Inactive | $285.91 |
| Lynn Ritchie | destiney.smitham@yahoo.com | Alexandria | Inactive | $828.23 |
| Milton Volkman | lela6@yahoo.com | Joliet | Inactive | $1,160.12 |
| Mrs. Kristy Zboncak | harold.baumbach@hotmail.com | East Margotview | Active | $491.94 |
| Ruby Schroeder | barton_mcglynn-ward24@gmail.com | Garden Grove | Inactive | $1,074.49 |
| Ramona Von | effie27@yahoo.com | Eau Claire | Inactive | $1,125.22 |
| Pearl Considine-Mann | maynard.johnson63@yahoo.com | Schillerview | Inactive | $257.82 |
| Casey Macejkovic | kellie88@gmail.com | Lynwood | Inactive | $405.33 |
| Nettie Greenholt | constance7@gmail.com | Calitown | Active | $1,105.50 |
| Vicky Medhurst-Crona V | jakayla21@yahoo.com | Beahanmouth | Inactive | $492.81 |
| Marianne Kerluke | lauriane_franey@gmail.com | North Neomafort | Inactive | $326.92 |
| Annette Mraz | luisa.ritchie@hotmail.com | South Gate | Inactive | $1,070.13 |
| Ted Weber | vinnie.kutch92@gmail.com | San Leandro | Active | $496.20 |
| Total | $10,523.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 |