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 | $168.39 |
| INV002 | Pending | Bank Transfer | $901.32 |
| INV003 | Pending | PayPal | $111.00 |
| INV004 | Paid | PayPal | $461.43 |
| INV005 | Paid | Bank Transfer | $215.27 |
| INV006 | Paid | PayPal | $399.89 |
| INV007 | Paid | PayPal | $396.48 |
| Total | $2,653.78 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Giovani Huel | Product Assurance Officer | giovani_huel@yahoo.com | Admin | |
| Shanel Hermiston | National Markets Manager | shanel_hermiston70@yahoo.com | Member | |
| Elnora Kozey | Forward Interactions Executive | elnora.kozey@gmail.com | Viewer | |
| Clifford Lynch | Legacy Branding Associate | clifford.lynch@yahoo.com | Viewer | |
| Greg Little | Customer Integration Manager | greg_little98@yahoo.com | Member | |
| Lyric Schaden | Forward Web Facilitator | lyric.schaden69@hotmail.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 |
|---|---|---|
D'angelo Dare Chief Intranet Agent dangelo_dare51@gmail.com | Member | |
Mellie Barrows Principal Accountability Facilitator mellie.barrows51@gmail.com | Admin | |
Korey Howe Central Quality Liaison korey_howe91@gmail.com | Admin | |
Julius Trantow Dynamic Functionality Director julius.trantow62@gmail.com | Member | |
Retta Hilll-Satterfield Dynamic Metrics Facilitator retta_hilll-satterfield@yahoo.com | Viewer | |
Frida Hoppe Lead Metrics Producer frida.hoppe31@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Aniyah Lang Chief Security Designer aniyah.lang78@hotmail.com | Admin | |
Rudy Grady-Swift Future Program Developer rudy_grady-swift44@hotmail.com | Admin | |
Gerard Kihn Investor Paradigm Technician gerard.kihn65@yahoo.com | Member | |
Vaughn Steuber Lead Brand Administrator vaughn.steuber@gmail.com | Viewer | |
Leonora Schmeler Forward Creative Representative leonora_schmeler25@yahoo.com | Admin | |
Clinton Nienow Chief Tactics Planner clinton.nienow60@hotmail.com | Viewer | |
Glenna Nienow Internal Division Supervisor glenna_nienow57@hotmail.com | Member | |
Lawrence Koss National Branding Facilitator lawrence.koss34@hotmail.com | Viewer | |
Hermina Ritchie Product Creative Agent hermina_ritchie@hotmail.com | Viewer | |
Terrell Hane Regional Applications Supervisor terrell_hane29@yahoo.com | Viewer | |
Graciela Skiles-Mraz Lead Metrics Agent graciela_skiles-mraz57@hotmail.com | Admin | |
Kristin Jenkins Regional Web Officer kristin.jenkins48@hotmail.com | Member | |
Delores Boyer Future Accountability Engineer delores.boyer98@yahoo.com | Admin | |
Camila Ernser Product Configuration Manager camila.ernser@hotmail.com | Member | |
Lorenzo Schowalter Legacy Program Designer lorenzo_schowalter@yahoo.com | Admin | |
Petra Bechtelar International Branding Liaison petra_bechtelar@hotmail.com | Viewer | |
Genevieve Cronin Dynamic Interactions Strategist genevieve_cronin28@yahoo.com | Viewer | |
Casey Kerluke Internal Implementation Coordinator casey.kerluke@yahoo.com | Admin | |
Juston Toy Forward Marketing Producer juston_toy90@yahoo.com | Admin | |
Weldon Kertzmann Direct Interactions Analyst weldon.kertzmann@gmail.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 | |
|---|---|---|---|---|
| Alicia Price | fannie.leuschke14@gmail.com | Louisville/Jefferson County | Active | $565.75 |
| Hattie Pollich | daphnee_ziemann@yahoo.com | Wiegandcester | Inactive | $541.06 |
| Jessie Dooley | pascale97@hotmail.com | Fort Carminestead | Inactive | $695.86 |
| Kristi Runolfsdottir | enos_koss@hotmail.com | Priceshire | Inactive | $978.03 |
| Mattie Wilderman | rudolph80@hotmail.com | East Wade | Active | $549.68 |
| Total | $3,330.38 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kay Hodkiewicz @jadon.hand83 | jerry38@gmail.com | Lake Caliland | Active | $5.59 |
Ivan Mosciski III @andres82 | keyshawn_stehr61@hotmail.com | Jalonstead | Active | $949.65 |
Molly Champlin @vidal.windler66 | mathilde.ryan68@yahoo.com | Fort Violette | Active | $255.96 |
Vickie Durgan @ora.koss70 | davonte97@hotmail.com | West Modestofort | Active | $1,028.36 |
Manuel Ruecker-Boyle @griffin0 | norval_balistreri@gmail.com | Lake Ardella | Active | $203.72 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Donald Krajcik | harvey79@hotmail.com | South Marcelle | Inactive | $901.08 |
| Dr. Roberto Leuschke | valentin_denesik75@hotmail.com | West Mariana | Active | $785.71 |
| Glenda Wilkinson-Wehner | dante95@gmail.com | Conorshire | Inactive | $165.91 |
| Kristi Kautzer | kirstin34@gmail.com | Fort Marcella | Inactive | $240.76 |
| Lamar Kerluke | horacio.deckow@yahoo.com | West Carlostad | Inactive | $907.83 |
| Total | $3,001.29 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Candice Lesch | sigrid_jones52@yahoo.com | Cedar Park | Inactive | $1,068.14 |
| Mr. Erick Ortiz | michael_schamberger16@hotmail.com | Sauerboro | Inactive | $11.27 |
| Beulah Kris | henriette_anderson3@gmail.com | Mannshire | Inactive | $23.32 |
| Dr. Mario Kihn | travis.fadel75@gmail.com | North Stantonstad | Inactive | $423.61 |
| Dr. Gilberto Klocko | robin76@yahoo.com | Andersonstad | Inactive | $702.27 |
| Total | $2,228.61 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Latoya Abshire | leland59@yahoo.com | Kaileeshire | Active | $948.16 |
| Marcus Mills | zander77@hotmail.com | Shreveport | Active | $194.25 |
| Mr. Greg Kemmer | angelica79@yahoo.com | Lake Enid | Active | $635.38 |
| Milton Cartwright | winnifred_boyer45@hotmail.com | Port Parisstead | Inactive | $1,065.05 |
| April Thompson | layla50@hotmail.com | Cleorabury | Active | $901.26 |
| Total | $3,744.10 | |||
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 | ||
|---|---|---|---|---|---|
| Boyd Towne Sr. | eldora_nienow@gmail.com | Metzfield | Active | $26.28 | |
| Leslie Mraz | elody6@hotmail.com | South Declanworth | Inactive | $1,164.02 | |
| Jesus Rolfson | chandler.okeefe@hotmail.com | Mohammedview | Inactive | $210.48 | |
| Richard Hodkiewicz | kirstin15@yahoo.com | Fort Trevion | Active | $346.22 | |
| Sylvia Williamson | jaylin84@yahoo.com | New Nelleton | Active | $838.78 | |
| Total | $2,585.78 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Casey Frami II | kara_metz54@hotmail.com | South Antoinetteboro | Inactive | $570.21 | |
| Erika Feeney | rupert_mosciski-rath@hotmail.com | Santa Rosa | Inactive | $65.30 | |
| Wendell Cole | webster_emard85@yahoo.com | West Durward | Inactive | $234.58 | |
| Derrick Deckow | vanessa.moen@hotmail.com | South Valentineview | Active | $418.97 | |
| Dr. Woodrow Kiehn MD | mary.ruecker@hotmail.com | Spinkabury | Inactive | $617.45 | |
| Total | $1,906.51 | ||||
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 | |
|---|---|---|---|---|
| Audrey Mueller | devin_west@gmail.com | West Loyal | Active | $647.31 |
| Paulette Raynor | vivianne_ziemann-konopelski@yahoo.com | New Veronaburgh | Inactive | $1,036.96 |
| Guy Gibson | marlee53@yahoo.com | Southaven | Inactive | $241.37 |
| Nick Leannon | rita_keebler@gmail.com | Kittyfield | Inactive | $553.12 |
| Geraldine Grant | eliza65@yahoo.com | Stammstead | Active | $1,026.08 |
| Byron Simonis | lionel_muller@hotmail.com | Lake Cadeton | Active | $1,084.97 |
| Rosa O'Connell | brannon.spencer27@gmail.com | Anastacioland | Inactive | $393.52 |
| Erick Dietrich | estel.zieme@yahoo.com | Macport | Active | $175.06 |
| Mr. Roman Cremin | leora.goyette88@hotmail.com | East Lamontworth | Inactive | $521.30 |
| Melody Haley | clement.kassulke13@hotmail.com | Willmston | Inactive | $36.22 |
| Homer Emard | coty_dickinson@hotmail.com | Springfield | Inactive | $1,076.93 |
| Julian Reichert | leila_terry76@gmail.com | Tillmanhaven | Active | $443.27 |
| Juanita Paucek | owen_ruecker@yahoo.com | Burke | Active | $193.94 |
| Raymond Lehner | yasmine_heidenreich@gmail.com | Carterview | Active | $843.04 |
| Sue Cronin | estelle.hudson@yahoo.com | West Lazaroview | Active | $304.43 |
| Total | $8,577.52 | |||
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 |