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 | Paid | Credit Card | $547.08 |
| INV002 | Paid | Credit Card | $755.06 |
| INV003 | Unpaid | Bank Transfer | $635.67 |
| INV004 | Pending | PayPal | $272.56 |
| INV005 | Unpaid | PayPal | $655.29 |
| INV006 | Pending | Bank Transfer | $778.06 |
| INV007 | Paid | Credit Card | $101.98 |
| Total | $3,745.70 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Judson Will | Forward Response Architect | judson.will@hotmail.com | Admin | |
| Chris Reynolds | Corporate Infrastructure Administrator | chris_reynolds@yahoo.com | Admin | |
| Candace Kub-Gibson | Direct Intranet Facilitator | candace.kub-gibson2@gmail.com | Member | |
| Dallas Lockman-Nolan | Chief Directives Director | dallas_lockman-nolan@yahoo.com | Member | |
| Mabel Toy | Global Group Supervisor | mabel_toy88@gmail.com | Viewer | |
| Brooks Purdy | Principal Interactions Consultant | brooks.purdy@gmail.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 |
|---|---|---|
Anya Vandervort National Factors Orchestrator anya.vandervort@yahoo.com | Admin | |
Dedric Bergstrom Central Infrastructure Architect dedric_bergstrom@gmail.com | Member | |
Jevon Fritsch Internal Security Facilitator jevon.fritsch@hotmail.com | Admin | |
Agustin Bashirian District Interactions Technician agustin_bashirian@yahoo.com | Admin | |
Natalie Spinka Central Research Planner natalie_spinka85@gmail.com | Admin | |
Kaycee Casper Investor Research Associate kaycee_casper78@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 |
|---|---|---|
Jessy Hayes Regional Directives Planner jessy.hayes10@yahoo.com | Viewer | |
Nils Baumbach Regional Division Assistant nils.baumbach@yahoo.com | Admin | |
Trey Jaskolski Dynamic Data Producer trey.jaskolski@gmail.com | Viewer | |
Van Grimes Principal Identity Architect van.grimes@hotmail.com | Member | |
Britney Wunsch Principal Identity Strategist britney.wunsch@hotmail.com | Member | |
Alessandro Kshlerin Chief Intranet Engineer alessandro_kshlerin37@hotmail.com | Viewer | |
Frieda Carter Principal Interactions Analyst frieda_carter@gmail.com | Admin | |
Hassan Toy Legacy Web Producer hassan.toy20@gmail.com | Viewer | |
Nicola White Dynamic Factors Specialist nicola_white@yahoo.com | Admin | |
Alejandra Bergstrom Senior Directives Assistant alejandra.bergstrom91@yahoo.com | Member | |
Johnpaul Denesik Forward Applications Engineer johnpaul.denesik27@hotmail.com | Admin | |
Allie Cummings Senior Mobility Orchestrator allie_cummings@yahoo.com | Viewer | |
Triston Kohler Forward Implementation Representative triston_kohler63@yahoo.com | Viewer | |
Lindsay Wolff Dynamic Solutions Consultant lindsay_wolff92@gmail.com | Viewer | |
Shanie Feest Lead Operations Specialist shanie_feest@yahoo.com | Admin | |
Josephine Parisian Forward Branding Engineer josephine_parisian@hotmail.com | Member | |
Elnora Wiegand Product Program Administrator elnora_wiegand@hotmail.com | Viewer | |
Kameron Murphy Senior Configuration Architect kameron_murphy@hotmail.com | Admin | |
Mason Dickens Principal Response Assistant mason.dickens@hotmail.com | Viewer | |
Otho Dach Future Security Planner otho.dach90@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Sheldon D'Amore | myrtis_zieme@hotmail.com | West Sonia | Active | $971.45 |
| Francisco Roberts PhD | ethelyn_keebler73@gmail.com | South Shyannberg | Inactive | $411.45 |
| Mrs. Patricia Moore | dianna87@yahoo.com | Minneapolis | Inactive | $557.37 |
| Elisa Rutherford III | trudie24@hotmail.com | Kannapolis | Inactive | $474.83 |
| Phyllis Hickle | cheyanne.champlin@hotmail.com | Bentonville | Inactive | $116.55 |
| Total | $2,531.65 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Johnny Champlin DDS @rosalind_ankunding91 | rhett86@hotmail.com | Wymanport | Active | $699.68 |
Charlene Rohan-Rutherford @lucienne.mante | ola_sipes25@hotmail.com | Town 'n' Country | Active | $459.52 |
Johnnie Cormier @prince.zemlak69 | gillian18@hotmail.com | Teresaworth | Inactive | $333.61 |
Allen Bergstrom IV @timmy52 | felix.rohan@hotmail.com | Lake Vincenza | Active | $884.62 |
Russell Schiller-Price @alexandro18 | pauline50@gmail.com | Lake Brooke | Inactive | $1,158.46 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johanna Torp | raphaelle63@yahoo.com | Efrainland | Active | $67.31 |
| Rafael Dicki | trey90@hotmail.com | Camillabury | Active | $188.79 |
| Raul Luettgen I | claudia52@yahoo.com | Kaylieshire | Active | $989.14 |
| Dr. Edmund Cruickshank | jared_schuppe70@gmail.com | Karellefurt | Inactive | $728.34 |
| Kelli Bruen | coby14@hotmail.com | North Santachester | Active | $815.63 |
| Total | $2,789.21 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Patsy Gislason | jo_ratke78@hotmail.com | North Joelle | Inactive | $743.87 |
| Ralph Schulist | johathan16@hotmail.com | Port Olin | Active | $465.81 |
| Lydia Lemke | taylor_hagenes@hotmail.com | New Francescochester | Active | $931.77 |
| Dr. Marshall Leuschke | monique.rolfson@gmail.com | West Rene | Active | $57.61 |
| Luz Gottlieb | ava_senger31@hotmail.com | Lake Koryville | Inactive | $504.82 |
| Total | $2,703.88 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Rafael Langosh | nash.ziemann93@gmail.com | Lake Koby | Active | $381.07 |
| Elbert Quigley | lucy.sauer4@gmail.com | East Berryfort | Inactive | $110.14 |
| Nichole Gislason | felipa23@gmail.com | Predovicfort | Active | $996.16 |
| Mack McCullough | trever2@hotmail.com | North Tierraville | Inactive | $911.05 |
| Alfonso Abernathy | mozell.franecki@gmail.com | New Earlstad | Inactive | $554.71 |
| Total | $2,953.13 | |||
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 | ||
|---|---|---|---|---|---|
| Austin Johns | trystan_weissnat@gmail.com | Bernieceburgh | Inactive | $596.76 | |
| Ryan O'Keefe | sarai42@yahoo.com | East Buford | Active | $529.78 | |
| Hilda Von | piper39@yahoo.com | Loveland | Inactive | $1,194.49 | |
| Robert Williamson | frederick.cummerata50@gmail.com | Bahringerbury | Inactive | $895.99 | |
| Donnie Volkman-Sporer | lizzie52@gmail.com | Tulsa | Inactive | $1,015.40 | |
| Total | $4,232.42 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dr. Arnold Gislason | eldred89@hotmail.com | East Jordynburgh | Active | $1,025.23 | |
| Jessie Feest | bertram_maggio75@yahoo.com | Mount Prospect | Inactive | $755.56 | |
| Anthony Johnson | karianne64@gmail.com | Harrisshire | Active | $1,192.29 | |
| Jodi Ruecker | karley43@gmail.com | College Station | Active | $1,076.89 | |
| Jordan Huel | dayton_kautzer26@gmail.com | Fort Ronchester | Active | $1,083.99 | |
| Total | $5,133.96 | ||||
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 | |
|---|---|---|---|---|
| Miss Johnnie Mertz | damon_lind@gmail.com | Laurynton | Active | $932.99 |
| Eileen Littel | josiane30@gmail.com | Gutkowskiberg | Active | $1,182.64 |
| Mr. Emmett Kessler | arnold.rowe78@hotmail.com | Alverafield | Active | $197.70 |
| Raymond Watsica | keely_altenwerth60@gmail.com | Parkerboro | Inactive | $293.62 |
| Tamara Schmitt | krystina.shields@hotmail.com | Cheyenne | Active | $212.85 |
| Erick Purdy-Stoltenberg | francisca.ferry@yahoo.com | East Maurine | Inactive | $1,093.62 |
| Lydia Schinner | ephraim_bosco46@hotmail.com | Ondrickacester | Inactive | $889.21 |
| Tracey Kassulke | elton_kunze36@gmail.com | Corkeryport | Active | $956.03 |
| Anna Hintz III | clementine68@hotmail.com | Atascocita | Inactive | $156.21 |
| Rosa Hand | janet36@gmail.com | South Jedediah | Active | $1,085.81 |
| Tasha Schamberger | rosina_sipes@yahoo.com | Darechester | Active | $726.26 |
| Mr. Alejandro Gerlach V | ari.corwin61@yahoo.com | Lake Cesar | Active | $504.24 |
| Marcia Smitham | santos_leuschke@hotmail.com | Mabelbury | Inactive | $609.91 |
| Lester Gorczany | max.wunsch@yahoo.com | Irving | Active | $997.30 |
| Byron Mraz DVM | jarrett_hand78@yahoo.com | Deontechester | Active | $1,077.41 |
| Total | $10,915.80 | |||
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 |