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 | Bank Transfer | $975.91 |
| INV002 | Unpaid | PayPal | $545.61 |
| INV003 | Unpaid | PayPal | $731.44 |
| INV004 | Paid | Bank Transfer | $148.11 |
| INV005 | Pending | Bank Transfer | $500.81 |
| INV006 | Unpaid | PayPal | $544.17 |
| INV007 | Paid | PayPal | $395.13 |
| Total | $3,841.18 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jerrold Jaskolski | Legacy Research Engineer | jerrold_jaskolski@hotmail.com | Viewer | |
| Lucille DuBuque | Chief Factors Engineer | lucille_dubuque21@hotmail.com | Viewer | |
| Rufus Lueilwitz | Global Tactics Orchestrator | rufus.lueilwitz55@hotmail.com | Member | |
| Candida Little | National Markets Representative | candida.little@yahoo.com | Admin | |
| Ernestine Stiedemann-Mante | Forward Functionality Liaison | ernestine.stiedemann-mante@hotmail.com | Member | |
| Nicholas Dietrich | Global Markets Designer | nicholas.dietrich93@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 |
|---|---|---|
Fred McLaughlin Dynamic Tactics Associate fred_mclaughlin@gmail.com | Admin | |
Rex Williamson Corporate Implementation Agent rex.williamson@yahoo.com | Member | |
Judah Wolf Dynamic Assurance Manager judah_wolf@hotmail.com | Member | |
Gerson Ferry Direct Usability Architect gerson_ferry@hotmail.com | Viewer | |
Cecil Ondricka Investor Paradigm Engineer cecil.ondricka@hotmail.com | Viewer | |
Jonathon Anderson Forward Interactions Architect jonathon.anderson54@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 |
|---|---|---|
Carlotta Schamberger National Communications Executive carlotta_schamberger@hotmail.com | Admin | |
Elbert Runte Legacy Optimization Assistant elbert.runte@hotmail.com | Admin | |
June Jaskolski District Configuration Facilitator june_jaskolski14@gmail.com | Member | |
Maritza Cummerata Investor Group Associate maritza_cummerata@hotmail.com | Admin | |
Felicita Franey Corporate Solutions Strategist felicita.franey@hotmail.com | Member | |
Vincenzo Kertzmann Forward Solutions Assistant vincenzo.kertzmann65@gmail.com | Viewer | |
Roberta Reilly Global Markets Director roberta.reilly@yahoo.com | Admin | |
Donnie Renner Regional Intranet Strategist donnie_renner18@gmail.com | Viewer | |
Scott Daugherty Senior Usability Facilitator scott_daugherty@gmail.com | Admin | |
Jan Cummings National Applications Coordinator jan.cummings74@yahoo.com | Viewer | |
Chad Lang International Mobility Officer chad.lang6@hotmail.com | Viewer | |
Nathan Price Future Assurance Representative nathan_price57@hotmail.com | Member | |
April Thompson Customer Solutions Engineer april_thompson@hotmail.com | Member | |
Glenda Mitchell-Watsica Corporate Accounts Officer glenda_mitchell-watsica65@gmail.com | Viewer | |
Samuel Ortiz Chief Branding Designer samuel.ortiz7@hotmail.com | Viewer | |
Donato Schulist Human Accountability Manager donato.schulist@yahoo.com | Member | |
Maurice Johnston Direct Security Technician maurice_johnston57@yahoo.com | Admin | |
Cecilia Grant Human Metrics Representative cecilia_grant29@gmail.com | Admin | |
Alton Hyatt International Usability Strategist alton.hyatt81@yahoo.com | Viewer | |
Jacqueline Brown-Stanton Internal Program Executive jacqueline.brown-stanton27@gmail.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 | |
|---|---|---|---|---|
| Derrick Klein | lexi.davis47@gmail.com | Livermore | Inactive | $774.98 |
| Shawn Erdman | camille_luettgen@gmail.com | Elyria | Inactive | $29.04 |
| Peggy Okuneva | rafaela.gislason8@yahoo.com | Wizatown | Inactive | $190.41 |
| Lazaro Considine | esther17@yahoo.com | Fort Adrienne | Inactive | $354.95 |
| Norwood Casper | bradford_labadie83@gmail.com | Tianafield | Inactive | $741.08 |
| Total | $2,090.46 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Nicole Gerhold @gus.runte | rhonda_gorczany@gmail.com | Ryleighberg | Active | $1,072.83 |
Jakayla Volkman @jennie.jenkins | alonzo_hoeger-wolff21@gmail.com | Port Alveraside | Active | $564.26 |
Laurine Rogahn @alberta.rutherford | madeline_donnelly@yahoo.com | Schuppeside | Inactive | $184.18 |
Precious O'Conner @giles_walker-skiles27 | jason93@gmail.com | Syracuse | Inactive | $1,160.05 |
Sheri Waters @hazel35 | roosevelt_feil-kihn48@hotmail.com | New Enrique | Active | $1,039.49 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elmer Kling | sharon.franecki@hotmail.com | Schoenchester | Active | $21.59 |
| Garett McCullough | ray.daugherty47@yahoo.com | Territown | Inactive | $545.69 |
| Judith Hoeger | randall_hyatt3@hotmail.com | Eduardostead | Inactive | $591.83 |
| Mr. Simone Streich | margarita77@hotmail.com | Smithtown | Active | $1,047.53 |
| Tricia Beatty | marlene40@gmail.com | North Steven | Inactive | $1,128.34 |
| Total | $3,334.98 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kayla Hoeger Jr. | warren_kozey42@gmail.com | East Bonnieton | Active | $87.03 |
| Dr. Bryce Walker Jr. | denise35@yahoo.com | Herzog-Blandabury | Active | $629.31 |
| Paolo Krajcik | earnestine28@hotmail.com | Stacyville | Inactive | $855.79 |
| Paul Collins | melvin_schmitt@hotmail.com | Vickyburgh | Inactive | $753.27 |
| Brooks Metz | iliana_rutherford12@yahoo.com | Pico Rivera | Active | $165.06 |
| Total | $2,490.46 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elizabeth Cartwright | sophie64@hotmail.com | Rolfson-Stiedemannberg | Inactive | $496.40 |
| Vito Wyman | harrison.doyle83@hotmail.com | Balistreriboro | Active | $639.90 |
| Monica Muller | michael.farrell5@yahoo.com | Carolina | Inactive | $146.21 |
| Clay Christiansen DVM | jerel_keebler22@gmail.com | Walkerfort | Inactive | $1,110.93 |
| Jodi Heaney | roslyn78@hotmail.com | Steveborough | Active | $458.12 |
| Total | $2,851.56 | |||
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 | ||
|---|---|---|---|---|---|
| Anne DuBuque | marley.sawayn52@yahoo.com | Port Jewel | Active | $429.69 | |
| Aaliyah Buckridge | lupe83@hotmail.com | Tommyburgh | Inactive | $265.09 | |
| Kristin Lakin | elbert30@yahoo.com | Pinkietown | Inactive | $801.15 | |
| Ms. Bertha Prosacco | edythe13@hotmail.com | Gillianboro | Active | $133.04 | |
| Yazmin Kuvalis | kallie4@hotmail.com | Larkinhaven | Active | $627.38 | |
| Total | $2,256.35 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Natasha Ziemann Sr. | bessie.konopelski92@gmail.com | North Brendaton | Active | $931.03 | |
| Timothy Zulauf | garret70@gmail.com | West Janis | Active | $512.50 | |
| Dr. Caden Roob | richard.krajcik50@gmail.com | Autumncester | Active | $1,147.08 | |
| Hailey Streich | peggy_willms24@yahoo.com | Sheriport | Active | $353.91 | |
| Keith Maggio | lizzie_rogahn@yahoo.com | Joaquinstead | Inactive | $682.54 | |
| Total | $3,627.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 | |
|---|---|---|---|---|
| Edwardo Pfeffer | ron.mante@hotmail.com | Dickicester | Inactive | $1,161.73 |
| Andres Gleichner | fay.mayert8@yahoo.com | Jerelcester | Active | $333.90 |
| Estelle Carter | carla_schowalter@hotmail.com | Iowa City | Inactive | $501.70 |
| Etha Kautzer-Weimann | darlene_mcglynn@hotmail.com | Lake Kenny | Inactive | $626.02 |
| Lonie Hagenes | trevor_reinger-homenick98@gmail.com | Hyattmouth | Active | $323.45 |
| Jerad McLaughlin | paul_dibbert95@yahoo.com | Fontana | Inactive | $962.91 |
| Joaquin Brekke | phillip74@hotmail.com | Port Howard | Active | $631.52 |
| Darla Ledner | alexis_sawayn65@hotmail.com | South Mauricestad | Active | $1,085.66 |
| Opal Grant I | emilio72@yahoo.com | Pittsburgh | Inactive | $317.25 |
| Ezequiel Fahey | omar_runte@yahoo.com | Murray | Inactive | $1,092.88 |
| Craig Kuhic | timmy.kassulke4@gmail.com | Lewismouth | Active | $635.86 |
| Mrs. Rosemarie Gleichner | matthew_kub16@hotmail.com | Mackenziebury | Inactive | $1,079.73 |
| Merlin Ondricka Sr. | erica10@gmail.com | North Mylesshire | Inactive | $542.93 |
| Ludie Trantow DVM | urban.gutmann@yahoo.com | South Jennifer | Inactive | $555.20 |
| Rodolfo Wilkinson | maymie12@hotmail.com | Bettyberg | Active | $547.77 |
| Total | $10,398.51 | |||
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 |