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 | $594.57 |
| INV002 | Paid | Credit Card | $481.86 |
| INV003 | Paid | Credit Card | $884.91 |
| INV004 | Pending | Bank Transfer | $523.23 |
| INV005 | Paid | Bank Transfer | $422.16 |
| INV006 | Unpaid | Credit Card | $687.71 |
| INV007 | Unpaid | PayPal | $918.75 |
| Total | $4,513.19 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kallie McGlynn | District Operations Representative | kallie_mcglynn@hotmail.com | Viewer | |
| Teresa Berge | Forward Implementation Strategist | teresa_berge@yahoo.com | Member | |
| Gary Klocko | Senior Research Supervisor | gary.klocko@gmail.com | Viewer | |
| Joann Emard | Principal Optimization Analyst | joann_emard@gmail.com | Viewer | |
| Roland Walsh | Global Metrics Representative | roland.walsh@gmail.com | Member | |
| Esther Raynor | Corporate Marketing Developer | esther_raynor99@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 |
|---|---|---|
Woodrow Mann Product Brand Supervisor woodrow.mann65@hotmail.com | Admin | |
Guillermo Lueilwitz Dynamic Web Assistant guillermo_lueilwitz@yahoo.com | Admin | |
Nicolas Feil Corporate Web Assistant nicolas.feil@hotmail.com | Admin | |
Jessica Rolfson Chief Creative Associate jessica.rolfson@yahoo.com | Admin | |
Evelyn Jacobi Corporate Optimization Director evelyn_jacobi@hotmail.com | Viewer | |
Janis DuBuque Principal Mobility Director janis.dubuque@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 |
|---|---|---|
Giovanny Reinger Direct Solutions Supervisor giovanny_reinger99@hotmail.com | Admin | |
Karson Grant Legacy Accounts Coordinator karson.grant77@yahoo.com | Viewer | |
Faustino Jones Regional Directives Architect faustino.jones94@yahoo.com | Admin | |
Greg Fadel Chief Brand Architect greg_fadel@yahoo.com | Admin | |
Unique Boyer-Graham Human Directives Analyst unique.boyer-graham@hotmail.com | Member | |
Hans Kertzmann Lead Directives Agent hans_kertzmann@gmail.com | Admin | |
Marie Murphy Human Factors Planner marie.murphy@gmail.com | Member | |
Alyssa Bailey Product Applications Architect alyssa_bailey33@hotmail.com | Member | |
Jody Prosacco Direct Factors Director jody_prosacco79@hotmail.com | Admin | |
Angelica Mohr Future Marketing Manager angelica_mohr@hotmail.com | Viewer | |
Lavina Hane Customer Mobility Producer lavina.hane@gmail.com | Member | |
Brayan Torphy Principal Integration Planner brayan.torphy@yahoo.com | Viewer | |
Hubert Watsica Direct Metrics Coordinator hubert.watsica99@gmail.com | Member | |
Ebony Bahringer Senior Infrastructure Coordinator ebony.bahringer@hotmail.com | Admin | |
Lora Cummerata National Program Administrator lora_cummerata59@hotmail.com | Member | |
Ariel Carroll Direct Identity Engineer ariel.carroll@yahoo.com | Viewer | |
Abbie O'Connell Direct Directives Manager abbie.oconnell52@yahoo.com | Admin | |
Leon McLaughlin Product Division Planner leon.mclaughlin@yahoo.com | Viewer | |
Armando Powlowski International Implementation Assistant armando.powlowski@gmail.com | Viewer | |
Judge Adams District Tactics Executive judge_adams@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 | |
|---|---|---|---|---|
| Jean Farrell | elsie9@gmail.com | West Abbie | Active | $145.08 |
| Dwight Johnson MD | ciara34@hotmail.com | East Carmellamouth | Active | $130.10 |
| Juan Erdman | ramona.jaskolski@hotmail.com | Boganside | Active | $761.57 |
| Ian O'Reilly | vicente72@gmail.com | Boylefort | Active | $892.90 |
| Bruce Littel | marisol32@hotmail.com | Emmaleeside | Inactive | $644.74 |
| Total | $2,574.39 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Art Johns @dexter.raynor20 | kelvin.moore63@hotmail.com | Rancho Cordova | Active | $825.59 |
Thomas Christiansen DDS @valerie_adams-rodriguez20 | sophia.rolfson-goldner@hotmail.com | New Margot | Active | $106.07 |
Faye Hermiston @alva54 | abner18@hotmail.com | Howeville | Active | $911.61 |
Lupe Rosenbaum @manuel_hansen20 | doug64@gmail.com | Avondale | Active | $105.08 |
Maida Hamill @mikayla_torp | delia72@hotmail.com | Beattyborough | Inactive | $848.19 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Abelardo Cole | mack.swaniawski90@hotmail.com | Fort Quentin | Active | $502.35 |
| Santiago Stiedemann | ellis92@gmail.com | Desmondburgh | Active | $459.37 |
| Jedediah Harber | roberta_bechtelar84@hotmail.com | Braunport | Active | $68.65 |
| Gilda Aufderhar | salvador_dietrich@hotmail.com | East Shayleestead | Active | $735.56 |
| Isabell Kessler | lucille_johnston90@hotmail.com | Deckowport | Active | $902.06 |
| Total | $2,667.99 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sophie Cassin | mario1@gmail.com | Tyrafort | Inactive | $973.67 |
| Jarrett Goldner | julio_torphy63@gmail.com | South Issac | Active | $836.35 |
| Rhoda O'Kon-Pagac | price_keebler56@hotmail.com | Kaceyberg | Active | $568.81 |
| Sunny Wiegand DDS | gertrude.okeefe@hotmail.com | Newport News | Active | $849.20 |
| Jean Walsh | ian57@gmail.com | Salvatoreside | Inactive | $908.00 |
| Total | $4,136.03 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Patsy Ruecker | davon.walsh56@hotmail.com | South Albertstad | Active | $922.75 |
| Mr. Rosemary Anderson | justice.kirlin87@gmail.com | Fort Esther | Active | $381.23 |
| Roberto Heaney | patricia.rodriguez91@yahoo.com | Hermannborough | Active | $111.11 |
| Ms. Ernesto Tromp DDS | edgar.jacobs@gmail.com | Missoula | Active | $324.63 |
| Dusty Crist-Olson | adan52@yahoo.com | Sengerberg | Inactive | $938.58 |
| Total | $2,678.30 | |||
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 | ||
|---|---|---|---|---|---|
| Kiana Schultz | joelle3@hotmail.com | Considinestad | Active | $1,050.99 | |
| Ms. Zackery Gislason | jason42@yahoo.com | West Kalebborough | Active | $57.75 | |
| Chester Grimes-Gleichner | alexandra70@yahoo.com | Effertzhaven | Inactive | $1,051.62 | |
| Hosea Heidenreich II | moses16@yahoo.com | Lake Sofia | Active | $195.03 | |
| Molly Reilly | antonia42@gmail.com | Sterling Heights | Active | $653.85 | |
| Total | $3,009.24 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Raul Turcotte | harvey.feeney@yahoo.com | West Kacifurt | Inactive | $1,067.20 | |
| Arlene Blick | owen_kunze@yahoo.com | Lake Rosarioland | Active | $879.92 | |
| Hoyt Jacobs | boyd.treutel@gmail.com | Blandastad | Active | $1,166.71 | |
| Jocelyn Kulas | joyce_lockman@gmail.com | Henriton | Inactive | $231.64 | |
| Quincy Turcotte | bessie.hand@hotmail.com | Camarillo | Inactive | $73.30 | |
| Total | $3,418.77 | ||||
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 | |
|---|---|---|---|---|
| Dr. Jared Pacocha | coty.cummerata-dach24@hotmail.com | Schimmelview | Inactive | $345.16 |
| King Runolfsdottir-Hayes | esther_torp@hotmail.com | South Brielle | Inactive | $943.05 |
| Kacie Rempel PhD | santos.torphy@hotmail.com | Jonesview | Inactive | $632.18 |
| Adrian Conn | ron81@hotmail.com | Aubreechester | Inactive | $973.67 |
| King Sawayn | horacio.bogisich47@yahoo.com | North Lamont | Active | $324.63 |
| Julia Bode I | jose93@hotmail.com | Funkworth | Active | $844.55 |
| Ima Von | edwin74@yahoo.com | Mayertstead | Inactive | $288.62 |
| Keanu Mayer | lessie.ratke@gmail.com | Niagara Falls | Inactive | $326.48 |
| Mario Johnston | johnathan_cremin90@yahoo.com | East Alba | Active | $126.48 |
| Dahlia Brown-Stanton | jorge.predovic-carter@yahoo.com | Hayward | Inactive | $482.35 |
| Adam Will | samara.macejkovic81@hotmail.com | Ernserhaven | Inactive | $1,069.54 |
| Shyanne Parker | guy41@yahoo.com | Sallytown | Active | $1,199.47 |
| Ms. Casey Luettgen | judson_lockman-hackett@yahoo.com | Metairie | Inactive | $667.02 |
| Ashleigh Wisoky | anissa_conn@gmail.com | Ferrytown | Active | $742.13 |
| Jerome Thiel | isidro.corkery@hotmail.com | Des Moines | Inactive | $832.91 |
| Total | $9,798.24 | |||
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 |