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 | Bank Transfer | $359.59 |
| INV002 | Paid | Credit Card | $594.42 |
| INV003 | Pending | Bank Transfer | $771.57 |
| INV004 | Paid | PayPal | $893.84 |
| INV005 | Pending | Bank Transfer | $197.48 |
| INV006 | Pending | Credit Card | $960.12 |
| INV007 | Unpaid | Credit Card | $468.48 |
| Total | $4,245.50 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Camren Rosenbaum | National Accountability Supervisor | camren.rosenbaum93@gmail.com | Admin | |
| Pearl Douglas | Global Interactions Analyst | pearl.douglas@hotmail.com | Member | |
| Caleb Kub | Legacy Metrics Associate | caleb.kub@hotmail.com | Admin | |
| Jamil Stroman | Future Solutions Orchestrator | jamil_stroman82@gmail.com | Viewer | |
| Lesly Bruen | Investor Factors Technician | lesly.bruen94@hotmail.com | Member | |
| Carroll Rutherford | Legacy Program Officer | carroll.rutherford97@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 |
|---|---|---|
Desiree Stroman Regional Identity Associate desiree_stroman7@hotmail.com | Member | |
Anna Bosco Corporate Implementation Planner anna_bosco76@gmail.com | Admin | |
Amanda Walsh Regional Usability Administrator amanda.walsh90@gmail.com | Viewer | |
Elsa Huels Direct Accounts Developer elsa.huels3@hotmail.com | Member | |
Torrey Skiles Senior Quality Administrator torrey_skiles76@hotmail.com | Viewer | |
Ella Trantow Chief Paradigm Assistant ella_trantow37@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 |
|---|---|---|
Jacynthe Schoen Product Interactions Architect jacynthe_schoen@yahoo.com | Viewer | |
Kenyon Prosacco Future Configuration Assistant kenyon_prosacco@yahoo.com | Admin | |
Diana Stehr Senior Intranet Supervisor diana_stehr7@hotmail.com | Member | |
Clinton Powlowski Internal Program Coordinator clinton_powlowski94@gmail.com | Viewer | |
Vida McClure Customer Applications Planner vida_mcclure@hotmail.com | Admin | |
Brenda Quigley Human Group Technician brenda_quigley@gmail.com | Member | |
Domenica Heidenreich Human Tactics Engineer domenica.heidenreich34@gmail.com | Admin | |
Stephanie Cole Internal Infrastructure Strategist stephanie.cole70@yahoo.com | Admin | |
Dale Bechtelar Central Group Officer dale_bechtelar41@yahoo.com | Viewer | |
Belinda Dickinson Forward Interactions Assistant belinda_dickinson75@gmail.com | Member | |
Audra Harber Forward Communications Representative audra.harber19@yahoo.com | Admin | |
Naomie Grimes Future Communications Specialist naomie.grimes@hotmail.com | Viewer | |
Deangelo Reynolds Customer Security Consultant deangelo.reynolds@hotmail.com | Member | |
Chadd Crist Forward Communications Executive chadd.crist86@hotmail.com | Viewer | |
Marcos Morissette Lead Data Consultant marcos.morissette32@gmail.com | Member | |
Orville Smitham Legacy Group Designer orville_smitham35@yahoo.com | Admin | |
Quinn Waters Investor Security Officer quinn.waters24@yahoo.com | Admin | |
Freddie Dibbert Central Implementation Associate freddie.dibbert@gmail.com | Viewer | |
Narciso Spinka Regional Configuration Engineer narciso.spinka96@gmail.com | Viewer | |
Demond Wehner Chief Branding Developer demond_wehner@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 | |
|---|---|---|---|---|
| Diana Wisozk I | ronny.hansen@gmail.com | Johnsworth | Inactive | $224.55 |
| Mr. Joshua Altenwerth | grant_olson@hotmail.com | New Moriahside | Inactive | $673.31 |
| Peggy Schroeder | porter_rogahn@gmail.com | Bergnaumview | Active | $926.50 |
| Bob Bartell | johanna_schultz@hotmail.com | New Kamryn | Active | $1,115.15 |
| Floyd Strosin | annamae5@gmail.com | South Catalina | Active | $904.65 |
| Total | $3,844.16 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Shelley Kemmer @marc80 | luke.maggio21@gmail.com | Mullerbury | Inactive | $196.16 |
Kip McGlynn @lindsay4 | willie.gibson@yahoo.com | Clarissaboro | Active | $203.40 |
Jovan Effertz @fredrick.langworth | wendell_smith14@gmail.com | New Alice | Inactive | $77.08 |
Sylvia Christiansen @patsy53 | leslie8@hotmail.com | Port Teresaville | Inactive | $655.98 |
Mrs. Natasha Hansen @seth78 | tia32@yahoo.com | New Karianne | Inactive | $989.80 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cathrine Koelpin | harold.cole@yahoo.com | North Eliland | Active | $289.37 |
| Valerie Beier | laurie.barton@hotmail.com | Alethashire | Active | $11.44 |
| Astrid Yost | mittie38@hotmail.com | Brookefurt | Inactive | $428.39 |
| Johan Schaefer | alicia.strosin21@gmail.com | Port Lavonne | Inactive | $604.57 |
| Leona Sipes | mathew_oreilly@gmail.com | Grand Junction | Inactive | $851.29 |
| Total | $2,185.06 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sheri Wilkinson | kristoffer_hagenes9@yahoo.com | Port Josephineshire | Active | $912.66 |
| Antonia Tillman | myrtice_purdy@hotmail.com | West Mohammad | Active | $892.92 |
| Jean Wehner | teresa.mante@yahoo.com | Nikoland | Active | $1,068.96 |
| Miss Annette Morissette-Brakus | thaddeus.harris@yahoo.com | Orange | Inactive | $120.92 |
| Nettie King | marta_schinner63@yahoo.com | Dollyfort | Active | $220.18 |
| Total | $3,215.64 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Brad Rohan MD | josh_kerluke80@yahoo.com | Minot | Active | $283.26 |
| Dorris Terry | thea.feest86@hotmail.com | Port Lisandroland | Inactive | $918.55 |
| Grace Steuber | ann61@hotmail.com | Fort Graham | Inactive | $1,106.88 |
| Lynda Halvorson | gary_kihn71@yahoo.com | Jamirchester | Inactive | $899.76 |
| Lana Schmitt III | amya_dickens69@hotmail.com | Kuvalisburgh | Active | $840.58 |
| Total | $4,049.03 | |||
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 | ||
|---|---|---|---|---|---|
| Lucille Keeling | lloyd42@gmail.com | East Josue | Active | $1,081.78 | |
| Elizabeth Marquardt-McGlynn DDS | lola_huel-haag66@hotmail.com | Westleyview | Active | $221.37 | |
| Clara Abbott-Mohr | tiffany63@gmail.com | Elfriedaland | Inactive | $542.80 | |
| Paulette Lakin | jeannie_nicolas53@yahoo.com | Bartonfield | Active | $140.44 | |
| Tonya Littel | dante.schamberger@hotmail.com | Laguna Niguel | Inactive | $1,157.10 | |
| Total | $3,143.49 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Alexandria Pagac | lyle90@gmail.com | Euclid | Inactive | $830.26 | |
| Raul Littel-Runte | herman82@yahoo.com | South Zolastad | Active | $1,035.28 | |
| Jaime Heller | andrew_kovacek@yahoo.com | Ankundinghaven | Active | $534.06 | |
| Lloyd Steuber | adriana_graham@yahoo.com | South Emory | Active | $702.32 | |
| Angela Thompson | steven69@hotmail.com | Port Rowanfurt | Inactive | $903.49 | |
| Total | $4,005.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 | |
|---|---|---|---|---|
| Bridget Beahan V | milton32@hotmail.com | Bonita Springs | Inactive | $343.06 |
| Dr. Bettie Renner DDS | byron_cummerata@yahoo.com | Scottsdale | Inactive | $170.17 |
| Pat Gibson | monique_harber@hotmail.com | Lakeville | Inactive | $814.43 |
| Gina Wolff | myron.mckenzie66@hotmail.com | Reyesstead | Inactive | $91.90 |
| Ben Kiehn | rosemary_kessler@gmail.com | Hershelworth | Inactive | $148.41 |
| Pablo Swaniawski | natalie89@yahoo.com | Stantonshire | Inactive | $105.83 |
| Viola Prohaska V | tara_wolf@yahoo.com | Kesslerburgh | Inactive | $432.81 |
| Maximillian Wilkinson | enoch0@yahoo.com | Letastad | Inactive | $1,013.20 |
| Leticia Jaskolski | tomas84@gmail.com | Trevermouth | Active | $98.63 |
| Loyce Batz | shawn.brekke86@gmail.com | East Ena | Active | $422.51 |
| Lyle Crist | carlos_lehner@yahoo.com | Reston | Active | $351.78 |
| Orrin Carter | christian51@yahoo.com | Labadieborough | Active | $646.34 |
| Perry Lakin | tony.witting52@hotmail.com | Amirafurt | Active | $429.54 |
| Florence Konopelski | shirley.jaskolski@gmail.com | Rio Rancho | Active | $12.20 |
| Raina Armstrong | florence_reinger@hotmail.com | Lake Sandrashire | Inactive | $137.70 |
| Total | $5,218.51 | |||
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 |