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 | Bank Transfer | $766.96 |
| INV002 | Paid | PayPal | $930.10 |
| INV003 | Pending | Credit Card | $163.25 |
| INV004 | Unpaid | Bank Transfer | $800.65 |
| INV005 | Pending | Credit Card | $433.71 |
| INV006 | Pending | Credit Card | $596.95 |
| INV007 | Paid | Credit Card | $588.78 |
| Total | $4,280.40 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jaida Purdy | Global Optimization Planner | jaida.purdy@gmail.com | Admin | |
| Emil Koch | Central Infrastructure Specialist | emil.koch@hotmail.com | Member | |
| Deangelo Toy | Product Division Designer | deangelo_toy5@yahoo.com | Member | |
| Jarrett Hudson | Central Web Supervisor | jarrett.hudson@yahoo.com | Member | |
| Daija Wilderman | Forward Applications Designer | daija_wilderman84@gmail.com | Member | |
| Angelina Morissette | Future Marketing Officer | angelina_morissette98@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 |
|---|---|---|
Haylie Schowalter Direct Accounts Specialist haylie_schowalter@hotmail.com | Member | |
Avery Wehner Legacy Directives Supervisor avery_wehner@gmail.com | Member | |
Grayce Ebert Principal Marketing Orchestrator grayce_ebert51@gmail.com | Member | |
Danny McClure Senior Quality Strategist danny_mcclure8@yahoo.com | Admin | |
Kaylah Wiegand Regional Quality Engineer kaylah_wiegand36@hotmail.com | Viewer | |
Alden Mertz District Quality Analyst alden_mertz21@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 |
|---|---|---|
Lorenzo Walker Direct Program Orchestrator lorenzo_walker52@yahoo.com | Admin | |
Berta Hane Global Infrastructure Technician berta_hane68@gmail.com | Admin | |
Lisette Gutmann Chief Markets Planner lisette.gutmann@hotmail.com | Viewer | |
Mara Kulas Regional Identity Analyst mara_kulas@hotmail.com | Viewer | |
Marcelle Schumm Legacy Branding Supervisor marcelle_schumm35@hotmail.com | Admin | |
Royal Bode Legacy Security Executive royal.bode52@hotmail.com | Admin | |
Adolf Collins International Accounts Agent adolf_collins9@yahoo.com | Viewer | |
Shanelle Harvey Corporate Mobility Facilitator shanelle_harvey@yahoo.com | Viewer | |
Heath Reichel Product Functionality Specialist heath.reichel54@yahoo.com | Member | |
Katlyn Konopelski Product Infrastructure Consultant katlyn.konopelski@gmail.com | Admin | |
Taylor Thiel Lead Operations Consultant taylor.thiel61@yahoo.com | Member | |
Cleta Feeney Chief Assurance Administrator cleta.feeney23@hotmail.com | Member | |
Sharon Cruickshank Investor Identity Liaison sharon_cruickshank1@hotmail.com | Viewer | |
Arvel Grimes Direct Integration Agent arvel.grimes38@gmail.com | Member | |
Kenton Klocko Internal Tactics Producer kenton_klocko64@yahoo.com | Admin | |
Jayson Johns District Branding Consultant jayson_johns@yahoo.com | Member | |
Kaley Greenfelder Human Implementation Technician kaley.greenfelder70@gmail.com | Admin | |
Patsy King Forward Research Director patsy.king43@yahoo.com | Member | |
Laurine Ferry Regional Solutions Specialist laurine_ferry38@gmail.com | Admin | |
Daija Fay Legacy Web Associate daija_fay71@hotmail.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 | |
|---|---|---|---|---|
| Miss Winifred Schultz | travis.nicolas@hotmail.com | East Lydiaport | Active | $282.17 |
| Ismael Corkery | darrion_schamberger39@hotmail.com | Woodland | Active | $1,123.45 |
| Ervin Oberbrunner | jodie_hoppe63@gmail.com | New Hettie | Inactive | $296.99 |
| Donna Toy Jr. | adolf_brakus@hotmail.com | Rohanbury | Active | $38.78 |
| Dustin McLaughlin Sr. | melisa.heller@hotmail.com | Jasonburgh | Inactive | $487.83 |
| Total | $2,229.22 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ernestine Miller @rogelio.effertz89 | syble_corwin@gmail.com | Azusa | Inactive | $819.57 |
Armando Hettinger @tristin.ankunding | kathryne7@gmail.com | Fredcester | Inactive | $32.04 |
Leo Donnelly @gerson39 | mark.schaden@gmail.com | Jaskolskishire | Inactive | $279.03 |
Dr. Donnie Strosin @theron_schmeler69 | maiya62@gmail.com | Altadena | Active | $104.27 |
Harriet Romaguera @alysson.dooley | salvatore.cronin@gmail.com | The Hammocks | Inactive | $771.45 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ms. Lorene Ernser | giovani_dicki1@yahoo.com | South Shaniyastad | Inactive | $931.05 |
| Melinda Hahn | king.von@yahoo.com | Gresham | Active | $851.36 |
| June Zieme Jr. | jeffry96@yahoo.com | Shawnee | Inactive | $1,184.01 |
| Debbie Jacobi Jr. | misael1@yahoo.com | East Harry | Inactive | $335.24 |
| Mr. Keith Schuppe | ayden_huel46@yahoo.com | Fort Cadenton | Inactive | $390.00 |
| Total | $3,691.66 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Fernando Hagenes | vesta.kautzer-hirthe32@hotmail.com | Kunzebury | Inactive | $822.13 |
| Curtis Batz V | elton_metz@yahoo.com | North Vidaltown | Active | $691.87 |
| Kyle Block | dameon_pfannerstill@yahoo.com | Vivianneboro | Inactive | $71.17 |
| Holly Fahey DDS | emely_brakus@hotmail.com | Port Toney | Inactive | $841.38 |
| Dr. Dana Hackett | lon22@gmail.com | Fort Wilbertstad | Active | $889.20 |
| Total | $3,315.75 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Spencer Wolff | esther.beer47@hotmail.com | Pine Hills | Inactive | $209.08 |
| Shawna Bins | haley80@hotmail.com | Riverton | Inactive | $106.60 |
| Alan Frami | lavon18@hotmail.com | Fort Autumnstad | Inactive | $938.88 |
| Dr. Eloise Welch | rosalyn.kshlerin-barton@gmail.com | Lake Kailyn | Inactive | $154.24 |
| Johnny Franecki | angus_mertz40@yahoo.com | Freidaborough | Inactive | $890.77 |
| Total | $2,299.57 | |||
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 | ||
|---|---|---|---|---|---|
| Adam Walsh PhD | lorenz_emard24@gmail.com | Port Gustport | Active | $543.78 | |
| Mr. Rex Kuhlman | jabari_nitzsche@gmail.com | South Kaseyshire | Active | $420.80 | |
| Caroline Schaefer | titus50@yahoo.com | Lurlineland | Active | $872.29 | |
| Lowell Renner | eveline58@yahoo.com | Davis | Active | $61.60 | |
| Tonya Metz | flavie.brakus39@hotmail.com | North Gavin | Inactive | $405.17 | |
| Total | $2,303.64 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Tasha Botsford III | dereck.johns30@gmail.com | Jakubowskicester | Inactive | $947.71 | |
| Gayle Boyer | shemar_jacobi35@gmail.com | Dianafort | Inactive | $14.34 | |
| Brittany Stehr | frederique_crona56@hotmail.com | Kettering | Inactive | $336.00 | |
| Robin Kuhn | burley_schroeder63@hotmail.com | South Adriel | Active | $312.44 | |
| Mrs. Suzanne Schultz | brice.gulgowski@yahoo.com | Vergieview | Active | $687.93 | |
| Total | $2,298.42 | ||||
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 | |
|---|---|---|---|---|
| Doug Welch | ethyl.bogisich@hotmail.com | Keelingstead | Inactive | $761.80 |
| Patti Rosenbaum | nickolas.legros93@hotmail.com | El Centro | Inactive | $639.33 |
| Lena Ebert | manuel.howell77@gmail.com | Lake Alvah | Active | $152.05 |
| Nadine Bashirian | baron_kozey-feil11@hotmail.com | Fort Emmalee | Inactive | $88.71 |
| Benny Cruickshank | yadira.hessel@yahoo.com | Port Flavie | Inactive | $696.18 |
| Mr. Dwight Rolfson | lowell.champlin27@gmail.com | Federal Way | Inactive | $280.19 |
| Marvin Rippin | margarita.huel@yahoo.com | East Wilton | Active | $741.21 |
| Bert Ortiz | camren33@yahoo.com | Douglasberg | Inactive | $195.53 |
| Ms. Nina Rath | chaz_blick@gmail.com | Laceychester | Active | $922.52 |
| Mr. Willis Wiza | may34@hotmail.com | Lake Maximilliacester | Inactive | $593.49 |
| Wendell Will | gayle94@yahoo.com | Turlock | Inactive | $560.20 |
| Gayle Buckridge | isabelle_ratke56@gmail.com | Kellieborough | Active | $817.44 |
| Eunice Witting | muhammad37@hotmail.com | Port Candice | Active | $191.36 |
| Beatrice Goyette | maxime24@yahoo.com | Morissetteport | Active | $279.92 |
| Cecelia Sawayn | westley_jones61@gmail.com | Lake Kristinaport | Inactive | $1,189.39 |
| Total | $8,109.32 | |||
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 |