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 | Credit Card | $547.21 |
| INV002 | Unpaid | Bank Transfer | $488.45 |
| INV003 | Unpaid | Bank Transfer | $572.62 |
| INV004 | Paid | PayPal | $392.83 |
| INV005 | Paid | Bank Transfer | $930.38 |
| INV006 | Paid | Credit Card | $128.83 |
| INV007 | Paid | PayPal | $932.34 |
| Total | $3,992.66 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Justine Kohler | District Directives Representative | justine_kohler@hotmail.com | Viewer | |
| Clint King | Legacy Division Facilitator | clint_king76@gmail.com | Admin | |
| Emmie Gutkowski | Chief Security Liaison | emmie_gutkowski@gmail.com | Viewer | |
| Sophia Beier | Senior Factors Director | sophia_beier42@hotmail.com | Member | |
| Rosalee Parker | Legacy Accountability Designer | rosalee_parker@gmail.com | Viewer | |
| Chanelle Cartwright | Global Mobility Designer | chanelle_cartwright@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 |
|---|---|---|
Imani Grimes Lead Division Agent imani_grimes80@yahoo.com | Admin | |
Selena Macejkovic Senior Optimization Planner selena_macejkovic17@hotmail.com | Member | |
Lindsay Hyatt Forward Factors Analyst lindsay.hyatt20@hotmail.com | Member | |
Heber Vandervort Principal Directives Producer heber.vandervort78@hotmail.com | Member | |
Tremayne Spinka National Intranet Manager tremayne.spinka@yahoo.com | Viewer | |
Danika Reichel Corporate Paradigm Agent danika_reichel@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kathryne Thiel Legacy Accounts Coordinator kathryne.thiel@hotmail.com | Member | |
Alfredo Hauck Dynamic Web Assistant alfredo.hauck@yahoo.com | Member | |
Allan Tillman Principal Integration Analyst allan_tillman6@yahoo.com | Member | |
Rodrick Powlowski Corporate Interactions Engineer rodrick.powlowski48@hotmail.com | Viewer | |
Olaf Schroeder Future Security Supervisor olaf.schroeder7@gmail.com | Member | |
Jalen Reilly Lead Infrastructure Architect jalen.reilly35@gmail.com | Admin | |
Forrest Steuber Product Functionality Liaison forrest.steuber@yahoo.com | Admin | |
Salvatore Mueller Global Paradigm Specialist salvatore.mueller@yahoo.com | Member | |
Terry Feeney Human Identity Developer terry.feeney64@yahoo.com | Member | |
Robert Nicolas-Hane Dynamic Interactions Planner robert_nicolas-hane@yahoo.com | Member | |
Barney Feest Regional Quality Architect barney.feest17@gmail.com | Viewer | |
Monte Parisian Forward Mobility Assistant monte.parisian20@hotmail.com | Admin | |
Pauline Abernathy Forward Creative Administrator pauline_abernathy@gmail.com | Admin | |
Flavio Ruecker District Integration Architect flavio.ruecker82@hotmail.com | Member | |
Marjory Schmeler Corporate Configuration Consultant marjory_schmeler@yahoo.com | Viewer | |
Pamela Kohler Forward Applications Supervisor pamela.kohler28@gmail.com | Member | |
Athena Wyman Direct Markets Strategist athena_wyman5@gmail.com | Viewer | |
Dasia Hauck Internal Quality Producer dasia_hauck@gmail.com | Member | |
Iliana Hauck Central Factors Analyst iliana_hauck71@hotmail.com | Viewer | |
Icie Walsh Dynamic Communications Officer icie.walsh38@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Sheri Skiles I | hayden.funk0@hotmail.com | Jacobiport | Active | $68.74 |
| Brian Jakubowski III | daniella.bahringer@hotmail.com | Grimesburgh | Active | $328.22 |
| Dawn Mills-Hermiston | laura_kuvalis@hotmail.com | North Estellashire | Active | $1,024.44 |
| William Spencer | arlene99@yahoo.com | Wilsonshire | Active | $610.20 |
| Lois Konopelski | ryley.barrows23@gmail.com | Appleton | Active | $59.87 |
| Total | $2,091.47 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Armando Corkery DDS @katharina0 | abelardo64@gmail.com | Colemanfurt | Active | $1,081.45 |
Alton Sauer @nickolas.kerluke-medhurst | eldridge.brakus-terry@yahoo.com | Coltonport | Active | $472.44 |
Spencer Nitzsche @vern_greenfelder-ohara | justyn8@hotmail.com | New Candidashire | Inactive | $367.99 |
Daisy Feeney-Douglas @aniya_frami | felix99@yahoo.com | New Ameliaside | Active | $177.13 |
Anthony Kiehn IV @danika64 | helen_bins98@hotmail.com | Violettehaven | Active | $457.72 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Constance Wiegand | federico_west@hotmail.com | Fort Daryl | Inactive | $664.02 |
| Mattie Stoltenberg | jean.goyette@gmail.com | Hammond | Inactive | $254.87 |
| Leona Schmitt | omari2@hotmail.com | North Helenchester | Active | $472.41 |
| Lorenzo Schinner | dolly.farrell65@hotmail.com | Ivaland | Inactive | $625.61 |
| Elijah Kerluke | jarvis66@gmail.com | Arvada | Active | $980.44 |
| Total | $2,997.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Kristi Jast | ardith.hartmann89@hotmail.com | Waukesha | Active | $803.73 |
| Mr. Carroll Feil DVM | baby22@yahoo.com | Goodwinburgh | Active | $337.74 |
| Mildred Kessler | mary_kuvalis40@yahoo.com | Wellington | Inactive | $305.16 |
| Ivan Zulauf | ephraim.balistreri98@yahoo.com | Daughertyboro | Inactive | $331.08 |
| Mr. Marcus Herman | marilou71@gmail.com | Schinnertown | Active | $1,095.34 |
| Total | $2,873.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Marian Hilll | merlin_ortiz38@hotmail.com | South Loncester | Inactive | $221.20 |
| Mona Zieme | camron51@yahoo.com | Kulasstead | Active | $374.50 |
| Daryl Schroeder | damien.cartwright56@hotmail.com | Huelsfurt | Active | $243.33 |
| Ms. Marsha Nicolas | jordan_kemmer@hotmail.com | Sipesfield | Active | $1,115.60 |
| Erma Bode | gilda_boehm27@gmail.com | Goodwinworth | Inactive | $762.16 |
| Total | $2,716.79 | |||
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 | ||
|---|---|---|---|---|---|
| Ada Kub Jr. | abdullah.white33@hotmail.com | Port Candacechester | Active | $625.21 | |
| Louise Purdy | koby60@hotmail.com | Virginia Beach | Inactive | $559.99 | |
| Mr. Willard Kirlin-Kshlerin | ulises_oberbrunner20@yahoo.com | Orlando | Inactive | $1,008.66 | |
| Gabriel Wolf | dianna84@gmail.com | Port Cierra | Inactive | $1,071.51 | |
| Benjamin Medhurst | millie.lebsack@hotmail.com | Marquardtbury | Active | $167.07 | |
| Total | $3,432.44 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Hattie Bergnaum | bette_zemlak4@hotmail.com | Daytona Beach | Active | $536.86 | |
| Gertrude Schowalter | shyann_rohan@gmail.com | Dundalk | Active | $490.52 | |
| Mrs. Alison Walker | ernestina_west46@yahoo.com | Chandler | Active | $485.99 | |
| Garrett Emmerich | samir_volkman@gmail.com | North Jarvis | Inactive | $1,144.22 | |
| Vickie O'Conner | shayna.legros@gmail.com | Mathiaschester | Inactive | $543.82 | |
| Total | $3,201.41 | ||||
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 | |
|---|---|---|---|---|
| Randy Greenfelder | julie47@yahoo.com | Irvington | Inactive | $1,102.79 |
| Alexander Bartoletti | cleo59@hotmail.com | Destinycester | Inactive | $747.08 |
| Monique Lesch | alvis32@gmail.com | Miltonhaven | Inactive | $440.24 |
| Bob Crist | giovanny12@hotmail.com | Hoegerworth | Active | $425.54 |
| Vickie Reilly I | burley_prohaska@gmail.com | Lake Alexander | Inactive | $772.69 |
| Alvin Rolfson DVM | ophelia_hand@yahoo.com | Port Jailyn | Active | $352.23 |
| Emma Koch | evalyn_turcotte@gmail.com | Port Dougstead | Active | $150.84 |
| Debbie Heidenreich-Hayes | rachael.stoltenberg71@gmail.com | Port Reynold | Active | $1,001.73 |
| Kristie Price | verner.anderson-mante17@yahoo.com | West Modestoside | Inactive | $867.23 |
| Christie Grimes | jane.ankunding@hotmail.com | Port Elainaberg | Inactive | $289.67 |
| Matt Bradtke | mandy2@yahoo.com | Lake Issac | Active | $1,153.01 |
| Eloise Stehr | aleen_balistreri@gmail.com | Southfield | Inactive | $9.60 |
| Edna Predovic | buddy53@yahoo.com | West Annamaeport | Inactive | $870.85 |
| Wendy Collins | jazlyn.reynolds85@gmail.com | Modesto | Active | $254.49 |
| Gilberto Herzog | amelia32@gmail.com | VonRuedenton | Inactive | $1,147.80 |
| Total | $9,585.79 | |||
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 |