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 | Unpaid | Bank Transfer | $157.86 |
| INV002 | Unpaid | PayPal | $163.18 |
| INV003 | Unpaid | Credit Card | $753.71 |
| INV004 | Unpaid | Bank Transfer | $449.04 |
| INV005 | Paid | Bank Transfer | $671.28 |
| INV006 | Pending | Bank Transfer | $489.58 |
| INV007 | Unpaid | PayPal | $797.28 |
| Total | $3,481.93 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nora Christiansen | Direct Research Architect | nora.christiansen@gmail.com | Admin | |
| Korey Gleason | International Configuration Analyst | korey_gleason@gmail.com | Viewer | |
| Anthony Harris | Investor Group Engineer | anthony.harris96@hotmail.com | Admin | |
| Kelly Smith | Forward Tactics Administrator | kelly.smith@gmail.com | Admin | |
| Hunter Strosin | Lead Web Manager | hunter_strosin90@hotmail.com | Admin | |
| Lou Anderson | Dynamic Directives Orchestrator | lou.anderson46@yahoo.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 |
|---|---|---|
Randy Ledner Regional Data Coordinator randy.ledner@gmail.com | Member | |
Micheal Welch-Bauch Investor Factors Architect micheal.welch-bauch@hotmail.com | Admin | |
Sylvan Rolfson Regional Applications Developer sylvan.rolfson40@gmail.com | Admin | |
Gus MacGyver National Solutions Orchestrator gus.macgyver69@hotmail.com | Admin | |
Prudence Champlin Principal Group Coordinator prudence_champlin@hotmail.com | Member | |
Verna Wunsch-O'Kon Central Assurance Assistant verna_wunsch-okon@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 |
|---|---|---|
Bo Wyman Product Group Officer bo_wyman@hotmail.com | Admin | |
Leda Klein Legacy Branding Orchestrator leda.klein@gmail.com | Member | |
Rosanna Reilly Legacy Markets Designer rosanna.reilly54@yahoo.com | Viewer | |
Broderick King Direct Identity Orchestrator broderick_king81@hotmail.com | Member | |
Vinnie Volkman Corporate Operations Architect vinnie_volkman27@yahoo.com | Admin | |
Kole Franecki International Marketing Analyst kole_franecki@yahoo.com | Member | |
Bernard Fritsch Product Security Director bernard.fritsch@hotmail.com | Admin | |
Tiffany Stoltenberg Senior Mobility Facilitator tiffany_stoltenberg31@gmail.com | Viewer | |
Dominique Harber Senior Assurance Representative dominique.harber@gmail.com | Member | |
Francisca Hessel National Creative Coordinator francisca_hessel@yahoo.com | Viewer | |
Carlie Nolan-Jakubowski Internal Marketing Director carlie_nolan-jakubowski80@hotmail.com | Admin | |
Whitney Grant Dynamic Factors Assistant whitney.grant82@gmail.com | Viewer | |
Madie Smith Legacy Tactics Administrator madie_smith23@hotmail.com | Admin | |
Paolo Thompson District Division Architect paolo_thompson14@gmail.com | Member | |
Cooper Rodriguez Corporate Integration Administrator cooper_rodriguez51@gmail.com | Admin | |
Jeffry Grady Central Configuration Consultant jeffry_grady@yahoo.com | Member | |
Gino Wintheiser-Altenwerth Chief Usability Planner gino.wintheiser-altenwerth@hotmail.com | Viewer | |
Hazel Reilly International Intranet Designer hazel_reilly@yahoo.com | Viewer | |
Johan Medhurst National Creative Administrator johan_medhurst@hotmail.com | Member | |
Natasha Ward Future Operations Executive natasha_ward@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 | |
|---|---|---|---|---|
| Rene Mertz PhD | kaleb72@hotmail.com | Westfort | Active | $349.03 |
| Rita Botsford | erika.kuhlman26@gmail.com | Drakecester | Inactive | $781.14 |
| Ervin Swaniawski II | belle.rolfson@gmail.com | Torphyton | Inactive | $784.37 |
| Dr. Lauren Feil | creola.weissnat@gmail.com | Laurianecester | Inactive | $852.28 |
| Ms. Tammy Bartell Sr. | allison_williamson12@gmail.com | West Chadrickstead | Inactive | $531.05 |
| Total | $3,297.87 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Gabriel Lemke Jr. @darby31 | madelyn80@yahoo.com | Marksborough | Active | $291.28 |
Sheryl Trantow @janessa80 | price89@yahoo.com | East Hipolito | Active | $401.03 |
Raul Stoltenberg @noemi.zboncak | desmond88@hotmail.com | Port Monserrate | Inactive | $337.53 |
Leland Orn DVM @selmer91 | lottie_feeney50@gmail.com | Lake Brooke | Active | $913.36 |
Minnie Harris @emile84 | princess_powlowski55@yahoo.com | Burdetteville | Inactive | $862.61 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Naomi Carter | keyshawn.jones-frami@yahoo.com | South Kiel | Inactive | $563.15 |
| Naomi Nitzsche | regan_price-oconnell88@yahoo.com | Nashua | Inactive | $23.50 |
| Ramon Fadel | kailee_morar@yahoo.com | El Centro | Active | $99.57 |
| Ronald Gerhold MD | kianna.berge@yahoo.com | East Jace | Inactive | $940.32 |
| Clayton Stark | demarco45@gmail.com | Lake Leocester | Active | $878.04 |
| Total | $2,504.58 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dean Maggio | griffin_veum@hotmail.com | East Willyview | Active | $287.63 |
| Clinton Murray | peter73@gmail.com | East Floy | Inactive | $851.14 |
| Stacey Runolfsson | pete68@gmail.com | New Grayceberg | Active | $17.06 |
| Mrs. Lindsey Bergnaum | jensen_effertz@gmail.com | Port Kira | Inactive | $1,142.56 |
| Rosalie Gusikowski | glennie86@yahoo.com | Lake Marisol | Active | $683.85 |
| Total | $2,982.24 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Rolando Christiansen | dameon61@hotmail.com | Jaskolskiburgh | Active | $309.41 |
| Nicholas Lemke | carter75@hotmail.com | Waukesha | Active | $907.34 |
| Garry DuBuque | nicholas.ferry78@yahoo.com | Jaunitaview | Active | $583.75 |
| Tom Nienow | magali.toy@gmail.com | Durganfield | Inactive | $338.48 |
| Gregory Schaden | lesley.hills@yahoo.com | Schaeferton | Active | $98.86 |
| Total | $2,237.84 | |||
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 | ||
|---|---|---|---|---|---|
| Stephen Barrows | mustafa_tromp@yahoo.com | Lawton | Inactive | $600.42 | |
| Ruth Turner | chance.braun@gmail.com | Naderstad | Inactive | $552.18 | |
| Ms. Bridget Kuhn | josephine.thompson60@yahoo.com | North Braeden | Active | $762.34 | |
| Naomi Rutherford | caesar_nicolas51@gmail.com | Fort Ebony | Inactive | $847.38 | |
| Forrest Rempel | brain.altenwerth@gmail.com | West Domenic | Inactive | $172.25 | |
| Total | $2,934.57 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Robin Kling | stone54@hotmail.com | Damarisworth | Active | $628.67 | |
| Neal Greenholt | hobart46@hotmail.com | East Ray | Active | $1,058.52 | |
| Lois Jenkins | doyle83@hotmail.com | East Yeseniaville | Inactive | $689.34 | |
| Elmer Smith | tyrel_buckridge45@yahoo.com | Yolandaberg | Inactive | $626.47 | |
| Angelica Lockman | evalyn_balistreri-johns64@gmail.com | Kleinhaven | Inactive | $1,094.92 | |
| Total | $4,097.92 | ||||
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 | |
|---|---|---|---|---|
| Myra Prosacco | fredrick.kiehn14@gmail.com | Lake Jaylinport | Inactive | $837.15 |
| Sheila Corwin Jr. | winnifred42@yahoo.com | Dundalk | Active | $964.47 |
| Stuart Boyle-O'Reilly | tyler_macejkovic6@gmail.com | Rosinachester | Inactive | $641.84 |
| Charlene Hessel | tomas95@gmail.com | West Wilhelm | Active | $1,119.40 |
| Jacquelyn Kris | katherine_witting@yahoo.com | Annandale | Inactive | $819.56 |
| Lydia Gutkowski-Murphy | xavier.monahan@hotmail.com | Fort Daisytown | Inactive | $710.01 |
| Mildred Koss | eleazar99@hotmail.com | Fort Raegan | Active | $1,077.84 |
| Leigh Mayer | vallie74@gmail.com | Alessandrafield | Active | $326.45 |
| Woodrow Okuneva | schuyler5@gmail.com | Fort Aaliyahville | Active | $170.66 |
| Russell Roob | loyce14@yahoo.com | Thousand Oaks | Inactive | $667.52 |
| Paula Bernier | dimitri2@hotmail.com | Dothan | Active | $71.35 |
| Howard Nienow Sr. | brooklyn_kling-witting@gmail.com | East Chaz | Active | $842.33 |
| Cedric Nader | dexter.lemke@yahoo.com | Fort Dedrick | Active | $489.99 |
| Holly King MD | guy_rogahn@gmail.com | Richland | Active | $1,044.46 |
| Rose Schiller | myra_funk@yahoo.com | McDermottchester | Active | $427.22 |
| Total | $10,210.25 | |||
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 |