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 | Credit Card | $398.41 |
| INV002 | Pending | PayPal | $715.05 |
| INV003 | Paid | Bank Transfer | $694.90 |
| INV004 | Unpaid | Credit Card | $126.21 |
| INV005 | Paid | Credit Card | $358.85 |
| INV006 | Pending | PayPal | $969.94 |
| INV007 | Paid | Bank Transfer | $634.50 |
| Total | $3,897.86 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Keara Grady | Dynamic Mobility Liaison | keara.grady@gmail.com | Admin | |
| Cielo Goodwin | Regional Accountability Facilitator | cielo_goodwin@gmail.com | Member | |
| Jaiden Dickens | Regional Infrastructure Orchestrator | jaiden.dickens93@gmail.com | Admin | |
| Dusty Steuber | Investor Markets Assistant | dusty.steuber@gmail.com | Viewer | |
| Monica Kuvalis | Principal Quality Producer | monica_kuvalis52@gmail.com | Admin | |
| Ibrahim Zieme | Product Factors Technician | ibrahim_zieme@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 |
|---|---|---|
Mortimer Daniel-Orn International Factors Liaison mortimer_daniel-orn@yahoo.com | Admin | |
Alf Dickinson Corporate Functionality Architect alf_dickinson82@hotmail.com | Viewer | |
Destiney Gottlieb Product Functionality Coordinator destiney.gottlieb74@gmail.com | Viewer | |
Cale Reilly Regional Intranet Liaison cale_reilly19@yahoo.com | Viewer | |
Camilla Bartell Chief Quality Officer camilla_bartell@yahoo.com | Admin | |
Winfield Dibbert Regional Quality Liaison winfield_dibbert@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Erwin Reynolds Central Optimization Developer erwin.reynolds@hotmail.com | Member | |
Lina Dare Principal Security Planner lina_dare@gmail.com | Viewer | |
Christ Dare Forward Response Administrator christ_dare87@hotmail.com | Viewer | |
Mustafa Jerde Legacy Tactics Planner mustafa.jerde@hotmail.com | Viewer | |
Douglas Maggio National Security Liaison douglas.maggio96@hotmail.com | Member | |
Lue Connelly International Web Officer lue.connelly81@yahoo.com | Admin | |
Willy Swaniawski-Collins Forward Marketing Planner willy.swaniawski-collins@yahoo.com | Viewer | |
Bert Welch Regional Quality Engineer bert_welch@hotmail.com | Admin | |
Nash Spinka Chief Division Consultant nash.spinka@hotmail.com | Admin | |
Layla Becker Internal Accountability Agent layla_becker@hotmail.com | Member | |
Mikayla Fisher Human Quality Associate mikayla.fisher@gmail.com | Viewer | |
Jammie Koepp Investor Implementation Planner jammie.koepp@hotmail.com | Viewer | |
Juana Braun Investor Accountability Agent juana.braun@yahoo.com | Admin | |
Mateo Flatley International Communications Agent mateo_flatley@hotmail.com | Admin | |
Devante Auer District Assurance Assistant devante_auer@hotmail.com | Viewer | |
Americo Christiansen Legacy Response Technician americo.christiansen@yahoo.com | Viewer | |
Forest Jakubowski District Assurance Architect forest_jakubowski55@hotmail.com | Viewer | |
Makenna Reynolds Central Metrics Executive makenna_reynolds@gmail.com | Viewer | |
Jude Schneider Corporate Division Engineer jude_schneider26@gmail.com | Member | |
Hudson Gorczany Legacy Brand Developer hudson_gorczany5@yahoo.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 | |
|---|---|---|---|---|
| Lucas Jerde | cordelia_armstrong-howell@gmail.com | Ethelmouth | Inactive | $894.19 |
| Maggie Halvorson | nayeli_beier@yahoo.com | Greenwood | Active | $790.33 |
| Jaime Torphy | kiarra81@gmail.com | Marksboro | Inactive | $554.82 |
| Kayla Kiehn | angus_bernier49@yahoo.com | South Nettie | Active | $122.08 |
| Raul Kautzer | seth_hansen69@yahoo.com | East Kareemstead | Active | $808.26 |
| Total | $3,169.68 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Phillip Pouros @jalyn22 | bernardo59@gmail.com | New Orleans | Inactive | $709.79 |
Kim Schulist @gage.roob | darius.schowalter-cummerata7@hotmail.com | Wehnerworth | Active | $202.25 |
Ebony Wunsch @alexanne.schumm | stefanie_nader@gmail.com | Dulcebury | Active | $892.22 |
Ross Beahan @chadd.hermann | cierra37@gmail.com | Pfefferbury | Active | $23.79 |
Vivian Corwin @pink_brakus3 | murphy22@yahoo.com | Homenickport | Active | $392.01 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Luz Gusikowski Sr. | jennifer_anderson@hotmail.com | North Bessie | Inactive | $770.42 |
| Glenda Jacobs | dock_koss63@yahoo.com | Konopelskifurt | Active | $615.56 |
| Leon Parisian | deontae91@hotmail.com | Smithbury | Inactive | $473.64 |
| Christian Bernhard | constance29@gmail.com | Gilroy | Inactive | $563.19 |
| Mrs. Cassandra Stamm | blaze.cronin45@gmail.com | College Station | Active | $157.87 |
| Total | $2,580.68 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Winifred Hintz | retha_klocko@hotmail.com | East Israelbury | Inactive | $597.95 |
| Sabrina Monahan I | kaleb.spinka6@gmail.com | South Stephanieborough | Active | $105.18 |
| Kenny Pfeffer | orrin_flatley28@hotmail.com | Nathanaelstad | Active | $665.47 |
| Myrtle Kertzmann | darrion94@hotmail.com | South Adrianna | Active | $137.92 |
| Jan Farrell V | leone.gislason71@hotmail.com | Yundtland | Inactive | $181.31 |
| Total | $1,687.83 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Stewart Kshlerin-O'Hara II | allison_hoeger10@gmail.com | South Taylorview | Inactive | $485.67 |
| Hazel Weimann | alice81@hotmail.com | Leschchester | Active | $207.86 |
| Mary Stracke | michaela.little@hotmail.com | Ineschester | Active | $818.65 |
| Pat Gerhold | jo_hoeger33@yahoo.com | New Tessiebury | Active | $1,084.40 |
| Verna Stoltenberg | arielle_corkery64@yahoo.com | Chesleytown | Active | $618.89 |
| Total | $3,215.47 | |||
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 | ||
|---|---|---|---|---|---|
| Dr. Geneva Luettgen | eloise_fritsch@hotmail.com | Lake Kendall | Inactive | $78.72 | |
| Lester Denesik | orland_heidenreich@yahoo.com | Schummton | Active | $994.82 | |
| Edith Goyette I | irwin.paucek@hotmail.com | Southfield | Active | $942.88 | |
| Edna Raynor | collin4@gmail.com | East Alysonborough | Active | $778.62 | |
| Owen Goyette | ebba_strosin@gmail.com | Pontiac | Inactive | $543.67 | |
| Total | $3,338.71 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mable Runte | lonie42@yahoo.com | West Amparoberg | Active | $404.19 | |
| Kate Schumm | nicola.daugherty23@hotmail.com | North Alaynaland | Inactive | $410.09 | |
| Mr. Irving Leannon-Hyatt IV | daphney.sauer33@yahoo.com | Fort Kenton | Active | $994.75 | |
| Elisa Gorczany | yadira_zieme77@gmail.com | Oro Valley | Inactive | $804.63 | |
| Erika Lakin-Pollich | ted67@hotmail.com | Molliefort | Inactive | $798.67 | |
| Total | $3,412.33 | ||||
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 | |
|---|---|---|---|---|
| Brendan Towne | bette64@gmail.com | Apple Valley | Inactive | $1,002.97 |
| Jenna Brakus I | daphney43@hotmail.com | Port Violet | Inactive | $300.83 |
| Doug Carter | roselyn.quigley@gmail.com | Perris | Active | $121.71 |
| Max Schmitt | clovis_lowe64@hotmail.com | Hyattchester | Inactive | $120.08 |
| Garry Kutch | hubert_robel@gmail.com | Nitzscheport | Active | $4.22 |
| Rick McLaughlin | mandy44@gmail.com | West Rudolph | Active | $534.76 |
| Lorraine Pagac | marilou.reynolds21@hotmail.com | Jasonfort | Inactive | $534.02 |
| Mattie Sauer | darrick_torp15@hotmail.com | South Fionaport | Active | $700.98 |
| Kathryn Torphy | rey.bergstrom42@hotmail.com | Elzastead | Active | $728.94 |
| Daisy Bradtke | shemar_volkman@yahoo.com | Kasandrastead | Inactive | $935.17 |
| Travis Hyatt IV | laura40@gmail.com | Oro Valley | Inactive | $350.83 |
| Tommy Hyatt | christian_rau7@yahoo.com | East Adonis | Inactive | $637.58 |
| Debbie Waters | gisselle.herman@gmail.com | Lake Edgardo | Active | $310.38 |
| Edna Gislason | chandler.howe@gmail.com | Tucson | Inactive | $910.21 |
| Israel Anderson | darrick_schaefer@gmail.com | West Santinoville | Active | $798.51 |
| Total | $7,991.19 | |||
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 |