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 | Credit Card | $836.11 |
| INV002 | Unpaid | Credit Card | $732.54 |
| INV003 | Unpaid | PayPal | $734.43 |
| INV004 | Unpaid | PayPal | $392.70 |
| INV005 | Paid | Credit Card | $622.79 |
| INV006 | Pending | Bank Transfer | $902.61 |
| INV007 | Paid | Credit Card | $473.01 |
| Total | $4,694.19 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Agnes Corkery | Dynamic Response Orchestrator | agnes_corkery8@yahoo.com | Admin | |
| Cletus Kemmer | Dynamic Program Executive | cletus.kemmer28@gmail.com | Viewer | |
| Susie Leffler-Kutch | Human Group Analyst | susie.leffler-kutch33@gmail.com | Admin | |
| Orland Lesch-Hackett | Customer Solutions Orchestrator | orland_lesch-hackett7@gmail.com | Admin | |
| Khalil Gleichner | Investor Brand Consultant | khalil_gleichner34@gmail.com | Viewer | |
| Clay Bosco | Legacy Accounts Liaison | clay_bosco6@hotmail.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 |
|---|---|---|
Carol Herman Internal Usability Supervisor carol_herman@yahoo.com | Viewer | |
Toby Sauer Forward Communications Designer toby.sauer@yahoo.com | Viewer | |
Orlando Walsh Investor Interactions Developer orlando.walsh29@hotmail.com | Member | |
Betsy Rau Legacy Identity Planner betsy_rau16@hotmail.com | Viewer | |
Prudence Hodkiewicz-Gibson Principal Intranet Administrator prudence.hodkiewicz-gibson87@gmail.com | Viewer | |
Andrea Abshire Lead Marketing Assistant andrea_abshire51@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Nadine Schmidt Senior Integration Specialist nadine_schmidt@gmail.com | Admin | |
Kelvin Watsica Senior Web Planner kelvin.watsica33@gmail.com | Member | |
Shakira Cormier Product Identity Manager shakira.cormier57@gmail.com | Viewer | |
Rolando Bogisich International Configuration Strategist rolando.bogisich29@gmail.com | Viewer | |
Edward Schimmel Direct Paradigm Designer edward_schimmel5@gmail.com | Admin | |
Corine Hodkiewicz Forward Metrics Producer corine.hodkiewicz25@hotmail.com | Viewer | |
Ignatius Ondricka District Interactions Coordinator ignatius.ondricka68@gmail.com | Viewer | |
Kariane Homenick Future Communications Analyst kariane.homenick@gmail.com | Admin | |
Eveline Spinka Global Operations Supervisor eveline.spinka@hotmail.com | Member | |
Tiffany O'Connell Direct Creative Specialist tiffany_oconnell97@gmail.com | Viewer | |
Constance Murray Forward Directives Consultant constance.murray86@gmail.com | Member | |
Milton Padberg Corporate Group Engineer milton.padberg37@yahoo.com | Admin | |
Marlene Ernser Legacy Paradigm Designer marlene.ernser@hotmail.com | Viewer | |
Candice Waelchi Internal Group Technician candice.waelchi2@gmail.com | Member | |
Esther Nikolaus Lead Usability Supervisor esther_nikolaus18@gmail.com | Viewer | |
Jonatan Buckridge Global Paradigm Director jonatan_buckridge@yahoo.com | Member | |
Kathryn O'Reilly Dynamic Creative Supervisor kathryn.oreilly@yahoo.com | Member | |
Marian Bins Forward Solutions Agent marian_bins25@yahoo.com | Admin | |
Cortez Reichel Lead Security Engineer cortez.reichel31@hotmail.com | Viewer | |
Earl Cummerata Legacy Data Manager earl.cummerata@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 | |
|---|---|---|---|---|
| Jana Kulas-Casper | angelo.hills-orn@yahoo.com | Lake Eleonorebury | Inactive | $149.91 |
| Chance Howe | brook_borer-konopelski54@hotmail.com | Raycester | Active | $243.34 |
| Cordell Sauer | lottie_gleichner@hotmail.com | Port Berthamouth | Active | $456.59 |
| Kate Satterfield | chester48@hotmail.com | Vivafurt | Active | $1,008.65 |
| Tito Corwin | harry90@yahoo.com | East Vance | Inactive | $126.49 |
| Total | $1,984.98 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kathleen Doyle @marguerite.cummings | major.weber35@hotmail.com | West Sheila | Inactive | $234.07 |
Debra Champlin @ken_williamson | pedro.cummings@hotmail.com | Ikefort | Inactive | $295.32 |
Fredy King DDS @al_langworth19 | makenzie.rowe@hotmail.com | Quitzonland | Active | $194.01 |
Erik Osinski @kent_schmidt9 | karl_rice@gmail.com | East Naomi | Inactive | $72.64 |
Mr. Bryana Wisoky @elnora_bernier80 | margie.gleichner@yahoo.com | Port Eino | Inactive | $613.47 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ivan Aufderhar | clarabelle_johnson@hotmail.com | Lake Jody | Active | $106.93 |
| Priscilla Dibbert | julio.larson65@hotmail.com | North Joanieberg | Active | $140.25 |
| Giovanny Deckow | hilbert.ankunding74@yahoo.com | Port Robyn | Active | $52.89 |
| Delia Kerluke | wade_dach36@gmail.com | Concord | Inactive | $1,072.73 |
| Debra Stracke | eugene.collins5@gmail.com | Valentinechester | Active | $298.69 |
| Total | $1,671.49 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Reece Haag | mabelle35@gmail.com | Jalynberg | Inactive | $641.31 |
| Janis Carroll | thomas.paucek@hotmail.com | Stracke-Brekkeshire | Inactive | $155.34 |
| Alex Kassulke | emma.lemke-cummings@gmail.com | Napa | Active | $433.35 |
| Bonnie Mosciski | alexanne_auer-wisoky@yahoo.com | West Fidelborough | Active | $950.60 |
| Anthony Connelly I | elise_wiegand-kris@hotmail.com | Linden | Inactive | $415.28 |
| Total | $2,595.88 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bo Schowalter | jo44@yahoo.com | Juanborough | Inactive | $357.31 |
| Veronica Yost | verlie_kunde@yahoo.com | Mitchellberg | Inactive | $677.07 |
| Alek Macejkovic PhD | peggy_harris@gmail.com | Port Gerson | Active | $549.39 |
| Wade Sanford | andrew_ryan75@yahoo.com | Bednarshire | Inactive | $588.99 |
| Arnold Hoppe | elton.goyette33@yahoo.com | Hilllworth | Active | $1,042.94 |
| Total | $3,215.70 | |||
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 | ||
|---|---|---|---|---|---|
| Halie Gerhold | elena4@hotmail.com | Richardson | Inactive | $930.30 | |
| Allie Rosenbaum | rene.dibbert@gmail.com | New Adrianna | Active | $434.32 | |
| Kendall Schmitt | yasmeen_maggio79@yahoo.com | Mayaguez | Inactive | $626.85 | |
| Declan Abbott | rose53@yahoo.com | Dublin | Inactive | $756.88 | |
| Robbie Carter | grayson.kertzmann74@hotmail.com | Colemanworth | Active | $481.50 | |
| Total | $3,229.85 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ricardo Ryan | madalyn_schulist-brekke@gmail.com | Hazelmouth | Inactive | $240.34 | |
| Adrienne Lindgren PhD | jamel_ernser@gmail.com | New Lula | Inactive | $1,126.58 | |
| Barbara Haley PhD | bernard34@hotmail.com | Geovannichester | Active | $56.89 | |
| Bobbie Blanda | michelle_spencer@gmail.com | Port Kathleenland | Active | $822.75 | |
| Daphnee Hartmann | abel_dach89@hotmail.com | Lake Sethfurt | Inactive | $970.03 | |
| Total | $3,216.59 | ||||
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 | |
|---|---|---|---|---|
| Irwin Stokes | clayton_legros-cruickshank@yahoo.com | Fort Melba | Inactive | $1,090.17 |
| Melanie Hegmann | nola54@yahoo.com | Patriciaside | Inactive | $579.36 |
| Coty Renner II | mozelle4@gmail.com | Port Londonmouth | Inactive | $564.68 |
| Mertie Williamson | ken64@hotmail.com | Isabelleside | Active | $563.68 |
| Kristoffer Dibbert | ebony37@gmail.com | Hermannton | Active | $46.65 |
| Saul Collins | sarah_jaskolski@yahoo.com | North Antoniaside | Active | $775.56 |
| Robyn Jones-Oberbrunner Jr. | tabitha.sawayn10@gmail.com | North Larrycester | Inactive | $1,150.60 |
| Gerald Cruickshank Sr. | darrel69@gmail.com | Nolanton | Active | $512.38 |
| Dallas Spinka | mertie.monahan@hotmail.com | Novato | Active | $116.02 |
| Shana Beer | janice.raynor@hotmail.com | Lake Annalisebury | Inactive | $69.25 |
| Alma Johns | antonia_kutch@hotmail.com | Fort Kyliefurt | Inactive | $174.32 |
| Eloisa Hayes V | presley.lehner@hotmail.com | South Fanny | Inactive | $881.25 |
| Mr. Wendell Tillman | shemar.borer39@hotmail.com | Beaverton | Active | $746.31 |
| Dominic Crooks | emerson.terry12@yahoo.com | Hammesstead | Active | $1,054.11 |
| Will Bahringer | margarette.luettgen15@yahoo.com | Doreenfield | Inactive | $886.51 |
| Total | $9,210.85 | |||
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 |