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 | $755.00 |
| INV002 | Paid | Bank Transfer | $482.15 |
| INV003 | Pending | PayPal | $298.34 |
| INV004 | Pending | PayPal | $745.87 |
| INV005 | Unpaid | Bank Transfer | $857.10 |
| INV006 | Pending | PayPal | $822.63 |
| INV007 | Unpaid | Credit Card | $229.78 |
| Total | $4,190.87 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Eriberto Cassin | Human Creative Developer | eriberto_cassin23@hotmail.com | Member | |
| Nathaniel DuBuque | National Metrics Coordinator | nathaniel.dubuque@hotmail.com | Admin | |
| Nickolas Greenfelder | Product Program Representative | nickolas.greenfelder@hotmail.com | Admin | |
| Otilia Farrell | Future Creative Administrator | otilia_farrell24@hotmail.com | Admin | |
| Curt Cruickshank | Investor Research Supervisor | curt.cruickshank21@yahoo.com | Viewer | |
| Gudrun Robel | Principal Usability Director | gudrun.robel@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 |
|---|---|---|
Emma Kohler Internal Operations Engineer emma_kohler25@gmail.com | Admin | |
Ashleigh Rowe District Accountability Officer ashleigh_rowe1@gmail.com | Viewer | |
Cara Armstrong Regional Factors Designer cara.armstrong@hotmail.com | Viewer | |
Nicola Rogahn Principal Creative Representative nicola_rogahn@yahoo.com | Admin | |
Terrill Padberg District Security Manager terrill_padberg@hotmail.com | Member | |
Furman Witting Forward Response Associate furman.witting77@gmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Leland Maggio District Data Producer leland.maggio@gmail.com | Member | |
Jazmin Wiza Investor Tactics Executive jazmin_wiza70@gmail.com | Member | |
Soledad Wisozk Global Paradigm Analyst soledad_wisozk53@yahoo.com | Admin | |
Kennedi Rath-Jacobi Investor Tactics Analyst kennedi_rath-jacobi@hotmail.com | Viewer | |
Barney Kuhic National Program Liaison barney_kuhic@gmail.com | Member | |
Mariane Haley Dynamic Tactics Engineer mariane_haley@gmail.com | Viewer | |
Alisa Douglas Human Factors Specialist alisa.douglas@hotmail.com | Viewer | |
Garnet Thiel Product Accounts Analyst garnet_thiel@hotmail.com | Member | |
Donato Greenholt Regional Metrics Executive donato.greenholt29@yahoo.com | Viewer | |
Jayde Lind Principal Factors Specialist jayde.lind@yahoo.com | Member | |
Lenna Kihn-Cummings Regional Intranet Coordinator lenna_kihn-cummings77@gmail.com | Member | |
Alfred Wolf Regional Brand Producer alfred.wolf@hotmail.com | Admin | |
Joany Powlowski National Functionality Architect joany.powlowski22@yahoo.com | Viewer | |
May Will Human Identity Officer may_will@gmail.com | Viewer | |
Naomi Block Future Brand Representative naomi_block25@gmail.com | Admin | |
Bobbie Quitzon Direct Creative Liaison bobbie.quitzon@yahoo.com | Member | |
Cathrine Ward Central Configuration Architect cathrine.ward@hotmail.com | Member | |
Kayley Hermann Lead Usability Agent kayley.hermann55@yahoo.com | Member | |
Kailey Nader Direct Metrics Engineer kailey.nader@gmail.com | Admin | |
Robert Jaskolski-Mosciski International Accounts Coordinator robert_jaskolski-mosciski@gmail.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 | |
|---|---|---|---|---|
| Pauline Kihn | kacie.streich-kshlerin87@hotmail.com | MacGyverville | Active | $654.54 |
| Raymond Goodwin | linnie.hills77@yahoo.com | Lake Bennett | Inactive | $625.30 |
| Emma Walker | pierce_mosciski@yahoo.com | Fort Maiya | Inactive | $192.32 |
| Orville Berge | rebeca34@yahoo.com | South Margarettfield | Inactive | $262.33 |
| Brittany Bahringer V | alena_tremblay81@hotmail.com | Josefaworth | Inactive | $1,034.58 |
| Total | $2,769.07 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Natalie MacGyver @caterina60 | sydnie78@gmail.com | New Lesleytown | Active | $107.46 |
Mr. Ismael Emmerich @iliana_bogisich38 | niko_steuber36@yahoo.com | Jacobiborough | Inactive | $687.95 |
Marco Borer @milford_walter | thaddeus21@hotmail.com | North Abbytown | Active | $62.32 |
Leah Bergstrom @vincent_champlin | anjali_lowe-vandervort90@hotmail.com | Berwyn | Active | $1,081.29 |
Kathryn Kris @terrance.blanda17 | cedrick70@hotmail.com | Jacobitown | Active | $320.61 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mr. Isaac Glover | marcella_stiedemann@yahoo.com | Port Concepcion | Active | $765.36 |
| Beth Armstrong | teresa.rutherford70@hotmail.com | Linaton | Active | $509.60 |
| Kay Abbott | clemens.stanton11@gmail.com | South Robertoburgh | Inactive | $397.46 |
| Conrad Fay | nathan_crist@hotmail.com | Kirkland | Inactive | $877.10 |
| Samantha Corkery-Zulauf | glen.sporer62@gmail.com | North Weldonworth | Active | $62.29 |
| Total | $2,611.81 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ginger Oberbrunner | gavin91@gmail.com | Scranton | Active | $288.38 |
| Tamara Schneider V | myles48@hotmail.com | Lake Elianebury | Active | $166.95 |
| Faye McKenzie | theodora.keeling@yahoo.com | Javonmouth | Inactive | $1,123.91 |
| Janet DuBuque | aron15@yahoo.com | South Hilariocester | Inactive | $904.52 |
| Jeremiah Luettgen | micaela_schneider@hotmail.com | Summerville | Active | $927.42 |
| Total | $3,411.18 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Tyler Kihn Jr. | richard.lesch83@gmail.com | Clearwater | Inactive | $273.31 |
| Mr. Raymond Larkin | jasmin8@gmail.com | South Bennett | Active | $52.99 |
| Francis Upton-Walsh | rosetta.kshlerin19@yahoo.com | Port Geovanny | Active | $844.55 |
| Ricardo Kunze | hallie.zboncak7@yahoo.com | East Ernestine | Active | $111.91 |
| Ray Hackett | renee_legros62@hotmail.com | East Osbaldofield | Inactive | $789.47 |
| Total | $2,072.23 | |||
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 | ||
|---|---|---|---|---|---|
| Patti Lind | makenzie_kemmer@yahoo.com | Boganland | Active | $525.33 | |
| Lester Wiegand | destini33@hotmail.com | South Lonniefield | Inactive | $473.30 | |
| Gloria Cummings | gladyce13@hotmail.com | Opalboro | Active | $856.09 | |
| Helen Bernier | tanya38@gmail.com | Amiefort | Active | $1,157.06 | |
| Vanessa Mills | freida11@gmail.com | Terryfort | Active | $549.68 | |
| Total | $3,561.46 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mrs. Eileen White | gerardo.rath7@hotmail.com | East Garrisonberg | Active | $690.33 | |
| Jaime Erdman | adrien2@gmail.com | Eleanoreshire | Inactive | $851.79 | |
| Curtis Ferry | hellen63@hotmail.com | Fort Remington | Active | $558.00 | |
| Salvador Leuschke I | hollis84@gmail.com | Beaumont | Active | $84.11 | |
| Susie Schuppe | sofia62@gmail.com | Lake Larissa | Active | $814.61 | |
| Total | $2,998.84 | ||||
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 | |
|---|---|---|---|---|
| Keith Mertz | evie48@gmail.com | Fort Kendall | Active | $389.57 |
| Dr. Gwendolyn Zboncak | hattie.weimann-grimes@yahoo.com | South Mohammed | Inactive | $95.74 |
| Sadie Heidenreich | jamarcus33@gmail.com | Lake Maxine | Active | $458.24 |
| Gail Bailey | danielle71@hotmail.com | Fort Michale | Inactive | $294.49 |
| Leona Ferry | dortha59@hotmail.com | West Brandyn | Inactive | $722.11 |
| Mable Grant | jonathon_pagac98@gmail.com | New Catherine | Inactive | $782.50 |
| Michele Jacobs | casimer.lang@gmail.com | Elizabethshire | Active | $1,144.56 |
| Lola Morar-Lind | clemmie_monahan@gmail.com | Fargo | Inactive | $836.48 |
| Wendy Schumm | german.emard33@yahoo.com | Lake Misael | Active | $1,058.85 |
| Maurice Hilpert | alf_moore@yahoo.com | Alpharetta | Active | $633.43 |
| Irving Hansen-Dach | dariana_feil@gmail.com | Lake Mireille | Inactive | $764.21 |
| Sylvia Blanda | bernardo_zulauf@yahoo.com | Torphyton | Inactive | $128.80 |
| Peggy Gerhold | edward_buckridge@yahoo.com | Lukasworth | Inactive | $704.95 |
| Laverne Lang | eldora11@yahoo.com | Lake Patienceton | Active | $17.33 |
| Bryan Gottlieb | paula56@gmail.com | Blickville | Active | $1,083.20 |
| Total | $9,114.46 | |||
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 |