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 | Paid | Bank Transfer | $435.16 |
| INV002 | Paid | Bank Transfer | $463.07 |
| INV003 | Unpaid | Credit Card | $615.34 |
| INV004 | Pending | Bank Transfer | $154.74 |
| INV005 | Paid | Credit Card | $950.91 |
| INV006 | Unpaid | Credit Card | $215.98 |
| INV007 | Paid | Bank Transfer | $681.61 |
| Total | $3,516.81 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ira Wilderman | Chief Functionality Consultant | ira_wilderman53@hotmail.com | Viewer | |
| Bartholome Stoltenberg | Regional Identity Associate | bartholome_stoltenberg74@gmail.com | Member | |
| Van Koch | Senior Data Strategist | van.koch@hotmail.com | Admin | |
| August Hammes | Future Assurance Assistant | august.hammes14@hotmail.com | Admin | |
| Joann Leuschke | National Program Strategist | joann_leuschke61@hotmail.com | Admin | |
| Megan Ullrich | Global Directives Planner | megan_ullrich@hotmail.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jamison Bartoletti Chief Communications Planner jamison_bartoletti@gmail.com | Admin | |
Melba Lindgren Central Mobility Agent melba.lindgren60@yahoo.com | Member | |
Britney Champlin Customer Data Liaison britney.champlin@gmail.com | Viewer | |
Alycia Erdman District Program Representative alycia.erdman16@gmail.com | Viewer | |
Aniya Adams National Program Director aniya.adams@gmail.com | Viewer | |
Blanche Davis Internal Interactions Specialist blanche.davis36@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 |
|---|---|---|
Elouise Doyle Senior Quality Officer elouise_doyle@gmail.com | Admin | |
Jimmy Runte Central Accountability Director jimmy.runte@hotmail.com | Viewer | |
Malcolm Ward Product Interactions Supervisor malcolm_ward77@gmail.com | Member | |
Reyes Schroeder Legacy Web Executive reyes_schroeder99@yahoo.com | Admin | |
Nick Pfeffer Internal Directives Technician nick.pfeffer@gmail.com | Viewer | |
Nathaniel Schimmel District Marketing Agent nathaniel.schimmel79@gmail.com | Member | |
Allen Denesik Customer Security Technician allen.denesik@gmail.com | Viewer | |
Jacquelyn Ernser Customer Markets Coordinator jacquelyn.ernser70@hotmail.com | Admin | |
Linda Koelpin Central Solutions Supervisor linda.koelpin@gmail.com | Viewer | |
Alexa Hauck Product Data Supervisor alexa.hauck@yahoo.com | Viewer | |
Wallace Dibbert Senior Configuration Assistant wallace_dibbert@yahoo.com | Admin | |
Jessyca Treutel Lead Quality Orchestrator jessyca_treutel@hotmail.com | Viewer | |
Mona Hills Corporate Marketing Analyst mona_hills54@yahoo.com | Admin | |
Myah Harber Regional Accounts Technician myah_harber@yahoo.com | Admin | |
Antonia Ward Corporate Tactics Agent antonia_ward@gmail.com | Member | |
Darren Feeney Principal Assurance Supervisor darren.feeney@hotmail.com | Admin | |
Petra Kilback Central Identity Strategist petra_kilback49@gmail.com | Member | |
Mildred Zboncak Future Directives Strategist mildred_zboncak59@hotmail.com | Viewer | |
Jared O'Conner Central Program Manager jared.oconner@hotmail.com | Admin | |
Gwendolyn Kovacek Lead Markets Consultant gwendolyn.kovacek@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 | |
|---|---|---|---|---|
| Mr. Johnny Ziemann | ebba.mills15@gmail.com | Fort Harveyfield | Active | $475.31 |
| Charlotte Stark MD | shaun52@hotmail.com | Raemouth | Active | $695.48 |
| Gabriel Morar | gustavo.streich9@hotmail.com | Providence | Inactive | $562.41 |
| Nicholas Wiegand Jr. | myron37@hotmail.com | Nicholeberg | Active | $964.76 |
| Armando Gleichner | blanca56@gmail.com | Lubbock | Inactive | $287.96 |
| Total | $2,985.92 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Brendan Raynor @ayla28 | claudia20@hotmail.com | Gaithersburg | Inactive | $984.51 |
Cheryl Frami @viola.heller99 | rashad94@hotmail.com | Springdale | Active | $1,197.07 |
Neal Yost @edmond_runolfsdottir | alberta.mckenzie@yahoo.com | Franklinport | Inactive | $672.42 |
Ms. Berry Thompson @yvette.nolan26 | angela.shanahan87@hotmail.com | Port Gregton | Inactive | $1,120.56 |
Alyce Rodriguez @ollie23 | shelly.wiegand11@gmail.com | West Rodolfoborough | Active | $609.21 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Willis Orn | mia_stoltenberg12@yahoo.com | Nienowfurt | Active | $1,016.16 |
| Willis Howe | alma34@hotmail.com | Port Karlchester | Active | $896.01 |
| Ada Goodwin | garry.doyle83@gmail.com | Edina | Active | $393.02 |
| Andres Mitchell | kyle_grady23@hotmail.com | Wesley Chapel | Inactive | $491.20 |
| Winston Wyman | ronny37@hotmail.com | Lake Dorisville | Inactive | $1,198.70 |
| Total | $3,995.09 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Pedro Batz | lorna46@gmail.com | East Traceyfield | Inactive | $690.97 |
| Anne Ledner | roxanne42@hotmail.com | Phoenix | Active | $1,135.45 |
| Novella Champlin | nina64@yahoo.com | Constantinville | Active | $1,176.24 |
| Cristina Bartell | angelita.bauch75@hotmail.com | Fort Oren | Active | $367.12 |
| Lou Littel | ignacio_hilll@hotmail.com | Bellingham | Inactive | $500.74 |
| Total | $3,870.52 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Enrique Vandervort | reinhold_auer6@yahoo.com | North Alton | Active | $499.47 |
| Irving Bayer | michele_franey62@gmail.com | Schuppeton | Active | $147.76 |
| Tessie Daugherty III | randall_hahn@gmail.com | Garland | Inactive | $74.05 |
| Esther Gulgowski | christine_auer60@yahoo.com | New Brunswick | Active | $694.01 |
| Rosario Kuphal | alanis35@gmail.com | West Tim | Active | $956.06 |
| Total | $2,371.35 | |||
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. Hubert Schmidt | macie1@gmail.com | South Marjoriehaven | Active | $642.56 | |
| Dr. Christopher Dach | ramona_stamm@gmail.com | Gusikowskibury | Active | $760.88 | |
| Annabel Bogan | lucia95@gmail.com | Pittsburgh | Inactive | $514.51 | |
| Riley Schroeder-Emard | king_rodriguez65@yahoo.com | West Orlandoberg | Inactive | $465.95 | |
| Andres Yost | faye_douglas74@gmail.com | Rodrigoshire | Inactive | $1,058.68 | |
| Total | $3,442.58 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Rosanna Kulas | eldora0@yahoo.com | Moenfort | Active | $209.77 | |
| Jaida Mitchell | crystal.leuschke@gmail.com | Sherrifield | Active | $77.30 | |
| Stephany Prohaska V | alma13@yahoo.com | Miami | Inactive | $317.39 | |
| Glen Marquardt | ellen.durgan32@gmail.com | Webermouth | Active | $1,184.37 | |
| Sibyl Wisoky | earl.lang@hotmail.com | Arvada | Active | $88.89 | |
| Total | $1,877.72 | ||||
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 | |
|---|---|---|---|---|
| Nadine Stanton | antonina_smitham@yahoo.com | Lubbock | Active | $767.56 |
| Mathew Jacobson | ole_schroeder54@yahoo.com | Longmont | Active | $845.78 |
| Marjolaine Roberts | rylee.schultz@yahoo.com | Dwaynefield | Inactive | $973.01 |
| Helen Hettinger | kenton78@gmail.com | North Jammie | Inactive | $371.64 |
| Peyton MacGyver PhD | sean_corkery@yahoo.com | New Ivan | Active | $999.47 |
| Kenny Schumm | deron1@yahoo.com | Herzogland | Inactive | $520.94 |
| Cristobal Zemlak V | essie_ortiz@yahoo.com | Chesterberg | Inactive | $5.29 |
| Mrs. Stacey Schulist | brendan93@yahoo.com | DuBuquemouth | Inactive | $728.06 |
| Arlo Cronin Jr. | dewey75@gmail.com | Moen-Jaskolskiport | Inactive | $207.01 |
| Patty Prosacco | june.kiehn@hotmail.com | Schulistport | Active | $1,117.12 |
| Gilberto Parisian | kolby_hodkiewicz48@hotmail.com | Bartlett | Active | $738.78 |
| Howard Ward | gertrude_fritsch@yahoo.com | Timmothybury | Inactive | $1,141.40 |
| Kristin Flatley DDS | jackeline_rutherford38@gmail.com | North Carl | Inactive | $532.62 |
| Ila Smitham | alanis42@gmail.com | Cleoport | Inactive | $814.33 |
| Madelyn Price | nikki.lueilwitz2@gmail.com | South Percivalview | Inactive | $820.45 |
| Total | $10,583.46 | |||
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 |