Components
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 | Pending | PayPal | $595.49 |
| INV002 | Pending | PayPal | $460.87 |
| INV003 | Unpaid | Bank Transfer | $533.53 |
| INV004 | Unpaid | PayPal | $498.38 |
| INV005 | Unpaid | PayPal | $927.64 |
| INV006 | Unpaid | Bank Transfer | $286.74 |
| INV007 | Unpaid | Bank Transfer | $496.16 |
| Total | $3,798.81 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Gina Johns | Future Solutions Facilitator | gina.johns11@gmail.com | Admin | |
| Vernon Hintz | Investor Research Technician | vernon_hintz@gmail.com | Member | |
| Lynda Becker | District Intranet Representative | lynda.becker@hotmail.com | Admin | |
| Brittany Grant | Human Group Agent | brittany_grant11@gmail.com | Viewer | |
| Alec Runolfsdottir | Product Marketing Supervisor | alec_runolfsdottir@gmail.com | Admin | |
| Dean Bailey | Future Functionality Planner | dean.bailey5@hotmail.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 |
|---|---|---|
Kara Kub National Identity Technician kara.kub36@yahoo.com | Member | |
Bettye Tillman Customer Metrics Facilitator bettye_tillman@hotmail.com | Member | |
Wendy Graham Senior Tactics Manager wendy_graham69@gmail.com | Member | |
Cindy Stiedemann Direct Directives Planner cindy.stiedemann23@gmail.com | Viewer | |
Carolanne Lesch Regional Identity Technician carolanne.lesch65@yahoo.com | Admin | |
Ervin Fritsch Future Research Agent ervin_fritsch@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 |
|---|---|---|
Van Reinger Internal Response Producer van_reinger@yahoo.com | Member | |
Leif Kerluke Internal Optimization Orchestrator leif_kerluke85@yahoo.com | Viewer | |
Lynda Wintheiser Legacy Response Specialist lynda_wintheiser@yahoo.com | Viewer | |
Todd Kris Regional Security Manager todd.kris@yahoo.com | Viewer | |
Riley Kshlerin Principal Applications Officer riley.kshlerin@yahoo.com | Admin | |
Karen Gottlieb Lead Intranet Architect karen.gottlieb59@hotmail.com | Member | |
Darrell Blick Central Research Orchestrator darrell_blick87@hotmail.com | Viewer | |
Maria Kertzmann Corporate Applications Designer maria.kertzmann@gmail.com | Admin | |
Orville Kris District Quality Facilitator orville_kris@gmail.com | Member | |
Janis Metz Dynamic Paradigm Assistant janis_metz74@yahoo.com | Admin | |
Jerald Blick Corporate Tactics Strategist jerald_blick@hotmail.com | Member | |
Perry Shanahan Dynamic Interactions Liaison perry.shanahan83@gmail.com | Admin | |
Dawn Nitzsche Senior Identity Officer dawn_nitzsche32@hotmail.com | Viewer | |
Blanche Morissette International Paradigm Director blanche.morissette90@yahoo.com | Member | |
Susie Lakin-Kshlerin Global Factors Officer susie.lakin-kshlerin85@hotmail.com | Admin | |
Paris Little National Intranet Assistant paris.little@hotmail.com | Viewer | |
Tabitha Rowe Direct Brand Specialist tabitha.rowe36@yahoo.com | Viewer | |
Karla Lindgren Customer Metrics Strategist karla.lindgren32@gmail.com | Admin | |
Flo Padberg Investor Applications Planner flo.padberg60@yahoo.com | Member | |
Ronnie Quitzon Senior Infrastructure Engineer ronnie.quitzon6@hotmail.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 | |
|---|---|---|---|---|
| Dillon Hettinger | sabina.fisher@yahoo.com | Kentwood | Inactive | $39.31 |
| Annalise Kshlerin | neil30@hotmail.com | Kemmershire | Active | $64.32 |
| Dr. Sammy Hegmann | lindsey.stiedemann11@hotmail.com | Fort Victor | Active | $240.54 |
| Janis Wiza | jim.gibson@hotmail.com | Port Debratown | Active | $890.76 |
| Mr. Abel Roob | betty_effertz34@hotmail.com | Lake Clayton | Inactive | $725.59 |
| Total | $1,960.52 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Miss Cleta Dicki-Nienow @melissa.schmitt81 | nelson.marvin9@hotmail.com | New Ardithview | Inactive | $442.74 |
Nathaniel Friesen @wendell_cummerata-funk20 | berenice_mohr93@gmail.com | Rudybury | Inactive | $348.46 |
Rickey Willms @mildred.monahan | preston.dach27@yahoo.com | Brookhaven | Active | $1,080.64 |
Gerda Mohr @joanna_frami57 | rocky29@yahoo.com | Lake Omerfurt | Active | $193.16 |
Kian Kutch @tyler37 | berniece_gleason@gmail.com | Angeloshire | Active | $346.09 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Angelina Bode I | josephine44@gmail.com | Lake Latoya | Active | $976.57 |
| Guillermo Littel | romaine.bashirian@gmail.com | Abernathyville | Inactive | $844.68 |
| Gretchen Harvey | kenneth.mcclure33@hotmail.com | Fort Armanimouth | Active | $545.02 |
| Sheryl Strosin | don7@hotmail.com | Wunschfield | Inactive | $967.39 |
| Genevieve Pollich | seth82@hotmail.com | New Rutheton | Inactive | $5.88 |
| Total | $3,339.54 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Ronnie Farrell | bonnie78@hotmail.com | Lake Debraville | Active | $405.64 |
| Sarah Halvorson | retta.adams51@hotmail.com | East Aylin | Inactive | $897.04 |
| Fermin Mosciski | yolanda7@gmail.com | New Jefferey | Inactive | $538.85 |
| Arthur Terry | brooke_lesch@yahoo.com | Jerdecester | Active | $49.71 |
| Janie Buckridge | kirk_sawayn-vandervort@gmail.com | West Jimcester | Inactive | $990.34 |
| Total | $2,881.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Paulette Sawayn | pedro_kerluke@yahoo.com | Marshallland | Active | $32.18 |
| Nadine Tremblay | kyla_kihn@gmail.com | Mohammadmouth | Active | $92.27 |
| Ms. Oceane D'Amore DDS | jane69@gmail.com | Streichborough | Active | $53.75 |
| Pierce Wisoky | cody17@gmail.com | New Aditya | Active | $526.93 |
| Glenda Klocko | william45@hotmail.com | Redlands | Active | $1,055.52 |
| Total | $1,760.65 | |||
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 | ||
|---|---|---|---|---|---|
| Tomas Wisoky | blake97@gmail.com | Downers Grove | Active | $726.44 | |
| Kristen Williamson | martin_muller58@gmail.com | West Anaport | Active | $1,030.86 | |
| Kirstin Krajcik | eduardo61@yahoo.com | East Averyhaven | Inactive | $763.91 | |
| Newton Rippin | haven.wintheiser@hotmail.com | Kendale Lakes | Inactive | $266.17 | |
| Mrs. Arielle Bechtelar | stacy_schiller@yahoo.com | New Lukasworth | Inactive | $1,072.65 | |
| Total | $3,860.03 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Vanessa Daugherty | rogelio92@hotmail.com | Tacoma | Active | $1,069.28 | |
| Omar Effertz IV | pam.steuber@hotmail.com | Toms River | Active | $1,058.37 | |
| Dr. Thea Fritsch DDS | cora_heller@yahoo.com | Lake Marlon | Active | $537.20 | |
| Candace Abernathy | randall64@gmail.com | Mozellefurt | Inactive | $666.86 | |
| Aubrey Lowe | archie.krajcik@gmail.com | South Edgartown | Active | $1,006.14 | |
| Total | $4,337.85 | ||||
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 | |
|---|---|---|---|---|
| Sheila Morar-Grimes | karla_krajcik24@hotmail.com | Lake Thomas | Active | $381.16 |
| Adela VonRueden | cletus.wisoky@hotmail.com | North Gregoriaworth | Inactive | $503.04 |
| Renee Gutmann | dwight_powlowski@hotmail.com | East Jennyport | Active | $407.07 |
| Danielle Wolf | winston_harvey75@gmail.com | O'Reillyboro | Active | $803.12 |
| Vera Kohler | leticia86@gmail.com | New Brianfield | Active | $117.96 |
| Florence Witting | dakota94@hotmail.com | Dorianboro | Inactive | $884.27 |
| Kristopher Botsford | winston.glover1@gmail.com | South Osbaldo | Inactive | $763.94 |
| Mindy West | alexandra51@yahoo.com | South Addiestad | Active | $287.72 |
| Nathan Cassin | osbaldo10@hotmail.com | Vonbury | Inactive | $1,183.09 |
| Cary Haag | sheryl11@gmail.com | Prohaskaside | Inactive | $304.21 |
| Zion Rice | patti.metz97@yahoo.com | Padbergside | Inactive | $547.76 |
| Dwayne Hickle | harvey.glover57@hotmail.com | North Dahlia | Inactive | $830.68 |
| Merle Orn I | armand_hahn@hotmail.com | West Patworth | Inactive | $300.15 |
| Viola Blick | joel.turner81@yahoo.com | Kulaschester | Inactive | $947.62 |
| Albertha Welch | hailey_davis@yahoo.com | Jonathonport | Active | $998.13 |
| Total | $9,259.92 | |||
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 |