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 | $805.89 |
| INV002 | Paid | Credit Card | $668.24 |
| INV003 | Pending | Bank Transfer | $397.20 |
| INV004 | Pending | Credit Card | $721.43 |
| INV005 | Unpaid | Bank Transfer | $758.25 |
| INV006 | Unpaid | Bank Transfer | $989.18 |
| INV007 | Unpaid | Credit Card | $733.01 |
| Total | $5,073.20 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Dylan Trantow | Chief Data Producer | dylan.trantow53@yahoo.com | Viewer | |
| Albina Lockman | Human Directives Director | albina.lockman@yahoo.com | Member | |
| Kasandra Sporer | Dynamic Directives Architect | kasandra_sporer@gmail.com | Member | |
| Rene Kerluke | Central Optimization Orchestrator | rene_kerluke38@hotmail.com | Admin | |
| Orpha Jacobi | Forward Marketing Director | orpha.jacobi23@hotmail.com | Member | |
| Peyton Welch | Customer Research Associate | peyton.welch44@hotmail.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 |
|---|---|---|
Laurence Veum International Infrastructure Technician laurence_veum@gmail.com | Viewer | |
Delta Nitzsche National Integration Director delta_nitzsche54@yahoo.com | Admin | |
Josh Langosh Global Research Analyst josh.langosh39@yahoo.com | Admin | |
Jerry Hagenes International Security Strategist jerry.hagenes@hotmail.com | Admin | |
Albina Krajcik Central Brand Supervisor albina_krajcik@hotmail.com | Viewer | |
Carrie Gulgowski Product Optimization Associate carrie_gulgowski34@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 |
|---|---|---|
Salvatore Streich Forward Applications Strategist salvatore.streich@gmail.com | Viewer | |
Cynthia Haag Forward Integration Engineer cynthia.haag@hotmail.com | Member | |
Crawford Veum International Applications Analyst crawford_veum9@yahoo.com | Member | |
Olive Jacobs-Pollich Internal Brand Producer olive_jacobs-pollich@yahoo.com | Admin | |
Blanche Anderson Internal Tactics Designer blanche.anderson44@gmail.com | Member | |
Dianna Conn Forward Quality Orchestrator dianna_conn53@hotmail.com | Admin | |
Brielle Volkman Senior Accounts Orchestrator brielle_volkman@yahoo.com | Member | |
Gina Reichert Corporate Brand Officer gina_reichert58@yahoo.com | Member | |
Louis Jacobs Customer Data Strategist louis_jacobs16@gmail.com | Viewer | |
Hannah Emard Principal Quality Representative hannah.emard54@hotmail.com | Admin | |
Percy Bahringer Global Marketing Specialist percy.bahringer12@gmail.com | Member | |
Pedro Medhurst Customer Web Executive pedro_medhurst@yahoo.com | Viewer | |
Tommy White Global Accountability Associate tommy_white@gmail.com | Admin | |
Alexandrea Ratke Corporate Configuration Coordinator alexandrea.ratke@yahoo.com | Member | |
Alia O'Conner National Communications Associate alia_oconner46@hotmail.com | Viewer | |
Chasity Denesik Central Configuration Technician chasity.denesik@yahoo.com | Viewer | |
Leta Pollich Lead Brand Officer leta.pollich@yahoo.com | Viewer | |
Micheal Schmidt Central Branding Manager micheal.schmidt@hotmail.com | Viewer | |
Bobbie Parisian Legacy Branding Architect bobbie.parisian94@yahoo.com | Viewer | |
Tyrone Kreiger Forward Assurance Engineer tyrone.kreiger@yahoo.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 | |
|---|---|---|---|---|
| Elfrieda Deckow | bruce.schuppe@yahoo.com | Jeanettefurt | Inactive | $340.89 |
| Mr. Jada Leuschke | fredrick.reichel@gmail.com | Coryfort | Inactive | $757.67 |
| Demario Witting | krista30@gmail.com | Schimmelview | Active | $126.11 |
| Mrs. Kelsi Hoeger | herbert_macejkovic@yahoo.com | New Victoria | Active | $1,077.50 |
| Belinda Runolfsdottir | kate.hills@gmail.com | Sarasota | Inactive | $881.55 |
| Total | $3,183.72 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Glen Jacobson @lilian_feeney16 | greg.schneider78@yahoo.com | Fort Margieshire | Inactive | $155.66 |
Amanda Schneider @tia.nicolas | rudolph48@gmail.com | Dundalk | Active | $698.66 |
Cesar Becker @adolphus.lubowitz | zachariah.kutch@yahoo.com | Eau Claire | Active | $1,075.44 |
Michele Yost @stanley.volkman | gerhard_haley47@hotmail.com | West Cletafield | Active | $395.56 |
Mrs. Marianne Nicolas @jayson.kub20 | bryan.cormier@yahoo.com | Irvine | Active | $274.42 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brendan Ward | jeremiah_blick@yahoo.com | Fort Frankiefield | Active | $1,110.98 |
| Erin Schimmel | jessika.greenholt@gmail.com | Elinorecester | Inactive | $287.94 |
| Johnson Kerluke | hubert4@gmail.com | Fort Griffin | Active | $400.24 |
| Nestor Willms | kelley.wiegand42@yahoo.com | Billings | Inactive | $531.18 |
| Freeman Sauer PhD | tavares24@gmail.com | North Kyler | Inactive | $590.60 |
| Total | $2,920.94 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lola Marquardt | clinton72@hotmail.com | Ondrickaworth | Active | $226.71 |
| Jed O'Keefe | gayle_wisoky-corkery90@hotmail.com | Gary | Active | $957.20 |
| Elvie Schneider | dahlia.prohaska@yahoo.com | New Garrettberg | Inactive | $662.49 |
| Stacey Ledner | micaela.macejkovic@hotmail.com | Elizabeth | Inactive | $443.48 |
| Leah Cole | oscar.kshlerin@gmail.com | Nienowside | Active | $304.56 |
| Total | $2,594.44 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dora Nienow PhD | christie12@gmail.com | Leschview | Inactive | $154.67 |
| Mr. Magdalen Schmidt | vivienne50@hotmail.com | East Brown | Inactive | $80.52 |
| Jovanny Yundt | armani.braun91@gmail.com | East Lanceshire | Active | $45.01 |
| Miss Brock Orn | demario_schultz60@hotmail.com | Melanystead | Active | $972.82 |
| Rylan Weber | dereck_nitzsche0@hotmail.com | Verdamouth | Active | $563.57 |
| Total | $1,816.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 | ||
|---|---|---|---|---|---|
| Preston Brekke | charlotte71@hotmail.com | Riverside | Active | $99.01 | |
| Elisha Ankunding III | kacey43@hotmail.com | Port Jaquelinborough | Active | $690.43 | |
| Dr. Neha Mosciski | ashley.bartoletti@hotmail.com | New Marcoside | Inactive | $791.45 | |
| Jessica Pacocha Sr. | regan_pagac83@gmail.com | Ondricka-Bartolettiland | Active | $5.96 | |
| Mr. Victor Herman | iva39@gmail.com | Lorain | Active | $68.00 | |
| Total | $1,654.85 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Isaias Lesch | toby31@hotmail.com | Fredcester | Inactive | $1,004.52 | |
| Lynne Von-Veum | winona14@hotmail.com | South Busterfurt | Active | $1,053.49 | |
| Claudia Gleason | allen_oconnell51@gmail.com | San Francisco | Inactive | $728.41 | |
| Daniel Wilkinson DVM | kathryn_grady76@hotmail.com | West Arno | Inactive | $363.66 | |
| Phyllis Harber | rick_batz@gmail.com | Kent | Inactive | $686.09 | |
| Total | $3,836.17 | ||||
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 | |
|---|---|---|---|---|
| Vivian Kub-VonRueden | damon_welch75@yahoo.com | North Maryannville | Active | $394.77 |
| Bert Hackett | marcos_hand12@yahoo.com | Boyerboro | Active | $249.20 |
| Jena Ebert | erling74@yahoo.com | San Ramon | Active | $353.68 |
| Braulio Renner | hubert.kshlerin73@gmail.com | West Mazie | Inactive | $221.07 |
| Mina Harris | keith_leannon64@gmail.com | Jenkinsfield | Inactive | $424.04 |
| Rupert Quitzon | connie_auer84@gmail.com | Tobyside | Active | $1,045.29 |
| Alanna Macejkovic | janice.wintheiser71@gmail.com | Suzanneburgh | Active | $180.07 |
| Lupe Rodriguez | darla_auer@yahoo.com | East Eloisa | Inactive | $245.14 |
| Bobbie Willms | timmy_stokes18@hotmail.com | Kingsport | Inactive | $713.89 |
| Sylvia Kuhic | boyd.borer-nicolas90@yahoo.com | New Mariano | Active | $137.18 |
| Jovan Boyer | jesus_beahan48@hotmail.com | Kutchcester | Active | $235.88 |
| Joana Legros | jeremie64@gmail.com | North Cornelius | Active | $23.39 |
| Johnny Mraz | ellen_koepp@gmail.com | Beattybury | Active | $229.26 |
| Dr. Carol Abbott III | arlene.fay28@hotmail.com | Toledo | Active | $291.34 |
| Mr. Walter Muller | gilbert37@gmail.com | Evelynside | Inactive | $493.78 |
| Total | $5,237.98 | |||
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 |