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 | $752.61 |
| INV002 | Pending | Credit Card | $325.82 |
| INV003 | Pending | Bank Transfer | $566.23 |
| INV004 | Paid | Bank Transfer | $249.78 |
| INV005 | Paid | PayPal | $869.44 |
| INV006 | Unpaid | Credit Card | $961.01 |
| INV007 | Pending | Bank Transfer | $539.83 |
| Total | $4,264.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sidney Cremin | Corporate Communications Executive | sidney_cremin@gmail.com | Member | |
| Wilfred Crooks | Global Usability Assistant | wilfred_crooks74@yahoo.com | Member | |
| Jane Prosacco-Abshire | Principal Data Liaison | jane_prosacco-abshire@gmail.com | Member | |
| Mae Cole | District Directives Architect | mae.cole71@yahoo.com | Member | |
| Molly Schimmel | Senior Response Supervisor | molly.schimmel7@yahoo.com | Member | |
| Wallace Schmitt | Product Division Orchestrator | wallace.schmitt@yahoo.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 |
|---|---|---|
Zena Goodwin Lead Functionality Agent zena_goodwin66@yahoo.com | Member | |
Judy Watsica Corporate Branding Specialist judy_watsica@hotmail.com | Admin | |
Dianne Lueilwitz Customer Marketing Designer dianne_lueilwitz@hotmail.com | Member | |
Dale Koepp Chief Solutions Coordinator dale_koepp13@gmail.com | Admin | |
Waldo Heathcote-Weimann Chief Brand Facilitator waldo_heathcote-weimann95@yahoo.com | Admin | |
Julia Doyle Human Accounts Administrator julia_doyle@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Mariah Gibson-Bradtke International Implementation Liaison mariah_gibson-bradtke74@hotmail.com | Member | |
Abelardo Daniel Future Group Producer abelardo.daniel@hotmail.com | Member | |
Lisa Dibbert Chief Implementation Planner lisa_dibbert63@gmail.com | Member | |
Jeremie Rolfson Customer Integration Orchestrator jeremie.rolfson@gmail.com | Member | |
Irvin Bradtke Principal Mobility Associate irvin.bradtke@gmail.com | Admin | |
Celia Hansen Central Implementation Engineer celia.hansen12@hotmail.com | Member | |
Tom McGlynn District Infrastructure Architect tom.mcglynn57@gmail.com | Viewer | |
Wilbert Herman-Vandervort Future Markets Planner wilbert_herman-vandervort@hotmail.com | Viewer | |
Pamela Kihn Central Assurance Producer pamela.kihn@gmail.com | Member | |
Derick Berge Forward Tactics Strategist derick_berge@hotmail.com | Admin | |
Albert Cummings Product Research Liaison albert.cummings58@yahoo.com | Member | |
Clyde Sawayn Principal Assurance Technician clyde.sawayn@hotmail.com | Viewer | |
Elza Hoeger Internal Marketing Director elza.hoeger66@gmail.com | Admin | |
Ivan Gutkowski Senior Response Specialist ivan.gutkowski@hotmail.com | Member | |
Angelina Hackett National Infrastructure Orchestrator angelina_hackett@hotmail.com | Admin | |
Mitchel Gottlieb Senior Intranet Analyst mitchel.gottlieb@gmail.com | Viewer | |
Ramon McCullough Senior Applications Developer ramon.mccullough97@yahoo.com | Viewer | |
Reginald Mosciski Chief Usability Designer reginald_mosciski76@yahoo.com | Admin | |
Oscar Fay Central Functionality Producer oscar.fay61@yahoo.com | Admin | |
Jody Corwin National Division Agent jody.corwin@yahoo.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 | |
|---|---|---|---|---|
| Dr. Jose Jakubowski | lamar.anderson55@hotmail.com | Lake Elsinore | Active | $508.57 |
| Vicki Jacobson | sylvia.hilpert@yahoo.com | North Kariane | Active | $1,116.35 |
| Evan Anderson | jeffery.jaskolski@hotmail.com | New Ressie | Inactive | $99.32 |
| Alejandro Keeling | christine42@yahoo.com | Moore | Active | $804.98 |
| Antonina Goldner | dangelo_schmitt23@hotmail.com | Breannaview | Active | $780.93 |
| Total | $3,310.15 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Janet Pfannerstill @jaden83 | terry82@gmail.com | Clintonview | Active | $492.23 |
Darlene Mueller MD @austin49 | edmund_sanford@gmail.com | West Madysonland | Active | $1,065.36 |
Dr. Eduardo Stracke III @holden51 | makayla_bogisich22@hotmail.com | Missouri City | Inactive | $335.34 |
Jenny Gleason @dana.kuvalis33 | naomi_kulas68@hotmail.com | Franklin | Active | $485.01 |
Marcellus Carroll @alize.klein | wayne_reichert@yahoo.com | Nikolausshire | Active | $858.42 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dianna Fadel | kenneth34@yahoo.com | Hendersonville | Active | $442.13 |
| Antonia Gerlach | patricia21@yahoo.com | Shanahanshire | Active | $387.25 |
| Cory Schaefer | carolina_windler@gmail.com | Heathcoteberg | Inactive | $1,197.97 |
| Forrest Bauch | hailee_skiles@yahoo.com | Pharr | Active | $952.57 |
| Roxanne Gorczany | hollie_hettinger91@yahoo.com | Ardithview | Active | $191.98 |
| Total | $3,171.90 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Frida Feil | lauriane.ullrich@yahoo.com | Schaeferfort | Inactive | $656.70 |
| Lucile Funk | garrett.pfeffer@yahoo.com | East Clara | Active | $55.66 |
| Celia Kling | guiseppe_hoeger34@hotmail.com | Carolina | Inactive | $273.10 |
| Madaline Ullrich | jany2@yahoo.com | New Laurenview | Active | $156.23 |
| Flora Bradtke | moises20@yahoo.com | Carlsbad | Inactive | $1,052.22 |
| Total | $2,193.91 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Abelardo Hackett | kyle90@hotmail.com | Lake Ellen | Active | $42.49 |
| Hope Greenholt | camila_ratke@hotmail.com | Fort Providenciview | Inactive | $945.67 |
| Ralph Marquardt | lionel.thompson@hotmail.com | Jacksonville | Inactive | $905.38 |
| Bradford Armstrong | haskell68@gmail.com | Palatine | Inactive | $21.39 |
| Norris Graham DDS | michelle_crooks19@yahoo.com | Lake Trinityview | Inactive | $913.35 |
| Total | $2,828.28 | |||
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 | ||
|---|---|---|---|---|---|
| Pamela Wehner | lynette73@yahoo.com | Port Rubieburgh | Active | $257.87 | |
| Brandon Hoeger | melba.zemlak-jacobson@hotmail.com | Fort Delaney | Active | $508.86 | |
| Dessie Runte | pete_jast@yahoo.com | South Louvenia | Active | $1,060.17 | |
| Antonio Emard | darrell88@gmail.com | Cordiaport | Inactive | $114.13 | |
| Gayle Emard | nettie.runolfsson17@yahoo.com | Fort Addie | Active | $841.10 | |
| Total | $2,782.13 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Darron Purdy | garett.casper99@yahoo.com | East Geraldtown | Active | $1,037.46 | |
| Miranda Hand | marta3@gmail.com | Lake Elsinore | Inactive | $335.96 | |
| Dameon Spencer | silvia_okuneva@hotmail.com | Murray | Active | $330.84 | |
| Mattie Braun | alford_ruecker@gmail.com | Lake Ken | Active | $618.59 | |
| Levi Hilll | kelvin.prosacco54@yahoo.com | Seattle | Inactive | $877.71 | |
| Total | $3,200.56 | ||||
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 | |
|---|---|---|---|---|
| Dr. Hector Beer DVM | viola3@hotmail.com | New Baileetown | Inactive | $793.13 |
| Leonard Mraz PhD | lauren.stoltenberg@hotmail.com | Oro Valley | Active | $742.12 |
| Marshall Herzog | susan91@gmail.com | Buckridgefurt | Inactive | $596.53 |
| Sally Wunsch | harvey_bogan@yahoo.com | Lexieboro | Inactive | $1,063.04 |
| Harriet Waters II | alexanne32@gmail.com | Fort Rae | Active | $548.96 |
| Precious Lueilwitz | hattie.mcclure92@hotmail.com | New Noe | Inactive | $295.53 |
| Nikita Wisoky | camylle_swift80@yahoo.com | Urbana | Active | $215.92 |
| Douglas Fritsch | aditya_miller@gmail.com | North Emmett | Inactive | $1,185.37 |
| Mayra Marvin | doris.parisian@hotmail.com | West Cordelialand | Inactive | $196.66 |
| Amber Swift | renee36@yahoo.com | New Maritzafurt | Active | $684.66 |
| Jody Pfeffer | vivian33@yahoo.com | Oracester | Inactive | $47.96 |
| Keagan O'Conner | toney_volkman@yahoo.com | Madysoncester | Inactive | $574.17 |
| Jimmie Howell DVM | garry_daniel77@yahoo.com | Lake Izaiah | Inactive | $921.00 |
| Henrietta Wilkinson | gerard.dickinson@yahoo.com | West Justine | Inactive | $421.55 |
| Tony Batz III | sim_marvin@yahoo.com | San Bruno | Active | $821.46 |
| Total | $9,108.06 | |||
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 |