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 | $590.71 |
| INV002 | Pending | PayPal | $290.47 |
| INV003 | Unpaid | Bank Transfer | $648.85 |
| INV004 | Unpaid | Credit Card | $326.47 |
| INV005 | Paid | PayPal | $704.03 |
| INV006 | Pending | PayPal | $733.71 |
| INV007 | Paid | PayPal | $756.26 |
| Total | $4,050.50 | ||
Simple
Users
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Actions | |
|---|---|---|---|---|
| Evelyn Prohaska | Principal Solutions Consultant | evelyn.prohaska16@gmail.com | Member | |
| William Hudson | Human Creative Architect | william.hudson6@yahoo.com | Member | |
| Lera Stoltenberg | Regional Data Developer | lera.stoltenberg85@yahoo.com | Admin | |
| Elouise Glover | Central Factors Specialist | elouise_glover@hotmail.com | Viewer | |
| Tyreek Lockman | Senior Marketing Administrator | tyreek.lockman@gmail.com | Viewer | |
| Axel Little | Principal Directives Assistant | axel.little74@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 |
|---|---|---|
Rolando Kutch-Rogahn Dynamic Communications Agent rolando_kutch-rogahn@yahoo.com | Viewer | |
Brenda Hand District Identity Executive brenda_hand99@gmail.com | Viewer | |
Carol Dibbert-Stiedemann National Metrics Agent carol_dibbert-stiedemann@yahoo.com | Admin | |
Raheem Will Internal Division Manager raheem.will54@hotmail.com | Viewer | |
Linda Cole Chief Quality Orchestrator linda_cole13@gmail.com | Viewer | |
Ann Leannon District Data Producer ann.leannon45@yahoo.com | Admin |
Sticky header
Users
A list of all the users in your account including their name, title, email and role.
| Name | Role | Actions |
|---|---|---|
Jaden Grimes Forward Metrics Engineer jaden.grimes7@gmail.com | Admin | |
Dante Pagac Future Web Orchestrator dante_pagac@yahoo.com | Admin | |
Reuben Towne Corporate Operations Developer reuben_towne89@yahoo.com | Member | |
Vanessa Dickinson District Paradigm Director vanessa.dickinson@hotmail.com | Viewer | |
Betsy Larkin Human Response Planner betsy_larkin92@yahoo.com | Viewer | |
Santos Bahringer Direct Interactions Administrator santos.bahringer64@gmail.com | Admin | |
James Sporer Forward Response Supervisor james.sporer@gmail.com | Admin | |
Jordan McKenzie Senior Identity Associate jordan_mckenzie@hotmail.com | Member | |
Chelsie Beier Dynamic Tactics Liaison chelsie.beier54@hotmail.com | Member | |
Hobart Huel Future Creative Technician hobart_huel48@hotmail.com | Admin | |
Niko Botsford Global Assurance Developer niko_botsford@yahoo.com | Admin | |
Corey Stiedemann Regional Markets Executive corey_stiedemann18@gmail.com | Viewer | |
Sarah Lowe Lead Web Supervisor sarah_lowe@hotmail.com | Viewer | |
Tricia Krajcik Future Intranet Designer tricia_krajcik4@gmail.com | Member | |
Enid Schroeder Global Directives Assistant enid.schroeder@yahoo.com | Viewer | |
Queenie Little Regional Interactions Engineer queenie.little10@yahoo.com | Admin | |
Kennedy Robel Customer Usability Administrator kennedy.robel@hotmail.com | Member | |
Gabe Quigley Chief Security Manager gabe.quigley15@hotmail.com | Viewer | |
Bernice Littel District Usability Specialist bernice_littel81@gmail.com | Viewer | |
Blanche Kuphal Corporate Tactics Assistant blanche_kuphal@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 | |
|---|---|---|---|---|
| Jamar Heller | lucas_herman16@yahoo.com | Keaganview | Active | $524.41 |
| Albina Reichert | dandre.schmidt@hotmail.com | West Douglasstad | Inactive | $983.93 |
| Mr. Carmel Murphy | christ_watsica@yahoo.com | Lake Lloydview | Active | $753.50 |
| Margaret Reilly | brett.hoppe3@hotmail.com | Lake Rachael | Active | $812.73 |
| Ginger Hoeger | antoinette.thiel@gmail.com | Fort Robertton | Inactive | $744.04 |
| Total | $3,818.61 | |||
Basic table
Table with Images
| Name | Location | Status | Balance | |
|---|---|---|---|---|
Jaylin Runte @al.ryan | holly98@yahoo.com | Heidenreichport | Inactive | $1,127.84 |
Kirstin Koepp-Schoen @charity81 | noemi.ortiz65@yahoo.com | Yvetteport | Active | $116.46 |
Brigitte Kozey @rufus.ebert15 | tony_morissette-wiza@hotmail.com | Hempstead | Active | $207.26 |
Megan Waelchi @angela89 | leanne.oberbrunner89@gmail.com | Port Arnaldo | Inactive | $869.82 |
Miss Florine Ferry @fredrick51 | clyde22@gmail.com | Watsicaboro | Inactive | $589.71 |
Table with images
Table No Horizontal Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Gretchen Cummings | marcos.roberts98@gmail.com | Kochfield | Inactive | $1,125.37 |
| Christy Rempel | jonathan_wiza52@hotmail.com | West Robertshire | Active | $1,042.66 |
| Melinda Gislason | aryanna_kunde93@gmail.com | Jarrodburgh | Active | $388.97 |
| Rashawn Haag | elvira_emard@yahoo.com | Biloxi | Inactive | $357.08 |
| Julie Towne | gary.satterfield@yahoo.com | Lenexa | Active | $608.03 |
| Total | $3,522.11 | |||
Table without horizontal dividers
Striped Tabled
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Victoria Deckow | toni_hudson0@yahoo.com | Timothystead | Active | $1,137.14 |
| Mr. Levi Schiller | guy_little2@yahoo.com | Spokane Valley | Active | $206.34 |
| Russell Mann | jeanne94@hotmail.com | New Devin | Inactive | $643.35 |
| Terrance Bechtelar | cory.hansen@hotmail.com | Francoburgh | Inactive | $807.34 |
| Opal Nikolaus | conrad_yundt@gmail.com | Ricetown | Inactive | $863.20 |
| Total | $3,657.37 | |||
Striped table
Vertical Lines
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| Laurence Treutel | sophie.lehner39@gmail.com | Howellburgh | Active | $819.11 |
| Vance Sipes PhD | johnathan_schinner@hotmail.com | South Michaelbury | Inactive | $379.12 |
| Cassandre Steuber | jarred1@yahoo.com | Corkerycester | Active | $865.39 |
| Anne Tromp | frances86@yahoo.com | Albinboro | Active | $54.17 |
| Camylle Ledner | noelia_conroy@gmail.com | East Sincere | Inactive | $438.63 |
| Total | $2,556.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 | ||
|---|---|---|---|---|---|
| Juana Wiza Sr. | sally19@gmail.com | Cassinbury | Inactive | $478.97 | |
| Teresa Rowe | brielle_mante@yahoo.com | Port Paula | Inactive | $288.19 | |
| Israel Grant I | jaquan94@hotmail.com | Tannerport | Active | $1,159.76 | |
| Dr. Juana Kunze | lisa_hickle@gmail.com | Valerieworth | Inactive | $342.53 | |
| Marlin Crooks Sr. | sadie54@gmail.com | Kreiger-Heathcoteport | Inactive | $1,050.97 | |
| Total | $3,320.42 | ||||
Table with row selection
Card Table
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dora Hoeger-Moen | carl.spencer30@hotmail.com | Lake Omer | Active | $768.40 | |
| Hugh Zieme Jr. | stephania_murphy22@gmail.com | Casperside | Active | $1,007.94 | |
| Dr. Michele Sporer | cindy82@yahoo.com | Fort Saul | Inactive | $1,090.18 | |
| Hillard Schroeder | garnet.koepp@hotmail.com | Robertston | Active | $543.50 | |
| Archie Kovacek | beulah_boehm@hotmail.com | Volkmancester | Inactive | $124.00 | |
| Total | $3,534.02 | ||||
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 | |
|---|---|---|---|---|
| Marianne Ward | lexi28@hotmail.com | Ankundingshire | Active | $704.04 |
| Valerie Green | thora_bauch44@yahoo.com | Kovacekborough | Active | $618.37 |
| David Treutel | ashleigh.watsica@gmail.com | Richmond | Inactive | $925.69 |
| Ivan Parisian | mindy_russel@yahoo.com | Ryannberg | Active | $897.44 |
| Olive Weimann Jr. | alexis.kohler@hotmail.com | Port Carolyn | Inactive | $1,013.05 |
| Sammy Steuber III | elisha_cummerata55@hotmail.com | Port Laurycester | Active | $124.33 |
| Randi Krajcik | jared.hartmann82@gmail.com | Lake Jalyn | Active | $558.02 |
| Vella Boyer | brionna22@yahoo.com | East Vincenzo | Inactive | $501.26 |
| Sharon Kovacek-Dibbert | tom94@hotmail.com | Denesikville | Inactive | $73.06 |
| Jarod Kertzmann | christine_altenwerth@yahoo.com | Conorport | Active | $497.32 |
| Patty Kerluke | garland_hodkiewicz@gmail.com | Christieborough | Inactive | $877.22 |
| Julius Funk | valerie39@gmail.com | North Francostad | Active | $105.05 |
| Mr. Nicolas Harris | haylie_mayert@gmail.com | New Justus | Active | $16.41 |
| Ian Heidenreich | stone_heller@gmail.com | Toms River | Inactive | $785.91 |
| Ignatius Crist | estelle_towne-morar@yahoo.com | Bowie | Inactive | $308.83 |
| Total | $8,006.00 | |||
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 |