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 | PayPal | $476.52 |
| INV002 | Pending | PayPal | $588.02 |
| INV003 | Pending | PayPal | $489.88 |
| INV004 | Paid | Credit Card | $794.74 |
| INV005 | Unpaid | PayPal | $704.36 |
| INV006 | Unpaid | PayPal | $823.57 |
| INV007 | Unpaid | Bank Transfer | $641.07 |
| Total | $4,518.16 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Michael Donnelly | District Optimization Specialist | michael_donnelly@yahoo.com | Viewer | |
| Vena Ondricka | Legacy Directives Producer | vena_ondricka@gmail.com | Member | |
| Helena Nienow | District Operations Strategist | helena.nienow@gmail.com | Member | |
| Bobbie Huels | Investor Integration Agent | bobbie.huels44@gmail.com | Member | |
| Bradly Grant | Customer Security Agent | bradly_grant32@hotmail.com | Member | |
| Arvel Effertz | Chief Tactics Liaison | arvel_effertz71@gmail.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 |
|---|---|---|
Juston Murray Human Branding Manager juston_murray@gmail.com | Admin | |
Irvin Murphy-Lockman Principal Interactions Planner irvin_murphy-lockman44@gmail.com | Admin | |
Vince Wiza Forward Paradigm Manager vince_wiza59@hotmail.com | Member | |
Byron Daugherty National Tactics Orchestrator byron.daugherty40@gmail.com | Member | |
Ella Fay National Response Designer ella.fay@gmail.com | Viewer | |
Timmy Koelpin-Rosenbaum International Solutions Manager timmy_koelpin-rosenbaum@yahoo.com | Viewer |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Dennis Kessler International Implementation Analyst dennis_kessler@hotmail.com | Viewer | |
Alexandro Turner Regional Interactions Specialist alexandro.turner62@gmail.com | Viewer | |
Ronaldo O'Connell-Wilderman Lead Accounts Developer ronaldo_oconnell-wilderman@gmail.com | Admin | |
Jana Mills Senior Configuration Technician jana_mills@yahoo.com | Admin | |
Irvin Crist-Crist District Accounts Liaison irvin_crist-crist38@hotmail.com | Member | |
Thea Gerlach Legacy Tactics Executive thea_gerlach@hotmail.com | Viewer | |
Jared Stark Direct Web Designer jared.stark@yahoo.com | Admin | |
Donald Reichert Regional Brand Producer donald_reichert83@hotmail.com | Member | |
Jacquelyn Conn Regional Usability Specialist jacquelyn.conn3@yahoo.com | Member | |
Herminio Hackett District Interactions Supervisor herminio_hackett98@gmail.com | Viewer | |
Elias Will Global Marketing Architect elias_will38@yahoo.com | Member | |
Victoria Tillman Investor Data Officer victoria.tillman@hotmail.com | Viewer | |
Kimberly Schuppe Human Program Orchestrator kimberly_schuppe@gmail.com | Admin | |
Stacy Considine International Intranet Officer stacy.considine62@yahoo.com | Member | |
Larissa Schneider Product Research Executive larissa_schneider16@gmail.com | Admin | |
Layne Walter International Brand Executive layne.walter64@yahoo.com | Admin | |
Lynda Von Future Quality Agent lynda.von74@gmail.com | Viewer | |
Angela Hilll Corporate Paradigm Coordinator angela.hilll61@yahoo.com | Member | |
Kay Fisher Chief Assurance Consultant kay.fisher@gmail.com | Viewer | |
Judith Davis Internal Tactics Liaison judith_davis@yahoo.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 | |
|---|---|---|---|---|
| Jamir Tillman | evans34@yahoo.com | Gladysland | Inactive | $629.36 |
| Lelia Bernhard | devon37@hotmail.com | Murray | Inactive | $980.93 |
| Meta Berge Sr. | emily75@gmail.com | Stantonfield | Inactive | $861.85 |
| Silvia Zulauf-Gorczany | heidi41@gmail.com | Blockcester | Inactive | $32.29 |
| Noel Hoeger | zaria54@yahoo.com | West Clydefield | Active | $42.91 |
| Total | $2,547.34 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Willard Towne @donnie.sauer1 | sue.bradtke@hotmail.com | South Arleneburgh | Inactive | $1,165.47 |
Mrs. Ansel Yundt @micaela.toy15 | edwin73@yahoo.com | East Shermanberg | Active | $416.86 |
Khalil Gibson @fannie24 | geraldine75@yahoo.com | East Cedric | Inactive | $1,146.31 |
Marguerite Bergnaum @arthur_carter32 | trace98@gmail.com | Christiansencester | Active | $137.82 |
Ahmad Fahey II @guy81 | joel.kautzer@hotmail.com | Sammamish | Active | $239.16 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Herbert Quigley | morris89@hotmail.com | Waterbury | Active | $495.38 |
| Vesta Kuhn-Sanford | kristie_rogahn57@gmail.com | Adriantown | Inactive | $153.62 |
| Mr. Abigale Emmerich | orlando49@gmail.com | Bernhardhaven | Active | $134.83 |
| Mr. Ryan Nader DDS | jacqueline.weber@gmail.com | Mayerstad | Active | $845.96 |
| Abel Crooks | rex.bahringer@hotmail.com | Kellybury | Inactive | $788.93 |
| Total | $2,418.72 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Keaton Feil | cristina_trantow89@yahoo.com | Brianborough | Inactive | $116.60 |
| Mrs. Juanita Kuvalis | soledad_leffler@hotmail.com | Erickmouth | Inactive | $753.25 |
| Kurt Grant | lelia.rath96@yahoo.com | Port Herman | Inactive | $631.99 |
| Darrin Gulgowski-Murphy | laura_bahringer@yahoo.com | Port Blair | Inactive | $631.55 |
| June Johnston | fern_reichel@yahoo.com | DuBuqueshire | Active | $89.73 |
| Total | $2,223.12 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wanda Halvorson | lilian7@hotmail.com | Gilroy | Inactive | $823.72 |
| Rachael Friesen | samara.beatty41@hotmail.com | Altoona | Active | $585.99 |
| Kent Kuhic | roland37@hotmail.com | Jeffstead | Active | $72.71 |
| Maurice Emmerich | carmen.wunsch@hotmail.com | Bonita Springs | Active | $1,055.07 |
| Amelia Little II | madeline83@gmail.com | East Terrell | Inactive | $456.09 |
| Total | $2,993.58 | |||
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 | ||
|---|---|---|---|---|---|
| James Keebler | elyse96@gmail.com | West Annette | Active | $73.17 | |
| Mrs. Mattie Larkin Jr. | wendell_barton@hotmail.com | Adelleside | Active | $901.70 | |
| Carmen McDermott | isaias.olson@yahoo.com | Theastead | Active | $123.73 | |
| Marjorie Balistreri | lillian.kassulke4@hotmail.com | Cambridge | Active | $343.63 | |
| Josefa Effertz | deshawn99@hotmail.com | Jillfurt | Inactive | $215.96 | |
| Total | $1,658.19 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Agnes Beatty | angel91@hotmail.com | North Danykaberg | Inactive | $537.82 | |
| Bessie Schuppe | jeffery_balistreri@gmail.com | East Cristinaboro | Inactive | $690.60 | |
| Darlene Labadie | floyd16@gmail.com | Bell Gardens | Active | $772.12 | |
| Corey Cronin-Gorczany | talon_rolfson@yahoo.com | Schoencester | Active | $1,121.62 | |
| Loren Wuckert | linnie44@yahoo.com | Zulaufton | Active | $608.77 | |
| Total | $3,730.93 | ||||
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. Ottilie Graham III | juvenal51@hotmail.com | New Robertoburgh | Active | $671.93 |
| Dr. Sam Weissnat | emily.schmitt@gmail.com | Runteshire | Inactive | $704.23 |
| Cade Kiehn V | marianne.nader30@gmail.com | Rylanfort | Active | $579.19 |
| Ms. Nettie Fisher | austin.trantow74@gmail.com | New Annaberg | Active | $461.87 |
| Mr. Xzavier Kshlerin | marvin_mills-will@gmail.com | Carrollton | Inactive | $1,072.93 |
| Naomi Schmitt I | lana_kuhn92@hotmail.com | St. Louis Park | Active | $696.81 |
| Sara Rowe | kiara80@yahoo.com | Hermistonworth | Active | $865.99 |
| Jorge Ortiz IV | reed.gorczany4@gmail.com | Jarrettland | Inactive | $809.07 |
| Camila Marquardt | tim_ward@gmail.com | Wymanberg | Active | $924.93 |
| Luke Steuber | delaney_boyer92@hotmail.com | Fort Tannerhaven | Active | $1,032.91 |
| Fernando Nienow | kaylin_kerluke33@gmail.com | Austinbury | Active | $895.63 |
| Rebecca Armstrong | sophie.bradtke57@hotmail.com | Murrayview | Active | $495.90 |
| Nya Berge PhD | arvid.abbott60@gmail.com | Kuphalberg | Inactive | $579.98 |
| Alyssa Olson | jeannette_jones73@yahoo.com | Appleton | Inactive | $330.29 |
| Paula Daniel | cloyd_yundt48@gmail.com | Porterville | Inactive | $1,029.02 |
| Total | $11,150.68 | |||
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 |