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 | $158.39 |
| INV002 | Pending | PayPal | $732.44 |
| INV003 | Unpaid | Bank Transfer | $607.44 |
| INV004 | Paid | PayPal | $711.76 |
| INV005 | Unpaid | PayPal | $876.18 |
| INV006 | Pending | Bank Transfer | $657.95 |
| INV007 | Pending | Credit Card | $505.71 |
| Total | $4,249.87 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Jeremiah Bartell | Legacy Branding Technician | jeremiah_bartell@yahoo.com | Admin | |
| Marsha Davis | Corporate Accountability Supervisor | marsha_davis@yahoo.com | Admin | |
| Jerry Runolfsdottir | Corporate Directives Liaison | jerry_runolfsdottir@yahoo.com | Viewer | |
| Steven Hoeger | Corporate Assurance Consultant | steven.hoeger@hotmail.com | Admin | |
| Adrienne Kiehn | Corporate Accounts Administrator | adrienne_kiehn@yahoo.com | Member | |
| Willie VonRueden | Chief Factors Manager | willie_vonrueden@yahoo.com | Member |
Stacked on mobile
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Michelle Schneider Global Solutions Developer michelle_schneider37@gmail.com | Viewer | |
Susie Murazik International Accountability Administrator susie.murazik@hotmail.com | Viewer | |
Neva Blanda Global Data Producer neva_blanda@yahoo.com | Admin | |
Naomie Brakus Regional Infrastructure Supervisor naomie.brakus@hotmail.com | Admin | |
Eunice Abernathy International Functionality Consultant eunice_abernathy@yahoo.com | Member | |
Becky Lebsack Regional Marketing Producer becky.lebsack53@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 |
|---|---|---|
Alvin Oberbrunner Future Usability Consultant alvin_oberbrunner@yahoo.com | Viewer | |
Hazel Swaniawski Customer Accountability Architect hazel.swaniawski@gmail.com | Viewer | |
Rhianna Sawayn Regional Applications Architect rhianna_sawayn62@yahoo.com | Viewer | |
Lawson McCullough District Configuration Agent lawson.mccullough@yahoo.com | Viewer | |
Michele Koss Central Tactics Liaison michele.koss60@gmail.com | Admin | |
Travis Predovic-Gislason Principal Tactics Architect travis.predovic-gislason70@hotmail.com | Viewer | |
Kaela Skiles Dynamic Group Officer kaela.skiles76@hotmail.com | Member | |
Addie Halvorson Direct Research Agent addie_halvorson65@gmail.com | Admin | |
Gracie Jakubowski International Directives Facilitator gracie_jakubowski11@hotmail.com | Member | |
Karelle Stiedemann Customer Optimization Administrator karelle_stiedemann30@gmail.com | Member | |
Fabiola Rogahn District Directives Representative fabiola.rogahn38@yahoo.com | Member | |
Audrey Blick Chief Infrastructure Facilitator audrey.blick87@hotmail.com | Member | |
Leona Tremblay Human Response Architect leona.tremblay@yahoo.com | Admin | |
Daisy Reynolds Principal Communications Planner daisy.reynolds59@gmail.com | Admin | |
Rufus Breitenberg Regional Data Technician rufus.breitenberg51@yahoo.com | Admin | |
Arianna Brekke-Abernathy District Identity Developer arianna_brekke-abernathy98@gmail.com | Member | |
Edith Langworth Central Marketing Consultant edith_langworth40@yahoo.com | Admin | |
Van Schiller Chief Tactics Orchestrator van_schiller@hotmail.com | Admin | |
Lester Marvin Internal Operations Orchestrator lester_marvin3@yahoo.com | Admin | |
Berniece Turcotte Corporate Assurance Strategist berniece.turcotte36@hotmail.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 | |
|---|---|---|---|---|
| Lamar Dare-Leffler I | wendell_osinski-schuster@yahoo.com | New Ernestoborough | Inactive | $236.99 |
| Paula Bode | pansy_schmitt@hotmail.com | Vedafield | Inactive | $57.75 |
| Dr. Lionel Ward | juanita_gorczany7@gmail.com | Port Keyshawn | Inactive | $1,132.71 |
| Yvette Lebsack | jonathon.wolff@hotmail.com | Braunbury | Inactive | $156.20 |
| Anastasia Sporer | kristina24@gmail.com | Rachelbury | Inactive | $324.62 |
| Total | $1,908.27 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Mr. Kevin Kuphal @miranda9 | glenda.toy82@yahoo.com | Mayaguez | Inactive | $963.03 |
Ms. Hershel Hessel @fred_gleason | levi89@yahoo.com | Lake Paoloton | Inactive | $1,045.51 |
Taylor Murazik @bertha58 | rosemarie_kertzmann@gmail.com | Carolyneville | Inactive | $829.79 |
Ms. Jean Cummerata @isabel87 | lourdes_haag@yahoo.com | Goldnerville | Active | $35.98 |
Maurice Feest PhD @sean.windler43 | london_willms81@yahoo.com | Zachariahton | Inactive | $1,119.99 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Florence Terry | karl76@gmail.com | New Kiana | Inactive | $918.38 |
| Kevin Lueilwitz | michelle.gibson82@hotmail.com | Fort Dominicborough | Active | $290.48 |
| Rex Blick | betty.moore54@yahoo.com | Joeyhaven | Inactive | $615.53 |
| Georgia Schaefer | catharine_gottlieb74@yahoo.com | Ransomfield | Active | $221.75 |
| Leroy Hirthe Sr. | guiseppe66@gmail.com | North Rico | Active | $550.60 |
| Total | $2,596.74 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Bonnie Kertzmann | audrey.mclaughlin71@hotmail.com | Potomac | Active | $306.05 |
| Julie Heller | cynthia.ondricka@gmail.com | Sybleboro | Active | $1,088.49 |
| Zelda Wiegand | bradly60@gmail.com | West Audraport | Active | $156.54 |
| Luz Jones | karl.grady@yahoo.com | Port Orange | Active | $970.10 |
| Triston Borer | kayla_douglas37@yahoo.com | San Buenaventura (Ventura) | Inactive | $1,043.67 |
| Total | $3,564.85 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Charlie Ankunding | joel.welch51@yahoo.com | Doral | Inactive | $624.75 |
| Rudy White | shannon.jast45@gmail.com | Fort Milfordtown | Inactive | $374.51 |
| Kasey Rodriguez | ervin51@gmail.com | Reillyburgh | Active | $129.52 |
| Leon Weber | jackie25@hotmail.com | New Kip | Active | $316.81 |
| Andreanne Herman | katrina.johnson84@gmail.com | Bashirianview | Active | $230.21 |
| Total | $1,675.80 | |||
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 | ||
|---|---|---|---|---|---|
| Santino Weimann | percival.hansen@gmail.com | Fort Christelle | Active | $260.15 | |
| Rogelio Huel | ruben69@hotmail.com | West Earnestboro | Active | $612.12 | |
| Haleigh Prosacco | oleta_pfannerstill@hotmail.com | Luettgenfurt | Inactive | $526.01 | |
| Laney Toy V | haskell46@hotmail.com | Port Sabrina | Inactive | $753.56 | |
| Gwen Gutmann | tammy27@yahoo.com | Deonboro | Active | $72.02 | |
| Total | $2,223.86 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Mara Batz DDS | sergio2@gmail.com | Elkhart | Active | $817.18 | |
| Monique Mayer | jordan72@gmail.com | Shanahanberg | Inactive | $1,161.53 | |
| Darrick Roob | axel43@hotmail.com | Escondido | Active | $317.12 | |
| Anne Gutmann | taryn.pollich98@gmail.com | Kiehnchester | Inactive | $211.01 | |
| Winifred Walsh | eldora_dicki@gmail.com | Huntsville | Inactive | $999.17 | |
| Total | $3,506.01 | ||||
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 | |
|---|---|---|---|---|
| Leona DuBuque | marshall.mcdermott56@hotmail.com | West Christaton | Active | $651.40 |
| Lela Keebler | lura.jones@gmail.com | Huntington | Active | $649.47 |
| Nicole Graham | kurt.bartell-pollich46@hotmail.com | Camarillo | Inactive | $904.31 |
| Mr. Hugh Hahn | rosa90@hotmail.com | North Marjoryburgh | Active | $583.36 |
| Miranda Windler | martha_cronin58@hotmail.com | New Malvinashire | Active | $688.54 |
| Dana Reilly | heather88@gmail.com | Marjolaineland | Active | $676.78 |
| Santino Zieme | armando_zulauf@gmail.com | Goyettefort | Active | $741.86 |
| Bernadette Kozey | nadine_roob72@hotmail.com | Lake Edisonland | Active | $225.77 |
| Kathryn Yost | rogers_muller@yahoo.com | Taniamouth | Inactive | $451.11 |
| Miss Linda Hills | rosie.bednar@gmail.com | Libbieland | Active | $361.45 |
| Lane Bashirian | kate_reynolds86@gmail.com | Sterling Heights | Inactive | $70.66 |
| Mr. Dwight Stanton | aimee.champlin@yahoo.com | Vista | Active | $586.17 |
| Opal Herman | timmy.morissette57@hotmail.com | Elvieborough | Active | $559.15 |
| Dolores Bernier | britney.gutmann@hotmail.com | Gibsonview | Active | $1,150.72 |
| Shelley VonRueden | bertha.fahey@yahoo.com | Runolfsdottirfield | Active | $1,178.72 |
| Total | $9,479.47 | |||
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 |