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 | Pending | Bank Transfer | $752.63 |
| INV002 | Unpaid | Credit Card | $723.36 |
| INV003 | Paid | PayPal | $253.25 |
| INV004 | Unpaid | PayPal | $346.66 |
| INV005 | Pending | Credit Card | $126.47 |
| INV006 | Pending | Bank Transfer | $601.10 |
| INV007 | Pending | PayPal | $594.00 |
| Total | $3,397.47 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Alice Wolf | Chief Security Producer | alice.wolf@yahoo.com | Admin | |
| Crystel Yundt | Product Security Developer | crystel_yundt68@yahoo.com | Admin | |
| Mckenna Ritchie | Senior Brand Orchestrator | mckenna_ritchie82@yahoo.com | Admin | |
| Conner Mertz | Central Markets Facilitator | conner.mertz66@hotmail.com | Admin | |
| Graciela Crist | Corporate Brand Consultant | graciela.crist@hotmail.com | Viewer | |
| Sim Hoppe | Future Markets Assistant | sim_hoppe@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 |
|---|---|---|
Oda Daugherty National Operations Consultant oda_daugherty5@yahoo.com | Member | |
Columbus Kovacek Legacy Intranet Coordinator columbus_kovacek@hotmail.com | Viewer | |
Nellie Crooks Senior Data Producer nellie_crooks49@yahoo.com | Member | |
Jerald Beer Future Usability Developer jerald_beer88@yahoo.com | Member | |
Jaycee Lind-Littel Global Solutions Specialist jaycee_lind-littel@yahoo.com | Viewer | |
Shaina Blick Chief Accountability Planner shaina_blick11@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 |
|---|---|---|
Salvatore Murazik Global Security Planner salvatore_murazik@hotmail.com | Admin | |
Lori Kunze Senior Response Technician lori_kunze33@gmail.com | Viewer | |
Daisy McClure Product Group Engineer daisy.mcclure@hotmail.com | Member | |
Marilyn Schoen Investor Operations Consultant marilyn.schoen52@hotmail.com | Member | |
Fern Altenwerth Central Communications Specialist fern.altenwerth@yahoo.com | Viewer | |
Suzanne Kassulke Senior Research Coordinator suzanne.kassulke@hotmail.com | Admin | |
Magnolia McCullough Senior Research Producer magnolia.mccullough@hotmail.com | Member | |
Ansley Labadie International Metrics Consultant ansley.labadie@hotmail.com | Viewer | |
Gwendolyn Goldner Chief Markets Representative gwendolyn_goldner@hotmail.com | Member | |
Elza Kemmer Direct Identity Orchestrator elza.kemmer45@yahoo.com | Admin | |
Murray Quigley Chief Infrastructure Liaison murray.quigley@yahoo.com | Member | |
Omer DuBuque Direct Infrastructure Coordinator omer_dubuque87@hotmail.com | Admin | |
Virgil Jaskolski Corporate Brand Specialist virgil.jaskolski27@hotmail.com | Member | |
Rose Huel District Applications Engineer rose.huel@yahoo.com | Member | |
Kevin Quigley Legacy Security Engineer kevin.quigley75@hotmail.com | Admin | |
Lillie Romaguera Customer Research Agent lillie_romaguera@yahoo.com | Admin | |
Sammy Schamberger Principal Marketing Consultant sammy.schamberger@hotmail.com | Member | |
Christie Medhurst District Paradigm Liaison christie_medhurst71@hotmail.com | Admin | |
Chesley Corwin Senior Assurance Representative chesley_corwin92@hotmail.com | Viewer | |
Micaela Schoen Forward Creative Agent micaela_schoen53@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 | |
|---|---|---|---|---|
| Virginie Schaefer | ubaldo_wiza@yahoo.com | West Gennaro | Active | $515.24 |
| Sandra Botsford | alexandrine35@hotmail.com | Walnut Creek | Active | $565.87 |
| Dr. Nora Sporer | elissa_emmerich@hotmail.com | O'Connerport | Active | $784.35 |
| Maurine Stanton | dianne_heller@gmail.com | South May | Active | $431.87 |
| Carmel Kiehn | thaddeus.harber@yahoo.com | Connshire | Inactive | $1,120.04 |
| Total | $3,417.37 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Roberta Denesik @alysson_mante73 | debbie_walker@hotmail.com | Altoona | Inactive | $1,156.00 |
Joe Wisozk @terrell_hettinger25 | freeda.kutch@yahoo.com | Lebsackfurt | Active | $735.31 |
Mr. Jerome Willms @elyssa_willms14 | lindsey29@gmail.com | West Alvena | Inactive | $151.27 |
Jenny Parker @rowan.langosh93 | neil95@hotmail.com | Swaniawskiburgh | Active | $1,048.36 |
Gail Schroeder PhD @josue96 | gerard.koss-fisher@gmail.com | Leonardcester | Inactive | $588.77 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Della Lakin Sr. | nicholas_mcglynn76@gmail.com | Donaldhaven | Inactive | $1,026.79 |
| Raul Welch | todd_grant@hotmail.com | Gulfport | Active | $140.81 |
| Marietta Kunde DDS | tricia54@yahoo.com | East Robertoview | Inactive | $1,115.86 |
| Coty Strosin | shari.west@hotmail.com | Fort Loretta | Active | $256.32 |
| Teri Quigley | bryant54@hotmail.com | Waipahu | Active | $153.42 |
| Total | $2,693.20 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Reyna Wiegand II | ana83@hotmail.com | Fort Herman | Inactive | $1,152.19 |
| Dr. Brock Dooley | shari_corkery43@yahoo.com | Okunevastad | Active | $582.68 |
| Myron Torp | sebastian58@yahoo.com | Port Jacqueline | Inactive | $831.59 |
| Freddy Boehm | kameron.jast98@yahoo.com | Lake Joanne | Inactive | $742.91 |
| Mr. Noel Herman | noemy.shields69@yahoo.com | Fort Johanna | Inactive | $551.51 |
| Total | $3,860.88 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ramona Marquardt | olga.grimes@yahoo.com | Downers Grove | Active | $805.56 |
| Mr. Florine Kuphal | jermain39@yahoo.com | Bonita Springs | Inactive | $901.37 |
| Ella Lang | bessie96@gmail.com | Port Dangelohaven | Inactive | $248.94 |
| Inez Waters | nora_skiles39@yahoo.com | Lake Sherry | Active | $7.72 |
| Mr. Lilly McClure | freddie_bode50@gmail.com | Tuscaloosa | Active | $824.17 |
| Total | $2,787.76 | |||
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 | ||
|---|---|---|---|---|---|
| Nancy Ratke | lance_hilll92@yahoo.com | Rolfsonberg | Inactive | $765.78 | |
| Edith Feeney | neil48@hotmail.com | McAllen | Active | $972.93 | |
| Gordon Jenkins | colleen30@hotmail.com | Lake Francescastead | Inactive | $1,074.89 | |
| Shaylee Lowe | francisco.mayert48@yahoo.com | New Carrie | Inactive | $146.08 | |
| Sophia Wilderman | niko_powlowski28@hotmail.com | Rosenbaumboro | Active | $33.90 | |
| Total | $2,993.58 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Marcelo Balistreri | savannah90@hotmail.com | East Anahichester | Active | $810.61 | |
| Wellington Stanton-Walker | raven94@yahoo.com | Fort Arlo | Active | $880.15 | |
| Danika Bogan DVM | sammie16@hotmail.com | North Stacyberg | Inactive | $263.56 | |
| Mr. Brad Hermann | joann74@hotmail.com | Amarifurt | Active | $663.11 | |
| Stewart Lubowitz | deron_goyette96@hotmail.com | Lake Katharinafield | Active | $3.46 | |
| Total | $2,620.89 | ||||
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 | |
|---|---|---|---|---|
| Mrs. Marianne Denesik | bob0@yahoo.com | Shanahanberg | Active | $1,172.37 |
| Kennedi Mohr | jarod_rowe54@hotmail.com | Sandy Springs | Inactive | $894.55 |
| Darrel Parker | sydney.wiegand@gmail.com | Gulgowskibury | Inactive | $346.88 |
| Brooks Hyatt | rudolph_hessel@hotmail.com | Jackbury | Inactive | $1,164.79 |
| Kristopher Schmeler | ellen_conn30@gmail.com | Pittsburgh | Inactive | $246.61 |
| Shayna Hagenes | myrtie_emard84@gmail.com | Dasiacester | Active | $641.97 |
| Ms. Annette Smitham | jeff.murazik@gmail.com | Fort Dashawnshire | Active | $699.30 |
| Pascale Beatty | kate89@gmail.com | East Dave | Active | $26.10 |
| Kaia Collier | minnie8@gmail.com | New Nelson | Inactive | $184.44 |
| Darren Heidenreich | sheri.brekke82@gmail.com | Taunton | Inactive | $747.01 |
| Amber Rolfson | caroline85@yahoo.com | West Ellisside | Active | $258.00 |
| Willard Murray | karen.ritchie71@hotmail.com | Fort Melindashire | Active | $303.84 |
| Todd Lebsack | seth52@hotmail.com | Sallyworth | Active | $610.95 |
| Lucia Crist V | bernadette1@hotmail.com | Port Kiarafurt | Inactive | $561.07 |
| Miss Shelly Crona | eugene.padberg@hotmail.com | Ewaldstead | Inactive | $1,114.81 |
| Total | $8,972.69 | |||
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 |


