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 | $149.42 |
| INV002 | Unpaid | Bank Transfer | $450.71 |
| INV003 | Unpaid | Bank Transfer | $525.84 |
| INV004 | Pending | Credit Card | $678.16 |
| INV005 | Paid | PayPal | $236.63 |
| INV006 | Unpaid | Bank Transfer | $968.35 |
| INV007 | Pending | PayPal | $836.26 |
| Total | $3,845.37 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jerome Leuschke | Regional Metrics Facilitator | jerome_leuschke@gmail.com | Admin | |
| Dylan Little | Senior Security Technician | dylan.little82@gmail.com | Viewer | |
| Alvin Gusikowski | Global Data Architect | alvin_gusikowski@yahoo.com | Admin | |
| Pattie Heaney | Internal Integration Specialist | pattie_heaney58@gmail.com | Viewer | |
| Eliane Durgan | National Optimization Technician | eliane_durgan4@hotmail.com | Viewer | |
| Sonya Wuckert | Principal Operations Strategist | sonya.wuckert@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 |
|---|---|---|
Sharon O'Connell District Group Consultant sharon_oconnell@gmail.com | Viewer | |
Gustavo Herzog Principal Intranet Orchestrator gustavo_herzog@gmail.com | Member | |
Abdiel Wisoky National Optimization Facilitator abdiel_wisoky@hotmail.com | Viewer | |
Russell Wilderman Dynamic Infrastructure Liaison russell_wilderman28@yahoo.com | Viewer | |
Arlo White Senior Identity Agent arlo.white@gmail.com | Viewer | |
Ford Block-Kuhn Chief Data Orchestrator ford.block-kuhn@hotmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jerry Davis District Paradigm Consultant jerry.davis@hotmail.com | Admin | |
Estell Cummings National Intranet Technician estell_cummings65@hotmail.com | Viewer | |
Vivian Bogisich Forward Security Technician vivian_bogisich5@yahoo.com | Viewer | |
Johathan Swaniawski Corporate Mobility Coordinator johathan_swaniawski@hotmail.com | Member | |
Sebastian Collier Chief Assurance Analyst sebastian.collier@hotmail.com | Viewer | |
Aiyana Deckow-Denesik Central Factors Officer aiyana.deckow-denesik@yahoo.com | Viewer | |
Ryann Emard-Cremin Global Metrics Architect ryann.emard-cremin15@gmail.com | Viewer | |
Erick Hackett National Usability Designer erick_hackett38@hotmail.com | Admin | |
Derek West Legacy Directives Director derek_west@gmail.com | Admin | |
Debbie Brown Legacy Solutions Liaison debbie_brown@hotmail.com | Member | |
Mike Leffler Senior Data Technician mike.leffler76@yahoo.com | Viewer | |
Norma Murphy Senior Accountability Liaison norma.murphy77@hotmail.com | Admin | |
Kiley Wunsch National Research Manager kiley.wunsch@yahoo.com | Viewer | |
Evelyn Koch Senior Brand Agent evelyn_koch@hotmail.com | Admin | |
Marianne Welch Chief Identity Analyst marianne_welch@yahoo.com | Admin | |
Erna Haley Legacy Accountability Planner erna.haley20@gmail.com | Admin | |
Josephine Farrell International Operations Administrator josephine.farrell3@gmail.com | Member | |
Gayle Wiegand Regional Applications Agent gayle_wiegand@gmail.com | Viewer | |
Jessica Hartmann Customer Tactics Orchestrator jessica_hartmann72@yahoo.com | Member | |
Juston Maggio-Romaguera Lead Functionality Orchestrator juston.maggio-romaguera@gmail.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 | |
|---|---|---|---|---|
| Eleanor Hamill | nancy_gutkowski@hotmail.com | Franeyville | Active | $72.73 |
| Rafael Considine | melba20@yahoo.com | Louisville/Jefferson County | Active | $390.13 |
| Mr. Spencer Pollich | marianne.hansen@yahoo.com | South Jeffcester | Active | $1,178.55 |
| Latoya Bauch Jr. | christopher7@yahoo.com | Rolfsonmouth | Inactive | $848.72 |
| Natalie Conn | carmel.rice34@yahoo.com | West Tammy | Active | $44.73 |
| Total | $2,534.86 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Ira Bernier @teresa_graham63 | angeline5@hotmail.com | North Mary | Inactive | $975.88 |
Anderson Bruen @henrietta_ziemann29 | roxane45@gmail.com | North Craigview | Inactive | $145.06 |
Elsa Heidenreich @rick80 | kelsie.funk27@hotmail.com | North Jeanne | Inactive | $911.17 |
Nicklaus Moore @tony_wintheiser36 | anderson.schumm87@hotmail.com | Carolefurt | Active | $912.25 |
Darron Stiedemann @vera.cormier | angelica.grant@yahoo.com | East Diane | Inactive | $1,093.76 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Vada Botsford Sr. | celia.ortiz59@yahoo.com | San Jacinto | Inactive | $507.03 |
| Doyle Hand | antonia_stroman@yahoo.com | Sanfordfort | Active | $1,122.86 |
| Alfonso Labadie | arnaldo_streich-larkin@yahoo.com | Kennashire | Inactive | $78.68 |
| Jessy Wilkinson | marcella.ankunding@yahoo.com | Vancouver | Inactive | $75.46 |
| Laury Carroll | conrad66@gmail.com | Bartlett | Active | $1,167.13 |
| Total | $2,951.16 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Monte Kub | ignacio57@yahoo.com | Wolffurt | Inactive | $184.86 |
| Wade Kozey | colleen14@hotmail.com | Pamelafield | Inactive | $517.37 |
| Dakota Weber | geraldine9@yahoo.com | Abrahamfield | Active | $849.02 |
| Addison Feil | maud_corwin47@yahoo.com | Mission Viejo | Active | $510.73 |
| Ruthie Wolf DDS | mason.mcclure@yahoo.com | Eugene | Active | $786.54 |
| Total | $2,848.52 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Elise Hammes IV | roland.wuckert@yahoo.com | West Danniecester | Active | $509.64 |
| Demond Waelchi | isaias.franecki37@yahoo.com | New Salvatorecester | Inactive | $783.66 |
| Rick Franecki | adolph10@yahoo.com | McKenziechester | Active | $72.31 |
| Kamren Brown | jannie23@hotmail.com | Hoffman Estates | Inactive | $611.50 |
| Devon Kovacek | rhiannon_damore@gmail.com | East Carlottaworth | Active | $1,191.99 |
| Total | $3,169.10 | |||
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 | ||
|---|---|---|---|---|---|
| Onie Predovic | megane99@yahoo.com | Coachella | Inactive | $1,064.48 | |
| Nelson Wisoky | mary.ledner@gmail.com | Karenbury | Active | $590.23 | |
| Wilbur Bogisich | helene.stokes@yahoo.com | Fort Katherine | Active | $413.60 | |
| Stephan Wehner | eva14@gmail.com | West Jordan | Active | $820.24 | |
| Christophe Rath | marcos.cole@yahoo.com | Bowling Green | Inactive | $621.67 | |
| Total | $3,510.22 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mr. Stone Lind | chloe_hand-mayert80@yahoo.com | New Jeffrey | Active | $275.70 | |
| Hugh Cummerata | angie_heller28@yahoo.com | Quigleyshire | Active | $923.25 | |
| Mr. Vivianne Kessler | august_hodkiewicz@yahoo.com | South Joanland | Inactive | $501.60 | |
| Jazmyn Von-Schaefer | jerome_sipes63@yahoo.com | Port Keltonland | Active | $1,193.70 | |
| Doug Cremin | joe4@yahoo.com | Terriboro | Active | $671.82 | |
| Total | $3,566.07 | ||||
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 | |
|---|---|---|---|---|
| Mack Mohr-Dietrich | moshe_rempel70@gmail.com | Boscoboro | Active | $79.75 |
| Travon Collins | zella.miller57@yahoo.com | Lake Juliet | Inactive | $319.59 |
| Mrs. Brandyn Crooks | gwendolyn_zboncak@gmail.com | Port Samuelbury | Inactive | $1,130.45 |
| Lindsey Pagac | greg_rice@yahoo.com | Lake Amiefield | Active | $636.71 |
| Perry Considine | ernestine_harber44@hotmail.com | Metzchester | Active | $571.48 |
| Alexane Stark | jeff_ward63@hotmail.com | Port Arthur | Inactive | $742.14 |
| Fay Braun | morton_romaguera@yahoo.com | South Laceytown | Inactive | $9.39 |
| Reanna Williamson | reginald_rowe2@gmail.com | Fullerton | Active | $800.23 |
| Myah Raynor | zora.durgan57@yahoo.com | Thompsonport | Inactive | $282.49 |
| Mr. Easter Hackett | camila_harber-dibbert@gmail.com | Maxineview | Active | $344.89 |
| Mr. Ted Grady | thaddeus_fisher47@hotmail.com | West Lillieville | Active | $88.59 |
| Jonathon Walsh | marjory22@hotmail.com | North Stacey | Inactive | $882.23 |
| Hannah Daniel | timmy29@gmail.com | Port Lora | Inactive | $1,149.18 |
| Miss Josefina Miller | ricardo69@hotmail.com | La Mesa | Inactive | $1,153.26 |
| Michelle Robel | stella98@gmail.com | D'Amoreside | Active | $344.82 |
| Total | $8,535.20 | |||
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 |