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 | $413.67 |
| INV002 | Unpaid | PayPal | $270.12 |
| INV003 | Unpaid | Bank Transfer | $880.52 |
| INV004 | Unpaid | PayPal | $139.36 |
| INV005 | Unpaid | Bank Transfer | $741.98 |
| INV006 | Pending | PayPal | $472.58 |
| INV007 | Paid | Credit Card | $804.18 |
| Total | $3,722.41 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Leora Reichel | National Functionality Manager | leora.reichel43@hotmail.com | Viewer | |
| Nellie White | District Identity Producer | nellie.white76@hotmail.com | Admin | |
| Vladimir Boyer | Legacy Paradigm Technician | vladimir_boyer@yahoo.com | Member | |
| Delia Smith | Principal Communications Representative | delia.smith6@hotmail.com | Viewer | |
| Davon Heathcote | Product Optimization Executive | davon.heathcote@gmail.com | Member | |
| Marcel Upton | Regional Marketing Executive | marcel.upton14@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 |
|---|---|---|
Sandra Huels Human Group Strategist sandra.huels64@hotmail.com | Member | |
Kathryn Gottlieb National Quality Producer kathryn_gottlieb@gmail.com | Member | |
Deborah Jacobs Human Optimization Engineer deborah.jacobs@hotmail.com | Admin | |
Felipa Shields Product Research Consultant felipa_shields@hotmail.com | Viewer | |
Kennith Zboncak Lead Brand Facilitator kennith.zboncak@gmail.com | Member | |
Natalie Adams Investor Usability Assistant natalie.adams89@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Micaela Bernhard Lead Usability Architect micaela_bernhard@hotmail.com | Viewer | |
Arnold Farrell Corporate Identity Director arnold.farrell97@yahoo.com | Admin | |
Augusta Gorczany Product Functionality Engineer augusta.gorczany@yahoo.com | Member | |
Annie Bogisich Direct Metrics Producer annie.bogisich18@gmail.com | Viewer | |
Breanne King-Blick Customer Configuration Liaison breanne.king-blick@hotmail.com | Admin | |
Madisyn Gibson-Ritchie Investor Web Manager madisyn.gibson-ritchie@yahoo.com | Admin | |
Daniella Little Internal Brand Strategist daniella.little77@gmail.com | Admin | |
Claudine Dietrich Forward Solutions Specialist claudine_dietrich@gmail.com | Admin | |
Nyasia Roob Principal Applications Officer nyasia.roob78@hotmail.com | Member | |
Orpha Harvey Product Program Liaison orpha_harvey@gmail.com | Member | |
Carter Little Product Web Liaison carter_little@hotmail.com | Member | |
Jamaal McKenzie Corporate Program Supervisor jamaal_mckenzie45@yahoo.com | Member | |
Amber Harris Corporate Division Orchestrator amber_harris@yahoo.com | Admin | |
Norene Beahan Corporate Operations Consultant norene.beahan@hotmail.com | Admin | |
Michael Mitchell Central Response Associate michael_mitchell@gmail.com | Viewer | |
Edward Koepp International Markets Officer edward.koepp@yahoo.com | Viewer | |
Jacklyn Stoltenberg Investor Marketing Consultant jacklyn_stoltenberg80@hotmail.com | Admin | |
Jasmin Krajcik Customer Metrics Designer jasmin_krajcik@gmail.com | Admin | |
Bart Heller Human Brand Administrator bart_heller@hotmail.com | Admin | |
Khalil McLaughlin Internal Brand Supervisor khalil.mclaughlin36@gmail.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 | |
|---|---|---|---|---|
| Barbara Mertz I | watson88@gmail.com | Fernehaven | Active | $893.90 |
| Mildred Jacobi | eleanora80@gmail.com | Lake Danielafurt | Inactive | $282.03 |
| Rufus Pollich III | vidal_keeling@yahoo.com | Rosenbaumstad | Active | $864.54 |
| Inez Schamberger | maude_herman@yahoo.com | South Kelvinberg | Inactive | $1,090.35 |
| Myron Volkman | myrtis26@gmail.com | North Stuart | Active | $511.43 |
| Total | $3,642.25 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Kara Funk Sr. @bertrand3 | elise.berge9@yahoo.com | West Beaulahside | Active | $343.67 |
Anita Kutch @cathryn.von70 | scottie.shanahan@yahoo.com | Eudoraworth | Active | $1,022.50 |
Lori Bradtke @chanel_wiegand | nola.gusikowski@gmail.com | Metzborough | Active | $757.55 |
Marcella Hermann @flavie.farrell | rigoberto87@yahoo.com | Tillmantown | Active | $251.24 |
Jean Gleichner @idell.raynor-rodriguez | deshawn.heidenreich56@gmail.com | Durham | Active | $536.64 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Joyce Johns | elyssa_franey@hotmail.com | South Lewisfort | Active | $75.39 |
| Brittany Tromp | lance75@gmail.com | South Ryder | Active | $357.66 |
| Garry Kunde I | joel45@hotmail.com | West Damonview | Active | $714.75 |
| Fannie Marvin | adaline.johnson@gmail.com | League City | Active | $222.96 |
| Carmen Medhurst | katrine_predovic25@gmail.com | North Savion | Inactive | $515.89 |
| Total | $1,886.65 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Chad Raynor | wilson.rice45@gmail.com | Miami Gardens | Inactive | $308.25 |
| Miss Kristin Spinka MD | laurence.corkery-zulauf@yahoo.com | Lake Derick | Active | $1,027.59 |
| Mrs. Kristin Smitham | aliza_schiller18@yahoo.com | West Kristoferchester | Active | $547.20 |
| Dr. Sylvester Rowe | name.koch75@yahoo.com | Lake Darylfield | Active | $948.48 |
| Alberto Davis | ryleigh_wisoky13@yahoo.com | Centennial | Active | $232.09 |
| Total | $3,063.61 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Geneva O'Kon | joyce.cruickshank39@yahoo.com | Elverastead | Active | $261.88 |
| Leslie Gulgowski | meredith_langosh@hotmail.com | South Jasperchester | Active | $344.37 |
| Gordon Jast | clyde.roberts@hotmail.com | Paucekboro | Active | $541.93 |
| Jose Borer | jaren.ondricka@yahoo.com | Broomfield | Active | $615.30 |
| Leland Cruickshank | jaylon.erdman@hotmail.com | Schusterboro | Inactive | $915.86 |
| Total | $2,679.34 | |||
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 | ||
|---|---|---|---|---|---|
| Iris Jast | dereck_stark@yahoo.com | Marcialand | Inactive | $503.96 | |
| Emilio Rowe | gina_lakin@hotmail.com | Wuckertshire | Active | $1,134.64 | |
| Dave McKenzie III | lowell_metz@yahoo.com | Little Rock | Active | $56.30 | |
| Jared Crona | levi_cartwright82@hotmail.com | East Lisandrofurt | Inactive | $1,186.68 | |
| Emanuel Barton | domenic_luettgen1@hotmail.com | Fort Jadaport | Active | $1,044.66 | |
| Total | $3,926.24 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Noel Douglas | brent_schuster@hotmail.com | Fort Juvenal | Active | $60.72 | |
| Aaron Schmeler | terrill.armstrong@gmail.com | Kristinaport | Inactive | $796.32 | |
| Constance Hagenes | damien_carroll73@hotmail.com | New Brantborough | Inactive | $695.20 | |
| Ms. Lila Nienow | adele_mitchell@gmail.com | Leschberg | Active | $556.88 | |
| Celia Padberg | brook46@yahoo.com | Daytona Beach | Active | $99.94 | |
| Total | $2,209.06 | ||||
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 | |
|---|---|---|---|---|
| Clara Larson III | dora.sawayn5@yahoo.com | West Laila | Inactive | $986.88 |
| Dianna Bosco | jayden11@gmail.com | Thompsonfield | Active | $190.29 |
| Jaime Terry | micheal_kiehn@yahoo.com | Greenholtport | Inactive | $586.63 |
| Rachel Robel | asha.aufderhar@gmail.com | Jacquesville | Inactive | $328.93 |
| Ellis Stoltenberg | crawford58@gmail.com | Lake Joanny | Inactive | $967.72 |
| Alfonso McDermott DVM | leilani85@yahoo.com | Yuba City | Inactive | $111.38 |
| Noel Mills | lazaro.rohan@gmail.com | Hassieshire | Inactive | $637.41 |
| Luz Altenwerth | zetta53@yahoo.com | New Brockfort | Inactive | $728.14 |
| Anthony Little | kamryn13@hotmail.com | Port Fannie | Active | $150.85 |
| Miss Grace Stiedemann DDS | gennaro.weimann74@gmail.com | Runtemouth | Inactive | $786.37 |
| Ernestine Dickens | hattie77@hotmail.com | West Liam | Active | $338.34 |
| Dennis Hirthe | brett_ortiz19@yahoo.com | Kassulkechester | Active | $130.58 |
| Melissa Bartell | linnea_mraz76@hotmail.com | Rahsaanside | Inactive | $258.43 |
| Mrs. Desiree Quigley | emmy2@yahoo.com | Murrayside | Active | $699.37 |
| Sammy Walsh | aron12@gmail.com | Blue Springs | Active | $278.45 |
| Total | $7,179.77 | |||
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 |