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 | PayPal | $126.29 |
| INV002 | Unpaid | Credit Card | $113.71 |
| INV003 | Paid | Credit Card | $262.17 |
| INV004 | Paid | PayPal | $945.83 |
| INV005 | Unpaid | Credit Card | $590.84 |
| INV006 | Paid | Credit Card | $175.84 |
| INV007 | Unpaid | PayPal | $474.41 |
| Total | $2,689.09 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Nina Lubowitz | Investor Markets Liaison | nina.lubowitz55@yahoo.com | Member | |
| Meaghan Runolfsdottir | Human Paradigm Technician | meaghan.runolfsdottir@yahoo.com | Admin | |
| Darrin Macejkovic | Global Marketing Developer | darrin.macejkovic@hotmail.com | Viewer | |
| Maud Rolfson | International Assurance Architect | maud.rolfson@gmail.com | Member | |
| Dean Farrell | Senior Solutions Coordinator | dean_farrell29@hotmail.com | Admin | |
| Roger Schaefer | Human Research Agent | roger.schaefer@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 |
|---|---|---|
Allen Hintz Forward Implementation Coordinator allen_hintz66@hotmail.com | Member | |
Carolyn Mills Future Usability Liaison carolyn.mills@gmail.com | Admin | |
Herman Rogahn Legacy Branding Manager herman_rogahn@yahoo.com | Member | |
Charlie Gorczany-Yost Principal Solutions Facilitator charlie.gorczany-yost77@gmail.com | Member | |
Humberto Rogahn Lead Implementation Facilitator humberto_rogahn@yahoo.com | Viewer | |
Janet Gorczany International Creative Associate janet.gorczany60@hotmail.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Elenora Rippin Human Configuration Analyst elenora.rippin16@hotmail.com | Viewer | |
Bernard Lowe Forward Identity Agent bernard.lowe19@yahoo.com | Viewer | |
Percy Brown Human Data Officer percy_brown83@gmail.com | Admin | |
Albina Leannon National Infrastructure Assistant albina_leannon49@yahoo.com | Member | |
Terry Kozey Principal Implementation Facilitator terry.kozey@gmail.com | Admin | |
Boyd King Principal Brand Engineer boyd.king51@gmail.com | Viewer | |
Gloria Schoen Central Mobility Assistant gloria.schoen@gmail.com | Viewer | |
Laurie Veum Product Integration Coordinator laurie.veum22@yahoo.com | Member | |
Pete McGlynn International Paradigm Liaison pete_mcglynn68@hotmail.com | Admin | |
Sam Collins Global Response Officer sam.collins@yahoo.com | Member | |
Veronica Reinger Customer Metrics Orchestrator veronica.reinger92@yahoo.com | Viewer | |
Abelardo Heaney Human Marketing Strategist abelardo.heaney@gmail.com | Member | |
Darrin Bradtke Human Optimization Engineer darrin_bradtke75@gmail.com | Admin | |
Mya Gerhold Central Optimization Designer mya_gerhold@hotmail.com | Admin | |
Grace Schiller National Assurance Analyst grace.schiller6@gmail.com | Viewer | |
Rudy Bartoletti Senior Metrics Orchestrator rudy.bartoletti@hotmail.com | Viewer | |
Ernest Kuhn Lead Quality Manager ernest_kuhn14@hotmail.com | Viewer | |
Dawn Greenholt Future Division Consultant dawn.greenholt27@gmail.com | Member | |
Jamie Nienow Principal Program Designer jamie.nienow92@yahoo.com | Admin | |
Arturo Schinner Senior Accountability Liaison arturo_schinner@gmail.com | Viewer |
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 | |
|---|---|---|---|---|
| Johanna Gibson | stan_block92@gmail.com | Lake Major | Active | $136.34 |
| Jennings Feeney | harry.jast28@hotmail.com | Roanoke | Active | $953.39 |
| Mrs. Florencio Cummerata | wallace52@yahoo.com | Port Letha | Inactive | $119.13 |
| Gilberto Hane I | corey.price@yahoo.com | Rosemouth | Inactive | $168.73 |
| Hilton Conn MD | peter_hermann@gmail.com | Naperville | Active | $219.75 |
| Total | $1,597.34 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Shaina Lind @shannon45 | darnell_oconnell51@hotmail.com | Weissnatborough | Inactive | $1,141.73 |
Juanita Koch @kathy_parisian | sidney60@hotmail.com | East Mercedes | Active | $543.57 |
Ms. Lesly Berge @pattie_gottlieb | stella_thompson@yahoo.com | West Rosarioborough | Active | $709.23 |
Lillie Corwin @tomas.davis72 | ralph_wiza@hotmail.com | Hintzchester | Active | $857.77 |
Gabriella Aufderhar @chris_koch | connie_cruickshank@yahoo.com | New Westleyland | Inactive | $515.13 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Johnathon Armstrong | susan_rice@hotmail.com | West Elsaworth | Active | $1,144.34 |
| Marcella Rosenbaum | brandon_von@yahoo.com | Robelworth | Inactive | $982.75 |
| Jill Smitham | stanley.berge41@hotmail.com | East Willis | Active | $412.39 |
| Piper Roberts | lucinda_gottlieb@gmail.com | Goyetteside | Inactive | $983.22 |
| Theresa Stracke | jacinthe_zulauf12@yahoo.com | Sanford | Inactive | $311.32 |
| Total | $3,834.02 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mario Aufderhar | belinda.bayer@hotmail.com | New Abbychester | Active | $432.15 |
| Nichole Sauer-Wiza I | vernon_mueller@yahoo.com | West Lanceberg | Active | $1,078.96 |
| Emanuel Rolfson | christina75@yahoo.com | Ponce | Inactive | $347.03 |
| Tanya Cormier | susan_olson@hotmail.com | Aracelifurt | Inactive | $341.29 |
| Raul Blick | leigh_smitham@gmail.com | North Chanelle | Inactive | $577.15 |
| Total | $2,776.58 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Victor Jones | issac_hagenes@hotmail.com | Koelpinland | Inactive | $766.73 |
| Christian Lemke | hallie_mclaughlin53@gmail.com | Lonnieland | Active | $548.27 |
| Ernestine Crist | irving.gleichner@hotmail.com | Lake Alexandrachester | Active | $876.96 |
| Teresa Strosin III | robin_harris73@gmail.com | Fort Dianatown | Inactive | $776.94 |
| Norwood Shields | mac_rau@yahoo.com | Port Stantonhaven | Inactive | $417.56 |
| Total | $3,386.46 | |||
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 | ||
|---|---|---|---|---|---|
| Ryder Dare IV | citlalli_fritsch34@hotmail.com | Stefanieshire | Active | $295.41 | |
| Silvia Goldner | damien.white96@gmail.com | New Kristopher | Active | $1,129.88 | |
| Mark Ferry | wilma.spinka38@hotmail.com | Fort Jeffry | Inactive | $214.97 | |
| Maxine Pouros | christiana32@yahoo.com | Omafort | Active | $1,062.89 | |
| Henry Langworth | tasha_schultz54@hotmail.com | Lake Brielleview | Inactive | $1,015.24 | |
| Total | $3,718.39 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Herman Hickle-Marvin | horacio.boyle@hotmail.com | Nienowport | Inactive | $1,090.91 | |
| Rolando Armstrong | krystina.aufderhar@yahoo.com | Lexington-Fayette | Inactive | $1,107.67 | |
| Ms. Carole Sipes | saul90@gmail.com | Port Charlotte | Active | $278.60 | |
| Demetris Witting | sonja_cartwright73@yahoo.com | North Shaina | Active | $1,181.31 | |
| Demetrius Kshlerin | danielle88@yahoo.com | South Reyesshire | Active | $131.01 | |
| Total | $3,789.50 | ||||
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 | |
|---|---|---|---|---|
| Mr. Ayana Bode | ludwig14@gmail.com | Houston | Active | $40.47 |
| Ricardo Cormier-Streich | flora_walsh61@yahoo.com | Port Jacynthe | Inactive | $462.14 |
| Sammy Walsh | aisha.steuber@hotmail.com | New Aniyaworth | Inactive | $435.35 |
| Brett Christiansen | stephen_gerhold@hotmail.com | East Addison | Active | $567.04 |
| Schuyler Gleichner | grady59@yahoo.com | Effieport | Active | $813.69 |
| Jason Trantow | ubaldo_botsford23@yahoo.com | Wehnerfort | Active | $827.89 |
| Angelo Runolfsdottir | al_auer@gmail.com | Lake Alfordcester | Inactive | $1,030.30 |
| Dr. Laverne Barton | seth79@yahoo.com | Federal Way | Inactive | $1,154.53 |
| Enos Friesen | leanna90@gmail.com | Inglewood | Active | $449.90 |
| Carson Howell-Crooks | bella.fadel8@gmail.com | Fletchershire | Active | $1,131.74 |
| Wilhelm Will MD | geraldine_shields71@gmail.com | North Jarrettbury | Inactive | $359.20 |
| Catherine Bernier | john90@yahoo.com | New Kathryn | Inactive | $31.16 |
| Johanna Farrell-Hessel | marian_kuvalis72@gmail.com | Lake Cristal | Active | $85.13 |
| Rodger Pagac | dimitri33@gmail.com | Murray | Active | $1,123.47 |
| Dr. Juan Huels | allie.lehner@yahoo.com | South Jarod | Active | $1,042.84 |
| Total | $9,554.85 | |||
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 |