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 | $352.13 |
| INV002 | Unpaid | Bank Transfer | $247.21 |
| INV003 | Paid | Credit Card | $378.01 |
| INV004 | Paid | Credit Card | $425.22 |
| INV005 | Unpaid | PayPal | $692.79 |
| INV006 | Unpaid | Credit Card | $731.85 |
| INV007 | Unpaid | Credit Card | $619.61 |
| Total | $3,446.82 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Josephine Dicki | Direct Optimization Director | josephine_dicki59@hotmail.com | Viewer | |
| Ena Franey | Direct Applications Specialist | ena_franey79@gmail.com | Admin | |
| Rebekah Reynolds | Regional Accounts Designer | rebekah.reynolds@yahoo.com | Viewer | |
| Alf Cummings | Global Implementation Administrator | alf.cummings@gmail.com | Member | |
| Bennie Smitham | Forward Assurance Manager | bennie.smitham97@yahoo.com | Member | |
| Sheldon Ortiz | Lead Implementation Engineer | sheldon_ortiz80@yahoo.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 |
|---|---|---|
Elian Stoltenberg Corporate Quality Supervisor elian.stoltenberg@yahoo.com | Member | |
Natasha Mayert Product Web Orchestrator natasha_mayert33@hotmail.com | Admin | |
Josephine Jacobi Direct Applications Manager josephine.jacobi82@yahoo.com | Member | |
Clayton Turcotte-Franey Corporate Marketing Strategist clayton.turcotte-franey85@gmail.com | Viewer | |
Latoya Parker Future Marketing Associate latoya.parker39@yahoo.com | Member | |
Loraine Balistreri Legacy Group Director loraine.balistreri@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Kyra Lakin Human Division Director kyra.lakin@gmail.com | Viewer | |
Adrian Jerde Chief Marketing Producer adrian_jerde9@yahoo.com | Viewer | |
Lawrence Mertz Product Infrastructure Assistant lawrence.mertz@gmail.com | Admin | |
Clinton Pfannerstill Legacy Metrics Technician clinton_pfannerstill18@hotmail.com | Member | |
Diane Hoppe Direct Interactions Liaison diane_hoppe@hotmail.com | Member | |
Troy Schroeder National Implementation Director troy.schroeder34@yahoo.com | Viewer | |
Billy Auer-Grimes Forward Interactions Architect billy.auer-grimes@gmail.com | Admin | |
Julia Cassin Lead Solutions Designer julia.cassin91@gmail.com | Admin | |
Austen Russel Chief Usability Specialist austen_russel7@hotmail.com | Viewer | |
Kayleigh Marks Customer Optimization Technician kayleigh.marks2@yahoo.com | Viewer | |
Sean O'Keefe Forward Configuration Manager sean.okeefe@gmail.com | Member | |
Enos Kuphal District Quality Agent enos.kuphal@gmail.com | Member | |
Cole Gislason Investor Implementation Architect cole.gislason@gmail.com | Admin | |
Karson Wyman Human Group Strategist karson_wyman25@yahoo.com | Member | |
Nannie Klocko Dynamic Identity Coordinator nannie.klocko82@hotmail.com | Viewer | |
Felipe Langosh Forward Identity Technician felipe.langosh90@yahoo.com | Admin | |
Amy Waelchi Human Solutions Facilitator amy.waelchi@gmail.com | Member | |
Toni Boyle Central Program Architect toni_boyle84@gmail.com | Viewer | |
Edwin Howell Senior Infrastructure Representative edwin.howell24@yahoo.com | Admin | |
Randal Lindgren Internal Implementation Administrator randal_lindgren83@hotmail.com | Admin |
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 | |
|---|---|---|---|---|
| Jacey D'Amore | violet.schneider81@gmail.com | Stephanbury | Inactive | $627.61 |
| Dr. Blanche Schumm | micaela79@gmail.com | South Braden | Active | $349.37 |
| Brennon Mann | joesph_upton@hotmail.com | Pasadena | Active | $202.23 |
| Rudolph Turner | jacklyn_bartoletti@yahoo.com | Hackensack | Inactive | $1,146.94 |
| Candace Ruecker | nancy.schmitt11@gmail.com | College Station | Inactive | $660.45 |
| Total | $2,986.60 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Julie Pagac MD @hermann.conn36 | scott.ruecker@gmail.com | Candiceshire | Active | $179.74 |
Julian Rippin @geneva57 | jesse_lesch28@gmail.com | Port Kariane | Active | $511.64 |
Ismael Ebert @silvia.schoen | ben.feest71@yahoo.com | Greenchester | Inactive | $774.38 |
Kole Roberts @katherine34 | lucy87@gmail.com | Normamouth | Inactive | $681.99 |
Krystal Bins @stone.gleason | maxine_blanda@yahoo.com | Volkmanhaven | Inactive | $1,107.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mrs. Marcel Skiles | lillian.sauer90@yahoo.com | West Shyannemouth | Inactive | $481.96 |
| Paxton Jerde-Adams | muhammad_crooks-hilpert@gmail.com | St. Louis Park | Inactive | $505.12 |
| Charles Ward | loren_von-senger48@yahoo.com | Tiannaview | Inactive | $83.70 |
| Leonardo Cole | kari67@gmail.com | Mosciskiville | Active | $106.26 |
| Charlene Kuhn | ellen.mccullough@hotmail.com | Livermore | Inactive | $506.32 |
| Total | $1,683.36 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keshaun Gerhold | hector.muller@yahoo.com | Chadbury | Inactive | $431.66 |
| Mr. Mitchell Marquardt | robyn50@hotmail.com | Flower Mound | Inactive | $120.57 |
| Ella Kozey | jadyn.shields@yahoo.com | New Eddie | Active | $286.70 |
| Devyn Lehner | bridie91@hotmail.com | Middletown | Active | $202.96 |
| Cheyanne Spencer PhD | bethany_brekke@gmail.com | Tromphaven | Active | $576.51 |
| Total | $1,618.40 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Kellen Zboncak | shawna.hirthe@yahoo.com | Langoshfield | Active | $808.76 |
| Aric O'Conner | eleonore.hauck56@hotmail.com | Romagueraworth | Active | $648.38 |
| Ms. Gina Bashirian | jamal.will-franecki27@yahoo.com | Durganport | Inactive | $438.07 |
| Magnus McCullough | kyra_bruen@yahoo.com | Abilene | Inactive | $1,057.11 |
| Tasha Sawayn | eugenia_sawayn99@hotmail.com | East Andresfield | Active | $1,069.53 |
| Total | $4,021.85 | |||
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 | ||
|---|---|---|---|---|---|
| Harvey Sauer | dixie_hickle@gmail.com | Dooleychester | Inactive | $1,009.84 | |
| Veronica Blanda | velma61@yahoo.com | Nicholeville | Inactive | $227.05 | |
| Kobe Murphy | joseph_reynolds24@yahoo.com | Williemouth | Inactive | $961.32 | |
| Mr. Christopher Wiegand | tyree_kilback@yahoo.com | Howellberg | Inactive | $785.13 | |
| Russ Block DVM | jay.metz-ledner75@gmail.com | Bobbyboro | Active | $252.02 | |
| Total | $3,235.36 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Santina Walker | prudence_steuber@hotmail.com | Schulistchester | Inactive | $175.11 | |
| Idell O'Keefe IV | elmer_lind@hotmail.com | Dickensshire | Active | $260.50 | |
| Cynthia Roob | germaine.von6@yahoo.com | Lake Kirstenshire | Active | $580.63 | |
| Tonya Ullrich | cheryl.schaefer8@hotmail.com | Carmichael | Active | $556.60 | |
| Alfredo Koelpin | patty.legros@hotmail.com | O'Connellshire | Active | $550.57 | |
| Total | $2,123.41 | ||||
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 | |
|---|---|---|---|---|
| Virgie Wiza | dolores.ullrich@hotmail.com | Saginaw | Active | $994.68 |
| Kennedi Emmerich | clay85@hotmail.com | Heaneyshire | Active | $109.90 |
| Bertha O'Conner | rosamond.carroll60@hotmail.com | Waukegan | Inactive | $638.61 |
| Lottie Towne | flavie.gerhold21@hotmail.com | South Beatricestad | Active | $113.83 |
| Marcelina Aufderhar | domenica87@gmail.com | Apex | Inactive | $815.82 |
| Traci Keebler | uriah.barton26@yahoo.com | Lonnieland | Inactive | $1,058.78 |
| Domenick Heathcote | buster_steuber@hotmail.com | Streichborough | Inactive | $1,151.17 |
| Gina Maggio | dianna_harvey@yahoo.com | North Matthewport | Active | $232.22 |
| Josefina Baumbach | dan.fay@gmail.com | North Aprilshire | Active | $93.15 |
| Stephanie Miller | john18@yahoo.com | Leaberg | Active | $547.05 |
| Alta Kerluke | jermey55@gmail.com | East Alisonview | Inactive | $1,173.86 |
| Barbara Stark | marcos_heaney@hotmail.com | Denton | Inactive | $524.76 |
| Russel Dicki | kelli.rohan16@hotmail.com | South Tasha | Active | $612.28 |
| Arlene Macejkovic | julien_keeling@yahoo.com | New Sofia | Active | $654.07 |
| Danny Schoen PhD | daniel56@hotmail.com | New Henriettefield | Active | $645.49 |
| Total | $9,365.67 | |||
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 |