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 | $478.00 |
| INV002 | Pending | PayPal | $878.62 |
| INV003 | Pending | Bank Transfer | $422.34 |
| INV004 | Unpaid | PayPal | $241.98 |
| INV005 | Paid | Bank Transfer | $755.42 |
| INV006 | Paid | PayPal | $677.15 |
| INV007 | Unpaid | PayPal | $989.46 |
| Total | $4,442.97 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ona Braun | Global Integration Assistant | ona.braun35@gmail.com | Admin | |
| Jackeline Gulgowski | Lead Metrics Administrator | jackeline_gulgowski@yahoo.com | Admin | |
| Ressie Gleichner | Legacy Accountability Agent | ressie_gleichner54@hotmail.com | Member | |
| Rosemary Ullrich | Senior Accounts Coordinator | rosemary_ullrich@hotmail.com | Admin | |
| Brian Rogahn-Bernier | Chief Solutions Planner | brian_rogahn-bernier@gmail.com | Admin | |
| Arvilla Marvin | Senior Factors Representative | arvilla.marvin@yahoo.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 |
|---|---|---|
Henry Hahn Lead Quality Agent henry.hahn@hotmail.com | Admin | |
Jairo Littel Global Factors Planner jairo.littel46@yahoo.com | Admin | |
Shemar Crist Principal Web Planner shemar_crist@gmail.com | Admin | |
Jaclyn West-Collins Product Directives Technician jaclyn.west-collins91@yahoo.com | Viewer | |
Raoul Dooley Senior Infrastructure Orchestrator raoul.dooley96@gmail.com | Admin | |
Alana Green Human Solutions Administrator alana_green@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 |
|---|---|---|
Aliya Hessel Corporate Solutions Agent aliya.hessel@yahoo.com | Admin | |
Edythe Schimmel International Assurance Associate edythe.schimmel@hotmail.com | Member | |
Shawn Fadel International Integration Coordinator shawn.fadel86@hotmail.com | Member | |
Jeffry Blick National Applications Strategist jeffry_blick39@hotmail.com | Member | |
Layla Frami Investor Solutions Developer layla_frami@yahoo.com | Viewer | |
Vivien Gerhold-Lang Customer Group Manager vivien.gerhold-lang@gmail.com | Admin | |
Lorena Lynch Lead Branding Developer lorena.lynch40@yahoo.com | Viewer | |
Ines Breitenberg National Accounts Assistant ines.breitenberg@yahoo.com | Viewer | |
August Hoeger International Tactics Engineer august_hoeger@yahoo.com | Admin | |
Maybell Borer Internal Marketing Supervisor maybell_borer@gmail.com | Viewer | |
Cassidy Bogan Chief Data Director cassidy_bogan@hotmail.com | Admin | |
Madelyn Dach Legacy Tactics Representative madelyn_dach@hotmail.com | Member | |
Crawford Huels Principal Usability Technician crawford.huels@gmail.com | Member | |
Freda Moore Corporate Creative Developer freda.moore@gmail.com | Admin | |
Scarlett Friesen Direct Markets Analyst scarlett.friesen98@yahoo.com | Viewer | |
Gail Weber-Greenfelder Forward Paradigm Designer gail.weber-greenfelder@yahoo.com | Viewer | |
Jody Hessel Chief Security Orchestrator jody_hessel@hotmail.com | Admin | |
Allison Schultz Principal Research Associate allison_schultz2@yahoo.com | Viewer | |
Van Lebsack-Monahan Direct Intranet Analyst van_lebsack-monahan@hotmail.com | Member | |
Vivian Ledner Corporate Branding Specialist vivian.ledner97@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 | |
|---|---|---|---|---|
| Dr. Edmund Spencer | sigurd.franecki7@yahoo.com | Keyonstad | Active | $989.47 |
| Spencer Jaskolski | elisha.lind83@yahoo.com | South Micaela | Inactive | $117.16 |
| Percy Gottlieb I | libby.koss47@hotmail.com | Grantton | Inactive | $826.67 |
| Lamar Goldner | tia_kshlerin@hotmail.com | New Deshawn | Active | $344.65 |
| Miss Rita Roob | miller2@hotmail.com | South Buddyport | Active | $199.73 |
| Total | $2,477.68 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Josefina Pagac @ellie_mraz | sasha_goodwin-macgyver@hotmail.com | Sierracester | Active | $884.18 |
Percy Auer Sr. @josh_lockman | madeline_yost@gmail.com | Jewelworth | Inactive | $589.68 |
Estelle Wolff @kathryn57 | nolan_mertz-schaefer@gmail.com | East Filomena | Active | $363.78 |
Kristi Dickens @aurore_green | adell52@yahoo.com | Richland | Inactive | $577.70 |
Mr. Jan Schultz @fern.vonrueden-collier14 | alene89@yahoo.com | Estrellafurt | Active | $481.52 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cody Nicolas | vidal56@gmail.com | Bahringerfort | Active | $816.16 |
| Melba Becker | nikko.bechtelar@hotmail.com | Hayliefield | Inactive | $111.10 |
| Mandy Feest | rosetta.cormier70@hotmail.com | Lake Kayliestad | Inactive | $471.08 |
| Marianne Mraz | bart56@gmail.com | Garden Grove | Active | $1,044.94 |
| Jeannie Jacobi | faustino_schmeler@gmail.com | Lake Karenshire | Inactive | $114.23 |
| Total | $2,557.51 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cristina Schultz | dameon.dickinson@gmail.com | Adaborough | Inactive | $256.98 |
| Ervin Abernathy | elmo16@hotmail.com | Adelinestead | Inactive | $530.55 |
| Vincent Prosacco | lowell69@hotmail.com | North Antoinetteview | Active | $1,017.49 |
| Dr. Lynn Luettgen | coty_kirlin@gmail.com | Jamirworth | Inactive | $845.70 |
| Ms. Megan Corwin | susanna.spencer31@yahoo.com | Cuyahoga Falls | Active | $1,145.92 |
| Total | $3,796.64 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sam Rutherford | hillary_runolfsson41@hotmail.com | Lake Ettie | Inactive | $509.22 |
| Nelson Braun | gina62@gmail.com | Elizabeth | Active | $707.37 |
| Julio Mayert | joannie.schaefer@hotmail.com | Pfefferbury | Active | $74.98 |
| Rochelle Kshlerin-Olson | maddison63@yahoo.com | Shanahanville | Inactive | $310.25 |
| April Armstrong | randall.zboncak@hotmail.com | Mauricioton | Inactive | $918.36 |
| Total | $2,520.18 | |||
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 | ||
|---|---|---|---|---|---|
| Dexter Corwin | chasity84@yahoo.com | Oceanside | Active | $259.52 | |
| Tamara Parisian | rachel.oconner@yahoo.com | Samanthaburgh | Inactive | $291.08 | |
| Sonja Cole | kane86@gmail.com | Harveyfort | Inactive | $929.93 | |
| Dr. Dennis Cummings | jake_krajcik@hotmail.com | Smithview | Active | $574.92 | |
| Christina Heidenreich | christiana85@yahoo.com | Earleneton | Active | $2.05 | |
| Total | $2,057.50 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Randal Blanda | angelica.lindgren22@gmail.com | San Antonio | Inactive | $689.07 | |
| Deanna Kiehn | roberto_stanton35@hotmail.com | Maggiofurt | Active | $83.15 | |
| Whitney McGlynn | durward.kuhlman@yahoo.com | Maiyabury | Active | $155.57 | |
| Gayle Leuschke | joseph_moen50@yahoo.com | Pagacmouth | Active | $195.56 | |
| Francis Cremin | oral32@yahoo.com | Nicholestead | Active | $635.42 | |
| Total | $1,758.77 | ||||
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 | |
|---|---|---|---|---|
| Mrs. Felicia Vandervort | america.strosin55@hotmail.com | Lynchburg | Inactive | $549.73 |
| Clyde Grimes | alexandrea4@hotmail.com | Kansas City | Inactive | $989.02 |
| Vera Braun | lyric_baumbach87@gmail.com | Baldwin Park | Active | $1,004.00 |
| Christie Dooley | emie.kshlerin@gmail.com | Racine | Active | $472.33 |
| Angel Mertz II | ezequiel28@yahoo.com | Fort Della | Inactive | $309.75 |
| Craig Strosin | alysha_stracke71@yahoo.com | Cutler Bay | Active | $139.90 |
| Oliver Kuhlman | vinnie_cassin@gmail.com | Port Roma | Active | $292.52 |
| Felipe Marquardt | jess_keeling80@gmail.com | Darylstad | Inactive | $159.42 |
| Santiago Rodriguez | gussie67@hotmail.com | Lake Kurtisfurt | Inactive | $778.54 |
| Velma Pollich | garnet46@yahoo.com | Lake Barbara | Active | $201.36 |
| Paulette Mills | eriberto_nader5@gmail.com | East Pascaleboro | Active | $681.50 |
| Dr. Norman Konopelski | abigale34@gmail.com | Hampton | Active | $317.09 |
| Dr. Julian Hane | hilbert65@hotmail.com | Leschshire | Inactive | $1,145.72 |
| Essie Conn | isabel_rosenbaum@yahoo.com | New Sophiaworth | Active | $128.82 |
| Sandra Howe | elijah_hammes@hotmail.com | Fort Zachery | Inactive | $143.58 |
| Total | $7,313.28 | |||
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 |