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 | $468.25 |
| INV002 | Paid | PayPal | $627.98 |
| INV003 | Unpaid | Bank Transfer | $848.13 |
| INV004 | Unpaid | Bank Transfer | $939.90 |
| INV005 | Pending | Credit Card | $187.19 |
| INV006 | Paid | Bank Transfer | $589.28 |
| INV007 | Pending | Credit Card | $910.70 |
| Total | $4,571.43 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Ashly Yost-O'Kon | International Factors Representative | ashly_yost-okon@yahoo.com | Admin | |
| Leslie Reichel | Product Assurance Supervisor | leslie_reichel@yahoo.com | Viewer | |
| Kariane Cummings | International Creative Architect | kariane.cummings@yahoo.com | Member | |
| Quinton Heidenreich | Chief Interactions Agent | quinton.heidenreich78@gmail.com | Admin | |
| Arno McKenzie | Dynamic Security Manager | arno_mckenzie@hotmail.com | Admin | |
| Fredy Christiansen | Investor Response Administrator | fredy.christiansen@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 |
|---|---|---|
Alta Moore-Medhurst Customer Security Consultant alta.moore-medhurst@gmail.com | Member | |
Maggie Ziemann Customer Accountability Facilitator maggie.ziemann@yahoo.com | Viewer | |
Anjali Huels-Bartell International Usability Agent anjali_huels-bartell66@gmail.com | Member | |
Samanta Kunze Central Metrics Producer samanta_kunze52@hotmail.com | Member | |
Lisa Monahan Regional Intranet Producer lisa_monahan@gmail.com | Viewer | |
Ian Hoppe Regional Mobility Planner ian_hoppe5@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 |
|---|---|---|
Rowland Berge Customer Identity Planner rowland_berge81@hotmail.com | Member | |
Georgiana Christiansen Human Creative Manager georgiana.christiansen@yahoo.com | Member | |
Brandt Bayer International Interactions Designer brandt.bayer21@hotmail.com | Admin | |
Kathryn Waelchi Internal Division Specialist kathryn.waelchi92@hotmail.com | Viewer | |
Kendall West Senior Usability Executive kendall.west@gmail.com | Member | |
Jany Boyle Global Web Orchestrator jany.boyle@hotmail.com | Member | |
Verda Altenwerth Customer Web Supervisor verda_altenwerth12@yahoo.com | Viewer | |
Isom Becker-Schamberger District Tactics Analyst isom.becker-schamberger64@yahoo.com | Viewer | |
Rosalind Monahan Central Usability Producer rosalind_monahan98@yahoo.com | Admin | |
Alexandra Fahey Legacy Directives Director alexandra.fahey@hotmail.com | Admin | |
Grayson Altenwerth Product Web Manager grayson.altenwerth11@yahoo.com | Admin | |
Nona Hayes International Functionality Analyst nona.hayes17@gmail.com | Member | |
Sophie Turner Principal Factors Specialist sophie_turner@hotmail.com | Admin | |
Sean Marquardt District Communications Agent sean.marquardt47@hotmail.com | Member | |
Grant Windler Forward Integration Designer grant_windler@yahoo.com | Admin | |
Santa Howe Global Mobility Planner santa.howe@gmail.com | Member | |
Helga Skiles National Group Administrator helga_skiles@hotmail.com | Member | |
Vella Rau Central Markets Liaison vella.rau@gmail.com | Member | |
Elvie Herzog Chief Group Analyst elvie_herzog47@hotmail.com | Admin | |
Titus Schmidt Corporate Division Planner titus_schmidt1@hotmail.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 | |
|---|---|---|---|---|
| Cary Little | randal_frami69@hotmail.com | Fort Abbigail | Inactive | $846.59 |
| Bessie Hoppe II | jordon.mueller71@yahoo.com | Barrowsside | Active | $463.64 |
| Cameron Hackett | sarai_wiza@yahoo.com | South Nedrastad | Active | $70.08 |
| Mattie Vandervort | chad.gusikowski85@yahoo.com | McGlynnburgh | Active | $654.37 |
| Dr. Ralph Emmerich | malika.monahan@gmail.com | Bethlehem | Inactive | $611.73 |
| Total | $2,646.41 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Guillermo Luettgen @suzanne73 | ursula_dickinson@yahoo.com | Rogahnfort | Inactive | $932.95 |
Mrs. Mona Kshlerin @chyna93 | shannon81@gmail.com | Heaneycester | Active | $569.15 |
Juan Mraz @jason90 | camylle_jerde@hotmail.com | Lake Justice | Active | $59.92 |
Ruby Gutmann @colleen.kutch | nichole_swift@hotmail.com | New Roderick | Inactive | $446.28 |
Mrs. Kellie Witting @gardner.beahan49 | devin_harvey91@hotmail.com | Ursulatown | Active | $425.06 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Grady Champlin | laila.green28@yahoo.com | Fort Shanaborough | Active | $94.37 |
| Connie Daugherty | jessyca.rempel66@yahoo.com | North Raymondland | Active | $556.28 |
| Rosie Cronin IV | xander_mante46@yahoo.com | Kuphalview | Active | $967.87 |
| Della Hilpert | courtney.botsford@yahoo.com | Rennerstad | Inactive | $804.30 |
| Mr. Don Huels I | madie_becker@yahoo.com | Fort Alfredworth | Inactive | $6.19 |
| Total | $2,429.01 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gayle Kassulke | otho67@gmail.com | Kaychester | Inactive | $195.54 |
| Claire Wisoky | archibald_thiel88@gmail.com | Pfefferbury | Active | $1,007.73 |
| Felicia Morar | lorenza3@hotmail.com | North Caitlynmouth | Inactive | $966.45 |
| Melody Fay | willis_oconner42@hotmail.com | Lukasburgh | Active | $966.14 |
| Estelle Durgan | estella.kutch@hotmail.com | Lake Teresaworth | Inactive | $1,195.80 |
| Total | $4,331.66 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Claire Abernathy | rowan61@hotmail.com | Sauerbury | Inactive | $670.01 |
| Diana Koelpin | leo_kris@yahoo.com | Charlottesville | Inactive | $640.46 |
| Lana Turcotte MD | roy.botsford90@gmail.com | West Cody | Inactive | $484.45 |
| Kevin Ziemann | bette_beer@gmail.com | North Abe | Active | $986.72 |
| Wendell Zemlak | karina_jast@hotmail.com | Anselborough | Active | $923.86 |
| Total | $3,705.50 | |||
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 | ||
|---|---|---|---|---|---|
| Mr. Seth Nikolaus | chad_grady13@gmail.com | South Isabel | Active | $1,031.28 | |
| Jaime Cummerata | erling_huels33@yahoo.com | Buckeye | Inactive | $1,125.76 | |
| Mrs. Luz Leffler | cheyenne.krajcik-greenfelder@yahoo.com | Port Miracle | Inactive | $1,184.46 | |
| Fernando Zieme Sr. | luther_bruen78@hotmail.com | Pawtucket | Inactive | $741.00 | |
| Constance Hammes | pedro_lowe15@yahoo.com | Sawaynview | Active | $1,069.48 | |
| Total | $5,151.98 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jo Halvorson MD | alta68@hotmail.com | South Kip | Inactive | $149.17 | |
| Stephen Gleason III | halie.okeefe@hotmail.com | Gradyberg | Active | $176.44 | |
| Jesus Mann | kyra17@yahoo.com | Mariaburgh | Inactive | $153.88 | |
| Chris Romaguera | breanne.hessel30@hotmail.com | Fort Fiona | Active | $222.05 | |
| Arlene Orn | jacinto_hudson-schumm@hotmail.com | Keeleyland | Active | $57.28 | |
| Total | $758.82 | ||||
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 | |
|---|---|---|---|---|
| Pete Jacobson | jasen29@gmail.com | Lexusburgh | Inactive | $622.95 |
| Dr. Derek Kulas | stevie15@gmail.com | Ann Arbor | Inactive | $214.77 |
| Melody Ankunding | stanton.gerhold1@yahoo.com | Kiarraland | Active | $793.78 |
| Bradley Pagac III | jordane_nitzsche2@yahoo.com | Wauwatosa | Inactive | $978.97 |
| Jose Rogahn Sr. | anika_connelly@yahoo.com | Commerce City | Active | $824.42 |
| Mrs. Raquel Boehm | alan_hilpert@gmail.com | Edmundboro | Active | $70.62 |
| Stella Cruickshank | charity.wolff@gmail.com | Baldwin Park | Inactive | $764.43 |
| Shirley O'Keefe | rodger_wilderman1@gmail.com | Kingstad | Active | $1,009.34 |
| Nellie Carroll | alva.wehner8@hotmail.com | Fort Israeltown | Inactive | $1,040.26 |
| Lamar Langworth | filomena56@hotmail.com | Port Antwon | Inactive | $852.99 |
| Ada Stehr III | darrel.zieme@gmail.com | New Helen | Active | $688.24 |
| Angelo Spencer | jett_murphy74@yahoo.com | Kautzerport | Active | $245.41 |
| Pat Kohler | asha52@gmail.com | Jordycester | Active | $1,016.21 |
| Emilio Schowalter | etha_wisoky94@hotmail.com | New Lula | Inactive | $911.45 |
| Janet Schmitt | terrence.mayert@hotmail.com | St. Charles | Active | $789.09 |
| Total | $10,822.93 | |||
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 |