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 | $784.25 |
| INV002 | Unpaid | Credit Card | $427.77 |
| INV003 | Pending | Credit Card | $271.24 |
| INV004 | Unpaid | PayPal | $467.26 |
| INV005 | Unpaid | Credit Card | $979.81 |
| INV006 | Pending | PayPal | $260.82 |
| INV007 | Paid | PayPal | $143.57 |
| Total | $3,334.72 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Gudrun Wisoky | District Communications Coordinator | gudrun.wisoky@yahoo.com | Admin | |
| Alfonso Wehner | Corporate Infrastructure Director | alfonso.wehner@hotmail.com | Member | |
| Marlin Muller | Regional Assurance Technician | marlin_muller@gmail.com | Viewer | |
| Corene Ullrich | Customer Division Designer | corene.ullrich95@gmail.com | Viewer | |
| Gabriella Dickens | Regional Research Executive | gabriella.dickens@yahoo.com | Admin | |
| Bessie Labadie | Central Tactics Orchestrator | bessie_labadie@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 |
|---|---|---|
Gerard Rogahn Dynamic Communications Manager gerard_rogahn93@hotmail.com | Viewer | |
Cielo Mayer Product Communications Architect cielo.mayer@gmail.com | Viewer | |
Alyce Koss International Configuration Strategist alyce.koss32@yahoo.com | Viewer | |
Sheridan Crooks National Functionality Assistant sheridan.crooks76@gmail.com | Admin | |
Nels Bogan International Web Facilitator nels.bogan@yahoo.com | Admin | |
Werner Toy Product Mobility Strategist werner.toy@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kristian Conroy Central Marketing Designer kristian_conroy@hotmail.com | Viewer | |
Pablo Gorczany Senior Implementation Liaison pablo.gorczany@gmail.com | Viewer | |
Martine Schuppe International Integration Officer martine_schuppe@gmail.com | Admin | |
Willa Cummings Product Brand Associate willa_cummings30@hotmail.com | Admin | |
Dawn Adams Direct Functionality Representative dawn.adams79@gmail.com | Member | |
Marcelino Borer Dynamic Usability Assistant marcelino_borer8@gmail.com | Admin | |
Bridie Frami International Solutions Architect bridie.frami@yahoo.com | Member | |
Johnnie Orn Legacy Directives Designer johnnie_orn@yahoo.com | Viewer | |
Eric Hickle Future Tactics Analyst eric_hickle68@yahoo.com | Member | |
Jazmyne Kemmer District Infrastructure Agent jazmyne_kemmer7@hotmail.com | Viewer | |
Jaron Rolfson Legacy Group Agent jaron.rolfson@gmail.com | Viewer | |
Shyanne Buckridge Product Applications Specialist shyanne_buckridge@yahoo.com | Admin | |
Rosalinda Considine Chief Configuration Strategist rosalinda.considine63@hotmail.com | Viewer | |
Nichole Leannon Lead Quality Analyst nichole_leannon@yahoo.com | Viewer | |
Gia Kulas Internal Intranet Technician gia.kulas86@hotmail.com | Member | |
Elwyn Stark Human Marketing Facilitator elwyn.stark@hotmail.com | Admin | |
Eulah Feeney National Accountability Designer eulah.feeney29@yahoo.com | Admin | |
Vincenza Green Investor Group Strategist vincenza.green57@hotmail.com | Member | |
Myrna O'Reilly Central Creative Executive myrna.oreilly40@hotmail.com | Viewer | |
Magdalen Harvey Human Markets Orchestrator magdalen.harvey@hotmail.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 | |
|---|---|---|---|---|
| Frederick Quitzon | mary_pacocha@gmail.com | Gulgowskiton | Inactive | $894.50 |
| Darnell Bayer V | edwina.kunze@gmail.com | Albuquerque | Inactive | $456.84 |
| Manuel Dare | alexandro.walter@gmail.com | Bradleymouth | Inactive | $1,188.65 |
| Duane Bosco | lucy.purdy43@gmail.com | Ricetown | Active | $1,054.83 |
| Dr. Kristi Ryan | carolanne.jenkins17@hotmail.com | Fort Santinochester | Active | $702.65 |
| Total | $4,297.47 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Gregg Hilpert DVM @marie_legros | allan35@hotmail.com | Sydnieborough | Active | $1,116.65 |
Claire Trantow @bradley_schumm | king_williamson38@yahoo.com | Riverview | Active | $303.31 |
Sherman Dickinson @wilbert_conroy | amara.wuckert77@yahoo.com | South Ahmedview | Inactive | $59.68 |
Dr. Leroy Parisian @larue_stroman | erica_oconner@gmail.com | Muncie | Active | $947.28 |
Casey Bechtelar @kailey_quitzon | elisha_hilll@gmail.com | Goldnerhaven | Active | $467.54 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Shane Aufderhar | maximo_macgyver62@yahoo.com | Harveyborough | Active | $624.37 |
| Levi Lehner | hattie_smitham16@gmail.com | Brekketown | Active | $688.54 |
| Carroll Lowe | trycia15@gmail.com | Fort Ryleigh | Inactive | $1,117.13 |
| Mae Heller | mireille_damore@gmail.com | Satterfieldville | Active | $787.34 |
| Reginald Jacobi | wilson_leffler@gmail.com | Blandahaven | Active | $934.05 |
| Total | $4,151.43 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elisa Schinner Sr. | hosea.hammes@hotmail.com | Koelpincester | Active | $1,193.51 |
| Ryan Raynor | cale96@yahoo.com | Fort Annabellstad | Active | $103.50 |
| Dawn Johnson-Kub | rebeca_daugherty@hotmail.com | East Roslyn | Active | $364.52 |
| Stuart Simonis | roger56@hotmail.com | Lynchburg | Active | $1,120.98 |
| Sabrina Reynolds Jr. | janie33@yahoo.com | East Aminahaven | Active | $1,169.47 |
| Total | $3,951.98 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Patricia Block | claudine_ryan47@yahoo.com | South Rodolfoworth | Active | $924.98 |
| Alejandro Gusikowski Sr. | kasey23@gmail.com | New Garth | Active | $5.46 |
| Jerry Rice | magnus41@yahoo.com | Pearland | Inactive | $237.26 |
| Miss Marcella Sporer | zola11@hotmail.com | Fort Aliciastead | Inactive | $1,193.96 |
| Moses Jacobs | leonard.bruen@yahoo.com | Letaside | Active | $49.44 |
| Total | $2,411.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 | ||
|---|---|---|---|---|---|
| Shannon Tillman | ambrose53@hotmail.com | Blacksburg | Active | $1,091.40 | |
| Dr. Alberto Ritchie | amelia_ankunding58@gmail.com | New Larryview | Active | $121.36 | |
| Agnes Bartoletti | werner.dicki94@gmail.com | Port Nina | Inactive | $548.24 | |
| Elsa Hessel | sheridan47@gmail.com | New Juliostad | Active | $759.97 | |
| Lorenzo Sanford | ignatius_feeney@yahoo.com | McGlynnport | Active | $656.07 | |
| Total | $3,177.04 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Juanita Fritsch | efren.buckridge50@yahoo.com | Julianport | Inactive | $833.51 | |
| Marie Wintheiser | markus21@gmail.com | Moniquetown | Active | $580.84 | |
| Joanne DuBuque-Kessler | burley.reichel5@hotmail.com | East Elouise | Active | $49.21 | |
| Mr. Sergio Casper | raina.balistreri@yahoo.com | North Willaport | Active | $18.56 | |
| Colin Kautzer | janet_bahringer@gmail.com | Port Coryfield | Inactive | $196.37 | |
| Total | $1,678.49 | ||||
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 | |
|---|---|---|---|---|
| Jaime Goldner | ian17@yahoo.com | North Kaileefurt | Active | $106.02 |
| Erma Schmitt | maggie_johns73@hotmail.com | Salem | Inactive | $592.10 |
| Mr. Orlando Quitzon | hilma59@gmail.com | Elizabeth | Inactive | $935.63 |
| Felipe Bergnaum | zion.towne@yahoo.com | South Rosetta | Active | $745.51 |
| Priscilla Effertz | kallie.ernser@gmail.com | North Sethport | Inactive | $313.61 |
| Andrea Casper | rachelle.murray24@gmail.com | Fort Nicoview | Inactive | $463.16 |
| Edward Bashirian | hermina.torp7@gmail.com | Fort Jonathanmouth | Inactive | $2.79 |
| Mrs. Rhonda Greenholt | oswaldo.zemlak15@yahoo.com | Genevieveside | Active | $1,024.45 |
| Saul Aufderhar DDS | jerel75@gmail.com | Fordmouth | Inactive | $110.78 |
| Virginia Ruecker | okey98@hotmail.com | East Cordeliaside | Active | $705.48 |
| Daniel Collier | priscilla_vandervort81@gmail.com | North Rainabury | Active | $653.86 |
| Calvin Daniel | colby.hickle@hotmail.com | Port Jamirport | Inactive | $318.03 |
| Charlotte Ankunding | mariane34@hotmail.com | East Broderickshire | Inactive | $831.17 |
| Connie Walker-Abbott | francesco.waters@hotmail.com | Starkfurt | Inactive | $1,065.43 |
| Daniel Ratke-Ebert | pattie.gleason@hotmail.com | Sporerboro | Inactive | $119.00 |
| Total | $7,987.02 | |||
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 |