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 | $675.50 |
| INV002 | Pending | PayPal | $345.90 |
| INV003 | Unpaid | PayPal | $220.23 |
| INV004 | Unpaid | Bank Transfer | $982.67 |
| INV005 | Pending | Bank Transfer | $776.36 |
| INV006 | Unpaid | PayPal | $576.09 |
| INV007 | Pending | PayPal | $685.61 |
| Total | $4,262.36 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Iliana Lynch | Chief Operations Facilitator | iliana_lynch@hotmail.com | Member | |
| Ashtyn Wehner | Future Functionality Engineer | ashtyn.wehner87@gmail.com | Member | |
| Lavern Goldner | Chief Markets Director | lavern_goldner46@hotmail.com | Member | |
| Kelley Feeney | Corporate Security Executive | kelley_feeney6@gmail.com | Admin | |
| Jeramy Dietrich | District Paradigm Strategist | jeramy_dietrich50@yahoo.com | Viewer | |
| Manuel Kshlerin | Legacy Operations Manager | manuel.kshlerin33@gmail.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 |
|---|---|---|
Gary Quitzon Forward Response Consultant gary_quitzon52@yahoo.com | Admin | |
Ronaldo Swift-Daugherty National Metrics Technician ronaldo_swift-daugherty@gmail.com | Member | |
Isidro Cummings Human Program Producer isidro_cummings@yahoo.com | Member | |
Loraine Stehr Corporate Assurance Strategist loraine_stehr44@gmail.com | Viewer | |
Jammie Doyle International Security Engineer jammie.doyle88@yahoo.com | Admin | |
Gillian Spinka Future Brand Orchestrator gillian_spinka73@yahoo.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Juanita Harber Direct Group Executive juanita.harber@gmail.com | Member | |
Simon Mraz Central Optimization Consultant simon_mraz42@hotmail.com | Admin | |
Marshall Corwin Global Applications Liaison marshall.corwin@yahoo.com | Member | |
Cesar Streich Central Optimization Director cesar_streich@gmail.com | Viewer | |
Misty Hirthe Direct Infrastructure Technician misty_hirthe3@gmail.com | Viewer | |
Camryn Jenkins Regional Accounts Officer camryn.jenkins19@hotmail.com | Member | |
Corine Grant Central Integration Liaison corine_grant@hotmail.com | Viewer | |
Edwina Rogahn Internal Intranet Strategist edwina.rogahn@yahoo.com | Admin | |
Stephon Gusikowski Product Division Officer stephon.gusikowski@hotmail.com | Viewer | |
Casimir Mann National Response Supervisor casimir_mann@gmail.com | Member | |
Beulah Nienow Lead Metrics Technician beulah_nienow64@gmail.com | Admin | |
Javonte Mitchell Corporate Quality Architect javonte_mitchell@gmail.com | Admin | |
Natasha Boehm District Data Consultant natasha.boehm@gmail.com | Admin | |
Rigoberto Bogisich Principal Accountability Representative rigoberto_bogisich@hotmail.com | Viewer | |
Emilio Hartmann Legacy Mobility Producer emilio.hartmann9@hotmail.com | Viewer | |
Felton Stokes Dynamic Division Coordinator felton.stokes@hotmail.com | Member | |
Dorothy Pfannerstill Corporate Division Producer dorothy.pfannerstill@hotmail.com | Viewer | |
Mildred Veum Legacy Mobility Associate mildred.veum@yahoo.com | Member | |
Houston Okuneva Principal Brand Coordinator houston_okuneva62@yahoo.com | Member | |
Alfred Gutkowski Chief Security Designer alfred_gutkowski88@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 | |
|---|---|---|---|---|
| Royce Daniel | patrick_johnston60@hotmail.com | Lakewood | Active | $37.54 |
| Dr. Norman Kihn-Bednar | alf_ondricka69@yahoo.com | West Lorenaton | Inactive | $528.24 |
| Isaac Rempel | tatum.dietrich@gmail.com | South Ronnie | Active | $1,102.88 |
| Rhiannon Ruecker | lula_murazik31@yahoo.com | Iowa City | Active | $322.92 |
| Dorcas Heathcote | jacqueline.gutmann@gmail.com | Brettmouth | Inactive | $150.58 |
| Total | $2,142.16 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Annie Rohan @darian.howell64 | vance54@yahoo.com | South Lowellbury | Active | $865.33 |
Katherine Leannon @jamarcus_predovic93 | alene.yundt91@hotmail.com | East Mathewfurt | Active | $770.50 |
Ms. Mattie Labadie @kara99 | noble6@hotmail.com | West Clint | Active | $219.89 |
Taylor Tremblay @salvatore_towne63 | glen_greenholt@yahoo.com | Justinborough | Active | $450.41 |
Olive Feest @leonor.grant94 | devon42@gmail.com | West Laviniaport | Active | $270.10 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Yolanda Weimann | else11@yahoo.com | Pacochastead | Inactive | $1,135.73 |
| Mr. Keegan Marks | salvatore_rath@hotmail.com | Roobburgh | Active | $245.97 |
| Martin Hermiston | chelsie_shields@yahoo.com | Lake Julesstead | Active | $85.86 |
| Kimberly Hessel V | jaylan.reichel57@yahoo.com | Tracy | Inactive | $1,090.91 |
| Sonja Rippin | verda.crist@gmail.com | Cartertown | Inactive | $100.35 |
| Total | $2,658.82 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Frederick Goodwin | rico63@gmail.com | Garland | Inactive | $579.63 |
| Mrs. Dylan Grant | earl81@gmail.com | New Robbiestead | Active | $431.33 |
| Birdie Spencer | wanda_keebler56@gmail.com | West Ignacioberg | Active | $918.86 |
| Sidney Bartell | mona24@hotmail.com | Port Bernardoworth | Inactive | $955.27 |
| Mr. Madie Wisozk | zachary_mclaughlin62@hotmail.com | West Genefort | Inactive | $990.67 |
| Total | $3,875.76 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wade Prosacco | eleazar97@gmail.com | Kristenfield | Inactive | $666.58 |
| Miss Vladimir Hahn | delaney_cummerata@hotmail.com | D'Amorefield | Inactive | $1,158.31 |
| Lyle Kerluke | jenny.beatty90@gmail.com | Nitzscheville | Active | $276.66 |
| Darius Dooley | ann.champlin@gmail.com | Kelsiborough | Inactive | $209.53 |
| Darnell Treutel | aiyana63@yahoo.com | Port Jayceeton | Inactive | $139.17 |
| Total | $2,450.25 | |||
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 | ||
|---|---|---|---|---|---|
| Dena Harris | lula53@hotmail.com | West Maryann | Inactive | $784.22 | |
| James McDermott | al.pfeffer72@yahoo.com | South Stuart | Active | $360.85 | |
| Justen Marquardt | arnulfo.johnston89@yahoo.com | Cedar Rapids | Inactive | $844.66 | |
| Amber Barton | melanie89@yahoo.com | Triciafort | Inactive | $592.20 | |
| Sunny Powlowski | leona.daugherty57@hotmail.com | Townetown | Active | $780.47 | |
| Total | $3,362.40 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| David Williamson | harrison31@yahoo.com | Funkbury | Inactive | $522.20 | |
| Bruce Hayes | tamia83@hotmail.com | South Emerald | Active | $260.35 | |
| Lucia Kuphal | gregg_robel@gmail.com | Crona-Strackeberg | Active | $642.91 | |
| Yesenia Renner | bobby12@hotmail.com | New Eliane | Active | $104.06 | |
| Maribel Morar | alfredo_kohler6@gmail.com | Wuckertville | Inactive | $1,001.53 | |
| Total | $2,531.05 | ||||
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 | |
|---|---|---|---|---|
| Gaetano Sanford | retha.mertz95@hotmail.com | West Lesly | Active | $300.17 |
| Alicia Reichert | taya63@gmail.com | West Jairochester | Inactive | $670.06 |
| Jana Kshlerin | ismael.hirthe@hotmail.com | Neilfort | Active | $760.29 |
| Todd Bashirian | theresa.waters91@hotmail.com | Mayeboro | Inactive | $320.39 |
| Vernon Schimmel | joann90@yahoo.com | Boscostad | Inactive | $1,147.63 |
| Lolita Cormier | nora90@yahoo.com | Port Tyrique | Active | $739.05 |
| Rudy Bernhard | annabelle.mclaughlin@gmail.com | Jackson | Inactive | $714.39 |
| Beth Turcotte V | deborah.heller@yahoo.com | Wilkinsonland | Active | $952.89 |
| Braeden Stanton | elijah29@gmail.com | Fort Pierce | Inactive | $241.89 |
| Elena Aufderhar | daniela_welch@yahoo.com | West Iraworth | Active | $90.54 |
| Miss Chandler Walsh | adeline.tromp@gmail.com | Oletaboro | Inactive | $205.72 |
| Rupert Paucek | letitia_champlin94@gmail.com | Joliet | Inactive | $993.51 |
| Bettye Erdman | sarah51@gmail.com | Lake Reaganside | Active | $278.60 |
| Reuben Gerlach PhD | brandi_douglas23@hotmail.com | Irmachester | Inactive | $781.91 |
| Malvina Bergstrom | lucy.bosco@gmail.com | Moore | Active | $1,196.71 |
| Total | $9,393.75 | |||
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 |