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 | $537.62 |
| INV002 | Unpaid | PayPal | $729.13 |
| INV003 | Paid | Credit Card | $314.59 |
| INV004 | Unpaid | PayPal | $421.37 |
| INV005 | Paid | Bank Transfer | $678.97 |
| INV006 | Unpaid | Bank Transfer | $849.32 |
| INV007 | Unpaid | Bank Transfer | $244.41 |
| Total | $3,775.41 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nicholas Trantow | Forward Implementation Administrator | nicholas.trantow@yahoo.com | Member | |
| Adonis McKenzie | Direct Configuration Designer | adonis.mckenzie38@yahoo.com | Admin | |
| Lela Rau | Investor Division Analyst | lela_rau@hotmail.com | Member | |
| Felipe Daniel | Investor Accountability Planner | felipe_daniel@hotmail.com | Viewer | |
| Julio Kling | Principal Integration Assistant | julio_kling@gmail.com | Admin | |
| Lois Schamberger | Lead Tactics Assistant | lois_schamberger@gmail.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 |
|---|---|---|
Maximillian Stokes Product Infrastructure Associate maximillian.stokes@yahoo.com | Member | |
Damien Olson Regional Quality Associate damien.olson@hotmail.com | Admin | |
Savanah Gislason Lead Accountability Agent savanah_gislason@hotmail.com | Admin | |
Annette Bartell Central Applications Associate annette_bartell44@yahoo.com | Admin | |
Bryan MacGyver Product Intranet Officer bryan_macgyver58@hotmail.com | Member | |
Cecil Ondricka International Tactics Engineer cecil.ondricka94@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 |
|---|---|---|
Rosalia Fahey District Intranet Representative rosalia.fahey@gmail.com | Member | |
Esmeralda Crona Legacy Solutions Strategist esmeralda.crona59@hotmail.com | Viewer | |
Regan Mueller Central Tactics Director regan.mueller20@yahoo.com | Viewer | |
Jordan Moen Principal Usability Planner jordan_moen@hotmail.com | Member | |
Marcia Harvey Lead Web Liaison marcia_harvey97@gmail.com | Admin | |
Ted Runolfsdottir Customer Assurance Facilitator ted.runolfsdottir90@gmail.com | Admin | |
Benjamin Ondricka Central Integration Administrator benjamin.ondricka@yahoo.com | Member | |
Rollin Cremin Future Identity Agent rollin.cremin@gmail.com | Viewer | |
Juan Morissette Product Brand Liaison juan_morissette@yahoo.com | Member | |
Bianka Larson Customer Assurance Designer bianka_larson@yahoo.com | Viewer | |
Joshua Jenkins Forward Applications Strategist joshua.jenkins64@hotmail.com | Admin | |
Juan Aufderhar Principal Quality Consultant juan.aufderhar53@gmail.com | Viewer | |
Ismael Ritchie Senior Integration Officer ismael.ritchie2@gmail.com | Member | |
Marjorie Green International Marketing Administrator marjorie.green@hotmail.com | Admin | |
Peggy Wolff Direct Assurance Administrator peggy_wolff@hotmail.com | Member | |
Ella McDermott Human Optimization Officer ella_mcdermott@hotmail.com | Member | |
Jacinto Spinka Chief Marketing Supervisor jacinto_spinka20@gmail.com | Viewer | |
Alonzo Weissnat Chief Metrics Architect alonzo_weissnat@gmail.com | Member | |
Garnet Glover Forward Branding Director garnet.glover94@gmail.com | Member | |
Braxton Ryan Principal Infrastructure Facilitator braxton_ryan2@yahoo.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 | |
|---|---|---|---|---|
| Forrest Mann DVM | peter_durgan@gmail.com | South Vivian | Active | $774.76 |
| Frederik Bruen | carmen_bauch38@hotmail.com | Starkborough | Inactive | $970.61 |
| Herminia Abernathy | sylvester_schowalter@yahoo.com | Fort Elizabeth | Active | $858.14 |
| Craig Beer | stella28@gmail.com | East Taylorborough | Active | $423.76 |
| Deven Harber | ocie.schiller@gmail.com | South Darby | Inactive | $759.28 |
| Total | $3,786.55 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Barry Klocko @edmond.reinger | trent14@yahoo.com | Bethlehem | Active | $734.10 |
Milton Hickle @alice51 | marley.parker43@hotmail.com | New Lucasport | Inactive | $1,099.92 |
Jevon Swift @alton.rippin | felicia75@gmail.com | Alanland | Active | $191.55 |
Lowell Schneider @lamont_mueller38 | leticia.stracke4@hotmail.com | Evansville | Inactive | $5.02 |
Jodi Boyle @brendon70 | lynne.skiles35@yahoo.com | Farmington Hills | Active | $140.34 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Melanie Ullrich | ivy87@yahoo.com | Turcotteboro | Active | $544.74 |
| June Collins | lana85@yahoo.com | Hollywood | Inactive | $399.81 |
| Dion Windler | antonio_macejkovic@hotmail.com | Port Mallorytown | Inactive | $455.52 |
| Emmet Kassulke | adam9@hotmail.com | Robelworth | Active | $911.36 |
| Gavin Runolfsson | whitney95@gmail.com | North Dwayneland | Active | $486.92 |
| Total | $2,798.35 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dolores Padberg MD | jana_fadel@gmail.com | Rebekafort | Active | $389.09 |
| Dianne Stamm | woodrow.williamson0@gmail.com | Gregbury | Active | $708.83 |
| Rashawn Grimes | catherine6@hotmail.com | Brendanmouth | Inactive | $916.77 |
| Michelle Turcotte | tyree.altenwerth42@yahoo.com | Oakland | Active | $663.17 |
| Lesley Donnelly | jennifer.bogan35@yahoo.com | North Olive | Active | $1,129.26 |
| Total | $3,807.12 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Summer Robel | sterling_rosenbaum@gmail.com | Plainfield | Active | $170.07 |
| Mrs. Jarrod Huels DDS | lola27@gmail.com | Vernafurt | Inactive | $1,147.03 |
| Lucious Monahan | amely.bahringer15@yahoo.com | Gilroy | Active | $211.28 |
| Joshua Price | jeff_mcdermott53@gmail.com | North Olinhaven | Active | $325.99 |
| Mr. Emelie Beatty | loy.medhurst@yahoo.com | East Isabel | Active | $913.10 |
| Total | $2,767.47 | |||
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 | ||
|---|---|---|---|---|---|
| Melody Kuvalis | clay69@gmail.com | North Forestborough | Active | $654.19 | |
| Taryn Feeney | giovani57@yahoo.com | New Myrtisburgh | Inactive | $703.19 | |
| Jaren Bogisich DVM | armando24@gmail.com | O'Connellport | Inactive | $621.95 | |
| Maurine Shanahan | darnell.collier-johns@gmail.com | New Samuel | Active | $877.23 | |
| Alfonso Walter | helga70@hotmail.com | East Sonia | Active | $90.51 | |
| Total | $2,947.07 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Sophia Rodriguez | jimmie.keeling73@yahoo.com | Aufderharcester | Inactive | $608.93 | |
| Grayson Hessel Jr. | kathlyn27@yahoo.com | East Jeffreyburgh | Inactive | $371.12 | |
| Amaya Beier | marco_lind@yahoo.com | Nellietown | Active | $835.82 | |
| Donny Treutel | phil_predovic@hotmail.com | Strackecester | Inactive | $884.61 | |
| Frances Stehr DDS | aimee_rice-von@hotmail.com | Westfield | Active | $113.60 | |
| Total | $2,814.08 | ||||
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 | |
|---|---|---|---|---|
| Lana Huels | tom18@yahoo.com | Gordonworth | Active | $504.79 |
| Marianna Orn | sid_bode@hotmail.com | Pensacola | Inactive | $733.16 |
| Mr. Derrick Weber | catherine83@yahoo.com | Mathewburgh | Inactive | $45.99 |
| Broderick Roberts | ada13@yahoo.com | Bernardotown | Inactive | $446.13 |
| Jace Parisian | mikel_hansen14@gmail.com | Donnaboro | Active | $332.69 |
| Sheldon Daugherty | sherman95@yahoo.com | Orland Park | Active | $387.27 |
| Henrietta Schroeder | bernice.brakus-koss@gmail.com | Johnsonstad | Inactive | $923.44 |
| Agnes Jacobs | ross.mohr@yahoo.com | Tinley Park | Inactive | $218.45 |
| Hilbert Zboncak | laisha37@hotmail.com | Rowenastad | Active | $1,139.84 |
| Thalia Trantow | rachel.schamberger20@hotmail.com | Alexiefield | Inactive | $664.43 |
| Heidi Labadie | bryana_denesik@gmail.com | West Karianetown | Active | $269.40 |
| Shawna Stroman | casandra.senger@yahoo.com | Ardenton | Active | $1,058.20 |
| Lila Crona III | charlie.jones@hotmail.com | New Lornafield | Inactive | $500.39 |
| Holly Corwin | cindy_schaden@yahoo.com | North Oranmouth | Inactive | $756.94 |
| Ciara Dietrich | dannie10@gmail.com | North Sandra | Active | $1,010.80 |
| Total | $8,991.92 | |||
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 |