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 | $536.18 |
| INV002 | Pending | PayPal | $791.22 |
| INV003 | Pending | Credit Card | $494.77 |
| INV004 | Paid | Credit Card | $662.58 |
| INV005 | Paid | Bank Transfer | $319.14 |
| INV006 | Unpaid | PayPal | $999.56 |
| INV007 | Paid | PayPal | $210.36 |
| Total | $4,013.81 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Katlyn Friesen | Corporate Communications Agent | katlyn.friesen36@yahoo.com | Viewer | |
| Rosa Altenwerth | Lead Configuration Supervisor | rosa_altenwerth@gmail.com | Member | |
| Mable Muller | Central Solutions Planner | mable.muller91@yahoo.com | Admin | |
| Sabrina Keeling | Human Paradigm Developer | sabrina_keeling20@yahoo.com | Admin | |
| Hailey Walker | Legacy Identity Coordinator | hailey_walker@yahoo.com | Admin | |
| Kenneth Lubowitz | Product Brand Manager | kenneth.lubowitz75@gmail.com | Admin |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Elena Homenick District Implementation Analyst elena.homenick@yahoo.com | Member | |
Lucia Turner Product Data Liaison lucia_turner5@hotmail.com | Admin | |
Amanda Stoltenberg Legacy Optimization Consultant amanda_stoltenberg@yahoo.com | Member | |
Russell Zieme International Configuration Liaison russell.zieme69@hotmail.com | Admin | |
Marielle Nolan Global Operations Orchestrator marielle.nolan84@yahoo.com | Member | |
Maribel Harber Future Branding Assistant maribel.harber93@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Myrtis Cruickshank Customer Markets Planner myrtis_cruickshank98@gmail.com | Member | |
Trever Emmerich Human Configuration Director trever_emmerich35@yahoo.com | Member | |
Madalyn Ebert Principal Applications Architect madalyn_ebert@hotmail.com | Viewer | |
Tom Will National Functionality Administrator tom_will63@gmail.com | Member | |
Hugo Aufderhar Investor Applications Engineer hugo_aufderhar80@hotmail.com | Viewer | |
Anita Smith-Quigley Regional Optimization Administrator anita.smith-quigley@hotmail.com | Viewer | |
Guy Rath Senior Research Specialist guy_rath72@hotmail.com | Member | |
Marcus Ullrich Direct Intranet Liaison marcus.ullrich@gmail.com | Member | |
Brendon Emard International Integration Orchestrator brendon.emard@gmail.com | Viewer | |
Jimmy Johnson Central Integration Representative jimmy_johnson4@yahoo.com | Admin | |
Craig Nader Investor Accounts Supervisor craig.nader94@yahoo.com | Member | |
Tyler Kovacek Lead Operations Executive tyler.kovacek@yahoo.com | Viewer | |
Wilfred Roberts Future Marketing Administrator wilfred_roberts@hotmail.com | Admin | |
Roberta Tremblay Investor Response Planner roberta.tremblay@yahoo.com | Admin | |
Hugh Mraz Investor Implementation Specialist hugh.mraz@gmail.com | Member | |
Thora Bahringer Direct Mobility Facilitator thora.bahringer@gmail.com | Viewer | |
Dolores Watsica Chief Usability Director dolores.watsica@yahoo.com | Viewer | |
Jerome Marks Central Usability Liaison jerome.marks@gmail.com | Member | |
Unique Krajcik Future Factors Developer unique.krajcik3@gmail.com | Member | |
Alia Fritsch Future Branding Coordinator alia_fritsch86@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 | |
|---|---|---|---|---|
| Mrs. Elmira Hills | patsy36@yahoo.com | Juvenalborough | Active | $316.68 |
| Arturo Blanda | cecelia.wiza@hotmail.com | Chino | Active | $94.04 |
| Desiree Daniel Jr. | wilhelm_pacocha@hotmail.com | Reneefurt | Inactive | $891.49 |
| Johnpaul Hessel I | christopher34@hotmail.com | Findlay | Inactive | $619.79 |
| Morris Abbott V | anabelle_welch@hotmail.com | South Jeremiahboro | Active | $82.92 |
| Total | $2,004.92 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Westley Carroll @abel82 | keira_rosenbaum67@gmail.com | Simonview | Inactive | $950.01 |
Claud Pouros @duane.lakin12 | juan79@gmail.com | Veronicaborough | Active | $557.76 |
Brooklyn Prohaska @lawrence71 | melyssa.legros@hotmail.com | Hollyberg | Active | $414.21 |
Iris Mills @diamond.kautzer52 | kay40@gmail.com | Kennedistead | Inactive | $130.89 |
Russell Little-Hirthe Sr. @zelma.schumm4 | carmen.leffler@yahoo.com | Guyborough | Inactive | $342.05 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sedrick Fisher | willie_wisoky@yahoo.com | West Mortimer | Inactive | $1,014.28 |
| Candice Cole | anjali.shanahan-buckridge@hotmail.com | Nienowview | Inactive | $329.29 |
| Aaliyah McCullough | kenna71@gmail.com | East Emerald | Active | $769.60 |
| Jabari Cummings | alyssa44@hotmail.com | Collinsfield | Inactive | $210.10 |
| Jonatan Dickens | genoveva.strosin@hotmail.com | South Evatown | Active | $434.28 |
| Total | $2,757.55 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Paula Purdy | holly_braun-murphy@gmail.com | Hansenbury | Active | $325.60 |
| Alfonso Wintheiser V | celestino.cartwright@hotmail.com | East Adaton | Inactive | $1,058.40 |
| Laverna Ritchie | arianna.gutkowski57@hotmail.com | Balistreriworth | Active | $1,046.01 |
| Alexander Carroll | allison.schaden@hotmail.com | Aufderharland | Active | $88.99 |
| Mable Windler | humberto_mccullough@yahoo.com | Alafaya | Active | $1,054.41 |
| Total | $3,573.41 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Sally Wilderman | carl37@yahoo.com | Town 'n' Country | Active | $1,166.50 |
| Jacob Pfannerstill-Leffler | pamela_gusikowski85@yahoo.com | Samuelmouth | Inactive | $845.31 |
| Calvin Feeney II | imogene12@yahoo.com | Carrollberg | Inactive | $604.73 |
| Nathanial Schiller | troy0@yahoo.com | Reichertburgh | Inactive | $1,151.15 |
| Greta Howe | bertha.morar9@yahoo.com | Leoshire | Active | $76.73 |
| Total | $3,844.42 | |||
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 | ||
|---|---|---|---|---|---|
| Perry Lowe | brooke_miller78@hotmail.com | South Janet | Inactive | $877.46 | |
| Mr. Doug Schmeler | miriam44@yahoo.com | Wilfredhaven | Active | $358.01 | |
| Maryann Kiehn | pattie_kassulke96@hotmail.com | North Silviaborough | Active | $645.99 | |
| Victor Pfannerstill | benjamin_beer11@hotmail.com | Lake Elsinore | Active | $437.42 | |
| Mitchell Howell | eleanore_fadel95@yahoo.com | Beavercreek | Active | $926.80 | |
| Total | $3,245.68 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jacob Doyle | sherri2@hotmail.com | Boganworth | Active | $96.83 | |
| Jackson Legros | valentin_osinski@yahoo.com | South Dwightton | Active | $528.24 | |
| Jason O'Connell | clementine.rosenbaum88@gmail.com | Temecula | Inactive | $153.77 | |
| Raegan Welch | travis_dach@hotmail.com | South Jodie | Inactive | $80.29 | |
| Ollie Koss | ransom_johnston32@yahoo.com | West Tommyland | Active | $1,149.45 | |
| Total | $2,008.58 | ||||
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 | |
|---|---|---|---|---|
| Harmony Auer | giovanny28@gmail.com | East Jarrod | Inactive | $113.10 |
| Jennie Turcotte | herman_mayert@gmail.com | Fort Assunta | Active | $54.97 |
| Isaac Gleason | john48@hotmail.com | South Grahamfort | Active | $772.46 |
| Sylvester MacGyver | kayden_renner68@hotmail.com | New Esteban | Active | $637.24 |
| Miss Paula Botsford-Lakin | willard.sawayn24@hotmail.com | Hilo | Inactive | $534.79 |
| Pedro Leannon | jamarcus.deckow@yahoo.com | North Deannastead | Active | $138.17 |
| Leda Spinka | florencio.crist@gmail.com | Uptonstad | Active | $796.80 |
| Sonia Brekke | keara75@hotmail.com | Starkfield | Inactive | $226.24 |
| Lois Kub | harold_bogan@gmail.com | Chesapeake | Active | $234.07 |
| Moses Kuhic | maggie.breitenberg@hotmail.com | Fort Felicia | Active | $521.99 |
| Gladys Kovacek | sheryl32@hotmail.com | Wylie | Active | $44.23 |
| Deion Cummerata | dianna6@gmail.com | Missoula | Active | $1,000.00 |
| Andy Hayes | tressie_okuneva@yahoo.com | North Jailyn | Inactive | $367.60 |
| Leticia Wilkinson PhD | eunice_ward@hotmail.com | Schadenborough | Active | $537.99 |
| Ms. Jenny Feil | gonzalo.leffler@yahoo.com | Yorba Linda | Active | $118.09 |
| Total | $6,097.74 | |||
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 |