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 | Credit Card | $171.04 |
| INV002 | Pending | Credit Card | $789.17 |
| INV003 | Unpaid | Credit Card | $578.47 |
| INV004 | Unpaid | Credit Card | $920.71 |
| INV005 | Pending | Credit Card | $115.51 |
| INV006 | Pending | Credit Card | $355.48 |
| INV007 | Paid | PayPal | $513.60 |
| Total | $3,443.98 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Major Treutel | Senior Interactions Coordinator | major_treutel48@hotmail.com | Member | |
| Alisa Ritchie | Direct Quality Director | alisa_ritchie@hotmail.com | Member | |
| Chyna Treutel-Terry | Global Interactions Strategist | chyna.treutel-terry53@yahoo.com | Viewer | |
| Emmalee Schaefer | Corporate Division Liaison | emmalee.schaefer@yahoo.com | Viewer | |
| Dylan Ebert | International Implementation Administrator | dylan_ebert@hotmail.com | Viewer | |
| Clarissa Nienow | Central Accountability Specialist | clarissa.nienow66@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 |
|---|---|---|
Maida Leannon District Quality Associate maida_leannon@gmail.com | Member | |
Cedrick Mohr Future Response Consultant cedrick_mohr38@yahoo.com | Member | |
Caden Fay Global Infrastructure Technician caden_fay59@gmail.com | Admin | |
Felicia Howe International Accountability Designer felicia_howe@hotmail.com | Viewer | |
Dawn Murphy Central Paradigm Associate dawn_murphy41@gmail.com | Viewer | |
Mariela Halvorson Dynamic Communications Specialist mariela.halvorson63@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 |
|---|---|---|
Hadley Fritsch Chief Research Agent hadley.fritsch@hotmail.com | Viewer | |
Lauren Crona Regional Directives Developer lauren.crona@gmail.com | Member | |
Kurtis Wisoky National Communications Developer kurtis_wisoky@hotmail.com | Admin | |
Baby Erdman Human Identity Executive baby_erdman32@yahoo.com | Viewer | |
Neil Mitchell National Division Director neil.mitchell@gmail.com | Member | |
Alanis Tillman Principal Factors Producer alanis.tillman@gmail.com | Viewer | |
Cedrick Sawayn Senior Group Specialist cedrick_sawayn86@hotmail.com | Viewer | |
Gerry Gorczany Product Optimization Consultant gerry_gorczany@hotmail.com | Admin | |
Kamron Hahn Regional Marketing Developer kamron.hahn@gmail.com | Member | |
John Wehner Human Infrastructure Developer john.wehner2@hotmail.com | Viewer | |
Amari Stracke Dynamic Brand Administrator amari_stracke@yahoo.com | Member | |
Merritt Kertzmann Principal Solutions Orchestrator merritt.kertzmann@hotmail.com | Admin | |
Renee Terry Internal Operations Consultant renee.terry@hotmail.com | Viewer | |
Buck Dach Internal Applications Engineer buck.dach@yahoo.com | Member | |
Joshuah Larkin Future Brand Administrator joshuah_larkin@hotmail.com | Admin | |
Maximus Watsica Product Identity Specialist maximus.watsica27@gmail.com | Member | |
Bridie Towne Senior Directives Facilitator bridie.towne67@gmail.com | Admin | |
Dayna Feeney Chief Infrastructure Assistant dayna_feeney89@hotmail.com | Viewer | |
Markus Kreiger Future Response Coordinator markus.kreiger@hotmail.com | Member | |
Makenzie Greenholt Direct Markets Architect makenzie.greenholt@yahoo.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 | |
|---|---|---|---|---|
| Dr. James Lynch | jace.olson6@hotmail.com | New Garlandborough | Inactive | $482.66 |
| Tommie Rath | rafael86@yahoo.com | South Jake | Inactive | $505.00 |
| Clifford Yost | mylene30@gmail.com | New Rozella | Inactive | $457.75 |
| Wilson Franey | dorothea85@gmail.com | Pensacola | Inactive | $140.57 |
| Miguel Willms | luna.murray@gmail.com | North Nedfurt | Inactive | $436.53 |
| Total | $2,022.51 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Archie Stamm @providenci_kohler | maye10@gmail.com | Mollyview | Active | $85.27 |
Winston Heidenreich @landen_torp99 | jaeden66@hotmail.com | Port Yvonne | Active | $158.82 |
Alfred Konopelski @kenyatta_beahan61 | alvah.ebert86@hotmail.com | Peabody | Active | $812.60 |
Amber Schiller @heather.koch51 | jovani.altenwerth88@yahoo.com | Fort Josie | Active | $555.17 |
Jaime Crooks @emmy65 | dorcas_raynor@gmail.com | Creminhaven | Inactive | $395.98 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elmer Wiza | rubie1@hotmail.com | Davinland | Inactive | $266.73 |
| Jack Hudson | hassie63@yahoo.com | Jacyntheville | Inactive | $980.93 |
| Olive Bechtelar | annabelle.schowalter3@hotmail.com | Axelfurt | Active | $570.84 |
| Patrick Gerhold Sr. | giovanny_feil82@gmail.com | East Martineboro | Active | $937.42 |
| Rochelle Graham | violet.bartoletti@gmail.com | Ignatiusberg | Inactive | $431.73 |
| Total | $3,187.65 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dixie West | ena12@gmail.com | Leonoratown | Active | $618.44 |
| Jimmie Satterfield | nadia22@yahoo.com | Lorain | Inactive | $362.06 |
| Alfred Stamm-Bogan | alisa74@hotmail.com | Runolfsdottirboro | Active | $958.33 |
| Lucia O'Connell | icie3@gmail.com | Zemlakborough | Active | $711.28 |
| Bethany Oberbrunner | zakary.pouros50@gmail.com | Russelville | Inactive | $814.91 |
| Total | $3,465.02 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jackie Kassulke | kamron_west56@hotmail.com | Kristinamouth | Active | $436.94 |
| Leticia Boyle | myron_prosacco@hotmail.com | Williamsonhaven | Inactive | $435.17 |
| Conrad Zulauf Sr. | yadira26@yahoo.com | Remingtonstad | Active | $26.92 |
| Julia Wehner III | sedrick.frami15@gmail.com | Simonistown | Inactive | $405.33 |
| Mr. Reginald Mosciski MD | everett77@yahoo.com | South Queenie | Active | $840.45 |
| Total | $2,144.81 | |||
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 | ||
|---|---|---|---|---|---|
| Courtney VonRueden | cora4@gmail.com | South Orrin | Inactive | $1,113.50 | |
| Joshua Gerlach-Kozey | kattie98@gmail.com | D'angelocester | Inactive | $122.96 | |
| Elvira Hagenes | royal.schuster98@hotmail.com | New Kara | Inactive | $1,172.92 | |
| Grace Huel | evalyn.hettinger@yahoo.com | New Celestinofurt | Inactive | $310.38 | |
| Gloria Reynolds | lucie_moore14@gmail.com | Aubreychester | Active | $828.66 | |
| Total | $3,548.42 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Daisy Kreiger-Bednar | peggie94@yahoo.com | East Johnathanton | Inactive | $106.31 | |
| Allison Hand | franco_rosenbaum@gmail.com | New Anastasia | Active | $152.90 | |
| Marco Block | maureen53@gmail.com | Leesburg | Active | $1,001.42 | |
| Tracy Hahn | ursula_schulist3@hotmail.com | South Ole | Inactive | $519.93 | |
| Karla Fisher III | marge_okeefe@yahoo.com | Apex | Inactive | $725.54 | |
| Total | $2,506.10 | ||||
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 | |
|---|---|---|---|---|
| Sylvia Trantow V | niko24@yahoo.com | Port Alayna | Inactive | $546.15 |
| Sergio Wunsch | betsy.goldner68@yahoo.com | Brockfurt | Active | $898.46 |
| Elbert Johnson Jr. | rolando.kertzmann@yahoo.com | Greeley | Inactive | $357.57 |
| Dorothy Parisian | jarod_zulauf@hotmail.com | Vancouver | Active | $687.00 |
| Otis Roberts-Tromp II | jeffery_heaney70@hotmail.com | East Lexieshire | Active | $695.11 |
| Edward O'Conner | makenna94@yahoo.com | Antelope | Active | $872.15 |
| Irvin Roberts | susie.bogan93@hotmail.com | New Frederic | Active | $992.90 |
| Rogelio Murphy | geo.schimmel@hotmail.com | Port Harvey | Active | $1,069.21 |
| Conrad Jacobi | kianna66@gmail.com | Kovacekfort | Inactive | $202.97 |
| Brittany Mosciski | brooke88@gmail.com | Kiehnside | Inactive | $1,134.96 |
| Laura Abernathy | daphne_bauch40@yahoo.com | Croninbury | Inactive | $315.62 |
| Jesse Quitzon | linnea90@yahoo.com | Luettgenworth | Active | $119.09 |
| Beulah Howell | antonio.zieme76@hotmail.com | New Johathanshire | Active | $163.60 |
| Lula Halvorson | daphne_prosacco79@gmail.com | New Mabel | Inactive | $176.34 |
| Stephanie Lehner | lurline68@gmail.com | South Benjaminworth | Inactive | $922.12 |
| Total | $9,153.25 | |||
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 |