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 | Unpaid | Bank Transfer | $275.76 |
| INV002 | Pending | PayPal | $210.96 |
| INV003 | Unpaid | Bank Transfer | $457.95 |
| INV004 | Unpaid | Bank Transfer | $551.22 |
| INV005 | Pending | Credit Card | $926.70 |
| INV006 | Pending | PayPal | $692.62 |
| INV007 | Paid | PayPal | $520.69 |
| Total | $3,635.90 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Judith Glover | Central Quality Consultant | judith.glover44@yahoo.com | Admin | |
| Melanie Gutkowski | Human Quality Analyst | melanie_gutkowski97@hotmail.com | Admin | |
| Annette Auer | Regional Brand Architect | annette.auer@yahoo.com | Admin | |
| Ivan Medhurst | Central Brand Technician | ivan_medhurst19@hotmail.com | Member | |
| Israel Padberg | Dynamic Operations Orchestrator | israel.padberg70@hotmail.com | Viewer | |
| Isobel Schinner-Dibbert | Customer Infrastructure Consultant | isobel.schinner-dibbert21@gmail.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 |
|---|---|---|
Janiya Lowe Product Factors Manager janiya.lowe@gmail.com | Member | |
Maxine Marvin National Implementation Associate maxine_marvin@hotmail.com | Member | |
Emilio Gleason National Program Administrator emilio_gleason93@yahoo.com | Viewer | |
Jairo Labadie District Functionality Strategist jairo.labadie60@gmail.com | Member | |
Dariana Nicolas Direct Directives Architect dariana.nicolas58@gmail.com | Member | |
Jena Skiles Senior Accounts Consultant jena_skiles@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Carole Purdy International Markets Consultant carole_purdy87@yahoo.com | Member | |
Joshua Schaefer Regional Marketing Developer joshua.schaefer62@hotmail.com | Member | |
Yolanda Ward National Interactions Architect yolanda_ward@yahoo.com | Admin | |
Emily Smitham Customer Security Administrator emily_smitham31@yahoo.com | Member | |
Alfredo Stiedemann Product Implementation Analyst alfredo_stiedemann@gmail.com | Admin | |
Julian Yundt Internal Brand Associate julian.yundt@hotmail.com | Member | |
Gail Bailey Chief Accounts Coordinator gail.bailey@gmail.com | Admin | |
Cristina Borer Dynamic Intranet Planner cristina_borer@yahoo.com | Admin | |
Ivory Weissnat Senior Communications Engineer ivory.weissnat11@gmail.com | Member | |
Melinda Schmeler Dynamic Communications Consultant melinda_schmeler@gmail.com | Member | |
Braden Smitham Direct Program Engineer braden.smitham@hotmail.com | Member | |
Malcolm Rau Global Usability Technician malcolm.rau@gmail.com | Admin | |
Austin Dare Chief Operations Engineer austin.dare@yahoo.com | Viewer | |
Bill Zboncak Dynamic Applications Director bill_zboncak@yahoo.com | Admin | |
Dakota Bartell Regional Branding Specialist dakota.bartell@hotmail.com | Admin | |
Lenny Cruickshank Customer Branding Architect lenny.cruickshank@gmail.com | Admin | |
Clark Crooks-Kuhic Regional Response Facilitator clark.crooks-kuhic@gmail.com | Member | |
Buster Cormier Internal Accounts Developer buster.cormier@gmail.com | Viewer | |
Leslie Schoen Internal Interactions Strategist leslie.schoen@gmail.com | Member | |
Amina Johnson Central Implementation Director amina.johnson@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 | |
|---|---|---|---|---|
| Elvira Schuster | ignacio_littel@gmail.com | Bradlyburgh | Active | $193.64 |
| Miss Ariane Herzog | rudy_kuvalis50@hotmail.com | State College | Active | $22.09 |
| Shelley Jacobson | wilbert.mitchell25@gmail.com | Ullrichfurt | Inactive | $1,150.00 |
| Alberto Jenkins-Medhurst | nikki_bayer75@yahoo.com | Kaileyland | Active | $1,019.97 |
| Syble Braun | clifford_barton-hand@yahoo.com | New Lewis | Active | $139.26 |
| Total | $2,524.96 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Grace Barton @helen.bashirian80 | sherri_kovacek76@gmail.com | Deondrebury | Active | $801.85 |
Miss Albin Schuster @josie.heathcote81 | flora21@gmail.com | League City | Active | $1,063.48 |
Maxine Sipes @jerad60 | palma99@hotmail.com | East Erniefort | Active | $1,141.57 |
Ricardo Franecki @shane27 | norman_mertz@yahoo.com | Devynboro | Active | $864.72 |
Angelita Conn @pete.cartwright64 | loraine98@gmail.com | Nikolasview | Active | $454.70 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lorraine Tremblay | carter_ledner87@gmail.com | Lake Adalberto | Inactive | $933.06 |
| Dr. Juanita Ernser | richie.schultz-towne17@hotmail.com | Flint | Inactive | $393.23 |
| Mercedes Christiansen | sylvester47@yahoo.com | Port Malvina | Inactive | $621.78 |
| Yolanda Ratke | darnell.mclaughlin@yahoo.com | Fort Derrickborough | Active | $145.23 |
| Deion Hegmann | kim_leuschke30@yahoo.com | North Hilarioboro | Inactive | $263.65 |
| Total | $2,356.95 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bonnie Tremblay | samanta_lockman@gmail.com | Eleonoreshire | Inactive | $351.44 |
| Anthony Wyman | garth_collins@hotmail.com | Lake Eastonland | Inactive | $281.84 |
| Nina Ruecker I | joanny.bailey@yahoo.com | Beaverton | Inactive | $1,101.86 |
| Roderick Stehr | jerome_vonrueden63@yahoo.com | Roswell | Active | $209.44 |
| Jon Bartell | stephan61@yahoo.com | Feilborough | Active | $490.89 |
| Total | $2,435.47 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dena Zboncak | ismael_white@yahoo.com | Fort Gabrielland | Active | $868.37 |
| Leroy Blick | monique.howe@gmail.com | Fort Lexusborough | Inactive | $863.56 |
| Conner Prosacco | abel67@yahoo.com | Feliciaview | Inactive | $732.63 |
| Reggie O'Connell | emmy.johns57@yahoo.com | Cedrickborough | Active | $727.34 |
| Everett Erdman | sophia.jakubowski@yahoo.com | Justicefort | Active | $85.03 |
| Total | $3,276.93 | |||
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 | ||
|---|---|---|---|---|---|
| Gustavo Will | kari_conn@hotmail.com | Flatleyside | Active | $1,062.94 | |
| Alfonzo Mohr | alex.mohr@gmail.com | Fort Julienview | Inactive | $85.77 | |
| Rogers Swift | valentine_schaefer50@gmail.com | The Woodlands | Inactive | $5.98 | |
| Adele Treutel | luella.watsica79@gmail.com | Port Nathenstead | Inactive | $146.72 | |
| Gabriel Donnelly | donald.corwin@hotmail.com | West Leonieland | Active | $989.36 | |
| Total | $2,290.77 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Lionel Johnston | hugh_hyatt97@yahoo.com | Murrayfield | Active | $833.65 | |
| Heather Kuhn | leora.dietrich29@gmail.com | Norrisfield | Inactive | $1,039.63 | |
| Kelly Mayert | barbara48@gmail.com | East Maudieburgh | Inactive | $419.16 | |
| Mr. Garnett O'Hara | ressie_daugherty80@gmail.com | West Millie | Inactive | $831.31 | |
| Maria Bechtelar-Abernathy MD | sean_morar41@hotmail.com | Highland | Active | $593.91 | |
| Total | $3,717.66 | ||||
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 | |
|---|---|---|---|---|
| Zachery Lakin III | florence.barrows@yahoo.com | Zacheryborough | Active | $643.50 |
| Brown King | joann.west2@hotmail.com | Kunzeport | Inactive | $481.59 |
| Jaiden Reichert | santiago54@yahoo.com | Fort Bobbyboro | Active | $566.68 |
| Anna Kozey | henrietta_bashirian@yahoo.com | Fort Watson | Inactive | $201.69 |
| Miss Clyde Miller | mitchell12@gmail.com | West Trystan | Inactive | $2.45 |
| Mr. Courtney Jones | candace.sauer53@gmail.com | New Cassidy | Active | $619.43 |
| Faye Bergnaum | marguerite.mcglynn@gmail.com | Baytown | Active | $351.42 |
| Tammy Raynor | dora.kris94@gmail.com | Princessfort | Inactive | $1,053.08 |
| Susie Anderson | franz.daniel@gmail.com | Lenexa | Active | $321.65 |
| Dr. Felix Ruecker | thomas_graham@yahoo.com | West Augustine | Active | $47.69 |
| Asha Parisian | lindsay_cummings96@gmail.com | Liaview | Active | $531.98 |
| Irvin Pfeffer | ray.feil66@gmail.com | Passaic | Inactive | $1,193.86 |
| Catherine Green | elliott40@hotmail.com | Lake Orionport | Inactive | $428.50 |
| Doreen Hills | jerad_goyette@yahoo.com | New Traceyburgh | Inactive | $294.21 |
| Estelle Weissnat | clifton41@gmail.com | Abilene | Active | $1,010.23 |
| Total | $7,747.96 | |||
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 |