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 | $518.47 |
| INV002 | Pending | Bank Transfer | $559.76 |
| INV003 | Pending | PayPal | $341.28 |
| INV004 | Paid | PayPal | $898.48 |
| INV005 | Unpaid | Bank Transfer | $151.37 |
| INV006 | Pending | Credit Card | $454.87 |
| INV007 | Pending | Bank Transfer | $311.85 |
| Total | $3,236.08 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Kole Boehm | Lead Marketing Associate | kole.boehm28@yahoo.com | Member | |
| Halle Pfeffer | Human Accounts Developer | halle.pfeffer@yahoo.com | Member | |
| Sincere Lang | Central Marketing Associate | sincere_lang@gmail.com | Viewer | |
| Mercedes Feil | Direct Security Orchestrator | mercedes_feil@yahoo.com | Member | |
| Cody Welch | Product Intranet Planner | cody.welch@gmail.com | Admin | |
| Judd Kilback | Regional Paradigm Architect | judd_kilback72@hotmail.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 |
|---|---|---|
Stacey Pacocha-Fahey Investor Communications Associate stacey.pacocha-fahey64@hotmail.com | Admin | |
Johnathan Smitham Legacy Solutions Representative johnathan_smitham@yahoo.com | Viewer | |
Alexandro Swift District Optimization Assistant alexandro_swift@gmail.com | Viewer | |
Kitty Harris Customer Branding Coordinator kitty.harris35@yahoo.com | Viewer | |
Sherman VonRueden Principal Marketing Planner sherman_vonrueden@hotmail.com | Member | |
Princess Pfeffer National Data Manager princess.pfeffer@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 |
|---|---|---|
Rhiannon Frami International Directives Architect rhiannon_frami@gmail.com | Admin | |
Lester Mayer Legacy Optimization Technician lester_mayer@hotmail.com | Viewer | |
Vicki Bednar Future Response Assistant vicki_bednar26@hotmail.com | Member | |
Camylle Kunze Senior Creative Liaison camylle_kunze61@yahoo.com | Member | |
Juwan McLaughlin Product Functionality Associate juwan_mclaughlin@hotmail.com | Member | |
Esmeralda Okuneva Central Mobility Technician esmeralda_okuneva@hotmail.com | Member | |
Steve Cronin Investor Data Architect steve.cronin5@yahoo.com | Member | |
Saige Fay Principal Operations Coordinator saige_fay@yahoo.com | Viewer | |
Bernadine Stracke Direct Research Architect bernadine.stracke61@gmail.com | Member | |
Andrew Nolan Corporate Research Director andrew_nolan@gmail.com | Member | |
Micheal Greenholt Central Metrics Strategist micheal_greenholt95@yahoo.com | Viewer | |
Joe Grimes National Research Engineer joe_grimes86@hotmail.com | Member | |
Opal Kuhlman Future Marketing Executive opal.kuhlman@hotmail.com | Admin | |
Alonzo Cassin National Infrastructure Consultant alonzo.cassin18@hotmail.com | Member | |
Jesus Stamm Forward Integration Engineer jesus_stamm@gmail.com | Admin | |
Serenity Pouros Product Communications Coordinator serenity.pouros@gmail.com | Member | |
Erling Schroeder Principal Data Officer erling_schroeder14@yahoo.com | Viewer | |
Mindy Hettinger Product Optimization Representative mindy.hettinger@yahoo.com | Admin | |
Benton Blanda Product Response Architect benton_blanda@hotmail.com | Viewer | |
Mario Cartwright Human Creative Administrator mario_cartwright75@gmail.com | Admin |
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 | |
|---|---|---|---|---|
| Yoshiko Blick Jr. | lowell.tillman-stracke88@gmail.com | North Danny | Active | $54.70 |
| Damaris Lakin | dangelo99@hotmail.com | Stamford | Inactive | $491.75 |
| Miss Geneva VonRueden | kristi_ullrich@hotmail.com | Livonia | Inactive | $1,001.64 |
| Dr. Kelley Grant | yvonne.connelly72@yahoo.com | Eloystead | Active | $1,013.87 |
| Catherine Hoeger | lena.willms72@gmail.com | Ogden | Inactive | $497.36 |
| Total | $3,059.32 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Edna Rosenbaum @johnathan43 | jaylan76@gmail.com | South Ibrahim | Active | $817.90 |
Miss Jalyn Emmerich DDS @jodi_harber58 | finn.mraz@gmail.com | Valdosta | Active | $747.92 |
Callie Gerhold @enos68 | sonya.wuckert@yahoo.com | West Palm Beach | Inactive | $983.64 |
Barbara Becker-Wolff @lauren_mitchell | gayle97@gmail.com | Rodolfoborough | Inactive | $990.78 |
Marlee Cremin @santiago84 | jesse_champlin48@gmail.com | Fort Reaganboro | Inactive | $771.13 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Dr. Marco Klein | derek41@hotmail.com | Sparks | Active | $598.60 |
| Kathryn Lebsack | brendon_cole1@yahoo.com | Fort Arvidcester | Inactive | $921.41 |
| Mr. Howell Rice | rosalinda9@yahoo.com | Methuen Town | Active | $233.19 |
| Amanda Glover I | julian28@yahoo.com | Torpfort | Inactive | $177.59 |
| Mamie Wiegand I | donald_dooley@gmail.com | Fort Nya | Active | $366.26 |
| Total | $2,297.05 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Wallace Daniel | inez.cruickshank13@yahoo.com | Highlands Ranch | Inactive | $154.47 |
| Renee Heidenreich | shawna.wisoky@yahoo.com | Meredithland | Inactive | $954.30 |
| Yasmin Rippin | blanca_west@yahoo.com | Heaneyfield | Inactive | $286.73 |
| Micheal Hartmann | edward.jacobson@yahoo.com | Rancho Santa Margarita | Active | $1,133.50 |
| Clark MacGyver | danial_hamill@yahoo.com | New Peggy | Active | $766.30 |
| Total | $3,295.30 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Jewel Dickinson | sophia.dickens@hotmail.com | Little Rock | Active | $90.59 |
| Darin Carter | veronica.jakubowski@yahoo.com | Rippinworth | Active | $850.65 |
| Shawna Wuckert | anibal_green@yahoo.com | Carloscester | Inactive | $743.96 |
| Elissa Abernathy Jr. | dolly96@gmail.com | Emmetchester | Active | $188.71 |
| Alvena Weber | jaclyn9@yahoo.com | Jeffersonville | Active | $375.51 |
| Total | $2,249.42 | |||
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 | ||
|---|---|---|---|---|---|
| Andres Feest | aurore.casper@yahoo.com | Kreigerhaven | Inactive | $784.86 | |
| Gabriella Kutch | lenore98@yahoo.com | Johnstown | Active | $522.54 | |
| Silvia Rosenbaum | angie_russel88@hotmail.com | New Einohaven | Active | $676.10 | |
| Dianna Kemmer | marques_reilly@yahoo.com | Isacfurt | Inactive | $159.46 | |
| Rigoberto Franecki | maymie_mosciski@hotmail.com | Greenfeldercester | Active | $511.63 | |
| Total | $2,654.59 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Elbert Hoeger | micheal_gulgowski@hotmail.com | Fort Michaelstead | Inactive | $824.03 | |
| Korey Satterfield | geovanni_kuphal83@hotmail.com | Colorado Springs | Inactive | $246.55 | |
| Annabelle Terry | blair28@gmail.com | Kossmouth | Active | $571.43 | |
| Jody Thiel | albert.nolan34@yahoo.com | South Russelborough | Active | $852.57 | |
| Titus Thiel | charlie.predovic-jakubowski32@yahoo.com | Lake Royberg | Active | $374.62 | |
| Total | $2,869.20 | ||||
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 | |
|---|---|---|---|---|
| Ashlee Effertz | archie_kunde@hotmail.com | Streichboro | Inactive | $133.62 |
| Harriet Rosenbaum | lynn92@yahoo.com | St. Petersburg | Inactive | $126.06 |
| Stephen Stoltenberg | isaiah_king@hotmail.com | North Wesley | Inactive | $159.76 |
| Darwin Schimmel | katie_stiedemann31@yahoo.com | Fall River | Inactive | $1,080.91 |
| Megan Lakin | belinda.langworth92@hotmail.com | Johnstonboro | Inactive | $921.30 |
| Julius Daniel | jon28@yahoo.com | Ames | Active | $429.74 |
| Dejon Becker | stephany.bogan@hotmail.com | Springfield | Active | $665.55 |
| Ms. Erma Upton DDS | courtney.macgyver@gmail.com | North Craig | Active | $383.04 |
| Mrs. Jaida Klein | crystal67@yahoo.com | East Amber | Active | $959.62 |
| Teri Goldner | armani.rice@hotmail.com | New Spencerfield | Inactive | $728.02 |
| Stanley Bernhard | leigh_frami21@yahoo.com | Port Glenn | Inactive | $816.64 |
| Autumn Cummings V | lily.tremblay87@hotmail.com | East Gerard | Active | $33.72 |
| Deanna Upton | amanda_howe@yahoo.com | Rolfsonfurt | Inactive | $771.19 |
| Kariane Vandervort | alisha.koepp@yahoo.com | Georgefort | Active | $264.42 |
| Russel Kilback | ludie_runolfsdottir@gmail.com | Lexington-Fayette | Inactive | $211.10 |
| Total | $7,684.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 |