Components
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 | Unpaid | Credit Card | $621.11 |
| INV002 | Pending | Credit Card | $116.26 |
| INV003 | Unpaid | PayPal | $999.73 |
| INV004 | Unpaid | Bank Transfer | $526.51 |
| INV005 | Paid | Bank Transfer | $413.61 |
| INV006 | Pending | PayPal | $741.85 |
| INV007 | Unpaid | Bank Transfer | $137.09 |
| Total | $3,556.16 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Roger Willms | Regional Quality Analyst | roger.willms@yahoo.com | Admin | |
| Desmond Hartmann | Investor Tactics Manager | desmond.hartmann@yahoo.com | Member | |
| Myriam Bernier | Corporate Factors Analyst | myriam_bernier@gmail.com | Member | |
| Brendan Heathcote | Regional Data Analyst | brendan_heathcote91@gmail.com | Member | |
| Amalia Goyette | Central Metrics Associate | amalia_goyette@yahoo.com | Viewer | |
| Providenci Lueilwitz | Product Mobility Engineer | providenci.lueilwitz@yahoo.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 |
|---|---|---|
Alan Rempel Legacy Division Supervisor alan.rempel@hotmail.com | Admin | |
Immanuel DuBuque Central Paradigm Manager immanuel.dubuque28@hotmail.com | Member | |
Chris Grant Lead Paradigm Consultant chris_grant27@hotmail.com | Viewer | |
Justin Kertzmann Senior Security Producer justin.kertzmann@hotmail.com | Admin | |
Christopher Stark-Skiles Senior Response Officer christopher_stark-skiles@hotmail.com | Admin | |
Bobbie Conroy Customer Factors Designer bobbie.conroy80@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 |
|---|---|---|
Judd Schmeler Lead Security Producer judd.schmeler@gmail.com | Admin | |
Peggy Kilback Regional Security Architect peggy_kilback@hotmail.com | Admin | |
Gerard Parisian Product Web Manager gerard.parisian43@hotmail.com | Admin | |
Toy Will Direct Branding Associate toy.will@gmail.com | Viewer | |
Octavia Veum Legacy Creative Liaison octavia_veum@gmail.com | Viewer | |
Myron Braun Chief Group Facilitator myron_braun@gmail.com | Member | |
Gwendolyn Dickinson Product Configuration Engineer gwendolyn.dickinson@gmail.com | Member | |
Hunter Rice Customer Directives Engineer hunter.rice@hotmail.com | Viewer | |
Silvia Zieme Global Quality Supervisor silvia.zieme@gmail.com | Member | |
Oren Lynch Future Solutions Liaison oren_lynch@gmail.com | Admin | |
Camylle Flatley Direct Mobility Technician camylle.flatley@hotmail.com | Admin | |
Kyra Rolfson-Batz Regional Metrics Producer kyra_rolfson-batz@yahoo.com | Viewer | |
Jamel Ziemann Internal Intranet Assistant jamel_ziemann@hotmail.com | Viewer | |
Faith Gorczany Future Interactions Assistant faith_gorczany@gmail.com | Member | |
Joannie Bosco Central Directives Manager joannie.bosco88@hotmail.com | Admin | |
Sharon Bernier-Legros Central Operations Representative sharon.bernier-legros@hotmail.com | Viewer | |
Christy Jaskolski Senior Response Director christy.jaskolski@yahoo.com | Member | |
Keeley Howell National Brand Agent keeley.howell@yahoo.com | Admin | |
Elroy Will Central Communications Designer elroy_will@hotmail.com | Member | |
Orlando Lehner Product Metrics Planner orlando.lehner55@yahoo.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 | |
|---|---|---|---|---|
| Cedric Schamberger | renee_muller@gmail.com | Rodriguezcester | Inactive | $177.81 |
| Neil Mosciski | mercedes93@yahoo.com | Lake Dexter | Inactive | $377.37 |
| Sally Crona | mekhi_medhurst@hotmail.com | Windlershire | Inactive | $842.27 |
| Holden D'Amore | cloyd_wunsch@yahoo.com | Evelyntown | Active | $69.56 |
| Kiarra Casper | jackie.brekke@hotmail.com | Mohrhaven | Active | $1,005.49 |
| Total | $2,472.50 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Van Grant @gertrude.padberg | maximillian_fritsch41@gmail.com | Nadinebury | Inactive | $644.16 |
Rosario Borer @isabel_morissette38 | kristine_boyer85@yahoo.com | Hattieworth | Active | $435.86 |
Mauricio Murphy @olivia.tromp | silvia_johnston38@yahoo.com | Rickeyton | Inactive | $1,118.42 |
Lorraine Howell @tyrone.schmeler65 | clifton.stanton@gmail.com | New Cecil | Inactive | $213.44 |
Preston Powlowski @vickie.white | scot.reynolds@yahoo.com | DuBuquestead | Active | $829.93 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Alanna Stark | alicia_blanda@gmail.com | Verdieworth | Active | $744.97 |
| Mr. Bennie Baumbach | eleonore28@hotmail.com | McKinney | Inactive | $1,090.86 |
| Ethyl Vandervort PhD | kariane83@hotmail.com | Marvinburgh | Active | $1,052.33 |
| Randolph Murazik-Purdy | bradford3@hotmail.com | Shoreline | Inactive | $981.73 |
| Tracey Morar | cyrus52@yahoo.com | West Amanda | Active | $179.18 |
| Total | $4,049.07 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ilene Gerhold | dorian.thiel95@gmail.com | Bartellworth | Inactive | $1,198.92 |
| Helen Bailey | robert95@yahoo.com | Carrollboro | Active | $20.15 |
| Alva Oberbrunner | nettie.von@gmail.com | Elaineboro | Active | $291.32 |
| Leta Jones | angelina58@gmail.com | East Angelo | Active | $792.65 |
| Elisa McCullough | samson.koss-bartell@yahoo.com | Trujillo Alto | Inactive | $963.43 |
| Total | $3,266.47 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ruben Lang | derek_steuber@yahoo.com | Lake Tylertown | Active | $835.71 |
| Darla Kub | christina_farrell65@hotmail.com | Midland | Inactive | $997.96 |
| Mr. Joe Bednar | kacie40@gmail.com | Cassinland | Inactive | $850.19 |
| Dr. Mallory Hansen | philip60@yahoo.com | Port Ardith | Active | $808.55 |
| Dora Green | leroy13@yahoo.com | East Tiffany | Active | $1,031.65 |
| Total | $4,524.06 | |||
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 | ||
|---|---|---|---|---|---|
| Helga Grady | destinee69@gmail.com | Stantonfield | Active | $1,024.73 | |
| Roosevelt Satterfield | donnie97@yahoo.com | West Tami | Active | $999.54 | |
| Elvira Zulauf | michale.collier1@yahoo.com | Lake Evans | Active | $411.22 | |
| Ines Cremin V | teresa_brekke@hotmail.com | Albuquerque | Inactive | $18.61 | |
| Shelly Gulgowski | zachery_kovacek@yahoo.com | West Jeromefurt | Active | $449.01 | |
| Total | $2,903.11 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jonathan Cremin | tiffany.bradtke@gmail.com | Fort Rosetta | Inactive | $964.71 | |
| Ms. Vita Osinski-Stark | marielle_mayert@gmail.com | New Scotty | Active | $312.43 | |
| Luigi Ruecker | alberto_hilll65@hotmail.com | Augusta-Richmond County | Active | $1,075.54 | |
| Pete Smitham | marjory_bartoletti71@gmail.com | Fort Lamarshire | Inactive | $794.57 | |
| Mrs. Freda Dibbert | lou.spencer70@yahoo.com | Huntsville | Inactive | $1,104.37 | |
| Total | $4,251.62 | ||||
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 | |
|---|---|---|---|---|
| Kaylee Gorczany | jonathon_flatley79@gmail.com | Lakeville | Inactive | $898.17 |
| Vivien Borer | skyla_ward6@gmail.com | East Jeff | Inactive | $848.55 |
| Golden Lockman | lyle94@hotmail.com | South Albert | Inactive | $220.51 |
| Erik Crist | norman.goldner10@yahoo.com | Muhammadton | Active | $713.52 |
| Mr. Rudy Beer | marcia_towne@yahoo.com | Torpcester | Active | $899.32 |
| Cecelia Ondricka | eleanora_kshlerin6@yahoo.com | Paucekberg | Active | $28.16 |
| Phoebe Schaefer | mildred.collins@yahoo.com | Evanston | Active | $822.07 |
| Joel Miller | nannie_schumm18@gmail.com | Auerside | Active | $668.89 |
| Jordane Langworth | ollie.moore44@hotmail.com | Kihnhaven | Inactive | $1,185.14 |
| Virginia Kozey | marion_leannon47@gmail.com | Imanifort | Active | $915.70 |
| Ebba Gleichner | sierra.kunze5@yahoo.com | Wehnerton | Active | $500.18 |
| Alverta Vandervort DVM | tiffany_cummerata61@hotmail.com | Anchorage | Active | $371.39 |
| Lindsey Volkman | valentina96@yahoo.com | East Melbafield | Inactive | $988.30 |
| Lela Bins | annabelle.reinger@hotmail.com | Tinley Park | Inactive | $1,006.13 |
| Trenton Volkman | dorthy_gutmann@hotmail.com | Port Stone | Inactive | $974.03 |
| Total | $11,040.06 | |||
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 |