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 | Credit Card | $562.48 |
| INV002 | Paid | PayPal | $312.98 |
| INV003 | Unpaid | PayPal | $304.70 |
| INV004 | Paid | Credit Card | $773.18 |
| INV005 | Paid | PayPal | $551.39 |
| INV006 | Pending | Bank Transfer | $769.49 |
| INV007 | Paid | PayPal | $969.55 |
| Total | $4,243.77 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Josue Fadel | Senior Group Administrator | josue_fadel21@hotmail.com | Member | |
| Marisa Nicolas | Direct Operations Assistant | marisa_nicolas@yahoo.com | Member | |
| Vanessa Leuschke | Internal Data Specialist | vanessa_leuschke17@hotmail.com | Admin | |
| Raul Harvey | Senior Interactions Manager | raul_harvey0@hotmail.com | Viewer | |
| Jesse Gorczany | Corporate Accountability Administrator | jesse_gorczany61@hotmail.com | Admin | |
| Kiel Tromp | Lead Factors Associate | kiel_tromp@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 |
|---|---|---|
Orin Skiles International Program Associate orin.skiles16@gmail.com | Member | |
Crystel Crona-Thiel Legacy Usability Assistant crystel_crona-thiel@yahoo.com | Admin | |
Guillermo Heller Customer Functionality Planner guillermo_heller58@hotmail.com | Member | |
Camron Kuvalis Human Assurance Representative camron.kuvalis@yahoo.com | Admin | |
Sasha Mitchell Corporate Factors Facilitator sasha.mitchell@gmail.com | Admin | |
Brooke Jacobson Lead Communications Analyst brooke.jacobson@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 |
|---|---|---|
Chesley Schuppe Internal Assurance Architect chesley_schuppe@yahoo.com | Member | |
Patty Kulas Global Integration Liaison patty.kulas@gmail.com | Admin | |
Patsy Larkin Central Optimization Analyst patsy_larkin22@yahoo.com | Viewer | |
Glen Wyman Chief Metrics Director glen.wyman9@gmail.com | Admin | |
Gennaro Mayer Internal Configuration Strategist gennaro_mayer@yahoo.com | Viewer | |
Irvin Gleichner Principal Division Consultant irvin.gleichner5@hotmail.com | Member | |
Danny Nader National Web Administrator danny.nader28@gmail.com | Viewer | |
June Conroy Lead Quality Supervisor june.conroy8@hotmail.com | Viewer | |
Samuel Gleason National Security Representative samuel_gleason11@gmail.com | Admin | |
Elsa Mann Investor Mobility Administrator elsa_mann77@hotmail.com | Admin | |
Eleazar Rath Customer Factors Associate eleazar_rath40@hotmail.com | Member | |
Judy Luettgen Future Usability Assistant judy.luettgen99@hotmail.com | Member | |
Wendell Will Lead Assurance Assistant wendell_will5@hotmail.com | Admin | |
Reginald Kovacek Future Factors Coordinator reginald_kovacek@yahoo.com | Member | |
Lola Kemmer Direct Identity Consultant lola_kemmer1@gmail.com | Member | |
Ernie Cummerata Dynamic Implementation Technician ernie.cummerata92@yahoo.com | Admin | |
Sadie Sawayn Corporate Accountability Assistant sadie_sawayn32@yahoo.com | Admin | |
Torrance Barton Direct Applications Designer torrance_barton@hotmail.com | Viewer | |
Bert Nikolaus Investor Branding Developer bert.nikolaus10@hotmail.com | Member | |
Lucia Hackett Dynamic Paradigm Developer lucia.hackett20@gmail.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 | |
|---|---|---|---|---|
| Randal Medhurst | mack66@gmail.com | Loweland | Inactive | $651.27 |
| Candace Walter | branson.nicolas@yahoo.com | Jimmieville | Inactive | $531.27 |
| Lindsay Littel | tristin0@yahoo.com | Ianton | Inactive | $385.97 |
| Rex Kerluke | melissa.steuber64@hotmail.com | Lake Sabrinaville | Inactive | $863.21 |
| Rachael Watsica | tyrique.lindgren@yahoo.com | Frankieborough | Active | $998.57 |
| Total | $3,430.29 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Santos Cartwright @danyka.zulauf | flossie.rogahn@gmail.com | Appleton | Active | $722.61 |
Miss Wava Okuneva @brady_brakus | austen_ernser33@gmail.com | Port Perrystead | Active | $992.22 |
Mrs. Gwendolyn McClure @tomasa.fay | shelia83@yahoo.com | New Janniefort | Inactive | $491.93 |
Jazmin Haley @rowena.schroeder35 | vera.carroll@yahoo.com | Fort Theronfield | Inactive | $822.62 |
Della Moen @jennie_pfeffer | john60@yahoo.com | Ismaelstad | Inactive | $501.69 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Ricky Roob | albina.torp80@yahoo.com | Port Rhettside | Inactive | $690.09 |
| Janiya Aufderhar | mable_lind51@hotmail.com | South Ernest | Active | $278.82 |
| Sofia Lueilwitz | lee_hyatt93@hotmail.com | West Katelynn | Inactive | $1,027.38 |
| Lucio Gusikowski | jacqueline_halvorson@yahoo.com | La Crosse | Active | $801.10 |
| Erica Purdy | eryn15@gmail.com | Decatur | Active | $970.87 |
| Total | $3,768.26 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Laverne Homenick | jewel_thompson9@yahoo.com | Claraburgh | Inactive | $327.22 |
| Bryant Lakin | elisabeth64@gmail.com | Fort Carlaton | Inactive | $640.20 |
| Sharon Cummings | dolores85@yahoo.com | West Annette | Inactive | $457.74 |
| Keara Mertz | elmer52@gmail.com | Bahringercester | Active | $1,100.03 |
| Kane Hoppe-Nitzsche | wyman_schroeder3@gmail.com | Moniqueport | Inactive | $590.11 |
| Total | $3,115.30 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Sadie Barton | colleen47@gmail.com | Port Earleneside | Inactive | $101.52 |
| Sarai Monahan | claudia35@gmail.com | East Nettie | Inactive | $387.93 |
| Stanley Schaefer | francisco_weissnat75@gmail.com | Lake Jameston | Active | $807.68 |
| Yasmine Casper | wendy_lehner@gmail.com | Hildegardview | Inactive | $908.27 |
| Roberto Lebsack | axel_okon@gmail.com | Sauerfort | Inactive | $721.89 |
| Total | $2,927.29 | |||
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 | ||
|---|---|---|---|---|---|
| Isabel Balistreri | emanuel_kunze35@gmail.com | Port Gillianstad | Inactive | $1,151.69 | |
| Amely Kuvalis | esther_larkin@gmail.com | Gerdaport | Inactive | $345.32 | |
| Gertrude Blanda | tavares.vonrueden@gmail.com | Port Kimberly | Inactive | $386.00 | |
| Alexander Zieme | vergie23@gmail.com | Brooklyn Park | Active | $887.28 | |
| Donna Homenick V | emelia_thiel36@hotmail.com | Hacienda Heights | Active | $1,150.21 | |
| Total | $3,920.50 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Jesse Little | kailey6@yahoo.com | Hayleyside | Active | $161.49 | |
| Reva Herman | pinkie.stokes@hotmail.com | Tiffanyshire | Active | $626.31 | |
| Ms. Cullen Bernier | irving_glover@hotmail.com | Hintzland | Inactive | $966.73 | |
| Geneva Collier | carol.sauer85@hotmail.com | West Ernestina | Active | $82.91 | |
| Nasir Jacobson | bethany.glover@hotmail.com | North Berryfield | Inactive | $62.09 | |
| Total | $1,899.53 | ||||
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 | |
|---|---|---|---|---|
| Jocelyn Goodwin | lucas.mclaughlin@hotmail.com | Abbottstead | Inactive | $704.28 |
| Elbert West-Haag Jr. | ava_kassulke40@hotmail.com | Kimberlymouth | Inactive | $560.29 |
| Angelina Wiza | daisy_white17@hotmail.com | Brendaboro | Inactive | $497.18 |
| Barrett Rath | junior39@yahoo.com | Durham | Active | $536.59 |
| Beverly Dickens | darla.considine@hotmail.com | New Alton | Active | $549.46 |
| Robert Kunde | sally.ledner56@gmail.com | Lake Rubiebury | Inactive | $278.47 |
| Gregorio Brakus | seth.torp@yahoo.com | East Herbert | Inactive | $243.99 |
| Winifred Ankunding DVM | ernestina41@yahoo.com | Fort Annaborough | Active | $355.26 |
| Sharon Russel | martine98@hotmail.com | Yorba Linda | Active | $522.16 |
| Glenn Legros-Wintheiser | toby80@hotmail.com | Middletown | Active | $401.65 |
| Francisca Graham-Walker | sherman73@gmail.com | Lloydburgh | Active | $191.11 |
| Rhett Hegmann | birdie40@gmail.com | Port Orange | Inactive | $516.82 |
| Ana Cruickshank-Turcotte | irving.smith@yahoo.com | South Alicestad | Active | $801.00 |
| Mr. Alivia Dickinson | yvette_weimann@hotmail.com | South Ludie | Active | $364.99 |
| Justyn Pagac | terrence34@hotmail.com | Appleton | Inactive | $430.69 |
| Total | $6,953.94 | |||
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 |