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 | Credit Card | $639.99 |
| INV002 | Pending | Credit Card | $415.25 |
| INV003 | Paid | Credit Card | $184.74 |
| INV004 | Paid | Bank Transfer | $743.76 |
| INV005 | Pending | Credit Card | $172.70 |
| INV006 | Unpaid | Credit Card | $808.30 |
| INV007 | Unpaid | Credit Card | $487.91 |
| Total | $3,452.65 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kasey Carroll | Principal Infrastructure Assistant | kasey_carroll19@hotmail.com | Member | |
| Bruce Yost-Lueilwitz | Human Mobility Agent | bruce_yost-lueilwitz36@yahoo.com | Admin | |
| Domenic Renner | Chief Data Administrator | domenic.renner51@yahoo.com | Viewer | |
| Tracy MacGyver | Chief Solutions Specialist | tracy.macgyver@gmail.com | Member | |
| Ottis D'Amore | Central Branding Engineer | ottis_damore@gmail.com | Admin | |
| Frederick Hane | Internal Communications Coordinator | frederick.hane@yahoo.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ashtyn Pollich Product Accounts Planner ashtyn.pollich@gmail.com | Viewer | |
Alvina Watsica Product Program Producer alvina_watsica@yahoo.com | Admin | |
Trenton Graham-Herman Dynamic Applications Producer trenton_graham-herman17@hotmail.com | Admin | |
Scottie O'Kon Direct Operations Analyst scottie_okon65@yahoo.com | Admin | |
Ford Morar Global Interactions Coordinator ford.morar7@hotmail.com | Member | |
Kiara Braun Direct Research Coordinator kiara_braun@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ludwig Prosacco International Web Orchestrator ludwig.prosacco@gmail.com | Admin | |
Einar Funk Chief Identity Executive einar_funk61@hotmail.com | Member | |
Adele Wisoky Senior Infrastructure Engineer adele.wisoky@gmail.com | Admin | |
Helen Nader International Program Facilitator helen.nader66@gmail.com | Member | |
Marvin Grimes Product Mobility Executive marvin.grimes0@gmail.com | Viewer | |
Sallie Lowe Chief Assurance Administrator sallie_lowe10@yahoo.com | Member | |
Laverne Goyette Regional Mobility Agent laverne_goyette@hotmail.com | Viewer | |
Trystan Boyle Central Mobility Director trystan_boyle@yahoo.com | Admin | |
Fredrick Torp Lead Integration Executive fredrick.torp83@yahoo.com | Viewer | |
Daren Crona Principal Directives Executive daren.crona@hotmail.com | Admin | |
Ozella Bradtke Future Research Engineer ozella.bradtke36@hotmail.com | Member | |
Shayne Hansen Product Optimization Supervisor shayne_hansen77@hotmail.com | Admin | |
Jayne Streich Senior Accounts Director jayne.streich@yahoo.com | Viewer | |
Marcia Tillman-Doyle Product Directives Consultant marcia.tillman-doyle32@hotmail.com | Member | |
Lila Haley Chief Intranet Orchestrator lila.haley@yahoo.com | Viewer | |
Maggie Ernser Customer Brand Designer maggie.ernser@gmail.com | Viewer | |
Karli Lemke Forward Intranet Planner karli_lemke@yahoo.com | Admin | |
Felicita Beatty National Paradigm Orchestrator felicita_beatty@hotmail.com | Member | |
Jayde Rodriguez Customer Accounts Assistant jayde.rodriguez@hotmail.com | Member | |
Maritza Goldner Human Usability Coordinator maritza_goldner@yahoo.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 | |
|---|---|---|---|---|
| Jessie Yost-Gleichner | milan_romaguera9@gmail.com | St. Cloud | Active | $640.67 |
| Adam Predovic | kenton.stark@hotmail.com | Janickburgh | Inactive | $1,178.68 |
| Herman Stracke | minnie_rogahn46@gmail.com | New Brigitteport | Active | $494.34 |
| Emma Osinski | kayley.boehm31@yahoo.com | Upland | Active | $1,178.33 |
| Katie Quigley | mariano50@hotmail.com | East Ayana | Inactive | $399.07 |
| Total | $3,891.09 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ruth Ryan @danielle.williamson62 | isabell.reynolds@yahoo.com | Caguas | Inactive | $869.95 |
Sharon Mertz @casey_cartwright | candido_doyle@gmail.com | Smyrna | Active | $939.87 |
Maryann O'Conner @logan_dach18 | mara.kreiger@gmail.com | North Gertrude | Inactive | $1,033.95 |
Sylvia Witting @paolo68 | elisabeth87@yahoo.com | New Garrickport | Active | $518.79 |
Mr. Emanuel King @dudley.blanda | jovany90@gmail.com | West Olen | Active | $1,145.72 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Rosemarie Rippin | gust60@yahoo.com | Alexandreville | Inactive | $433.54 |
| Jon Turner | kade88@hotmail.com | Tomboro | Active | $897.26 |
| Dana Hodkiewicz | hal_robel95@hotmail.com | Lorinestad | Active | $978.46 |
| Marguerite Cremin | ella.howell72@yahoo.com | Monterey Park | Inactive | $396.92 |
| Dr. Sandy Effertz | maximo72@yahoo.com | Lake Demarcus | Active | $153.58 |
| Total | $2,859.76 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alex Steuber | sydnee.larson-shanahan@gmail.com | Lake Cicerochester | Inactive | $1,040.09 |
| Eduardo Jacobson-Marquardt | adonis_price@gmail.com | Daronfield | Inactive | $1,082.96 |
| Essie Roberts | jonas67@gmail.com | Schillerton | Inactive | $926.52 |
| Jan Collins MD | dannie70@hotmail.com | Mishawaka | Inactive | $209.95 |
| Misty Renner | donnell_konopelski@gmail.com | Austin | Active | $334.34 |
| Total | $3,593.86 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Holly Gislason | santos_stoltenberg42@hotmail.com | Lake Herthaboro | Active | $523.70 |
| Dr. Amelia Hansen-Mante | rebeca_reichert87@yahoo.com | Wauwatosa | Active | $657.18 |
| Anna Greenholt | jan37@gmail.com | Hempstead | Active | $364.00 |
| Jill Skiles | abigail_hammes55@gmail.com | El Monte | Inactive | $100.51 |
| Jason O'Keefe | bert45@gmail.com | Port Keenanview | Inactive | $826.48 |
| Total | $2,471.87 | |||
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 | ||
|---|---|---|---|---|---|
| Marianne Hettinger | ariel_cremin56@yahoo.com | East Zakary | Inactive | $717.90 | |
| Jason Harris | elody_predovic95@gmail.com | Champaign | Inactive | $951.31 | |
| Brandy Conroy | carolyne.thompson54@hotmail.com | North Francesco | Inactive | $778.16 | |
| Mr. Dwayne Macejkovic | betsy10@hotmail.com | Clearwater | Inactive | $150.30 | |
| Lewis Koch | cory.johns@yahoo.com | East Marvinfurt | Active | $216.80 | |
| Total | $2,814.47 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Troy Denesik | ibrahim.sauer59@gmail.com | West Lisa | Inactive | $999.17 | |
| Antoinette Blanda | quinn.jones@yahoo.com | Monroe | Active | $1,061.76 | |
| Mrs. Anna Davis | jada_marquardt@gmail.com | West Jace | Active | $548.71 | |
| Ramon Farrell | hardy_russel@hotmail.com | Kadeview | Active | $405.74 | |
| Catherine Smitham | marcelle22@yahoo.com | Lake Halleworth | Active | $63.49 | |
| Total | $3,078.87 | ||||
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 | |
|---|---|---|---|---|
| Kathleen McKenzie | junior_kuhlman@hotmail.com | New Gail | Inactive | $204.81 |
| Elvira Larson | joannie27@yahoo.com | Nienowfort | Inactive | $320.88 |
| Douglas Mante | noah_vonrueden71@gmail.com | Elmoreburgh | Active | $536.85 |
| Maurice Luettgen | jules_luettgen14@yahoo.com | Danbury | Active | $926.10 |
| Ricardo Rohan | louie53@gmail.com | Fort Gregstad | Active | $729.29 |
| Lucy Mosciski | audie.koelpin-purdy58@gmail.com | West Sigrid | Inactive | $768.25 |
| Mindy Mills | esteban_grady87@hotmail.com | Toyfield | Active | $807.24 |
| Allen Jenkins | alexandro_kunde@gmail.com | East Jamieborough | Inactive | $171.72 |
| Homer Ryan | stephen.towne@hotmail.com | Swiftfort | Inactive | $93.03 |
| Johnnie Jerde | mckenzie_schamberger85@yahoo.com | Turcotteview | Inactive | $249.97 |
| Antonio Carroll | skylar44@gmail.com | Toymouth | Inactive | $918.62 |
| Hattie Stehr III | sienna_windler34@hotmail.com | Nashville-Davidson | Inactive | $176.19 |
| Emanuel Pollich-Kihn | camden.kris17@yahoo.com | Durwardcester | Inactive | $897.02 |
| Cassandra Koss | kamron.stroman@hotmail.com | East Darienberg | Active | $125.16 |
| Krista Upton-Gerhold | german_reinger16@gmail.com | Johnfurt | Active | $946.54 |
| Total | $7,871.67 | |||
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 |