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 | $243.55 |
| INV002 | Pending | PayPal | $462.56 |
| INV003 | Pending | Credit Card | $304.76 |
| INV004 | Unpaid | PayPal | $900.45 |
| INV005 | Paid | Credit Card | $947.28 |
| INV006 | Pending | PayPal | $166.62 |
| INV007 | Paid | PayPal | $538.79 |
| Total | $3,564.01 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Viola Hagenes | Senior Branding Supervisor | viola_hagenes@yahoo.com | Admin | |
| Jeannie Gutkowski | National Factors Associate | jeannie_gutkowski@gmail.com | Member | |
| Della Rodriguez | Regional Solutions Agent | della.rodriguez76@gmail.com | Admin | |
| Reymundo Mann | Future Intranet Supervisor | reymundo_mann@yahoo.com | Viewer | |
| Aurelie Kshlerin | National Communications Strategist | aurelie_kshlerin1@hotmail.com | Member | |
| Zechariah Halvorson | Internal Research Designer | zechariah.halvorson@yahoo.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 |
|---|---|---|
Zackary Nikolaus Global Division Liaison zackary_nikolaus@gmail.com | Admin | |
Sheila D'Amore Product Integration Coordinator sheila_damore@hotmail.com | Viewer | |
Lila O'Reilly Legacy Optimization Manager lila_oreilly91@hotmail.com | Member | |
Jermey Kunde Product Research Supervisor jermey.kunde@yahoo.com | Member | |
Marcos Bradtke Central Usability Assistant marcos.bradtke2@hotmail.com | Member | |
Laurie Casper Regional Paradigm Producer laurie.casper75@gmail.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Roderick Weimann Direct Metrics Director roderick.weimann@hotmail.com | Viewer | |
Lorene Fisher Customer Applications Consultant lorene_fisher47@gmail.com | Viewer | |
Carrie Hammes Corporate Branding Manager carrie_hammes@gmail.com | Admin | |
Violette Ortiz National Accounts Executive violette.ortiz13@gmail.com | Admin | |
Mellie Erdman Legacy Factors Producer mellie.erdman73@yahoo.com | Admin | |
Josephine DuBuque Customer Metrics Producer josephine_dubuque37@yahoo.com | Viewer | |
Cedrick Quigley Dynamic Operations Representative cedrick.quigley@gmail.com | Viewer | |
Elaine Frami Direct Infrastructure Agent elaine.frami55@hotmail.com | Viewer | |
Pierre Denesik Dynamic Paradigm Technician pierre.denesik@gmail.com | Admin | |
Ramiro Gleichner Central Intranet Producer ramiro_gleichner2@yahoo.com | Member | |
Ross O'Conner Corporate Integration Developer ross_oconner@hotmail.com | Viewer | |
Terrell Kuhlman District Response Representative terrell.kuhlman@hotmail.com | Viewer | |
Lamar Dibbert District Paradigm Strategist lamar_dibbert51@yahoo.com | Member | |
Marcellus Torphy Corporate Group Executive marcellus.torphy64@hotmail.com | Viewer | |
Johnathan Mueller Future Brand Consultant johnathan_mueller68@yahoo.com | Viewer | |
Herta Tromp-Lindgren Investor Factors Associate herta_tromp-lindgren69@yahoo.com | Viewer | |
Zoe Greenholt Customer Infrastructure Assistant zoe_greenholt@gmail.com | Viewer | |
Minnie Mitchell Customer Applications Director minnie.mitchell4@gmail.com | Viewer | |
Wilma Mills Corporate Security Coordinator wilma.mills@yahoo.com | Member | |
Queenie Koepp Corporate Creative Analyst queenie_koepp94@gmail.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 | |
|---|---|---|---|---|
| Micah Kuvalis | stan44@gmail.com | Wilkinsonton | Active | $675.74 |
| Cary Bechtelar-Schinner | bernita_hansen98@hotmail.com | Jennyferworth | Inactive | $427.85 |
| Addison Hettinger Jr. | glenna_hoppe55@hotmail.com | Bismarck | Active | $633.71 |
| Ida Koelpin II | agnes.strosin@hotmail.com | South Thomasberg | Inactive | $1,125.26 |
| Joyce Hills DVM | cleta.schinner66@yahoo.com | Marianneton | Active | $688.45 |
| Total | $3,551.01 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Terence Monahan @rigoberto.skiles38 | drew35@yahoo.com | North Marjorytown | Active | $37.68 |
Rosetta Boyer @natalia.welch72 | eino_nolan96@gmail.com | Lake Vicentaworth | Inactive | $702.85 |
Darlene Deckow @velma.cummerata-donnelly74 | maia.schultz@gmail.com | Victorville | Inactive | $206.56 |
Vanessa Ondricka @veronica.anderson9 | lola75@gmail.com | Gerholdton | Inactive | $501.49 |
Ms. Josefina Murazik II @fannie_fritsch | german.jaskolski-walsh@hotmail.com | Douglashaven | Active | $166.21 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Melinda Lockman | byron21@yahoo.com | Hayesfort | Inactive | $337.71 |
| Liza Marvin | sabina74@yahoo.com | West Jasminechester | Inactive | $729.95 |
| Amya Hayes | christy_jerde48@yahoo.com | Anchorage | Active | $116.46 |
| Edith Jacobi | simon68@yahoo.com | Fort Arlieview | Inactive | $1,163.55 |
| Ella Franecki | daryl87@yahoo.com | Joesphside | Active | $517.24 |
| Total | $2,864.91 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Mandy Altenwerth | wellington_crist@gmail.com | North Doris | Inactive | $862.97 |
| Dallin Lind | maurice_bednar67@gmail.com | Valliestad | Active | $124.66 |
| Leann Cole | danny_kuhn58@yahoo.com | East Tremaineport | Active | $551.20 |
| Kaylie Murray | loretta_koch@yahoo.com | Dwightworth | Inactive | $1,063.52 |
| Christina Schumm IV | tabitha_dubuque@yahoo.com | North Frederick | Active | $480.81 |
| Total | $3,083.16 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Theo Cummings | frank.fahey@gmail.com | Amaraberg | Active | $27.34 |
| Sophia Wuckert PhD | trevor_macgyver92@hotmail.com | Lenaville | Active | $769.42 |
| Winnifred Bauch | kelli77@hotmail.com | Timothyshire | Inactive | $509.00 |
| Mario Kohler | kamron.conroy24@hotmail.com | Rochellehaven | Inactive | $1,069.42 |
| Jaclyn Cole | keon88@yahoo.com | Reingerworth | Active | $1,071.89 |
| Total | $3,447.07 | |||
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 | ||
|---|---|---|---|---|---|
| Hilda Gutmann | ross87@hotmail.com | Rolfsonworth | Inactive | $140.37 | |
| Casey Ratke | oral_blanda@gmail.com | Dominicfield | Active | $87.56 | |
| Angus Daniel | hattie.rolfson80@hotmail.com | Grand Junction | Active | $655.77 | |
| Ruth Emard | mozelle.borer79@yahoo.com | South Quentinshire | Active | $1,072.36 | |
| Camille Bergnaum | matthew.leannon@hotmail.com | Tamaraboro | Active | $309.39 | |
| Total | $2,265.45 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Perry Marvin | tanya.cormier86@gmail.com | Oshkosh | Inactive | $26.37 | |
| Spencer Bahringer IV | shirley.abbott0@gmail.com | Blickchester | Inactive | $832.27 | |
| Alaina Kutch | kade51@gmail.com | Bernardfurt | Active | $444.59 | |
| Rosanna Ritchie IV | susan16@yahoo.com | Lake Omaburgh | Active | $260.07 | |
| Noah Hand | daisy73@yahoo.com | Bernierfort | Inactive | $311.71 | |
| Total | $1,875.01 | ||||
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 | |
|---|---|---|---|---|
| Forrest Gerlach I | vito34@hotmail.com | Hegmannport | Active | $263.74 |
| Leta Dibbert | alivia_walter-moore@hotmail.com | South Ellis | Active | $454.63 |
| Modesta Conn | lela.nicolas13@yahoo.com | Fullerton | Inactive | $513.26 |
| Mozelle Rempel | margie41@hotmail.com | Lubowitzhaven | Active | $634.28 |
| Brooke Casper | trenton.jaskolski@hotmail.com | South Nancyside | Active | $97.99 |
| Marie Roberts DVM | bernardo99@yahoo.com | Dublin | Inactive | $505.38 |
| Cody Dickens | stephon.corkery@gmail.com | North Thurman | Inactive | $1,157.13 |
| Arturo Homenick | destini99@gmail.com | Darrellville | Active | $70.99 |
| Ms. Regina Beer | katherine11@hotmail.com | Bristol | Active | $1,025.75 |
| Julie Bergnaum | sam50@gmail.com | Lake Ralphland | Inactive | $770.03 |
| Sandra Gutkowski | triston_muller@hotmail.com | Kohlercester | Active | $1,016.00 |
| Della Hermiston PhD | joshuah.swaniawski@yahoo.com | West Durward | Inactive | $74.21 |
| Athena Gibson | raquel_huels55@yahoo.com | Aubreystad | Inactive | $704.47 |
| Glennie Labadie | margie.kuhlman15@gmail.com | North Alaina | Inactive | $374.63 |
| Roslyn Mills Sr. | giovanny_walter74@hotmail.com | Decatur | Active | $884.74 |
| Total | $8,547.23 | |||
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 |