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 | $230.60 |
| INV002 | Paid | PayPal | $744.72 |
| INV003 | Paid | PayPal | $263.46 |
| INV004 | Pending | Credit Card | $524.80 |
| INV005 | Unpaid | Bank Transfer | $587.61 |
| INV006 | Pending | PayPal | $413.75 |
| INV007 | Unpaid | PayPal | $486.77 |
| Total | $3,251.71 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Christine Auer | Corporate Security Planner | christine.auer73@hotmail.com | Member | |
| Adele McDermott | Senior Quality Producer | adele_mcdermott@gmail.com | Admin | |
| Sylvester Bernier | Lead Accountability Facilitator | sylvester.bernier66@hotmail.com | Member | |
| Abraham Stokes | Corporate Solutions Associate | abraham.stokes26@gmail.com | Viewer | |
| Michele Paucek-Wolf | Central Identity Executive | michele_paucek-wolf18@gmail.com | Member | |
| Dale Mohr | Internal Web Executive | dale_mohr@gmail.com | Viewer |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Ali Dooley Future Brand Technician ali_dooley67@yahoo.com | Member | |
Jan Mueller-Parisian Senior Applications Associate jan.mueller-parisian@hotmail.com | Viewer | |
Angel Yost Investor Implementation Representative angel_yost@hotmail.com | Viewer | |
Candice Bartell Senior Usability Orchestrator candice.bartell@hotmail.com | Admin | |
Lionel Ernser District Usability Liaison lionel.ernser16@yahoo.com | Member | |
Melanie Collins Human Research Designer melanie_collins76@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 |
|---|---|---|
Israel Block Investor Infrastructure Strategist israel.block59@hotmail.com | Viewer | |
Gwen Corkery Customer Interactions Technician gwen_corkery26@hotmail.com | Viewer | |
Sam Trantow Direct Implementation Manager sam.trantow59@yahoo.com | Viewer | |
Rylee Will National Applications Analyst rylee_will@gmail.com | Member | |
Gladys Howell Regional Optimization Planner gladys_howell@gmail.com | Admin | |
Aubrey Rippin Customer Applications Orchestrator aubrey_rippin@gmail.com | Viewer | |
Thelma Runolfsdottir Corporate Operations Representative thelma_runolfsdottir17@yahoo.com | Member | |
Macie Abshire-Hand Product Directives Technician macie.abshire-hand25@gmail.com | Admin | |
Claudine Ebert National Accounts Facilitator claudine_ebert87@gmail.com | Member | |
Stacy Jenkins District Group Strategist stacy.jenkins24@yahoo.com | Member | |
Rosemary Gleason Corporate Program Strategist rosemary_gleason54@gmail.com | Viewer | |
Jeannie Kilback Principal Functionality Administrator jeannie_kilback@gmail.com | Admin | |
Angelica Anderson Global Intranet Manager angelica_anderson@gmail.com | Viewer | |
Gertrude Runte Principal Operations Assistant gertrude.runte@hotmail.com | Member | |
Lavon Schumm Forward Infrastructure Architect lavon.schumm@gmail.com | Viewer | |
Hallie Kovacek Global Metrics Developer hallie_kovacek@yahoo.com | Admin | |
Paulette Littel Lead Functionality Engineer paulette.littel@gmail.com | Member | |
Makenzie Hayes National Creative Developer makenzie_hayes84@yahoo.com | Viewer | |
Andrea Cormier Corporate Applications Supervisor andrea.cormier@hotmail.com | Viewer | |
Lexie Ondricka Lead Infrastructure Manager lexie.ondricka@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 | |
|---|---|---|---|---|
| Franz Funk | orland_schumm33@gmail.com | Danykastead | Active | $982.81 |
| Chadrick Lynch | ollie.wilderman58@hotmail.com | Blandaton | Inactive | $870.58 |
| Dewayne Parker | orlando.jakubowski@hotmail.com | Deltona | Inactive | $158.25 |
| Kelvin Daniel-Larson | sam.reichel@gmail.com | MacGyverbury | Active | $384.22 |
| Donald Ryan IV | avery.schoen@hotmail.com | New Dwight | Active | $732.88 |
| Total | $3,128.74 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Darrel Mraz @terri_langosh | lori_boehm71@yahoo.com | Muellertown | Active | $34.40 |
Mrs. Dustin Nader-Feil @conor.sanford47 | jerome_waelchi36@gmail.com | West Isaaccester | Inactive | $16.89 |
Mrs. Bessie Blick @winifred_champlin36 | angelo90@hotmail.com | Wilkinsonland | Inactive | $149.87 |
Teresa McGlynn @myrl.sanford | adam.crist70@hotmail.com | Mayertchester | Inactive | $789.59 |
Franklin Kovacek @katrina8 | andrew_ritchie@hotmail.com | Fidelcester | Active | $815.77 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jacquelyn Fisher | jose.miller@gmail.com | West Ciara | Active | $881.97 |
| Marcos Grady | laverne_heller@gmail.com | West Tiana | Active | $1.22 |
| Mrs. Terry Adams | willie67@yahoo.com | Marquardtstead | Inactive | $937.72 |
| Mrs. Myron Ankunding | otha_carter96@yahoo.com | North Robbie | Active | $863.06 |
| Marcos Wyman I | willis_weimann@gmail.com | Cordiemouth | Active | $77.28 |
| Total | $2,761.25 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brandi Hoppe | harvey.jacobs71@yahoo.com | Cremincester | Inactive | $884.90 |
| Dr. Grant Hilpert | manuel8@gmail.com | North Ianton | Inactive | $515.05 |
| Coleman Smitham PhD | guy_stoltenberg91@yahoo.com | Yuma | Active | $1,137.72 |
| Camden Rau-Hand | christopher_thiel41@yahoo.com | Boyerport | Active | $884.64 |
| Theodore Kuvalis IV | rufus_bogan19@gmail.com | New Trentonview | Active | $629.23 |
| Total | $4,051.54 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jamie Friesen | freddie.schmeler71@yahoo.com | Lake Isobel | Inactive | $251.90 |
| Bernadine Mills | tyson_armstrong@gmail.com | Port Reynaburgh | Active | $756.44 |
| Marilyne Flatley | leland.gislason@yahoo.com | North Hadley | Active | $599.85 |
| Suzanne Kshlerin | easter_bechtelar29@yahoo.com | Port Gissellechester | Inactive | $865.14 |
| Heather Mayer | katrina.hackett85@hotmail.com | South Brettmouth | Active | $771.18 |
| Total | $3,244.51 | |||
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 | ||
|---|---|---|---|---|---|
| Rudy White-Spencer | arthur_mosciski76@yahoo.com | Port Alfred | Active | $908.93 | |
| Mr. Leon Heathcote | nicolas_kling@yahoo.com | Redlands | Inactive | $195.92 | |
| Traci Cremin | jaron.daniel@gmail.com | Port Margret | Active | $1,106.74 | |
| Mrs. Susanna Schinner | karl_bednar30@gmail.com | Schusterboro | Active | $1,070.47 | |
| Sigmund Upton-Ullrich | lorenzo.hansen10@gmail.com | Port Vinnie | Inactive | $341.99 | |
| Total | $3,624.05 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Ms. Cassandra Cassin | constance_koelpin@yahoo.com | Coral Springs | Active | $1,023.99 | |
| Ryan Lesch | ferne.klein96@yahoo.com | West Trinity | Active | $383.82 | |
| Javier Schroeder | lola.bailey@hotmail.com | West Benny | Inactive | $1,189.23 | |
| Lillie Schumm | marlene.jaskolski29@yahoo.com | South Keanuport | Inactive | $1,185.51 | |
| Jim Ernser | irma_quitzon@hotmail.com | West Haven | Inactive | $984.72 | |
| Total | $4,767.27 | ||||
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 | |
|---|---|---|---|---|
| Steve Block | philip.wintheiser@hotmail.com | Edina | Active | $61.12 |
| Janis Kutch | gene.conn@hotmail.com | Flaviehaven | Active | $1,069.18 |
| Stewart Bayer | taylor_wunsch@hotmail.com | Lincoln | Active | $125.24 |
| Dr. Devante Kub | darryl.johnson14@gmail.com | Fort Herta | Active | $317.90 |
| Linda McKenzie | donna_bode24@hotmail.com | Manteca | Active | $314.24 |
| Thomas Kub | greg.dooley@yahoo.com | Fort Worth | Active | $586.61 |
| Emanuel O'Reilly | jesus.raynor@hotmail.com | Beaulahstad | Inactive | $350.31 |
| Ms. Gilberto Macejkovic | stuart.wunsch96@hotmail.com | West Fannieview | Active | $422.07 |
| Ginger Bernier | hope83@hotmail.com | North Sincereworth | Inactive | $59.42 |
| Victor Purdy | carolanne.kemmer@gmail.com | New Carmenburgh | Active | $1,049.18 |
| Violet Stokes | jimmy.wilkinson8@gmail.com | Lake Keanu | Inactive | $57.47 |
| Perry Bogan | clyde.erdman@gmail.com | Rochester | Active | $840.37 |
| Emma McCullough | peter_ortiz75@hotmail.com | Chicopee | Inactive | $471.16 |
| Raquel Schaden | leon.nienow90@yahoo.com | Durganfield | Active | $829.18 |
| Rosalie Reichert | elena_hand5@hotmail.com | Camarillo | Inactive | $646.87 |
| Total | $7,200.32 | |||
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 |