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 | $590.88 |
| INV002 | Paid | Credit Card | $542.18 |
| INV003 | Pending | PayPal | $451.70 |
| INV004 | Paid | Credit Card | $633.19 |
| INV005 | Paid | PayPal | $172.54 |
| INV006 | Paid | Credit Card | $250.90 |
| INV007 | Unpaid | PayPal | $168.32 |
| Total | $2,809.71 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Tracey Balistreri | Legacy Research Manager | tracey.balistreri@hotmail.com | Viewer | |
| Rey Paucek | Lead Paradigm Designer | rey_paucek@gmail.com | Member | |
| Calista Reilly | Corporate Branding Producer | calista_reilly@gmail.com | Viewer | |
| Gabriel Durgan | International Operations Engineer | gabriel.durgan62@gmail.com | Member | |
| Oda Conn | Investor Security Agent | oda.conn77@yahoo.com | Viewer | |
| Moshe Grimes | Investor Interactions Coordinator | moshe_grimes@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 |
|---|---|---|
Anabelle Heaney Forward Security Planner anabelle.heaney32@hotmail.com | Admin | |
Pearline Bruen Direct Security Orchestrator pearline.bruen@hotmail.com | Member | |
Kenyon Leuschke Product Assurance Orchestrator kenyon.leuschke0@hotmail.com | Admin | |
Fred Wiegand Direct Identity Executive fred.wiegand@hotmail.com | Member | |
Orpha Brekke Investor Creative Administrator orpha.brekke74@gmail.com | Member | |
Axel Hodkiewicz Global Creative Administrator axel.hodkiewicz23@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 |
|---|---|---|
Meta Senger-Franey Investor Creative Representative meta.senger-franey@yahoo.com | Admin | |
Herbert Hammes National Functionality Representative herbert_hammes5@hotmail.com | Admin | |
Kaylah Gulgowski Direct Quality Specialist kaylah.gulgowski57@gmail.com | Admin | |
Yessenia Mante District Configuration Associate yessenia_mante53@yahoo.com | Member | |
Jimmy Roberts Dynamic Branding Associate jimmy_roberts91@gmail.com | Viewer | |
Briana Dare District Identity Liaison briana.dare44@yahoo.com | Viewer | |
Kade Bartell Senior Intranet Representative kade.bartell40@gmail.com | Admin | |
Silas Koepp Forward Metrics Agent silas_koepp@hotmail.com | Viewer | |
Elyse Gleason Regional Research Coordinator elyse.gleason79@yahoo.com | Viewer | |
Patrick Gorczany Legacy Communications Facilitator patrick.gorczany65@yahoo.com | Viewer | |
Bridie D'Amore Corporate Factors Coordinator bridie_damore9@yahoo.com | Member | |
Sidney Macejkovic Future Operations Assistant sidney_macejkovic@gmail.com | Viewer | |
Frances Terry Forward Web Assistant frances.terry67@hotmail.com | Viewer | |
Fernando Johns Global Creative Technician fernando_johns@yahoo.com | Admin | |
Concepcion Romaguera Senior Communications Strategist concepcion_romaguera@gmail.com | Admin | |
Beverly Cruickshank Internal Optimization Designer beverly.cruickshank59@yahoo.com | Viewer | |
Melyna Adams Forward Directives Agent melyna.adams19@hotmail.com | Member | |
Ben Schinner Human Assurance Orchestrator ben_schinner@yahoo.com | Admin | |
Fae Kovacek Future Group Developer fae.kovacek@hotmail.com | Viewer | |
Sharon Huels Senior Infrastructure Liaison sharon.huels27@yahoo.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 | |
|---|---|---|---|---|
| Toni Lynch | price.gerhold@yahoo.com | Kansas City | Inactive | $667.83 |
| Neil Williamson | ellis.monahan@yahoo.com | Stokestown | Active | $127.23 |
| Grace Keebler | nils_friesen86@yahoo.com | New Reece | Inactive | $807.51 |
| Irving Deckow | luis.boyer59@gmail.com | Hodkiewiczburgh | Active | $597.07 |
| Salvatore Jaskolski V | celia_renner@yahoo.com | East Amy | Active | $808.21 |
| Total | $3,007.85 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Elijah Marvin @casper58 | bethany79@gmail.com | Port Paulastad | Inactive | $792.34 |
Philip MacGyver @brianne.mclaughlin | hettie61@gmail.com | Lake Mackhaven | Inactive | $820.36 |
Mr. Herbert Sipes @jeramy_mcglynn | verner.roberts@hotmail.com | Cicero | Inactive | $1,086.18 |
Marta Adams @sidney0 | shanelle_windler@hotmail.com | West Samirshire | Active | $1,046.06 |
Henry Goyette @dimitri_metz | justice72@hotmail.com | Fort Mireille | Active | $736.86 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jeannie Parisian | jamarcus_waters@yahoo.com | Prohaskaland | Active | $903.91 |
| Tommie Greenholt | raphael_schneider48@yahoo.com | Port Cassidytown | Active | $255.09 |
| Douglas Daniel | hilton.williamson73@gmail.com | West Elouiseview | Inactive | $1,107.93 |
| Erica Klocko | eleonore16@yahoo.com | Streichboro | Active | $39.15 |
| Joann Windler | chelsie61@gmail.com | New Maddisonview | Inactive | $1,165.96 |
| Total | $3,472.04 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Estelle Jaskolski | darren_wisozk@gmail.com | East Mackenziecester | Active | $584.57 |
| Jeannie Dare | bonnie29@yahoo.com | Port Sydney | Inactive | $650.87 |
| Joan Shields | corbin.heller@yahoo.com | West Mario | Active | $379.38 |
| Ashley Durgan | brook_langosh@yahoo.com | Lake Saige | Inactive | $72.78 |
| Miss Dixie Fahey | elroy.gutkowski@hotmail.com | Eagan | Inactive | $259.30 |
| Total | $1,946.90 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Florence Kihn | dewayne_koch11@yahoo.com | Mayertfield | Active | $1,181.46 |
| Cameron Bergstrom DDS | alden.powlowski@gmail.com | South Sienna | Inactive | $263.84 |
| Alma Boyer DVM | omer.mraz@yahoo.com | Fort Mckenzie | Active | $282.51 |
| Leslie Casper | troy66@yahoo.com | Baytown | Active | $777.24 |
| Hazel Morar | zechariah.okon@gmail.com | East Gavin | Inactive | $816.99 |
| Total | $3,322.04 | |||
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 | ||
|---|---|---|---|---|---|
| Vera Swaniawski | roger_rice77@gmail.com | Emiliashire | Inactive | $1,030.85 | |
| Genevieve Anderson | krista71@yahoo.com | North Milanfield | Inactive | $148.82 | |
| Dr. Vivian Schoen | keenan_gorczany@hotmail.com | Schustershire | Inactive | $209.90 | |
| Mrs. Patsy Torphy-Glover | wilfred_beahan90@hotmail.com | Destinyville | Active | $490.89 | |
| Brandon Hermann-Lakin | madisyn.abbott48@yahoo.com | Hoegerville | Active | $1,044.53 | |
| Total | $2,924.99 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Deanna Mayert | palma61@yahoo.com | East Abbigail | Active | $94.81 | |
| Bert Zemlak | dedric.lynch@gmail.com | Elyria | Active | $997.19 | |
| Leroy Beahan | camylle_rowe@gmail.com | West Nasir | Active | $12.19 | |
| Michele Reichel | hazle_corwin@yahoo.com | Killeen | Inactive | $1,033.04 | |
| Mercedes Monahan | leopold30@gmail.com | New Garry | Inactive | $233.88 | |
| Total | $2,371.11 | ||||
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 | |
|---|---|---|---|---|
| Otis Deckow | loyce81@gmail.com | Overland Park | Active | $681.63 |
| Ruben Boyle | lawrence46@gmail.com | West Kurtborough | Active | $782.49 |
| Kristina Hahn | ibrahim_christiansen@hotmail.com | Millsview | Active | $1,097.72 |
| Marlon Hane | maynard83@hotmail.com | Juanahaven | Inactive | $152.08 |
| Rick Trantow | kathleen_kuhic96@gmail.com | Nathanfort | Inactive | $972.76 |
| Ben Ryan II | alfreda68@yahoo.com | Zulaufstead | Active | $437.68 |
| Forrest Trantow | grady77@hotmail.com | East Pamela | Active | $325.93 |
| Bobby Franey | aric.funk2@hotmail.com | Fort Heloise | Inactive | $492.58 |
| Shane Harvey | braden.windler95@hotmail.com | Schaeferhaven | Active | $529.72 |
| Debra Kub | quentin53@gmail.com | Colbyshire | Inactive | $166.43 |
| Rosemarie Hills Jr. | corene27@hotmail.com | North Little Rock | Active | $957.85 |
| Bruce Friesen | alfreda_willms@gmail.com | Hagenesside | Inactive | $1,190.96 |
| Lela Powlowski | katlynn.adams25@gmail.com | Port Conor | Active | $39.21 |
| Olga Stiedemann | edward_gutkowski22@yahoo.com | Armstrongstad | Inactive | $298.30 |
| Eloise Boyle | augustine28@hotmail.com | Fort Ruby | Active | $1,153.99 |
| Total | $9,279.33 | |||
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 |