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 | $609.28 |
| INV002 | Paid | PayPal | $813.42 |
| INV003 | Unpaid | Bank Transfer | $981.77 |
| INV004 | Paid | Bank Transfer | $557.11 |
| INV005 | Unpaid | Credit Card | $338.08 |
| INV006 | Paid | Credit Card | $563.41 |
| INV007 | Paid | Credit Card | $979.36 |
| Total | $4,842.43 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Shana D'Amore | Dynamic Factors Producer | shana.damore@hotmail.com | Member | |
| Edna Shields-Satterfield | Dynamic Security Manager | edna_shields-satterfield58@hotmail.com | Viewer | |
| Trycia Turner | Principal Response Associate | trycia_turner@yahoo.com | Member | |
| Timothy Balistreri | Forward Markets Liaison | timothy.balistreri45@hotmail.com | Member | |
| Marie Hilpert-Kunze | Future Research Representative | marie_hilpert-kunze@yahoo.com | Admin | |
| Christina Balistreri | Principal Operations Producer | christina.balistreri99@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 |
|---|---|---|
Maurine Corwin Global Research Supervisor maurine.corwin92@gmail.com | Member | |
Madaline Marks Legacy Program Administrator madaline_marks90@yahoo.com | Admin | |
Kayla VonRueden Customer Configuration Liaison kayla_vonrueden48@hotmail.com | Admin | |
Roberto Raynor Dynamic Solutions Specialist roberto_raynor64@yahoo.com | Admin | |
Felipa Bahringer Central Paradigm Liaison felipa.bahringer10@hotmail.com | Admin | |
Alysson Jacobs Human Accountability Representative alysson.jacobs@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Verdie Spencer Global Response Administrator verdie.spencer29@hotmail.com | Admin | |
Lucius Mayert Corporate Interactions Planner lucius.mayert70@hotmail.com | Member | |
Zion Abbott Legacy Solutions Assistant zion.abbott@hotmail.com | Admin | |
Ashlynn Cormier Direct Group Producer ashlynn_cormier@gmail.com | Admin | |
Dax Boyle National Data Manager dax.boyle33@hotmail.com | Admin | |
Sydnee Gusikowski Dynamic Quality Administrator sydnee_gusikowski32@yahoo.com | Viewer | |
Chandler O'Conner Senior Markets Agent chandler_oconner6@gmail.com | Viewer | |
Lennie McLaughlin Dynamic Group Agent lennie.mclaughlin@gmail.com | Admin | |
Maximus Ritchie National Operations Strategist maximus.ritchie26@gmail.com | Viewer | |
Joshua Klocko Chief Solutions Analyst joshua.klocko@yahoo.com | Admin | |
Trey Toy Investor Division Orchestrator trey.toy49@gmail.com | Viewer | |
Raleigh Goyette Corporate Markets Engineer raleigh_goyette@yahoo.com | Member | |
Jerrod Howe Principal Brand Coordinator jerrod.howe69@hotmail.com | Admin | |
Kenya Oberbrunner-Schuster Lead Response Assistant kenya.oberbrunner-schuster61@hotmail.com | Viewer | |
Estefania Effertz Legacy Mobility Producer estefania_effertz96@hotmail.com | Admin | |
Lester Abshire Central Applications Associate lester.abshire@hotmail.com | Admin | |
Karson Ebert Forward Intranet Analyst karson.ebert@yahoo.com | Admin | |
Jed Kautzer Human Group Director jed.kautzer70@hotmail.com | Admin | |
Brandt Zulauf District Accountability Director brandt_zulauf53@hotmail.com | Admin | |
Ryder Kessler Customer Directives Agent ryder.kessler32@gmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Cary Lehner | rosamond83@gmail.com | Stephanland | Inactive | $1,089.96 |
| Dr. Phil Purdy-Welch | moses38@hotmail.com | Lake Eulalia | Inactive | $674.17 |
| Lela Gibson | jayde34@yahoo.com | Brookhaven | Active | $61.09 |
| Noel Mosciski | princess84@hotmail.com | Efrainfurt | Active | $851.69 |
| Miss Jackie Abernathy I | louisa11@hotmail.com | Jadafort | Inactive | $293.40 |
| Total | $2,970.31 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Bryant Walter @hank59 | august.cronin@hotmail.com | North Kaylee | Active | $454.06 |
Brandy Okuneva @rosemary12 | vladimir.fadel@gmail.com | Heidiside | Active | $400.44 |
Lindsey Kirlin @augusta.durgan | faye_kris5@yahoo.com | Cheektowaga | Inactive | $558.61 |
Lorenzo Grant @murl_hickle0 | jules.pfannerstill@hotmail.com | Lebsackhaven | Active | $456.35 |
Terrell Fadel @myrtice_lehner11 | ashlee_rau59@yahoo.com | Rancho Cucamonga | Inactive | $60.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Alicia Auer | rodrigo.hilpert@hotmail.com | Marieton | Active | $15.72 |
| Steve Littel | stefanie51@yahoo.com | Lake Gavin | Active | $529.82 |
| Mrs. Karen Reinger | oscar.mertz@hotmail.com | Fort Claraport | Inactive | $983.34 |
| Whitney Conroy I | lacey.hickle67@hotmail.com | Bernardohaven | Inactive | $1,179.85 |
| Amber Marquardt | ewald.towne@yahoo.com | West Weston | Inactive | $388.58 |
| Total | $3,097.31 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Shawn Runolfsdottir | brice.breitenberg58@hotmail.com | Lake Manuelastead | Active | $1,052.54 |
| Mr. Roland Bosco Jr. | demario.mitchell@gmail.com | San Bruno | Active | $720.18 |
| Virgil Jacobs PhD | jayne.considine27@yahoo.com | New Harrisonstad | Inactive | $181.76 |
| Paul Dickens Jr. | stephany40@yahoo.com | Leesburg | Inactive | $42.78 |
| Sonja Keeling | giles.hackett-kunze@hotmail.com | Santee | Active | $483.25 |
| Total | $2,480.51 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cindy Goodwin | jeramie82@hotmail.com | Gottliebville | Inactive | $69.20 |
| Dana Bogisich DDS | deondre_pfeffer@gmail.com | Spinkaworth | Active | $462.18 |
| Nicolas Pfannerstill | brock45@yahoo.com | New Margueritecester | Active | $1,043.95 |
| Todd Mraz | kari_bergnaum@hotmail.com | Monicatown | Active | $927.62 |
| Nina Hermann | pietro_gutkowski92@yahoo.com | Enricohaven | Active | $863.80 |
| Total | $3,366.75 | |||
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 | ||
|---|---|---|---|---|---|
| Ruth Hand | maddison.stark@gmail.com | Coeur d'Alene | Active | $23.66 | |
| Leslie Schroeder | graciela.ratke81@gmail.com | Lake Gerda | Active | $639.19 | |
| Sara Beer | kimberly.price@yahoo.com | Ferryborough | Inactive | $410.65 | |
| Kerry Kilback | dorthy_heidenreich83@hotmail.com | Rosannafort | Active | $12.59 | |
| Freddie Becker | jacinto34@yahoo.com | Uptontown | Active | $197.09 | |
| Total | $1,283.18 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Thomas Rutherford MD | ike_halvorson@yahoo.com | South Cliffordfurt | Inactive | $814.73 | |
| Lora Rutherford | kari_runolfsson90@yahoo.com | Volkmanborough | Inactive | $592.45 | |
| Mr. Sergio Lehner III | duncan25@yahoo.com | McGlynnview | Inactive | $281.58 | |
| Dolores Witting | jackeline.fay24@hotmail.com | Boylestad | Inactive | $1,002.97 | |
| Kelli Fay | tyson.adams@yahoo.com | Edmundstad | Active | $706.03 | |
| Total | $3,397.76 | ||||
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 | |
|---|---|---|---|---|
| Lana Pfeffer | kathlyn_denesik85@yahoo.com | Graysonfurt | Active | $786.62 |
| Orlando Quitzon | rosalinda.hand@yahoo.com | Schimmelfield | Inactive | $616.97 |
| Rachel Green | felipe_feest@gmail.com | West Pinkboro | Active | $294.26 |
| Todd Adams | eldred20@yahoo.com | Webershire | Active | $437.15 |
| Rochelle Luettgen | jada9@hotmail.com | Willboro | Active | $341.52 |
| Phillip Rolfson DVM | rosalia63@hotmail.com | Allymouth | Active | $848.96 |
| Lena Goyette | brianne_dickens40@hotmail.com | Hesperia | Inactive | $755.30 |
| Natalie Hirthe | walton_senger9@yahoo.com | North Ed | Inactive | $449.23 |
| Camille Fay | regan15@yahoo.com | West Raul | Inactive | $712.25 |
| Blake Doyle | jessie_wilderman@hotmail.com | Plymouth | Active | $913.65 |
| Andres Pfeffer | marc46@yahoo.com | Keelingbury | Inactive | $1,086.30 |
| Rolando Gleason Sr. | joy66@hotmail.com | Biloxi | Inactive | $523.68 |
| Ann Spinka | griffin35@hotmail.com | North Daniellaburgh | Active | $328.48 |
| Kerry Swift | domingo26@yahoo.com | Liamshire | Active | $912.07 |
| Irvin Schuppe | hosea82@yahoo.com | Biloxi | Inactive | $695.99 |
| Total | $9,702.43 | |||
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 |