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 | $225.05 |
| INV002 | Pending | Credit Card | $182.10 |
| INV003 | Pending | Credit Card | $541.88 |
| INV004 | Unpaid | Bank Transfer | $202.50 |
| INV005 | Paid | PayPal | $612.28 |
| INV006 | Pending | PayPal | $266.07 |
| INV007 | Pending | Credit Card | $311.54 |
| Total | $2,341.42 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Wilson Hackett | Human Marketing Associate | wilson.hackett7@yahoo.com | Member | |
| Adeline Kreiger | Chief Infrastructure Architect | adeline_kreiger9@hotmail.com | Member | |
| Vaughn Bartoletti | Senior Markets Manager | vaughn.bartoletti@hotmail.com | Member | |
| Loretta Hand | Future Branding Assistant | loretta.hand@hotmail.com | Admin | |
| Clay Lemke | Regional Data Producer | clay.lemke54@yahoo.com | Member | |
| Kathryn Kassulke | Central Integration Facilitator | kathryn_kassulke76@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jalen Rempel Future Program Consultant jalen_rempel42@gmail.com | Admin | |
Jackie Runolfsdottir Regional Applications Associate jackie.runolfsdottir@yahoo.com | Admin | |
Sherri Roob National Usability Strategist sherri_roob@gmail.com | Admin | |
Leonard Senger Human Communications Technician leonard_senger@yahoo.com | Viewer | |
Arnold Wintheiser Legacy Optimization Assistant arnold_wintheiser65@gmail.com | Viewer | |
Mabel Moore Human Interactions Supervisor mabel.moore0@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Delbert Anderson Central Configuration Architect delbert.anderson6@yahoo.com | Admin | |
Isabelle Purdy Chief Branding Producer isabelle.purdy19@hotmail.com | Viewer | |
Archibald Kutch Corporate Group Agent archibald_kutch@hotmail.com | Admin | |
Bill Pfeffer Central Assurance Representative bill.pfeffer58@gmail.com | Admin | |
Roslyn Gerlach Lead Research Producer roslyn.gerlach@gmail.com | Member | |
Ruben MacGyver Forward Infrastructure Liaison ruben_macgyver@gmail.com | Member | |
Vickie Nicolas Human Quality Agent vickie.nicolas@hotmail.com | Member | |
Sue Hickle Senior Configuration Executive sue_hickle97@yahoo.com | Viewer | |
Lucinda Bogisich International Paradigm Associate lucinda_bogisich7@yahoo.com | Admin | |
Barbara Wintheiser Central Program Architect barbara_wintheiser77@gmail.com | Member | |
Louisa Stokes Principal Group Producer louisa_stokes@gmail.com | Viewer | |
Emile Toy Central Operations Officer emile.toy@yahoo.com | Viewer | |
Terri Bashirian Central Program Analyst terri_bashirian32@hotmail.com | Admin | |
Violette Gerhold Product Functionality Strategist violette_gerhold84@yahoo.com | Member | |
Emilio Ondricka Product Infrastructure Analyst emilio.ondricka@gmail.com | Member | |
Nina Goyette Human Web Agent nina.goyette29@yahoo.com | Admin | |
Elijah Mills-Pfeffer Chief Web Executive elijah.mills-pfeffer27@yahoo.com | Viewer | |
Simon Lindgren-Homenick Senior Markets Producer simon.lindgren-homenick@gmail.com | Admin | |
Bessie Klein Regional Mobility Coordinator bessie_klein@yahoo.com | Admin | |
Mable Ritchie Forward Optimization Specialist mable_ritchie@hotmail.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 | |
|---|---|---|---|---|
| Lowell Toy | blanche_bins67@yahoo.com | Lake Oren | Active | $162.40 |
| Wilbur Runolfsdottir | brenda.dickens9@gmail.com | North Miami | Active | $462.27 |
| Mr. Evans Legros | urban_crist@gmail.com | Jofort | Inactive | $400.88 |
| Rubie Gerhold | garrett40@yahoo.com | Heidenreichland | Active | $241.46 |
| Dr. Toni Will | albina92@gmail.com | Assuntaworth | Active | $1,119.56 |
| Total | $2,386.57 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Sincere Koelpin @claire.stanton | jane_rohan@yahoo.com | Fort Annabelle | Active | $662.36 |
Ocie Murray Jr. @allen61 | marjolaine.crist@gmail.com | Palm Beach Gardens | Inactive | $375.04 |
Dr. Dan Smitham @gregory_nikolaus66 | margie36@yahoo.com | Fort Danialhaven | Inactive | $701.01 |
Carolyne Powlowski DDS @vivien_will58 | josh74@yahoo.com | Tyreefort | Inactive | $823.89 |
Robert Kemmer PhD @aaliyah90 | julian_breitenberg@gmail.com | Fort Aryannafield | Inactive | $825.30 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ronald Gleason Sr. | allison.hamill@gmail.com | North Americo | Active | $1,074.40 |
| Greg Buckridge | ryley40@gmail.com | Fort Jackelinestad | Inactive | $1,039.98 |
| Viola Halvorson | christian_olson@gmail.com | North Lucy | Inactive | $451.97 |
| Davon Keebler | soledad_wintheiser@hotmail.com | New Libbie | Inactive | $644.77 |
| Mekhi D'Amore | cassandra_weissnat@yahoo.com | West Skylar | Active | $348.62 |
| Total | $3,559.74 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Darian Barton | abagail85@yahoo.com | Jeffreyborough | Inactive | $565.57 |
| Ebony Dach | myrtle.rolfson26@yahoo.com | East Ava | Inactive | $7.75 |
| Rafael Sawayn | eduardo_price95@gmail.com | D'Amoreworth | Active | $363.72 |
| Deja Ullrich | eve_rogahn@yahoo.com | Garden Grove | Active | $854.61 |
| Hershel Toy | aliza.okon@yahoo.com | Allycester | Active | $530.18 |
| Total | $2,321.83 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dallas Thompson | arnold37@hotmail.com | Stratford | Inactive | $1,108.56 |
| Assunta Doyle | krista97@hotmail.com | South Kathleenboro | Active | $814.60 |
| Saul Borer | olivia.mann@hotmail.com | Fort Meghan | Inactive | $1,155.90 |
| Jorge Crist MD | desmond_kemmer@gmail.com | Maybellefurt | Active | $549.63 |
| Eric Gleichner | nedra4@yahoo.com | Jalynfield | Active | $1,146.25 |
| Total | $4,774.94 | |||
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 | ||
|---|---|---|---|---|---|
| Johnnie Fahey | lola.morissette83@hotmail.com | Stephanyport | Active | $1,156.03 | |
| Ms. Howard Kreiger | eric.price70@yahoo.com | Dundalk | Inactive | $299.46 | |
| Arturo Turcotte | lelia.mclaughlin@yahoo.com | Sunrise Manor | Inactive | $1,010.97 | |
| Mack Boyle | lowell49@hotmail.com | El Centro | Active | $255.33 | |
| Stacy Walker | ricky38@yahoo.com | Normal | Active | $517.61 | |
| Total | $3,239.40 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alexis Morar | kirk18@yahoo.com | Fort Fritz | Active | $703.04 | |
| Mrs. Nora Okuneva | chanelle_gerlach@hotmail.com | Briellehaven | Active | $515.60 | |
| Ruby Stokes | danial_turcotte@hotmail.com | West Wadeborough | Active | $1,046.48 | |
| Onie Bogan | barbara85@gmail.com | Amiyacester | Active | $152.97 | |
| Brooke Zulauf DDS | gladys_hodkiewicz92@hotmail.com | Redding | Inactive | $66.99 | |
| Total | $2,485.08 | ||||
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 | |
|---|---|---|---|---|
| Santos Mayert | warren28@gmail.com | Hutchinson | Inactive | $1,157.78 |
| Dianna Langosh | minnie20@gmail.com | East Angeline | Inactive | $241.48 |
| Blake Kulas | susie55@yahoo.com | Hudsonfield | Active | $122.18 |
| Lillie Fay | luther_leffler35@yahoo.com | Lake Thaliaburgh | Active | $760.13 |
| Allan Stiedemann | laura_toy93@gmail.com | South Nelle | Inactive | $466.29 |
| Dr. Chaim Schumm | norma25@hotmail.com | South Meaganland | Active | $14.37 |
| Abby O'Reilly | oral.goldner3@hotmail.com | South Peggieburgh | Active | $614.54 |
| Winston West | louise_cole85@hotmail.com | North Stuartberg | Inactive | $764.34 |
| Joesph Luettgen DVM | ira_legros@yahoo.com | Parisiancester | Active | $1,064.87 |
| Whitney Fay | arturo_walsh26@yahoo.com | North Millieton | Inactive | $310.98 |
| Domenica Spinka | antonio.halvorson@gmail.com | West Ciaraville | Inactive | $230.05 |
| Laurence Blick | dana_hansen@hotmail.com | Lindgrenmouth | Active | $240.79 |
| Nadine Schmeler | kathleen.wehner34@gmail.com | Douglashaven | Inactive | $698.12 |
| Mona Murazik | kristie.gerhold@yahoo.com | Oro Valley | Active | $822.47 |
| Meta Stark-Goodwin | orville19@gmail.com | West Des Moines | Active | $1,164.82 |
| Total | $8,673.21 | |||
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 |