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 | $804.46 |
| INV002 | Unpaid | Credit Card | $640.99 |
| INV003 | Pending | PayPal | $706.34 |
| INV004 | Pending | PayPal | $755.01 |
| INV005 | Paid | Bank Transfer | $732.44 |
| INV006 | Unpaid | Bank Transfer | $164.10 |
| INV007 | Pending | Bank Transfer | $776.41 |
| Total | $4,579.75 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Harvey Jones | Lead Intranet Developer | harvey_jones39@gmail.com | Member | |
| Christina Orn | Lead Creative Consultant | christina.orn39@yahoo.com | Viewer | |
| Ramona Barrows | National Identity Specialist | ramona_barrows@yahoo.com | Admin | |
| Larry Abernathy | Investor Division Specialist | larry_abernathy76@gmail.com | Admin | |
| Clyde Baumbach | Regional Marketing Specialist | clyde.baumbach@yahoo.com | Member | |
| Earl McClure | Direct Marketing Executive | earl_mcclure73@gmail.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 |
|---|---|---|
Colby Prohaska Regional Optimization Planner colby.prohaska79@gmail.com | Admin | |
Maida Wehner Corporate Security Architect maida.wehner34@yahoo.com | Member | |
Elsie Stroman Regional Interactions Assistant elsie.stroman@gmail.com | Viewer | |
Janie Glover Investor Quality Architect janie.glover43@gmail.com | Member | |
Alana Sporer International Mobility Facilitator alana.sporer59@gmail.com | Viewer | |
Erika Hauck Dynamic Accountability Producer erika_hauck@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 |
|---|---|---|
Logan Gusikowski Corporate Research Coordinator logan.gusikowski20@hotmail.com | Member | |
Justina Grady Principal Research Manager justina_grady58@gmail.com | Viewer | |
Marques Krajcik International Data Associate marques.krajcik1@yahoo.com | Viewer | |
Albin Hermann Dynamic Operations Analyst albin.hermann@yahoo.com | Member | |
Jody Murphy Dynamic Quality Specialist jody_murphy@gmail.com | Viewer | |
Wallace Adams Product Intranet Officer wallace.adams@yahoo.com | Viewer | |
Sophie Koss District Tactics Assistant sophie_koss69@hotmail.com | Admin | |
Nancy Kerluke International Metrics Consultant nancy_kerluke@yahoo.com | Member | |
Clement Oberbrunner Investor Functionality Associate clement.oberbrunner13@gmail.com | Admin | |
Lessie Durgan Dynamic Optimization Agent lessie.durgan61@yahoo.com | Admin | |
Nakia Shanahan Corporate Configuration Supervisor nakia_shanahan@yahoo.com | Viewer | |
Alma Fadel District Mobility Strategist alma_fadel@gmail.com | Member | |
Hal Hoeger Forward Directives Assistant hal.hoeger@hotmail.com | Member | |
Jessica Bins International Data Executive jessica.bins73@yahoo.com | Viewer | |
Orville Corkery Chief Infrastructure Technician orville_corkery26@gmail.com | Member | |
Bridget Dach-Toy Future Identity Specialist bridget_dach-toy77@yahoo.com | Member | |
Phyllis Friesen Corporate Operations Consultant phyllis_friesen74@yahoo.com | Member | |
Jeffrey Bahringer National Creative Engineer jeffrey.bahringer39@hotmail.com | Member | |
Tiffany Walker Customer Program Director tiffany_walker@yahoo.com | Admin | |
Alicia Wisozk Product Group Planner alicia_wisozk@hotmail.com | Member |
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 | |
|---|---|---|---|---|
| Ferne Abernathy | eileen_feeney@hotmail.com | Adamsmouth | Active | $265.50 |
| Arvilla Cummings | lowell83@gmail.com | South Christa | Active | $953.28 |
| Roman Lehner V | aiden_renner44@hotmail.com | Halvorsonside | Active | $468.57 |
| Jordane Jast | claire.casper@gmail.com | Fort Freeda | Inactive | $848.53 |
| Grover Huel | dominic84@gmail.com | Ferrytown | Active | $611.41 |
| Total | $3,147.29 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Dr. Vena Schuster @elizabeth69 | jovany3@hotmail.com | Rio Rancho | Active | $582.17 |
Mrs. Judy Rice @diego_vonrueden21 | leo41@hotmail.com | Brownbury | Active | $1,136.22 |
Doug Dickinson @clementina.schiller56 | hazel96@gmail.com | Emmetcester | Inactive | $261.23 |
Kevin Feeney @sandrine.baumbach | paul78@gmail.com | Pico Rivera | Inactive | $90.79 |
Angel Weimann @evert_kozey-okuneva93 | becky.fritsch@hotmail.com | Quincyberg | Active | $1,020.83 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Troy Rempel | kelley15@hotmail.com | Tuckahoe | Inactive | $830.40 |
| Gabriel Schaden | leann43@hotmail.com | South Oswaldofurt | Active | $586.39 |
| Chelsea Hessel | dorothy.fisher@yahoo.com | Margarettetown | Inactive | $1,121.42 |
| Mr. Verna Reinger | andre14@gmail.com | East Khalid | Inactive | $557.22 |
| Ward Wintheiser | jennie_williamson@yahoo.com | Stoltenbergchester | Active | $603.55 |
| Total | $3,698.98 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Stewart Ebert | kristy.kuhn30@hotmail.com | Fort Jabari | Inactive | $1,143.16 |
| Destinee Schamberger-Dach | aylin42@hotmail.com | Rosenbaumburgh | Inactive | $26.23 |
| Rhonda Davis | marisa.nicolas@gmail.com | North Raleighfield | Inactive | $150.92 |
| Remington Homenick V | oran46@gmail.com | Waterbury | Inactive | $386.49 |
| Ricky Abshire | nancy_hahn@yahoo.com | Jenkinshaven | Inactive | $705.00 |
| Total | $2,411.80 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Damon Kunde | alta35@hotmail.com | North Myahton | Active | $1,030.99 |
| Leonor Purdy | jazmin_kub21@hotmail.com | Fort Carmelo | Active | $1,177.53 |
| Darrel Konopelski | crystal_price@yahoo.com | Lake Brian | Inactive | $818.61 |
| Stan Parker | reynold96@gmail.com | Joshuafurt | Active | $115.88 |
| Alejandro Keebler | barry_schiller81@hotmail.com | Port Assunta | Inactive | $745.45 |
| Total | $3,888.46 | |||
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 | ||
|---|---|---|---|---|---|
| Cornelius Barton | gwendolyn.hagenes@yahoo.com | Woodland | Inactive | $20.45 | |
| Rogelio Blick | henri_reilly@yahoo.com | Abdielland | Active | $1,160.39 | |
| Delbert Kirlin | jayson_larson@yahoo.com | Fort Juvenalfield | Inactive | $844.29 | |
| Dr. Harmon Koss-Lowe | lydia.smitham@gmail.com | Leeport | Active | $285.54 | |
| Gerald Senger | jeanie38@gmail.com | Sylvanview | Inactive | $175.23 | |
| Total | $2,485.90 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Eunice Russel | felix_steuber@gmail.com | West Haven | Active | $986.21 | |
| Cesar Dickinson | davon_brekke@yahoo.com | Lacey | Inactive | $262.10 | |
| Hazel Jenkins | anita.rodriguez50@hotmail.com | Palm Beach Gardens | Inactive | $505.02 | |
| Rex Kuhic | sabryna.sawayn@gmail.com | Claudinechester | Inactive | $603.27 | |
| Kelsi Hoeger | daren_lockman63@hotmail.com | Franciscofield | Inactive | $444.27 | |
| Total | $2,800.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 | |
|---|---|---|---|---|
| Lela Cormier | darryl_marks@yahoo.com | New Newton | Inactive | $262.38 |
| Dave Kautzer | forrest_lehner98@yahoo.com | Altenwerthton | Active | $123.51 |
| Gene Kuhn | danny_fahey89@gmail.com | Thornton | Active | $745.20 |
| Imogene Collier | buck.waelchi40@gmail.com | Marjoryborough | Active | $516.31 |
| Ernestine Kuhic | leora21@gmail.com | Davisport | Inactive | $1,142.09 |
| Yvonne Tromp | hugh.conn@gmail.com | Lilianabury | Active | $596.58 |
| Mr. Ted O'Keefe | garrett35@hotmail.com | Jesusfield | Inactive | $445.88 |
| Vanessa Reichel | robin14@gmail.com | Port Landenport | Inactive | $459.43 |
| Iris Thompson | rosa45@gmail.com | South Edison | Active | $26.77 |
| Constance Purdy | catherine.howell62@hotmail.com | West Chadrickbury | Inactive | $506.22 |
| Myra Osinski | lynne96@gmail.com | Carlottabury | Inactive | $305.67 |
| Tamia Waelchi | mary7@yahoo.com | Sunnyvale | Active | $646.30 |
| Etha Kerluke | lafayette27@gmail.com | Urbana | Active | $480.16 |
| Victoria Gleason | andre_prohaska@hotmail.com | North Felipa | Active | $721.99 |
| Pete Jenkins DDS | charlotte.bradtke19@hotmail.com | Lake Sincere | Active | $28.62 |
| Total | $7,007.11 | |||
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 |