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 | $428.65 |
| INV002 | Paid | Credit Card | $591.84 |
| INV003 | Paid | Credit Card | $571.55 |
| INV004 | Unpaid | PayPal | $610.20 |
| INV005 | Paid | Credit Card | $524.60 |
| INV006 | Unpaid | PayPal | $893.27 |
| INV007 | Pending | PayPal | $873.30 |
| Total | $4,493.41 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Alonzo Koelpin | Direct Functionality Agent | alonzo.koelpin18@yahoo.com | Viewer | |
| Abdul Emard | Internal Division Analyst | abdul.emard@hotmail.com | Admin | |
| Katherine Lindgren | Customer Communications Administrator | katherine.lindgren@gmail.com | Viewer | |
| Lyle Jaskolski | Dynamic Assurance Architect | lyle_jaskolski@hotmail.com | Viewer | |
| Judith Stanton | District Branding Engineer | judith.stanton@hotmail.com | Viewer | |
| Doreen Luettgen | Chief Factors Administrator | doreen_luettgen14@yahoo.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 |
|---|---|---|
Joy Marquardt Central Security Representative joy.marquardt5@yahoo.com | Viewer | |
Christina Lockman Investor Identity Facilitator christina.lockman61@yahoo.com | Member | |
Clifton Olson Senior Data Orchestrator clifton_olson31@hotmail.com | Viewer | |
Coralie Feest Regional Interactions Executive coralie.feest74@yahoo.com | Member | |
Deja Hettinger-Senger Direct Quality Coordinator deja_hettinger-senger91@hotmail.com | Member | |
Zoey Pacocha Product Infrastructure Associate zoey_pacocha@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 |
|---|---|---|
Mavis Breitenberg Investor Implementation Planner mavis_breitenberg79@hotmail.com | Viewer | |
Katrine Nikolaus-Gleichner Direct Web Developer katrine.nikolaus-gleichner67@hotmail.com | Member | |
Maureen Ullrich Principal Paradigm Liaison maureen_ullrich73@hotmail.com | Viewer | |
Miranda MacGyver Future Infrastructure Producer miranda_macgyver@hotmail.com | Admin | |
Matt Kassulke Investor Data Consultant matt_kassulke@gmail.com | Member | |
Effie Tromp Internal Security Liaison effie.tromp@gmail.com | Admin | |
Morton Schultz Forward Factors Consultant morton.schultz86@gmail.com | Viewer | |
Arturo Leffler Corporate Brand Analyst arturo_leffler@yahoo.com | Member | |
Carol Graham National Interactions Associate carol.graham@gmail.com | Viewer | |
Liza Borer Investor Infrastructure Associate liza.borer@gmail.com | Member | |
Lisa Koelpin Dynamic Markets Producer lisa_koelpin21@hotmail.com | Member | |
Arjun Yundt Principal Configuration Director arjun_yundt@gmail.com | Admin | |
Justina Ferry Central Assurance Technician justina.ferry@yahoo.com | Admin | |
Sigmund Friesen Investor Implementation Strategist sigmund.friesen@yahoo.com | Member | |
Jordan Lebsack-Rath Corporate Brand Coordinator jordan.lebsack-rath35@hotmail.com | Member | |
Hugh Dickens Regional Accounts Facilitator hugh.dickens@yahoo.com | Admin | |
Rocky Hauck Direct Accountability Coordinator rocky_hauck49@yahoo.com | Admin | |
Alvena Kirlin Lead Factors Executive alvena.kirlin@yahoo.com | Admin | |
Ransom Schinner Legacy Program Agent ransom.schinner31@yahoo.com | Admin | |
Howard Hoppe District Assurance Manager howard.hoppe@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 | |
|---|---|---|---|---|
| Lyle Schmeler | anabel73@hotmail.com | Gaithersburg | Inactive | $641.25 |
| Omer Upton | sophie10@hotmail.com | West Lurline | Active | $347.91 |
| Mr. Emanuel Herzog | ramiro_wunsch83@gmail.com | Scranton | Inactive | $804.53 |
| Woodrow Smith Sr. | janis.muller1@yahoo.com | Bethcester | Active | $1,027.50 |
| Rosie Schamberger V | jenna.murphy@gmail.com | Tianamouth | Inactive | $820.57 |
| Total | $3,641.76 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Vivian Koch MD @leonie.cruickshank | brant75@gmail.com | West David | Inactive | $332.13 |
Moshe Nolan @luella_bernhard | ansel_stark84@gmail.com | Earnestworth | Active | $790.88 |
Abel Lemke @lionel.gleason | ed78@hotmail.com | Lake Shannahaven | Inactive | $474.99 |
Francis Wiza @freda72 | ronny.white-quigley@hotmail.com | South Aglaeview | Inactive | $915.70 |
Vivien Wyman @scott98 | laisha.hirthe@yahoo.com | North Catherinetown | Active | $410.46 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ashlee Halvorson | kenny_marquardt14@hotmail.com | Dominicmouth | Inactive | $59.45 |
| Giovanna Christiansen | cary38@yahoo.com | Amyfield | Inactive | $526.58 |
| Willa Simonis | luther.bruen13@gmail.com | Goldnerstad | Inactive | $1,113.91 |
| Cory Schaden | isadore12@yahoo.com | West Sueland | Active | $299.90 |
| Arch Carroll | cayla_pouros7@gmail.com | Port Melisafield | Active | $594.71 |
| Total | $2,594.55 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Lorene Parker III | myrtle_sanford51@gmail.com | Fort Dalestad | Inactive | $856.70 |
| Mrs. Flora Block | brandi_kovacek@yahoo.com | Rosaliebury | Active | $343.61 |
| Ms. Joy Beer | winifred.ratke@yahoo.com | North Aglaebury | Active | $775.24 |
| Arianna Rempel | dwayne.altenwerth46@gmail.com | East Veronaworth | Active | $134.96 |
| Tammy McClure | sven_terry@yahoo.com | Calefield | Inactive | $907.54 |
| Total | $3,018.05 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Laura White MD | eloise_durgan@gmail.com | Williamsonside | Inactive | $228.77 |
| Maximilian Batz | junius.emmerich@gmail.com | Kendall | Inactive | $1,081.76 |
| Micheal Mraz DDS | rosetta_konopelski@yahoo.com | Sandy | Inactive | $345.40 |
| Max Torp-Wunsch I | moses_fahey@yahoo.com | New Rogeliomouth | Active | $519.87 |
| Roosevelt Metz | calvin67@yahoo.com | Fort Karleestead | Active | $146.79 |
| Total | $2,322.59 | |||
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 | ||
|---|---|---|---|---|---|
| Evert Reichert | salvador.kuvalis@gmail.com | Kautzerworth | Inactive | $293.25 | |
| Lindsey Jaskolski | emerson_hoppe13@gmail.com | Alejandroville | Active | $686.88 | |
| Carissa Nikolaus | gregg.bode5@hotmail.com | Pfannerstillstead | Inactive | $1,071.33 | |
| Alivia Hermiston | kamille.macgyver@hotmail.com | West Dulceport | Active | $232.29 | |
| Grover Hilpert | jaunita46@gmail.com | Oberbrunnerborough | Inactive | $2.03 | |
| Total | $2,285.78 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ralph Wiza | adolphus_wolf7@hotmail.com | Christaport | Inactive | $956.09 | |
| Mrs. Jamil Bartell Jr. | rex_runte66@gmail.com | Halvorsonstead | Active | $1,180.16 | |
| Darrel Rohan | violet.kessler@hotmail.com | New Haven | Active | $1,078.96 | |
| Mr. Melvin Padberg | rosie83@gmail.com | North Green | Inactive | $47.60 | |
| Sienna Hessel | willard_hansen@yahoo.com | Aronberg | Active | $929.48 | |
| Total | $4,192.29 | ||||
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 | |
|---|---|---|---|---|
| Otilia Ernser | kyler.bartoletti@hotmail.com | East Karlihaven | Inactive | $616.33 |
| Gregg Krajcik | ann.johnson@yahoo.com | Palmdale | Active | $587.76 |
| Jo Rohan | florence11@yahoo.com | Sawaynworth | Active | $65.99 |
| Turner Bernier | magnolia.considine@hotmail.com | Jaquanside | Inactive | $1,139.37 |
| Libby Gleason | trevor_lesch-auer14@yahoo.com | New Sergio | Inactive | $514.29 |
| Peter Borer PhD | rylan.goldner@hotmail.com | Kovacekberg | Inactive | $971.65 |
| Noble Will | stuart.vonrueden@yahoo.com | Reynoldsstad | Inactive | $416.43 |
| Derek Kutch | sylvester.bruen@gmail.com | Pflugerville | Inactive | $58.84 |
| Mrs. Destany Robel | travis.greenholt@hotmail.com | South Clarenceborough | Inactive | $1,066.81 |
| Paige Rogahn | aniya.conn3@hotmail.com | Fresno | Active | $272.24 |
| Ara Hoeger | augustine.gerlach-zulauf@gmail.com | Tigard | Active | $538.58 |
| Raquel Baumbach | heloise54@yahoo.com | Beahan-Lakinchester | Inactive | $248.19 |
| Lennie Satterfield | rosemary_dickens33@yahoo.com | Coeur d'Alene | Inactive | $60.55 |
| Jennie Schneider-Bednar | narciso6@hotmail.com | Euniceborough | Active | $638.35 |
| Blair Okuneva | leanne46@yahoo.com | North Maryann | Inactive | $570.84 |
| Total | $7,766.22 | |||
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 |