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 | $271.77 |
| INV002 | Pending | Credit Card | $937.35 |
| INV003 | Pending | Credit Card | $256.33 |
| INV004 | Unpaid | Bank Transfer | $666.48 |
| INV005 | Unpaid | Bank Transfer | $874.81 |
| INV006 | Paid | PayPal | $995.09 |
| INV007 | Pending | PayPal | $846.53 |
| Total | $4,848.36 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Corbin Langosh | Lead Marketing Developer | corbin.langosh@hotmail.com | Admin | |
| Simeon Flatley | Lead Intranet Assistant | simeon_flatley13@yahoo.com | Viewer | |
| Maximillian Hahn | Direct Usability Officer | maximillian_hahn@hotmail.com | Member | |
| Xavier Hickle | Customer Security Coordinator | xavier_hickle@gmail.com | Viewer | |
| Carlie Anderson | District Implementation Analyst | carlie.anderson@hotmail.com | Admin | |
| Andres Ullrich | National Creative Liaison | andres_ullrich17@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 |
|---|---|---|
Beulah Wiza District Factors Orchestrator beulah_wiza28@yahoo.com | Admin | |
Kaycee Gutkowski-Herzog Lead Branding Coordinator kaycee.gutkowski-herzog51@gmail.com | Viewer | |
Dayna Johnson Product Group Director dayna_johnson73@yahoo.com | Admin | |
Yessenia Leffler Global Infrastructure Manager yessenia.leffler27@hotmail.com | Admin | |
Verda Crona National Interactions Engineer verda_crona29@hotmail.com | Viewer | |
Rodolfo Erdman Lead Creative Orchestrator rodolfo_erdman31@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Shanel Corkery Senior Accountability Officer shanel_corkery35@yahoo.com | Admin | |
Kenneth Labadie Senior Accountability Supervisor kenneth_labadie12@yahoo.com | Admin | |
Rico Dach Forward Program Director rico_dach82@hotmail.com | Member | |
Quinton Wehner Human Directives Analyst quinton.wehner@hotmail.com | Admin | |
Rylee Langosh Internal Assurance Strategist rylee_langosh@gmail.com | Member | |
Myrtice Trantow Investor Data Facilitator myrtice_trantow@yahoo.com | Admin | |
Sophie Jenkins Corporate Identity Coordinator sophie_jenkins@yahoo.com | Viewer | |
Vicky Hammes District Directives Orchestrator vicky.hammes85@hotmail.com | Viewer | |
Nathen Waelchi Global Functionality Producer nathen_waelchi10@gmail.com | Viewer | |
Bradford Kuphal Central Security Agent bradford.kuphal@yahoo.com | Member | |
Bernadette Rohan Lead Functionality Liaison bernadette.rohan@gmail.com | Admin | |
Freda Conn Investor Configuration Developer freda_conn@yahoo.com | Admin | |
Elody Feil National Factors Designer elody.feil75@yahoo.com | Member | |
Meghan Kreiger District Brand Executive meghan.kreiger65@hotmail.com | Member | |
Cordelia Stiedemann Forward Functionality Liaison cordelia_stiedemann22@yahoo.com | Admin | |
Magnolia Walter National Paradigm Engineer magnolia_walter87@hotmail.com | Viewer | |
Keshawn Lindgren International Factors Orchestrator keshawn_lindgren27@gmail.com | Member | |
Nedra Schiller Regional Quality Analyst nedra.schiller2@hotmail.com | Admin | |
Kamron Nader Forward Accountability Architect kamron_nader@gmail.com | Viewer | |
Daren Aufderhar Lead Quality Liaison daren.aufderhar19@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 | |
|---|---|---|---|---|
| Lucia Kuhn | oswaldo.schroeder@yahoo.com | South Nyahport | Inactive | $259.28 |
| Jose Bailey | jettie.gutkowski@hotmail.com | Brookhaven | Inactive | $68.83 |
| Sarah Jast | allan.kuhlman88@gmail.com | Hicksville | Active | $114.53 |
| Chad Auer | cheyenne92@gmail.com | Carmelafort | Inactive | $1,031.38 |
| Doyle Reichel | assunta_lehner@gmail.com | Mullerborough | Active | $644.15 |
| Total | $2,118.17 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Iris Ullrich @stan_zboncak33 | elton.hermann@yahoo.com | Port Bettiecester | Inactive | $555.04 |
Mario Carter @antonette40 | luther54@yahoo.com | St. Paul | Inactive | $676.70 |
Orlando DuBuque @dayana_lind | shea.littel@hotmail.com | Port Amely | Active | $398.92 |
Tommie Schuppe @mason_harber64 | germaine.dickens@gmail.com | Trompstead | Active | $291.10 |
Leona Daugherty IV @carson66 | laverna_sipes@gmail.com | Ebertton | Inactive | $348.58 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leo Dach | rolando.ernser@yahoo.com | Bryonchester | Active | $265.04 |
| Elvira Greenholt | ahmed_nienow@yahoo.com | Sisterstad | Active | $108.87 |
| Elizabeth Flatley | jarred_bergstrom@hotmail.com | New Lambertmouth | Active | $668.46 |
| Douglas Luettgen | clarissa.anderson18@gmail.com | West Jamelton | Inactive | $549.95 |
| Krystal Dach | edison_schaefer@yahoo.com | High Point | Active | $665.03 |
| Total | $2,257.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Miss Doris Stracke | jed.berge@gmail.com | Dillonchester | Active | $262.13 |
| Brad McLaughlin | triston.connelly48@hotmail.com | Deonworth | Active | $21.04 |
| Erin Lindgren | sherman.kilback-beer20@yahoo.com | Kuvalisland | Active | $289.83 |
| Desiree Thompson | therese15@gmail.com | Mooreshire | Active | $202.42 |
| Rose Lebsack | anais_kuphal@gmail.com | Albany | Active | $543.61 |
| Total | $1,319.03 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dewey Marks | destini_leuschke81@yahoo.com | South Gregoriafort | Inactive | $485.48 |
| Sue Kub | allen_jones@yahoo.com | Stammborough | Active | $636.68 |
| Mr. Winston Crist | joanie_berge@yahoo.com | New Augustusborough | Inactive | $429.20 |
| Fernando Daniel | audreanne48@hotmail.com | Lake Mitchellcester | Active | $508.52 |
| Gilberto Feeney IV | vivianne33@yahoo.com | West Jessicacester | Inactive | $968.18 |
| Total | $3,028.06 | |||
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 | ||
|---|---|---|---|---|---|
| Stewart Davis | vivian.ohara11@gmail.com | Wilmerstead | Active | $225.44 | |
| Maureen Herzog | adan.smith@yahoo.com | West Pearlineberg | Inactive | $531.59 | |
| Armando Koelpin MD | william30@yahoo.com | Murray | Active | $1,070.13 | |
| Moses Pacocha | ethel_parisian@gmail.com | Port Kristycester | Active | $613.57 | |
| Mr. Andrew Reynolds | kaitlin.mills88@gmail.com | South Cotyland | Active | $143.29 | |
| Total | $2,584.02 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Gwendolyn Christiansen DVM | pedro89@yahoo.com | Rennerbury | Active | $295.97 | |
| Jennifer O'Keefe | nathanial.doyle53@hotmail.com | Port Nannieton | Inactive | $876.84 | |
| Mr. Gordon Franey | jedediah83@gmail.com | Binsfurt | Active | $1,199.92 | |
| Lola Halvorson | retta50@yahoo.com | Kaitlynview | Active | $727.45 | |
| Gabriel Carroll | roderick_ebert14@yahoo.com | Octaviacester | Inactive | $967.27 | |
| Total | $4,067.45 | ||||
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. Gail Baumbach | sibyl_nienow76@yahoo.com | Moriahton | Inactive | $73.33 |
| Mrs. Naomi Wehner | alanna60@hotmail.com | Budfield | Active | $1,196.78 |
| Phyllis Kiehn | danny_smith@hotmail.com | Koeppfield | Active | $148.87 |
| Crystal Goodwin | hertha_lakin92@yahoo.com | Nehashire | Inactive | $732.02 |
| Sylvester Jaskolski I | trever.stanton@hotmail.com | Candelariofort | Inactive | $1,137.48 |
| Olive Tremblay | hyman.watsica@gmail.com | Santa Rosa | Active | $1,094.76 |
| Viola Hayes | emmy.bernier20@hotmail.com | Weberstead | Inactive | $963.38 |
| Ms. Christine Wisozk | jarvis.hintz@yahoo.com | Fort Dolly | Active | $421.30 |
| Tammy Block | eldora_carroll@yahoo.com | Albany | Inactive | $230.78 |
| Nelson Hartmann | gerardo_ritchie60@yahoo.com | Aliviafield | Active | $118.95 |
| Felix Okuneva | tyrell62@gmail.com | Fort Odessaton | Active | $1,062.56 |
| Dora Langworth | delbert_mcclure@gmail.com | Port Alecberg | Active | $991.23 |
| Carroll Hermann PhD | abbey.watsica74@hotmail.com | New Ferne | Active | $725.78 |
| Ms. Guadalupe Harris | verna_maggio@hotmail.com | Doyleshire | Inactive | $855.30 |
| Alex Watsica Jr. | leonardo38@yahoo.com | West Edgardofort | Active | $1,004.08 |
| Total | $10,756.60 | |||
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 |