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 | Paid | Credit Card | $846.44 |
| INV002 | Unpaid | Bank Transfer | $790.66 |
| INV003 | Unpaid | PayPal | $200.69 |
| INV004 | Paid | PayPal | $941.54 |
| INV005 | Unpaid | PayPal | $786.33 |
| INV006 | Paid | Credit Card | $107.45 |
| INV007 | Paid | PayPal | $876.57 |
| Total | $4,549.68 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Steve Howe | Legacy Solutions Consultant | steve.howe@hotmail.com | Admin | |
| Miriam McGlynn | District Operations Planner | miriam.mcglynn@gmail.com | Admin | |
| Amos Barton | Human Identity Manager | amos.barton59@yahoo.com | Viewer | |
| Lorenzo Goodwin | Dynamic Program Technician | lorenzo_goodwin43@gmail.com | Viewer | |
| Don Frami | Product Marketing Assistant | don_frami@yahoo.com | Member | |
| Irving Larkin | Senior Web Engineer | irving_larkin@gmail.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 |
|---|---|---|
Erik Dickinson Investor Creative Developer erik.dickinson@hotmail.com | Admin | |
Santino Hilpert Forward Optimization Facilitator santino.hilpert90@gmail.com | Viewer | |
Percy Stamm Investor Infrastructure Architect percy.stamm76@yahoo.com | Member | |
Damon Rohan Senior Markets Officer damon_rohan@yahoo.com | Member | |
Jesse Kozey Human Creative Designer jesse.kozey@yahoo.com | Member | |
Yasmine Bradtke Future Factors Technician yasmine.bradtke28@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Fidel Schneider Customer Response Analyst fidel_schneider87@hotmail.com | Viewer | |
Jarrod Boehm Direct Accounts Coordinator jarrod_boehm28@gmail.com | Admin | |
Madalyn Veum Product Data Facilitator madalyn_veum@hotmail.com | Member | |
Noah Harris-Heathcote International Markets Coordinator noah.harris-heathcote@hotmail.com | Member | |
Garret Dare Global Web Technician garret_dare@hotmail.com | Viewer | |
Rudolph Nader National Integration Designer rudolph_nader@gmail.com | Admin | |
Kurt Marquardt-Erdman Lead Security Planner kurt.marquardt-erdman@yahoo.com | Admin | |
Kathy Prohaska Global Operations Executive kathy.prohaska@gmail.com | Member | |
Polly Kutch Product Identity Manager polly.kutch28@hotmail.com | Viewer | |
Bertram Leffler National Metrics Representative bertram.leffler@gmail.com | Viewer | |
Lorna Purdy District Mobility Associate lorna_purdy8@gmail.com | Member | |
Verda Rodriguez Chief Web Consultant verda.rodriguez28@gmail.com | Viewer | |
Marielle Macejkovic Forward Accounts Manager marielle.macejkovic@gmail.com | Viewer | |
Emily Metz Dynamic Identity Orchestrator emily_metz18@gmail.com | Admin | |
Alessia Oberbrunner Customer Accounts Manager alessia_oberbrunner@gmail.com | Viewer | |
Luther Beatty Regional Applications Executive luther.beatty@yahoo.com | Member | |
Dortha Strosin Investor Division Strategist dortha.strosin54@yahoo.com | Viewer | |
Patricia Bruen Lead Branding Engineer patricia_bruen@gmail.com | Viewer | |
Miguel Schultz Human Functionality Representative miguel_schultz@yahoo.com | Member | |
Vern Hintz Chief Security Technician vern.hintz@hotmail.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 | |
|---|---|---|---|---|
| Freeman Heller | amaya43@gmail.com | McKinney | Inactive | $701.16 |
| Darren Olson | gerard.conn86@yahoo.com | Fort Foster | Inactive | $964.35 |
| Ardella Heller | thaddeus91@yahoo.com | Port Rosalyn | Active | $1,034.50 |
| Queenie Torphy | jerrell.mitchell-legros@gmail.com | East Monroe | Active | $157.03 |
| Carolyn Batz | deja.paucek27@gmail.com | Decatur | Active | $554.46 |
| Total | $3,411.50 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jesus Kreiger @ottis_kovacek | braulio.robel89@gmail.com | Fort Daron | Inactive | $1,199.86 |
Micheal Greenholt @gillian.maggio | eden78@hotmail.com | Bergstromton | Active | $974.23 |
Eliseo Weimann @jesse99 | sara.hettinger85@hotmail.com | Hintzside | Inactive | $1,179.24 |
Icie Oberbrunner @tabitha_wisozk4 | shelly49@yahoo.com | Botsfordhaven | Active | $76.77 |
Jeffrey Leannon Sr. @bobby_davis53 | rachel86@yahoo.com | North Hildegardstad | Active | $390.54 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Presley Block | pascale.hand@yahoo.com | Nikolausfield | Active | $518.85 |
| Gerhard Yundt | michale_nitzsche@gmail.com | Daniellefort | Inactive | $158.65 |
| Ruben Hilll | georgiana_bergstrom@yahoo.com | Bruenville | Inactive | $615.38 |
| Mr. Breanna Johnson | keyon.roberts6@yahoo.com | Temecula | Active | $132.95 |
| Krista Maggio | rickey_harris@gmail.com | North Destinychester | Active | $36.48 |
| Total | $1,462.31 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Donato Kreiger | evie_vandervort@yahoo.com | Sengerville | Inactive | $225.25 |
| Treva Bradtke | david_koss-keebler@hotmail.com | Montebello | Inactive | $579.99 |
| Roslyn Fay | sylvia_langworth@hotmail.com | Buckeye | Inactive | $46.51 |
| Amanda Wolff | roberto_metz@gmail.com | Deckowport | Active | $1,073.20 |
| Jordon Osinski | marta13@gmail.com | Luisaboro | Inactive | $324.49 |
| Total | $2,249.44 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Adrian Greenholt | ibrahim94@yahoo.com | Port Karlie | Inactive | $835.45 |
| Miss Sylvia Jast | doreen40@hotmail.com | Lake Cecelia | Active | $941.98 |
| Alize Bednar | lola20@yahoo.com | Marcusview | Active | $329.41 |
| Mr. Donald O'Reilly | sandra.abbott27@gmail.com | Braunhaven | Inactive | $288.15 |
| Kaela Lebsack | miranda66@yahoo.com | Claraworth | Inactive | $1,162.18 |
| Total | $3,557.17 | |||
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 | ||
|---|---|---|---|---|---|
| Zoe Greenfelder | sammie.tremblay42@yahoo.com | Juliusmouth | Inactive | $829.78 | |
| Mrs. Emiliano Ullrich-Anderson Jr. | cynthia_muller36@yahoo.com | Murrayhaven | Active | $1,105.23 | |
| Bertha Hilll-Russel | delores.muller31@gmail.com | East Katlynn | Active | $1,070.29 | |
| Dr. Martin Kris I | shayne.grimes-mills25@hotmail.com | Lockmanton | Inactive | $273.55 | |
| Thea Ledner MD | adelbert.mitchell12@yahoo.com | New Aniyahview | Active | $751.68 | |
| Total | $4,030.53 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Emilie Halvorson | juwan98@hotmail.com | New Kentview | Active | $783.04 | |
| Raven Morar | mae.deckow@hotmail.com | Collinsfurt | Inactive | $411.54 | |
| Miss Brannon Sipes | kristin_stroman78@yahoo.com | Salinas | Active | $1,098.16 | |
| Alisa Altenwerth | tiana.kilback56@hotmail.com | Jenkinsborough | Inactive | $327.33 | |
| Chris Gottlieb | trevor_denesik75@gmail.com | Franklin | Active | $178.78 | |
| Total | $2,798.85 | ||||
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 | |
|---|---|---|---|---|
| Bruce Stokes | angela.grant44@yahoo.com | Lake Mandyburgh | Inactive | $320.70 |
| Federico Lebsack | jonathan12@yahoo.com | Apopka | Active | $145.00 |
| Gary Ziemann | dean.dibbert@gmail.com | Brockton | Inactive | $500.67 |
| Deborah Parker DVM | leann.paucek@hotmail.com | West Allis | Inactive | $894.03 |
| Dr. Ernestina Wisoky | nayeli_reichel63@yahoo.com | Mooreton | Inactive | $304.49 |
| Marlon Beatty | jimmy_reinger-klein@yahoo.com | Fort Emmanuelle | Active | $1,141.15 |
| Darion Upton | lonnie.zboncak@hotmail.com | East Miltonhaven | Active | $77.07 |
| Eula Mante | tom14@gmail.com | Spokane Valley | Inactive | $907.04 |
| Aylin West | vincent25@hotmail.com | Port May | Active | $909.62 |
| May Kuhn | gilbert89@gmail.com | Jenkinstown | Inactive | $0.92 |
| Olga Wolff | amalia85@yahoo.com | Kohlerstead | Active | $818.75 |
| Sterling Schamberger DVM | may82@yahoo.com | Carltonton | Active | $51.60 |
| Olivia Cartwright | alexandrine.beer66@yahoo.com | East Bellacester | Active | $1,108.00 |
| Koby Crist | chris11@yahoo.com | Huntington | Active | $594.38 |
| Anne Toy | elsa_cole27@yahoo.com | Fort Kamronfurt | Active | $734.28 |
| Total | $8,507.70 | |||
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 |