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 | Credit Card | $262.35 |
| INV002 | Paid | Credit Card | $550.06 |
| INV003 | Paid | Credit Card | $219.67 |
| INV004 | Pending | Bank Transfer | $576.18 |
| INV005 | Paid | Bank Transfer | $485.97 |
| INV006 | Pending | Credit Card | $287.83 |
| INV007 | Pending | Bank Transfer | $703.16 |
| Total | $3,085.22 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Garfield Thiel | Internal Program Developer | garfield_thiel@gmail.com | Viewer | |
| Winnifred Auer | District Optimization Developer | winnifred_auer4@gmail.com | Member | |
| Eloise Green | International Group Liaison | eloise.green35@hotmail.com | Admin | |
| Allen Ullrich | Senior Mobility Facilitator | allen_ullrich@gmail.com | Viewer | |
| Arlene Dickens | National Factors Supervisor | arlene.dickens@hotmail.com | Admin | |
| Blaze Lebsack | Lead Division Strategist | blaze_lebsack50@gmail.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 |
|---|---|---|
Kim Rolfson-Daniel Principal Creative Strategist kim_rolfson-daniel@hotmail.com | Admin | |
Charlene Bednar Investor Identity Orchestrator charlene_bednar@gmail.com | Viewer | |
Curt Stoltenberg Principal Optimization Associate curt.stoltenberg42@yahoo.com | Member | |
Ken Bernhard-Bergstrom Chief Optimization Representative ken_bernhard-bergstrom82@gmail.com | Admin | |
Santina Hackett Central Integration Orchestrator santina_hackett7@hotmail.com | Admin | |
Marc Turcotte National Brand Analyst marc_turcotte@gmail.com | Member |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Maribel Kovacek Human Group Analyst maribel.kovacek@gmail.com | Member | |
Herminio Zemlak-Wyman Product Functionality Officer herminio.zemlak-wyman@hotmail.com | Viewer | |
Marcelina Reilly District Usability Producer marcelina.reilly63@hotmail.com | Member | |
Everardo Kertzmann Human Program Facilitator everardo_kertzmann@hotmail.com | Member | |
Asia Strosin Dynamic Program Developer asia.strosin14@gmail.com | Viewer | |
Tia Koss Lead Functionality Agent tia_koss@yahoo.com | Member | |
Leilani Hodkiewicz International Security Strategist leilani_hodkiewicz@yahoo.com | Admin | |
Aiden Howe Regional Quality Designer aiden.howe14@yahoo.com | Member | |
Taylor Schultz Central Operations Administrator taylor.schultz@gmail.com | Viewer | |
Natalia Welch Regional Security Assistant natalia_welch78@gmail.com | Admin | |
Enrico Reinger Legacy Factors Officer enrico.reinger38@yahoo.com | Viewer | |
Cordelia Balistreri Senior Quality Liaison cordelia.balistreri@hotmail.com | Admin | |
Stefan MacGyver Principal Program Analyst stefan_macgyver@yahoo.com | Admin | |
Alf Hagenes Future Response Executive alf_hagenes@hotmail.com | Member | |
Freddy Wilderman Principal Brand Analyst freddy.wilderman54@yahoo.com | Admin | |
Bethany Stamm Internal Usability Coordinator bethany.stamm57@hotmail.com | Viewer | |
Dawn Hermann National Data Analyst dawn.hermann64@yahoo.com | Admin | |
Kaylee Koch Human Research Architect kaylee.koch@hotmail.com | Admin | |
Zelda Kiehn District Factors Architect zelda_kiehn79@hotmail.com | Member | |
Charity Wolff Central Assurance Technician charity.wolff3@gmail.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 | |
|---|---|---|---|---|
| Delbert Kemmer | casandra_friesen17@yahoo.com | Gibsonworth | Inactive | $415.18 |
| Jeanne Schinner | jocelyn76@yahoo.com | Kaylinland | Inactive | $489.48 |
| Cary Block | zelda.lemke87@yahoo.com | North Tristin | Active | $584.32 |
| Jill Crona | isaias_mcglynn@yahoo.com | East Priscillaborough | Inactive | $673.61 |
| Mr. Santos Osinski | enrico_boyer22@yahoo.com | Fort Aric | Active | $92.20 |
| Total | $2,254.79 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Misty Grimes @cedrick98 | gilberto5@hotmail.com | Wardport | Active | $444.91 |
Roy Witting V @conner_ortiz36 | tierra64@gmail.com | Lefflershire | Inactive | $133.04 |
Ms. Monique Thompson @angeline_leannon | brady_barrows18@yahoo.com | Vincentshire | Active | $493.56 |
Lindsey Lehner @shaun.hudson19 | jimmy_huels99@yahoo.com | Delaneytown | Inactive | $364.03 |
Josh Parker @willie77 | hailee21@hotmail.com | Claudiefurt | Active | $859.41 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jessica Wiza | josh90@hotmail.com | Hayliestad | Inactive | $797.71 |
| Rafael McLaughlin | maeve71@yahoo.com | North Theo | Inactive | $1,141.34 |
| Dr. Yolanda Carter-Gleason | luella.schaden@hotmail.com | Azusa | Inactive | $594.87 |
| Jamie Wilderman | roscoe_brakus@gmail.com | Huntersville | Active | $694.86 |
| Brent Marvin | garrison_stanton@hotmail.com | Pasco | Active | $104.70 |
| Total | $3,333.48 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Lana Krajcik III | laurine.dietrich70@gmail.com | Smithfort | Inactive | $612.67 |
| Ruby Nader | jazlyn_wiza29@gmail.com | Lake Doloreshaven | Active | $177.58 |
| Billie Kerluke-Fahey V | terry84@yahoo.com | Rockyside | Active | $1,009.35 |
| Patsy Legros-Smitham | lesly_beahan66@hotmail.com | Pembroke Pines | Active | $672.87 |
| Eunice Wiza | reinhold_hagenes26@yahoo.com | Chetworth | Active | $1,001.36 |
| Total | $3,473.83 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Roderick Mayer | adah52@gmail.com | La Habra | Active | $906.57 |
| Eddie Moen | kennedy52@yahoo.com | West Brookston | Active | $416.77 |
| May Bernier | dortha39@hotmail.com | Cleobury | Inactive | $208.67 |
| Darnell Kilback-Kovacek | jairo99@yahoo.com | Port Camrenbury | Inactive | $1,083.79 |
| Lorenzo Crist V | geovany87@hotmail.com | Hanestead | Inactive | $761.48 |
| Total | $3,377.28 | |||
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 | ||
|---|---|---|---|---|---|
| Pat Mills | kasandra62@gmail.com | Camronfurt | Inactive | $1,004.87 | |
| Miss May Cassin-Rath | shayna_stamm@gmail.com | South Deonteview | Active | $573.32 | |
| Christina Johnston IV | tremayne.schroeder84@hotmail.com | Ankundingtown | Inactive | $1,129.44 | |
| Dr. Keith Grimes | reymundo_medhurst@yahoo.com | Rock Hill | Active | $411.43 | |
| Ivan O'Reilly II | casimir.ankunding@gmail.com | Lake Kaceyberg | Active | $694.01 | |
| Total | $3,813.07 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Terri Bashirian | arnaldo98@yahoo.com | Creminport | Inactive | $6.21 | |
| Mrs. Nellie Conroy | salma89@hotmail.com | Port Warren | Inactive | $328.37 | |
| Wade Herzog | anabel97@yahoo.com | Amariboro | Active | $679.99 | |
| Darnell King | wanda.bahringer73@hotmail.com | Longview | Active | $501.89 | |
| Lorraine Christiansen | amely_zieme@hotmail.com | Pocatello | Active | $746.25 | |
| Total | $2,262.71 | ||||
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 | |
|---|---|---|---|---|
| Naomi Botsford | alison.hickle92@hotmail.com | Fort Madie | Active | $1,168.89 |
| Loren Bosco | clemmie_armstrong77@gmail.com | Bergnaumboro | Inactive | $122.71 |
| Marcus Littel | haven.kub80@hotmail.com | Elliotthaven | Inactive | $838.79 |
| Ms. Eunice Grimes | claire_lind@yahoo.com | Leonieshire | Inactive | $119.76 |
| Cary Weimann | shayne24@gmail.com | West Kailey | Active | $1,016.01 |
| Clyde Gleason | oren.walsh@gmail.com | Port Charlotte | Inactive | $170.50 |
| Kayla Moen | carmine_dooley@yahoo.com | Kiraview | Inactive | $954.22 |
| Gustavo Runte | chloe.glover-ullrich70@gmail.com | Port Jerrold | Inactive | $1,160.26 |
| Duane Marquardt | mabelle.kub30@yahoo.com | Dickensland | Inactive | $1,195.62 |
| Mr. Douglas Emmerich | layne91@yahoo.com | Port Wava | Active | $935.95 |
| Elisa Deckow | dessie8@yahoo.com | Goodyear | Active | $798.26 |
| Linda Barton | walker.donnelly@yahoo.com | Heaneyton | Inactive | $430.08 |
| Willard Bayer | brock39@gmail.com | Unaborough | Inactive | $1,004.62 |
| Dora Kulas | etha_bauch35@yahoo.com | Janesville | Inactive | $1,150.61 |
| Inez Jakubowski | joey11@gmail.com | Runolfsdottirchester | Active | $497.17 |
| Total | $11,563.45 | |||
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 |