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 | Bank Transfer | $750.62 |
| INV002 | Pending | PayPal | $494.81 |
| INV003 | Paid | Bank Transfer | $891.47 |
| INV004 | Pending | Bank Transfer | $592.41 |
| INV005 | Unpaid | Credit Card | $880.05 |
| INV006 | Paid | PayPal | $141.30 |
| INV007 | Unpaid | PayPal | $195.79 |
| Total | $3,946.45 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Edgar Blick | Investor Usability Orchestrator | edgar.blick@gmail.com | Viewer | |
| Melissa Cruickshank | Direct Directives Consultant | melissa_cruickshank@hotmail.com | Viewer | |
| Edgar Fisher | Global Creative Engineer | edgar_fisher@hotmail.com | Member | |
| Toni Conroy-Green | Dynamic Group Representative | toni.conroy-green13@yahoo.com | Viewer | |
| Alfonso Hermann | Product Marketing Analyst | alfonso_hermann@yahoo.com | Admin | |
| Rachael Emmerich | Legacy Accounts Supervisor | rachael.emmerich97@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 |
|---|---|---|
Leonard O'Keefe Senior Operations Representative leonard.okeefe@yahoo.com | Admin | |
Ollie Hegmann Product Accounts Developer ollie.hegmann@hotmail.com | Member | |
Tyree Ruecker Dynamic Functionality Supervisor tyree_ruecker@gmail.com | Member | |
Lessie Wilkinson Forward Infrastructure Director lessie.wilkinson66@yahoo.com | Viewer | |
Opal Emard Product Web Coordinator opal.emard@yahoo.com | Member | |
Marian Hane Corporate Factors Agent marian.hane62@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 |
|---|---|---|
Kristina Kutch District Assurance Agent kristina_kutch@yahoo.com | Member | |
Kaylie Keeling Global Web Consultant kaylie.keeling@gmail.com | Admin | |
Essie Moen-Wisoky Internal Accountability Officer essie.moen-wisoky79@yahoo.com | Viewer | |
Jo Dooley District Marketing Executive jo.dooley10@yahoo.com | Admin | |
Melba Luettgen Investor Integration Representative melba.luettgen92@gmail.com | Admin | |
Irvin Powlowski Global Usability Analyst irvin_powlowski@yahoo.com | Admin | |
Daisha Flatley Global Directives Designer daisha_flatley@yahoo.com | Admin | |
Eulalia Bergnaum Investor Solutions Technician eulalia.bergnaum16@yahoo.com | Member | |
Kristie Hermiston Regional Intranet Developer kristie.hermiston@yahoo.com | Admin | |
Violette Beier Customer Mobility Liaison violette.beier@gmail.com | Viewer | |
Domingo Davis Future Integration Officer domingo.davis50@gmail.com | Admin | |
Gayle Bayer Internal Assurance Architect gayle.bayer68@hotmail.com | Viewer | |
Calvin Rosenbaum International Optimization Orchestrator calvin.rosenbaum23@hotmail.com | Admin | |
Bell Lowe International Branding Director bell.lowe@hotmail.com | Viewer | |
Rodney Zboncak Principal Directives Supervisor rodney_zboncak@yahoo.com | Viewer | |
Hilda Carroll Human Response Technician hilda_carroll@hotmail.com | Admin | |
Delbert Tillman Investor Interactions Orchestrator delbert_tillman@gmail.com | Viewer | |
Everette Bergstrom Dynamic Marketing Technician everette_bergstrom48@yahoo.com | Admin | |
Fatima Kerluke National Paradigm Technician fatima.kerluke@yahoo.com | Admin | |
Phillip Conn Chief Infrastructure Assistant phillip_conn@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 | |
|---|---|---|---|---|
| Nathaniel McGlynn | roxanne97@hotmail.com | South Albert | Inactive | $315.37 |
| Alejandra Abshire | dallas_bergstrom@gmail.com | Kristenhaven | Active | $845.66 |
| Everardo Larson | maggie.schuster66@hotmail.com | East Los Angeles | Active | $162.48 |
| Clarabelle Rodriguez | wava5@hotmail.com | Kentwood | Inactive | $989.58 |
| Geraldine Hagenes | samara.weissnat70@hotmail.com | Lake Joestad | Active | $514.13 |
| Total | $2,827.22 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Lloyd Ferry @roy_hayes | betty6@hotmail.com | New Jerrellborough | Active | $563.68 |
Mrs. Nolan Howell @loretta_wintheiser | van78@hotmail.com | Bartellbury | Inactive | $201.13 |
Coy Hyatt @lola_shields | frederick49@yahoo.com | Lake Elsinore | Active | $1,198.24 |
Mr. Willy Huel @desiree_kunze94 | adela.kihn@gmail.com | Burnsville | Active | $222.08 |
Margarete Aufderhar @etha72 | ray_hills25@gmail.com | Urbana | Active | $625.71 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Leona Ortiz | raquel_ebert21@hotmail.com | Noblesville | Inactive | $1,017.70 |
| Leonard Cole | hugo.kshlerin@yahoo.com | Andyburgh | Active | $645.49 |
| Selina MacGyver-Durgan | isabel61@yahoo.com | Jessyberg | Inactive | $352.44 |
| Jennifer Kessler IV | millie19@yahoo.com | Kuhnfield | Inactive | $1,157.97 |
| Ira Davis | river.bins@hotmail.com | Herzogside | Inactive | $457.98 |
| Total | $3,631.58 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Hattie Hamill | cleora.stamm@gmail.com | Leonardstead | Active | $754.87 |
| Betty Collier | tim21@yahoo.com | West Eldora | Active | $1,029.49 |
| Gustavo Kuvalis | juanita.walsh25@gmail.com | Des Moines | Active | $594.90 |
| Rosetta Brown | efren.williamson75@gmail.com | Ashburn | Inactive | $1,034.88 |
| Elvera Bergnaum | violette80@yahoo.com | Gayleview | Inactive | $318.03 |
| Total | $3,732.17 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Desiree Lindgren | cristina_smith@yahoo.com | Kennyton | Inactive | $442.13 |
| Sylvester Satterfield II | steven_quitzon@gmail.com | Lake Havasu City | Inactive | $718.59 |
| Monserrate Metz | nelle27@yahoo.com | Wylie | Active | $48.59 |
| Deron Prohaska-Batz | andrew_terry29@gmail.com | Danielport | Active | $368.46 |
| Candida Green | angelo74@yahoo.com | Denton | Active | $1,004.85 |
| Total | $2,582.62 | |||
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 | ||
|---|---|---|---|---|---|
| Drew Mills | caleb.hartmann65@hotmail.com | Corona | Active | $593.10 | |
| Harriet Kuhlman | erika_blick@yahoo.com | Clovis | Active | $263.40 | |
| Jonathan Armstrong | dylan93@yahoo.com | Vista | Active | $1,029.42 | |
| Tavares Moore DVM | cheryl_oberbrunner88@gmail.com | North Yazmin | Active | $686.97 | |
| Laney Carroll | janice.shields@hotmail.com | East Ubaldoland | Inactive | $573.42 | |
| Total | $3,146.31 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Luther Armstrong | odessa_osinski@yahoo.com | Reillyfort | Active | $57.57 | |
| Kimberly Schoen | luciano26@hotmail.com | Dawnburgh | Active | $47.66 | |
| Ricardo Glover-Kuhic | charlie_torp@hotmail.com | Fort Adrain | Inactive | $279.04 | |
| Braulio Huels | ada.borer@hotmail.com | East Honolulu | Active | $1,000.70 | |
| Zachary Weber | wilfredo.wilkinson@hotmail.com | New Eleanormouth | Active | $405.25 | |
| Total | $1,790.22 | ||||
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 | |
|---|---|---|---|---|
| Emanuel Rogahn | janet.pouros@hotmail.com | Brekkeberg | Active | $412.49 |
| Lenore Maggio-Runolfsdottir IV | armando.stracke@yahoo.com | East Marlee | Inactive | $247.87 |
| Warren Kirlin Jr. | alexandria_kutch39@hotmail.com | Fort Pierce | Inactive | $758.33 |
| Vanessa Ullrich | joelle_kirlin63@yahoo.com | Lake Jenningsville | Inactive | $693.41 |
| Tate Stoltenberg | ryan_grimes50@hotmail.com | Euless | Active | $146.93 |
| Beverly Jenkins | kale.keeling5@yahoo.com | North Haylie | Inactive | $344.30 |
| Lorena Johns | flora26@yahoo.com | Issacshire | Active | $1,010.05 |
| Spencer Ondricka | frank.veum62@gmail.com | West Aidan | Active | $571.76 |
| Orville Stiedemann | douglas.harber75@hotmail.com | Pollichfield | Active | $825.17 |
| Chet Sipes | ella_smitham1@gmail.com | Willmsview | Inactive | $849.36 |
| Nicolas Balistreri | garnett_treutel@yahoo.com | South Russtown | Inactive | $1.20 |
| Irene Lind | jamie.altenwerth@yahoo.com | San Diego | Active | $87.82 |
| Monica Yundt | kasandra73@hotmail.com | Karliefort | Inactive | $299.28 |
| Saul Larson | mack.bashirian@gmail.com | Farrellfurt | Active | $1,102.44 |
| Wilson Langosh I | lola41@gmail.com | Dallasstad | Active | $977.64 |
| Total | $8,328.05 | |||
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 |