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 | $515.66 |
| INV002 | Unpaid | Credit Card | $304.71 |
| INV003 | Unpaid | PayPal | $167.67 |
| INV004 | Pending | Bank Transfer | $813.49 |
| INV005 | Pending | PayPal | $489.17 |
| INV006 | Unpaid | Bank Transfer | $364.26 |
| INV007 | Paid | Bank Transfer | $644.83 |
| Total | $3,299.79 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Giovanny VonRueden | Lead Program Assistant | giovanny.vonrueden96@yahoo.com | Viewer | |
| Jensen Wilkinson | Customer Creative Developer | jensen.wilkinson@gmail.com | Viewer | |
| Jayson Collier | Regional Identity Manager | jayson.collier85@gmail.com | Viewer | |
| Kian Rau | Dynamic Division Facilitator | kian.rau43@gmail.com | Admin | |
| Rossie Heaney | Forward Factors Representative | rossie.heaney42@gmail.com | Member | |
| Andrew West | District Branding Strategist | andrew.west12@yahoo.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 |
|---|---|---|
Keyon Hilll Central Configuration Administrator keyon.hilll@gmail.com | Admin | |
Luisa Hackett Lead Group Supervisor luisa_hackett@hotmail.com | Viewer | |
Westley Hills Dynamic Quality Supervisor westley_hills@yahoo.com | Viewer | |
Gregory Erdman International Web Architect gregory.erdman@hotmail.com | Member | |
Kaitlyn Stracke Regional Marketing Coordinator kaitlyn.stracke@gmail.com | Admin | |
Lucio McGlynn Global Marketing Representative lucio_mcglynn@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 |
|---|---|---|
Dan Brekke Corporate Web Producer dan_brekke79@gmail.com | Admin | |
Zula Blanda-Brown Legacy Configuration Technician zula.blanda-brown52@yahoo.com | Member | |
Frederik Jacobson Regional Group Supervisor frederik.jacobson27@gmail.com | Member | |
Luna Bogisich Regional Implementation Engineer luna.bogisich@gmail.com | Viewer | |
Alyce Franey Dynamic Accountability Designer alyce.franey95@hotmail.com | Member | |
Dorris Cummings Central Response Coordinator dorris_cummings28@gmail.com | Member | |
Isabell Nolan Chief Optimization Specialist isabell_nolan65@hotmail.com | Viewer | |
Magdalen Zemlak Central Metrics Liaison magdalen.zemlak@gmail.com | Member | |
Ed Huel Dynamic Security Associate ed.huel@hotmail.com | Admin | |
Maximo Kreiger Forward Creative Executive maximo_kreiger60@gmail.com | Admin | |
German Hauck-Bailey Regional Marketing Agent german.hauck-bailey3@hotmail.com | Viewer | |
Natalia Leuschke Forward Factors Analyst natalia.leuschke81@hotmail.com | Viewer | |
Helen Jones Legacy Implementation Agent helen.jones@hotmail.com | Viewer | |
Delfina Jacobson Investor Accountability Engineer delfina.jacobson57@yahoo.com | Admin | |
Myron Corwin Internal Assurance Strategist myron.corwin90@gmail.com | Member | |
Isabel Ryan District Branding Orchestrator isabel_ryan@hotmail.com | Viewer | |
Helene Stroman Global Paradigm Officer helene.stroman@hotmail.com | Member | |
Janice Predovic National Web Agent janice_predovic@gmail.com | Viewer | |
Kiley Hansen Forward Paradigm Representative kiley_hansen92@gmail.com | Member | |
Damaris Mitchell Chief Marketing Coordinator damaris_mitchell4@yahoo.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 | |
|---|---|---|---|---|
| Gina Brekke | karolann98@gmail.com | Bodefield | Active | $244.29 |
| Michele Williamson | sherman.mante62@gmail.com | Stillwater | Inactive | $915.97 |
| Mr. Arnold Cormier | pearline_roberts@hotmail.com | Lake Hazelstead | Inactive | $759.19 |
| Jenny Kunde | mauricio36@hotmail.com | Bennieshire | Active | $76.80 |
| Margarita Daniel | saige_collier@yahoo.com | Langfurt | Active | $312.09 |
| Total | $2,308.34 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Esther Christiansen @kobe_gottlieb | clementina_balistreri@yahoo.com | Taylorsville | Active | $568.22 |
Ismael Shanahan @leilani56 | ilene28@yahoo.com | Brakusview | Active | $1,083.18 |
Regina Bahringer @percival_bartoletti56 | stacy37@yahoo.com | East Blairboro | Inactive | $21.98 |
Mrs. Candace Hyatt @jamaal_vonrueden93 | destini39@yahoo.com | West Hobart | Active | $273.47 |
Erik Davis @garett97 | jaunita_beier-hackett68@gmail.com | Drewberg | Inactive | $819.40 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeannette Lehner | chaz_dibbert72@yahoo.com | Kansas City | Active | $1,065.03 |
| Mrs. Shirley Collins | marina48@gmail.com | North Garett | Inactive | $456.55 |
| Abel Bruen | charles_kassulke94@yahoo.com | West Fritzmouth | Inactive | $410.60 |
| Duane Dibbert | agnes77@gmail.com | Port Vivaborough | Active | $325.21 |
| Julie Fay | sydnee.legros85@hotmail.com | Alenestead | Active | $968.67 |
| Total | $3,226.06 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Peter Zieme | nickolas94@yahoo.com | Eduardoland | Active | $915.91 |
| Tammy O'Conner-Bahringer | richmond_hansen56@hotmail.com | Evansville | Active | $509.85 |
| Harvey Torphy | piper.koch0@yahoo.com | Rancho Santa Margarita | Inactive | $201.77 |
| Genevieve Baumbach | celestino_schmeler67@yahoo.com | Weberland | Active | $1,081.30 |
| Ms. Kellie Paucek | albin98@hotmail.com | Town 'n' Country | Inactive | $1,139.57 |
| Total | $3,848.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elisa Powlowski | alisa93@yahoo.com | Reichelmouth | Active | $215.84 |
| Karla Kerluke | urban_berge@gmail.com | Fort Freida | Active | $815.33 |
| Mrs. Jacqueline Smitham-Renner | moshe_koepp@gmail.com | Brookhaven | Inactive | $752.16 |
| Shane Jacobi | cyrus_watsica28@hotmail.com | Lake Kaci | Active | $371.37 |
| Joshua Reilly | rachel_cassin25@gmail.com | Laurentown | Active | $404.79 |
| Total | $2,559.49 | |||
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 | ||
|---|---|---|---|---|---|
| Olive Klein | kelvin87@yahoo.com | West Aurelio | Inactive | $476.11 | |
| Jan Wiegand-Roob | delmer_kozey-hahn@hotmail.com | Kilbackhaven | Inactive | $1,110.31 | |
| Ronnie VonRueden | nils.shanahan@yahoo.com | Lake Heavenworth | Active | $779.03 | |
| Marta Stokes | brando23@gmail.com | New Donald | Inactive | $987.88 | |
| Elizabeth Boyer-Mosciski | bill_fay@yahoo.com | Denton | Inactive | $577.09 | |
| Total | $3,930.42 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Cora Gusikowski | yvonne.ledner@hotmail.com | Franeckiborough | Inactive | $829.63 | |
| Francis Langworth | ayden49@hotmail.com | Orloberg | Active | $283.11 | |
| Betty Nicolas | sonny_mueller12@gmail.com | Christiansenfield | Inactive | $829.05 | |
| Linda Flatley | theodore_luettgen70@gmail.com | Azusa | Inactive | $909.00 | |
| Cassandra Keebler | general_powlowski82@yahoo.com | Lake Archibald | Active | $988.89 | |
| Total | $3,839.68 | ||||
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 | |
|---|---|---|---|---|
| Ella Goyette MD | cicero.thiel18@yahoo.com | South Sandyshire | Active | $1,104.51 |
| Wilbert Johnson | jena0@hotmail.com | Braedenburgh | Active | $1,047.93 |
| Mabel Kozey | tyrel55@hotmail.com | Fort Haleystead | Inactive | $134.19 |
| Cora Wiegand | grant_hessel7@yahoo.com | Euless | Inactive | $1,060.56 |
| Eula Douglas | kacie.cummerata89@gmail.com | Stamford | Active | $443.00 |
| Anthony Gutkowski | bryce26@hotmail.com | Khalilchester | Inactive | $405.03 |
| Myrtle Roob | don_ryan29@gmail.com | Danialmouth | Inactive | $690.77 |
| Owen Little | jarrell_aufderhar@gmail.com | New Kennith | Active | $304.92 |
| Rex Ullrich | cesar_willms@gmail.com | Frisco | Active | $746.28 |
| Emilio O'Reilly | bernie_will55@yahoo.com | Spencerton | Active | $408.01 |
| Ramona Doyle | raphaelle50@hotmail.com | North Jabari | Active | $698.69 |
| Guillermo Langosh | manuela.brekke@yahoo.com | North Flossieborough | Active | $212.54 |
| Theodore Sawayn Jr. | audreanne6@gmail.com | Justusport | Active | $752.32 |
| Bertha Halvorson | alysson.emmerich@yahoo.com | Kuhicbury | Inactive | $172.60 |
| Sherry Hermiston | rosario.sipes@gmail.com | Gavinchester | Active | $827.78 |
| Total | $9,009.13 | |||
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 |