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 | $376.30 |
| INV002 | Pending | PayPal | $128.00 |
| INV003 | Pending | Credit Card | $513.16 |
| INV004 | Paid | Credit Card | $795.10 |
| INV005 | Pending | Credit Card | $761.26 |
| INV006 | Pending | Bank Transfer | $744.83 |
| INV007 | Paid | Bank Transfer | $676.45 |
| Total | $3,995.10 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Sid Rice | National Usability Officer | sid_rice@hotmail.com | Admin | |
| Zoe Bogisich | Central Markets Coordinator | zoe.bogisich@yahoo.com | Member | |
| Roslyn Koepp | Global Data Technician | roslyn_koepp@gmail.com | Admin | |
| Talon Daugherty | Principal Branding Technician | talon_daugherty36@yahoo.com | Viewer | |
| Theo Sipes | Human Metrics Liaison | theo_sipes@gmail.com | Member | |
| Juvenal Morissette-Adams | Legacy Identity Orchestrator | juvenal.morissette-adams@yahoo.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 |
|---|---|---|
Brando Sanford Product Division Consultant brando_sanford@yahoo.com | Member | |
Kade McCullough Legacy Data Liaison kade.mccullough@yahoo.com | Admin | |
Bonnie Stiedemann Human Operations Representative bonnie_stiedemann37@hotmail.com | Member | |
Mariano Romaguera Forward Markets Planner mariano_romaguera49@hotmail.com | Member | |
Melyssa Kutch Corporate Web Liaison melyssa_kutch88@gmail.com | Member | |
Jayden Crist Lead Assurance Technician jayden.crist@hotmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jolie Schmeler Direct Marketing Developer jolie_schmeler@hotmail.com | Member | |
Thea Leannon Human Solutions Manager thea_leannon@gmail.com | Member | |
Asha Romaguera Regional Web Officer asha.romaguera@gmail.com | Viewer | |
Prudence Heller Senior Implementation Representative prudence.heller@hotmail.com | Viewer | |
Gilbert Marvin Customer Configuration Associate gilbert.marvin86@yahoo.com | Member | |
Amely Beer Forward Mobility Facilitator amely_beer68@gmail.com | Viewer | |
Leslie Gusikowski Legacy Usability Executive leslie.gusikowski33@hotmail.com | Viewer | |
Hilario Yost Central Identity Orchestrator hilario.yost@yahoo.com | Admin | |
Jeromy Leuschke Internal Metrics Agent jeromy.leuschke97@yahoo.com | Member | |
Matilde Davis Regional Configuration Engineer matilde.davis14@gmail.com | Member | |
Madonna Marquardt District Security Liaison madonna.marquardt@gmail.com | Admin | |
Daren Ferry Regional Response Specialist daren.ferry91@yahoo.com | Viewer | |
Shany Yundt Human Branding Designer shany_yundt15@hotmail.com | Member | |
Sidney Morar Human Implementation Assistant sidney.morar9@hotmail.com | Viewer | |
Germaine Turner Corporate Optimization Officer germaine.turner@hotmail.com | Admin | |
Russ Kunze Corporate Solutions Specialist russ_kunze@yahoo.com | Viewer | |
Nikita Dach Senior Mobility Planner nikita.dach@yahoo.com | Admin | |
Hailey Dooley National Brand Officer hailey.dooley34@hotmail.com | Admin | |
Pamela Gusikowski Dynamic Operations Orchestrator pamela.gusikowski48@hotmail.com | Member | |
Travon Mitchell Future Accounts Architect travon.mitchell30@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 | |
|---|---|---|---|---|
| Latoya Lakin | marques_kling-bayer16@hotmail.com | West Delilahchester | Inactive | $607.50 |
| Josephine Grady | augustine.graham22@hotmail.com | Beattyfurt | Inactive | $940.85 |
| Carla Toy | alfred_corkery@hotmail.com | Indio | Active | $482.10 |
| Dwight Tremblay | kathlyn85@hotmail.com | Lake Havasu City | Active | $143.55 |
| Dr. Jerry Mayert | reggie55@gmail.com | Hillardview | Inactive | $1,138.58 |
| Total | $3,312.58 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Miss Stella Stracke @rylan72 | gayle26@yahoo.com | Shieldsview | Active | $228.69 |
Justin Grimes II @alden.jacobs29 | hunter32@gmail.com | South Corinefort | Active | $539.70 |
Mr. Carroll Barton @elinore.hackett | ansel_moen66@gmail.com | New Billy | Active | $1,018.94 |
Mr. Sylvester Hettinger @hardy.cremin | hazle19@yahoo.com | Schroederstead | Inactive | $42.18 |
Dana Kihn @gunnar.hand | vivian_keebler38@hotmail.com | Parisianton | Inactive | $989.89 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Cristina Keebler-Adams V | morris_bednar@gmail.com | Lake Juliana | Active | $477.38 |
| Claudia Wisoky | nannie.hoeger@yahoo.com | East Laurenceboro | Inactive | $1,039.49 |
| Allan Ondricka | eli72@yahoo.com | DuBuquefield | Inactive | $1,167.99 |
| Rosa Tremblay | scotty_dicki@yahoo.com | Ziemannshire | Inactive | $208.09 |
| Sheila Schamberger-Ebert | weldon_bode@hotmail.com | Port Ricoshire | Inactive | $447.11 |
| Total | $3,340.06 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lora Wuckert | brandi_okuneva89@gmail.com | Enid | Inactive | $131.87 |
| Shannon Cremin | dulce.parker@hotmail.com | East Providence | Inactive | $817.85 |
| Gail Watsica | dudley.parisian28@hotmail.com | Otiscester | Inactive | $324.63 |
| Mr. Leonard Quigley | quentin61@hotmail.com | Lake Dimitri | Active | $820.38 |
| Gustavo Prosacco | victor.morar@yahoo.com | Pensacola | Active | $1,122.21 |
| Total | $3,216.94 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gordon Rowe | gudrun_pouros@gmail.com | Monroe | Active | $564.13 |
| Gretchen Spinka | annie_mills55@hotmail.com | West Khalid | Inactive | $715.65 |
| Dr. Willie Schinner | zack22@hotmail.com | Lenexa | Inactive | $703.15 |
| Marion McClure | zachery10@yahoo.com | Medhurstside | Inactive | $180.86 |
| Glenn Hyatt | delores.powlowski91@gmail.com | Mayertstead | Inactive | $794.25 |
| Total | $2,958.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 | ||
|---|---|---|---|---|---|
| Bradley Hoppe | casey_towne@yahoo.com | Jaylonville | Active | $987.23 | |
| Darrell Cassin | braxton_bartell92@yahoo.com | Lodi | Inactive | $655.20 | |
| Mattie Kling | jonathan34@gmail.com | North Amara | Active | $822.52 | |
| Lewis Emmerich | adam_rempel@gmail.com | Oklahoma City | Active | $746.33 | |
| Johanna Jast | conrad_kohler@hotmail.com | Thielchester | Inactive | $115.12 | |
| Total | $3,326.40 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Nathan Lang | hallie_macgyver@hotmail.com | Champlinhaven | Inactive | $851.04 | |
| Douglas O'Conner | berneice_kovacek88@yahoo.com | Wilkinsonview | Inactive | $720.69 | |
| Marc Fisher | wilfrid.oconnell-daniel@hotmail.com | Kilbackmouth | Active | $145.36 | |
| Jermaine Heller | elroy_kozey37@yahoo.com | Lake Jennings | Active | $705.06 | |
| Viola Walter | walker_beier46@yahoo.com | Durganstead | Inactive | $483.53 | |
| Total | $2,905.68 | ||||
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 | |
|---|---|---|---|---|
| Casey Leffler | wendy_auer-kautzer@yahoo.com | Brownsville | Inactive | $737.51 |
| Keith Kunze | earnestine56@hotmail.com | Hayesport | Active | $327.31 |
| Freda Carter | shany_bartoletti@yahoo.com | Port Mia | Active | $279.51 |
| Dr. Bryant Kshlerin | ophelia_hayes33@gmail.com | Friesenside | Inactive | $160.92 |
| Clayton Rodriguez | cathryn33@hotmail.com | Lewport | Inactive | $1,038.55 |
| Jermaine Shields | bennie.ullrich@yahoo.com | Gerholdhaven | Active | $664.61 |
| Melissa Zieme | elvie18@hotmail.com | West Earlinemouth | Inactive | $328.03 |
| Manuel Altenwerth | kiara_abernathy-rogahn@yahoo.com | South Kaleburgh | Inactive | $728.50 |
| Kristopher O'Conner | marcellus_sawayn5@yahoo.com | New Adaline | Inactive | $996.21 |
| Mrs. Nicole Murphy | hildegard_shields81@yahoo.com | Lake Maribelton | Inactive | $1,045.02 |
| Lowell Rippin | harrison_mraz25@hotmail.com | North Bernadetteside | Active | $953.99 |
| Miss Muriel Romaguera | angel.bechtelar@hotmail.com | Gennarocester | Active | $79.66 |
| Audrey Streich | virgie44@gmail.com | Homenickstad | Inactive | $838.08 |
| Jan Harvey | kayla_casper@yahoo.com | Carolannemouth | Active | $530.97 |
| Cassandra Olson | henri55@yahoo.com | Elijahbury | Inactive | $1,081.85 |
| Total | $9,790.72 | |||
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 |