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 | PayPal | $982.41 |
| INV002 | Pending | PayPal | $622.66 |
| INV003 | Pending | Credit Card | $111.24 |
| INV004 | Paid | Credit Card | $331.00 |
| INV005 | Pending | Bank Transfer | $545.47 |
| INV006 | Paid | PayPal | $307.70 |
| INV007 | Unpaid | Credit Card | $157.37 |
| Total | $3,057.85 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Osbaldo D'Amore | Chief Interactions Liaison | osbaldo_damore81@hotmail.com | Admin | |
| Cierra Kunde | Legacy Factors Administrator | cierra.kunde73@yahoo.com | Member | |
| Claudia Casper | Future Group Director | claudia.casper@gmail.com | Member | |
| Alford Armstrong | Internal Tactics Coordinator | alford_armstrong@hotmail.com | Viewer | |
| Dexter Ankunding | Forward Usability Executive | dexter.ankunding88@hotmail.com | Admin | |
| Naomie Daugherty | Central Metrics Consultant | naomie.daugherty@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 |
|---|---|---|
Frieda Corwin Human Communications Engineer frieda_corwin81@hotmail.com | Viewer | |
Preston Veum Dynamic Assurance Supervisor preston.veum92@yahoo.com | Member | |
Paxton Hartmann Investor Intranet Associate paxton_hartmann82@yahoo.com | Viewer | |
Elliot Witting Lead Research Administrator elliot_witting@yahoo.com | Admin | |
Colton Rice Future Tactics Executive colton.rice69@yahoo.com | Viewer | |
Trevor Runolfsdottir Central Group Officer trevor_runolfsdottir90@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 |
|---|---|---|
Scarlett Schmidt Customer Solutions Specialist scarlett.schmidt@hotmail.com | Admin | |
Syble Runte National Accountability Strategist syble_runte41@yahoo.com | Member | |
Dorthy Williamson National Integration Strategist dorthy.williamson@hotmail.com | Member | |
Kelly Wyman Customer Infrastructure Facilitator kelly.wyman@gmail.com | Viewer | |
Edmund Casper-King Central Division Specialist edmund.casper-king65@gmail.com | Member | |
Kamryn Mante Global Group Specialist kamryn_mante12@yahoo.com | Admin | |
Halle Miller Future Assurance Manager halle_miller12@yahoo.com | Member | |
Shaun Brakus Lead Functionality Planner shaun_brakus@yahoo.com | Viewer | |
Frederick Rodriguez Internal Intranet Specialist frederick_rodriguez14@hotmail.com | Viewer | |
Rashad Robel Product Accounts Technician rashad_robel40@yahoo.com | Viewer | |
Joey Parisian International Assurance Specialist joey.parisian92@gmail.com | Admin | |
Madaline Deckow Future Accounts Executive madaline_deckow25@gmail.com | Viewer | |
Mathias Rau Central Quality Orchestrator mathias.rau@gmail.com | Member | |
Zoey Ankunding International Factors Technician zoey.ankunding@yahoo.com | Admin | |
Kellen Corkery Chief Response Producer kellen_corkery@gmail.com | Member | |
Joannie Kovacek Corporate Directives Associate joannie_kovacek@gmail.com | Viewer | |
Laurine Vandervort Lead Quality Specialist laurine.vandervort@yahoo.com | Viewer | |
Gaetano Kilback Internal Tactics Director gaetano.kilback@hotmail.com | Viewer | |
Sophia Haag Lead Group Analyst sophia_haag@hotmail.com | Member | |
Kristin Veum Regional Division Producer kristin.veum@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 | |
|---|---|---|---|---|
| Mr. Woodrow Predovic | lew79@hotmail.com | Jenkinsstad | Inactive | $721.43 |
| Marcia Bosco | vince.murphy@gmail.com | Ricochester | Inactive | $68.26 |
| Melissa Thompson | deontae55@yahoo.com | New Haven | Inactive | $13.73 |
| Lillie Von | earnestine_keeling84@gmail.com | South Alivia | Inactive | $1,083.81 |
| Woodrow Rempel II | mia_kunze15@hotmail.com | Bauchside | Active | $81.87 |
| Total | $1,969.10 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Timothy Jacobi @kayden_weber68 | luther.howe@yahoo.com | Smithton | Active | $194.47 |
Tracy Casper-Senger @esperanza.littel | allen.hudson32@gmail.com | Florence-Graham | Active | $517.74 |
Alexandra Roberts @caesar_fadel78 | mara.spencer@gmail.com | Gibsonfurt | Active | $145.05 |
Eddie Rutherford @wallace97 | easter_keebler@yahoo.com | West Briancester | Inactive | $6.73 |
Vicki Wintheiser-Hegmann @deshawn29 | emory_abernathy@hotmail.com | Kozeyview | Inactive | $562.29 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kristy Berge Jr. | pedro80@gmail.com | Emmittshire | Inactive | $1,015.05 |
| Regina Fadel | lambert.schmidt@hotmail.com | El Paso | Active | $966.22 |
| Bernice Kemmer | alden_beahan@gmail.com | Robeltown | Active | $669.67 |
| Pedro Kuhic IV | hector.stamm78@yahoo.com | Wainotown | Inactive | $692.69 |
| Jake Kuhlman III | amya_aufderhar@hotmail.com | Port Fredy | Inactive | $424.06 |
| Total | $3,767.69 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kevin Balistreri | noble.schaden@gmail.com | Rayfurt | Inactive | $911.30 |
| Marlene Stroman | rickie.oconner@gmail.com | New Omer | Active | $677.43 |
| Joyce Maggio | ole_gottlieb@yahoo.com | Gloriahaven | Inactive | $983.67 |
| Howard Moore | cassandra.farrell@gmail.com | Port Colemanbury | Active | $277.55 |
| Desiree Ernser-Ruecker IV | danny_walter16@gmail.com | Port Jena | Inactive | $837.63 |
| Total | $3,687.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wendy Marvin | jenifer30@gmail.com | South Modesta | Active | $145.43 |
| Lauren Harber Sr. | chyna8@yahoo.com | South Samsontown | Active | $1,169.56 |
| Rachael Rohan | mozelle.kshlerin@yahoo.com | Fadelstead | Active | $487.28 |
| Jackie Thompson | isabel_price90@hotmail.com | Port Bernadine | Active | $215.84 |
| Alejandro Schimmel | kody59@gmail.com | Gibsonshire | Inactive | $422.13 |
| Total | $2,440.24 | |||
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 | ||
|---|---|---|---|---|---|
| Billie Mueller | walter_jacobs17@hotmail.com | Marcelland | Active | $842.78 | |
| Meredith Zemlak | stacey_gleason65@gmail.com | Nienowstead | Inactive | $167.78 | |
| Arnold Corwin | halie.predovic70@gmail.com | Everettboro | Active | $408.47 | |
| Manuel Hackett | arlie_schimmel2@yahoo.com | Breitenbergfurt | Inactive | $782.61 | |
| Walter Roob | nathanial8@yahoo.com | Racine | Inactive | $202.98 | |
| Total | $2,404.62 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Elisa Ratke | beverly.nitzsche70@yahoo.com | Lake Esperanza | Inactive | $471.41 | |
| Julia Nicolas | coy83@hotmail.com | Margate | Inactive | $330.78 | |
| Dwayne Emard | scot80@gmail.com | Kertzmannbury | Active | $645.94 | |
| Glenn Davis | jazmin.schultz21@yahoo.com | Amiehaven | Active | $781.05 | |
| Jackie Graham | cullen.keebler49@gmail.com | Gibsonboro | Inactive | $269.34 | |
| Total | $2,498.52 | ||||
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 | |
|---|---|---|---|---|
| Mona Fritsch | sanford.schinner74@yahoo.com | South Waldo | Inactive | $1,158.52 |
| Mr. Nicolas Marks | keshawn2@yahoo.com | Port Rodrickbury | Active | $957.76 |
| Dr. Earnest Farrell IV | hermina_purdy75@yahoo.com | Miltonworth | Active | $752.92 |
| Seth Considine | cicero_kautzer39@yahoo.com | Altamonte Springs | Active | $1,119.72 |
| Leo Considine | lora.nitzsche@yahoo.com | Lake Tadcester | Active | $376.12 |
| Ian Kiehn | shanon_huels5@hotmail.com | Gardena | Inactive | $153.29 |
| Everett O'Conner | brenna_swift@gmail.com | O'Reillyview | Inactive | $1,143.71 |
| Myrtle Zboncak | jevon_waelchi99@gmail.com | Port Jeremy | Active | $1,044.15 |
| Dr. Benjamin Toy | claudie.effertz@hotmail.com | Allen | Inactive | $975.98 |
| Doreen Windler | nestor.ziemann@gmail.com | North Amaliaton | Active | $1,059.32 |
| Patsy O'Keefe | taurean.rohan60@gmail.com | Samanthaside | Inactive | $935.22 |
| Michele Goodwin | susana.barton@gmail.com | Treutelside | Inactive | $736.71 |
| Stacy Hayes | robyn_crooks53@gmail.com | Torpbury | Active | $800.90 |
| Clinton Crist | osvaldo.beahan48@gmail.com | Reecefield | Active | $72.82 |
| Adrian Volkman | tina33@gmail.com | South Thaliamouth | Active | $304.01 |
| Total | $11,591.15 | |||
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 |